/* Styles for the Shipy PA page (/products/pa, public/prototypes/pa/index.html). Every rule is scoped to .pa-page so nothing reaches the shared nav or footer. */
/* The page was designed on the Shipy design canvas; the iPhone WhatsApp mockups are drawn in HTML and CSS here, animated by pa-chat.js. */
.pa-page .shp{background:#f6f7f9;color:#171d21;font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:0}
.pa-page .shp *{box-sizing:border-box}
.pa-page :where(.shp) a{color:inherit;text-decoration:none}
.pa-page .shp :focus-visible{outline:3px solid #0d59d7;outline-offset:3px}
.pa-page .wrap{margin:0 auto;max-width:1200px;padding:0 32px;width:100%}
/* Wordmark and paper boat (same construction as the live site) */
.pa-page .paper-boat{display:block;flex:none;height:26px;position:relative;width:36px}
.pa-page .paper-boat > span{position:absolute}
.pa-page .paper-boat__left{background:#171717;clip-path:polygon(0 100%,52% 0,100% 100%);height:15px;left:1px;top:0;width:19px}
.pa-page .paper-boat__right{background:#171717;clip-path:polygon(0 100%,0 0,100% 100%);height:15px;left:20px;opacity:.62;top:0;width:15px}
.pa-page .paper-boat__fold{background:#171717;clip-path:polygon(0 0,100% 0,50% 100%);height:9px;left:11px;opacity:.28;top:11px;width:17px}
.pa-page .paper-boat__hull{background:#171717;clip-path:polygon(0 0,100% 0,78% 100%,23% 100%);height:11px;left:1px;top:15px;width:34px}
.pa-page .paper-boat--white > span{background:#fff}
/* Nav */
.pa-page .btn{align-items:center;background:#171717;border:1px solid #171717;border-radius:6px;color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:16px;font-weight:500;gap:10px;height:48px;justify-content:center;padding:0 24px;transition:border-radius 300ms ease;white-space:nowrap}
.pa-page .btn:hover{border-radius:32px}
.pa-page .btn--line{background:transparent;color:#171717}
.pa-page .btn--lg{font-size:17px;height:54px;padding:0 28px}
.pa-page .soon{background:#eef1f4;border-radius:999px;color:#566268;font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 8px}
/* Type */
.pa-page .eyebrow{align-items:center;color:#566268;display:flex;font-size:14px;font-weight:600;gap:12px;letter-spacing:.14em;margin:0 0 24px;text-transform:uppercase}
.pa-page .cap-mark{background:#0d59d7;border-radius:3px;display:block;flex:none;height:10px;width:10px}
.pa-page .h1{font-size:clamp(40px,5.6vw,80px);font-weight:400;letter-spacing:-.04em;line-height:1.02;margin:0}
.pa-page .h1 strong,.pa-page .h2 strong{font-weight:700}
.pa-page .h1 span{display:block}
.pa-page .h2{font-size:clamp(30px,3.4vw,48px);font-weight:400;letter-spacing:-.03em;line-height:1.08;margin:0;text-wrap:balance}
.pa-page .lede{color:#566268;font-size:18px;line-height:1.55;margin:22px 0 0}
.pa-page .hero{background:#eef3f2;padding-bottom:72px}
.pa-page .hero-inner{padding-top:88px}
.pa-page .sect{padding:120px 0}
/* ===== WhatsApp iOS chat, rebuilt in HTML/CSS (iPhone 15 size, 393 x 852 pt) ===== */
.pa-page .phone{background:#1b1f22;border-radius:66px;box-shadow:inset 0 0 0 2px #3a4045,inset 0 0 0 5px #0d0f10,0 46px 80px -40px rgba(14,30,44,.55),0 14px 26px -16px rgba(14,30,44,.3);flex:none;height:876px;margin:0 auto;padding:12px;position:relative;width:417px}
.pa-page .phone::before{background:#2c3236;border-radius:0 3px 3px 0;content:"";height:104px;position:absolute;right:-3px;top:220px;width:3px}
.pa-page .phone::after{background:#2c3236;border-radius:3px 0 0 3px;box-shadow:0 76px 0 #2c3236;content:"";height:62px;left:-3px;position:absolute;top:186px;width:3px}
.pa-page .screen{background:#efeae2;border-radius:54px;color:#000;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro",system-ui,"Helvetica Neue",sans-serif;height:100%;letter-spacing:-.01em;overflow:hidden;position:relative}
.pa-page .island{background:#000;border-radius:20px;height:36px;left:50%;margin-left:-62px;position:absolute;top:11px;width:124px;z-index:3}
.pa-page .sb{align-items:center;display:flex;flex:none;height:54px;justify-content:space-between;padding:4px 30px 0 52px;position:relative;z-index:2}
.pa-page .sb-time{font-size:17px;font-weight:600;letter-spacing:-.02em}
.pa-page .sb-icons{align-items:center;display:flex;gap:6px}
.pa-page .wa-top{background:rgba(246,246,246,.96);border-bottom:.5px solid rgba(0,0,0,.18);flex:none;position:relative;z-index:2}
.pa-page .wa-head{align-items:center;display:flex;gap:8px;height:52px;padding:0 16px 2px 8px}
.pa-page .wa-back{align-items:center;color:var(--wa-tint);display:flex;font-size:17px;gap:3px}
.pa-page .wa-avatar{align-items:center;background:#0d59d7;border-radius:50%;display:flex;flex:none;height:36px;justify-content:center;overflow:hidden;width:36px}
/* transform-origin: hero/shared-16.css shrinks every boat from its left edge on phones (for the nav wordmark); these sit centred in a circle. */
.pa-page .wa-avatar .paper-boat{transform:scale(.56);transform-origin:center}
.pa-page .wa-id{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pa-page .wa-name{font-size:17px;font-weight:600;letter-spacing:-.02em}
.pa-page .wa-sub{color:#8a8a8e;font-size:12.5px}
.pa-page .wa-icons{align-items:center;color:var(--wa-tint);display:flex;gap:24px;margin-left:auto}
.pa-page .wa-chat{display:flex;flex:1;flex-direction:column;justify-content:flex-end;min-height:0;overflow:hidden;padding:8px 10px 10px;position:relative}
.pa-page .wa-wall{height:100%;inset:0;pointer-events:none;position:absolute;width:100%}
.pa-page .wa-chat > *:not(.wa-wall){position:relative}
.pa-page .wa-day{align-self:center;background:rgba(255,255,255,.92);border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.1);color:#54656f;font-size:12.5px;font-weight:500;margin:0 0 8px;padding:4px 10px}
.pa-page .wa-b{border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);font-size:17px;line-height:22px;margin-top:2px;max-width:82%;overflow-wrap:break-word;padding:6px 9px 7px 10px;position:relative;white-space:pre-line}
.pa-page .wa-b b{font-weight:600}
.pa-page .wa-b i{color:#3b4a54}
.pa-page .wa-b.gap{margin-top:9px}
.pa-page .wa-out{align-self:flex-end;background:#d9fdd3}
.pa-page .wa-in{align-self:flex-start;background:#fff}
.pa-page .wa-wide{width:82%}
.pa-page .wa-tail.wa-out{border-top-right-radius:0}
.pa-page .wa-tail.wa-out::after{background:#d9fdd3;clip-path:polygon(0 0,100% 0,0 100%);content:"";height:13px;position:absolute;right:-8px;top:0;width:9px}
.pa-page .wa-tail.wa-in{border-top-left-radius:0}
.pa-page .wa-tail.wa-in::after{background:#fff;clip-path:polygon(0 0,100% 0,100% 100%);content:"";height:13px;left:-8px;position:absolute;top:0;width:9px}
.pa-page .wa-meta{align-items:center;bottom:5px;color:#667781;display:inline-flex;font-size:11px;gap:3px;letter-spacing:0;line-height:1;position:absolute;right:8px;white-space:nowrap}
.pa-page .wa-sp{display:inline-block;height:1px;width:66px}
.pa-page .wa-sp--in{width:42px}
.pa-page .wa-fwd{align-items:center;color:#667781;display:flex;font-size:14px;font-style:italic;gap:4px;line-height:18px;margin:0 0 2px;white-space:normal}
.pa-page .wa-btns{align-self:flex-start;display:grid;gap:2px;margin-top:2px;width:82%}
.pa-page .wa-btn{align-items:center;background:#fff;border-radius:8px;box-shadow:0 1px .5px rgba(11,20,26,.13);color:#027eb5;display:flex;font-size:16px;gap:7px;height:42px;justify-content:center}
.pa-page .wa-bar{align-items:center;background:rgba(246,246,246,.96);border-top:.5px solid rgba(0,0,0,.18);color:var(--wa-tint);display:flex;flex:none;gap:12px;padding:7px 14px 40px 12px;position:relative}
.pa-page .wa-field{align-items:center;background:#fff;border:.5px solid #c7c7cc;border-radius:18px;display:flex;flex:1;height:36px;justify-content:flex-end;padding:0 9px}
.pa-page .home-ind{background:#000;border-radius:3px;bottom:9px;height:5px;left:50%;margin-left:-70px;position:absolute;width:140px;z-index:3}
/* The group chat the enquiry came from, shown above the Shipy phone */
.pa-page .panel--stack{align-items:center;flex-direction:column}
.pa-page .grp{background:#efeae2;border-radius:18px;box-shadow:0 22px 44px -30px rgba(14,30,44,.5);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",sans-serif;max-width:100%;overflow:hidden;width:380px}
.pa-page .grp-head{align-items:center;background:#f6f6f6;border-bottom:.5px solid rgba(0,0,0,.18);display:flex;gap:9px;padding:9px 12px}
.pa-page .grp-av{align-items:center;background:#c9d2d6;border-radius:50%;display:flex;flex:none;height:34px;justify-content:center;width:34px}
.pa-page .grp-name{display:block;font-size:15px;font-weight:600}
.pa-page .grp-sub{color:#8a8a8e;display:block;font-size:12px}
.pa-page .grp-body{display:flex;flex-direction:column;padding:12px 14px 14px 18px;position:relative}
.pa-page .grp .wa-b{font-size:15.5px;line-height:20px;max-width:100%}
.pa-page .grp-from{color:#a3510a;display:block;font-size:13.5px;font-weight:600;line-height:18px;margin-bottom:1px;white-space:normal}
.pa-page .fwd-link{align-items:center;display:flex;flex-direction:column}
.pa-page .fwd-link::before,.pa-page .fwd-link::after{border-left:2px dashed #b4a280;content:"";height:20px}
.pa-page .fwd-chip{align-items:center;background:#171d21;border-radius:999px;color:#fff;display:inline-flex;font-size:13.5px;font-weight:600;gap:7px;padding:7px 14px}
/* Small chat in the How it connects card */
.pa-page .mini-chat .wa-b{font-size:14.5px;line-height:19px;max-width:92%}
.pa-page .mini-chat .wa-sp{width:60px}
.pa-page .mini-chat .wa-sp--in{width:38px}
/* ===== Animation: typing, sending, Shipy typing, replies ===== */
.pa-page .wa-chat sc-if,.pa-page .wa-chat sc-for,.pa-page .ovl sc-if{display:contents}
.pa-page .wa-chat{transition:opacity 450ms ease,padding-bottom 320ms cubic-bezier(.3,.7,.2,1)}
.pa-page .wa-chat .wa-btns,.pa-page .wa-chat .wa-day,.pa-page .wa-chat .sel-row{position:relative}
.pa-page .wa-chat.is-fading,.pa-page .lays.is-fading{opacity:0}
@keyframes wa-pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.pa-page .wa-chat .wa-b,.pa-page .wa-chat .wa-btns,.pa-page .wa-chat .sel-row{animation:wa-pop 280ms cubic-bezier(.2,.8,.2,1) both}
.pa-page .wa-chat .sel-row .wa-b{animation:none}
.pa-page .wa-out{transform-origin:100% 100%}
.pa-page .wa-in{transform-origin:0 100%}
.pa-page .wa-typing{align-items:center;display:flex;gap:5px;height:38px;padding:0 14px;white-space:normal}
.pa-page .wa-typing span{animation:wa-dot 1.2s infinite;background:#8a8a8e;border-radius:50%;height:8px;opacity:.35;width:8px}
.pa-page .wa-typing span:nth-child(2){animation-delay:.15s}
.pa-page .wa-typing span:nth-child(3){animation-delay:.3s}
@keyframes wa-dot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:.95;transform:translateY(-3px)}}
.pa-page .tk path{transition:stroke 250ms ease}
.pa-page .tk-sent path,.pa-page .tk-dlv path{stroke:#8696a0}
.pa-page .tk-sent path:last-child{display:none}
.pa-page .wa-bar{align-items:flex-end}
.pa-page .wa-bar > svg{flex:none;margin-bottom:6px}
.pa-page .wa-field{align-items:stretch;flex-direction:column;height:auto;justify-content:flex-end;max-height:120px;min-height:36px;overflow:hidden;padding:6px 38px 6px 12px;position:relative}
.pa-page .wa-draft{color:#000;display:block;font-size:17px;line-height:22px;min-height:22px;overflow-wrap:anywhere;white-space:pre-wrap}
.pa-page .wa-stk{bottom:7px;position:absolute;right:9px}
.pa-page .caret{animation:wa-caret 1s steps(1) infinite;background:var(--wa-tint);display:inline-block;height:20px;margin-left:1px;vertical-align:-4px;width:2px}
@keyframes wa-caret{50%{opacity:0}}
.pa-page .wa-send{align-items:center;background:var(--wa-tint);border-radius:50%;display:flex;flex:none;height:34px;justify-content:center;margin-bottom:1px;width:34px}
/* The bar's icons line up on the middle of the one-line text field (36px tall, so 18px up), each lifted by half its own height.
   The camera and mic sit inside .dc-if wrappers (display: contents), which the plain > svg rule does not reach. */
.pa-page .wa-bar > svg{margin-bottom:5px}
.pa-page .wa-bar > .dc-if > svg{flex:none}
.pa-page .wa-bar > .dc-if > svg[height="22"]{margin-bottom:7px}
.pa-page .wa-bar > .dc-if > svg[height="24"]{margin-bottom:6px}
/* ===== Forward flow: group chat, long-press menu, select, Forward to sheet, Shipy chat ===== */
.pa-page .lays{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:54px;transition:opacity 450ms ease}
.pa-page .lay{background:#efeae2;display:flex;flex-direction:column;inset:0;overflow:hidden;position:absolute;transition:transform 420ms cubic-bezier(.3,.7,.2,1)}
.pa-page .lay.is-back{transform:translateX(-30%)}
.pa-page .lay.is-ahead{transform:translateX(100%)}
.pa-page .lay-shipy{box-shadow:-8px 0 24px rgba(0,0,0,.12)}
.pa-page .wa-chat.is-raised{padding-bottom:245px}
.pa-page .chat-dim,.pa-page .dim{background:rgba(11,20,26,.3);inset:0;opacity:0;pointer-events:none;position:absolute !important;transition:opacity 250ms ease;z-index:5}
.pa-page .is-menu .dim{opacity:1}
.pa-page .sel-row{align-items:center;align-self:stretch;display:flex;margin-top:9px}
.pa-page .sel-row .wa-b{margin-top:0;max-width:82%;transition:transform 260ms ease,box-shadow 260ms ease}
.pa-page .sel-row.is-lifted{z-index:6}
.pa-page .sel-row.is-lifted .wa-b{box-shadow:0 12px 32px rgba(0,0,0,.28);transform:scale(1.02)}
.pa-page .sel{align-items:center;border:1.5px solid #c7c7cc;border-radius:50%;box-sizing:border-box;display:flex;flex:none;height:24px;justify-content:center;margin-right:0;opacity:0;overflow:hidden;transition:width 250ms ease,margin 250ms ease,opacity 250ms ease,background 200ms ease;width:0}
.pa-page .sel svg{opacity:0}
.pa-page .is-select .sel{margin-right:10px;opacity:1;width:24px}
.pa-page .sel.is-on{background:var(--wa-tint);border-color:var(--wa-tint)}
.pa-page .sel.is-on svg{opacity:1}
.pa-page .bar-select{display:none}
.pa-page .is-select .bar-input{display:none}
.pa-page .is-select .bar-select{display:flex}
.pa-page .sel-count{color:#000;flex:1;font-size:17px;font-weight:600;line-height:36px;text-align:center}
.pa-page .ovl{inset:0;pointer-events:none;position:absolute;z-index:7}
.pa-page .ctx{background:rgba(250,250,250,.97);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.28);left:16px;opacity:0;overflow:hidden;position:absolute;top:540px;transform:scale(.85);transform-origin:20% 0;transition:opacity 220ms ease,transform 260ms cubic-bezier(.3,.7,.2,1);width:240px}
.pa-page .ctx.is-open{opacity:1;transform:none}
.pa-page .ctx-i{align-items:center;border-top:.5px solid rgba(60,60,67,.29);color:#000;display:flex;font-size:17px;height:44px;justify-content:space-between;padding:0 16px;transition:background 150ms ease}
.pa-page .ctx-i:first-child{border-top:0}
.pa-page .ctx-i.is-pressed{background:#d1d1d6}
.pa-page .ctx-del{color:#d70015}
.pa-page .sh-dim{background:rgba(0,0,0,.32);inset:0;opacity:0;position:absolute;transition:opacity 300ms ease}
.pa-page .sh-dim.is-up{opacity:1}
.pa-page .sheet{background:#f2f2f7;border-radius:12px 12px 0 0;bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:64px;transform:translateY(100%);transition:transform 420ms cubic-bezier(.3,.7,.2,1)}
.pa-page .sheet.is-up{transform:none}
.pa-page .sh-head{align-items:center;display:flex;height:56px;justify-content:space-between;padding:0 16px}
.pa-page .sh-cancel{color:var(--wa-tint);font-size:17px}
.pa-page .sh-title{font-size:17px;font-weight:600}
.pa-page .sh-search{align-items:center;background:rgba(118,118,128,.12);border-radius:10px;color:#6d6d72;display:flex;font-size:17px;gap:6px;height:36px;margin:0 16px 10px;padding:0 8px}
.pa-page .sh-label{color:#6d6d72;font-size:13px;height:30px;letter-spacing:.02em;line-height:30px;padding:0 16px;text-transform:uppercase}
.pa-page .sh-list{background:#fff;display:flex;flex-direction:column}
.pa-page .sh-row{align-items:center;border-bottom:.5px solid rgba(60,60,67,.18);display:flex;gap:12px;height:60px;padding:0 16px}
.pa-page .sh-circ{align-items:center;border:1.5px solid #c7c7cc;border-radius:50%;box-sizing:border-box;display:flex;flex:none;height:24px;justify-content:center;transition:background 200ms ease,border-color 200ms ease;width:24px}
.pa-page .sh-circ svg{opacity:0;transition:opacity 200ms ease}
.pa-page .sh-circ.is-picked{background:var(--wa-tint);border-color:var(--wa-tint)}
.pa-page .sh-circ.is-picked svg{opacity:1}
.pa-page .sh-av{align-items:center;border-radius:50%;color:#fff;display:flex;flex:none;font-size:14px;font-weight:600;height:40px;justify-content:center;overflow:hidden;width:40px}
.pa-page .sh-av--shipy{background:#0d59d7}
.pa-page .sh-av--shipy .paper-boat{transform:scale(.62);transform-origin:center}
.pa-page .sh-grp{display:flex}
.pa-page .sh-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pa-page .sh-name{font-size:17px;font-weight:600}
.pa-page .sh-sub{color:#6d6d72;font-size:14px}
.pa-page .sh-send{align-items:center;background:#f6f6f6;border-top:.5px solid rgba(0,0,0,.18);bottom:0;display:flex;justify-content:space-between;left:0;padding:10px 16px 34px;position:absolute;right:0;transform:translateY(100%);transition:transform 300ms cubic-bezier(.3,.7,.2,1)}
.pa-page .sh-send.is-on{transform:none}
.pa-page .sh-to{color:#3b4a54;font-size:15px}
.pa-page .sh-btn{align-items:center;background:var(--wa-tint);border-radius:50%;display:flex;height:36px;justify-content:center;width:36px}
.pa-page .tap{animation:tap 450ms ease-out both;background:rgba(17,27,33,.24);border:2px solid rgba(255,255,255,.85);border-radius:50%;box-sizing:border-box;height:46px;margin:-23px 0 0 -23px;position:absolute;width:46px;z-index:9}
.pa-page .tap--hold{animation:tap-hold 800ms ease-out both}
@keyframes tap{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.15)}}
@keyframes tap-hold{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(.9)}85%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.3)}}
@media (prefers-reduced-motion:reduce){
  .pa-page .wa-chat .wa-b,.pa-page .wa-chat .wa-btns,.pa-page .wa-chat .sel-row,.pa-page .wa-typing span,.pa-page .caret,.pa-page .tap{animation:none}
  .pa-page .lay,.pa-page .wa-chat,.pa-page .sheet,.pa-page .ctx,.pa-page .sh-send{transition:none}
}
/* Document message and the Shipy web app card for the recap row */
.pa-page .wa-doc{padding:4px 4px 22px;white-space:normal;width:82%}
.pa-page .doc-box{align-items:center;background:#f5f6f6;border-radius:6px;display:flex;gap:10px;padding:10px}
.pa-page .doc-ico{align-items:center;background:#c5221f;border-radius:4px;color:#fff;display:flex;flex:none;font-size:11px;font-weight:700;height:40px;justify-content:center;letter-spacing:.02em;width:32px}
.pa-page .doc-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.pa-page .doc-name{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-page .doc-meta{color:#667781;font-size:13px}
.pa-page .webcard{background:#fff;border:1px solid #d7dfe2;border-radius:14px;box-shadow:0 22px 44px -30px rgba(14,30,44,.5);max-width:100%;overflow:hidden;width:420px}
.pa-page .wc-bar{align-items:center;background:#f1f4f5;border-bottom:1px solid #e1e7e9;display:flex;gap:12px;padding:9px 12px}
.pa-page .wc-dots{display:flex;gap:5px}
.pa-page .wc-dots span{background:#c9d2d6;border-radius:50%;display:block;height:9px;width:9px}
.pa-page .wc-url{background:#fff;border-radius:6px;color:#566268;flex:1;font-size:12.5px;padding:3px 10px}
.pa-page .wc-body{padding:16px 18px 18px}
.pa-page .wc-kicker{color:#0d59d7;font-size:11.5px;font-weight:700;letter-spacing:.1em;margin:0;text-transform:uppercase}
.pa-page .wc-title{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:4px 0 0}
.pa-page .wc-sub{color:#566268;font-size:13.5px;margin:2px 0 0}
.pa-page .wc-vers{display:flex;flex-direction:column;gap:6px;margin-top:14px;min-height:174px}
.pa-page .wc-vers sc-if{display:contents}
.pa-page .wc-empty{align-items:center;border:1.5px dashed #d7dfe2;border-radius:10px;color:#566268;display:flex;flex:1;font-size:14px;justify-content:center;margin:0}
.pa-page .wc-row{align-items:center;animation:wa-pop 320ms cubic-bezier(.2,.8,.2,1) both;border:1px solid #e6ecee;border-radius:10px;display:flex;gap:12px;padding:9px 12px}
.pa-page .wc-v{align-items:center;background:#d9eaf2;border-radius:8px;color:#0b4aa8;display:flex;flex:none;font-size:13px;font-weight:700;height:30px;justify-content:center;width:34px}
.pa-page .wc-what{display:flex;flex:1;flex-direction:column;font-size:13px;line-height:1.3;min-width:0}
.pa-page .wc-what b{color:#171d21;font-size:14px;font-weight:700}
.pa-page .wc-what span{color:#566268}
.pa-page .wc-tag{background:#dcf3e6;border-radius:999px;color:#0f5c3a;font-size:11.5px;font-weight:700;padding:2px 8px;transition:opacity 300ms ease}
.pa-page .wc-tag.is-hidden{opacity:0}
@media (max-width:600px){
  .pa-page .webcard{width:calc(100% - 24px)}
}
@media (prefers-reduced-motion:reduce){
  .pa-page .wc-row{animation:none}
}
/* Forwarded PDFs and voice notes, and the desk card they land on */
.pa-page .wa-docmsg{padding:5px 5px 7px;white-space:normal;width:82%}
.pa-page .wa-docmsg .grp-from,.pa-page .wa-docmsg .wa-fwd{padding:0 4px 3px}
.pa-page .wa-out .doc-box{background:#cdeec7}
.pa-page .doc-cap{display:block;font-size:17px;line-height:22px;padding:5px 5px 0}
.pa-page .wa-vnmsg{white-space:normal}
/* A voice note as WhatsApp draws it. Top row: play, the waveform with its scrubber dot, and the sender's picture with a mic badge.
   Bottom row: the length under the waveform, and the time at the right under the picture (its own .wa-sp line is not needed). */
.pa-page .wa-vnmsg .wa-sp{display:none}
.pa-page .wa-vnmsg{padding-bottom:6px}
.pa-page .vn{align-items:center;column-gap:10px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 15px;max-width:100%;padding:4px 2px 0;width:270px}
.pa-page .vn-play{color:#8696a0;display:flex;grid-column:1;grid-row:1}
.pa-page .vn-wave{align-self:center;grid-column:2;grid-row:1;height:24px;position:relative}
.pa-page .vn-bars{align-items:center;display:flex;height:100%;inset:0;justify-content:space-between;position:absolute}
.pa-page .vn-bars i{background:#b7c2c8;border-radius:2px;flex:none;width:3px}
.pa-page .wa-out .vn-bars i{background:#8fbd98}
.pa-page .vn-dot{background:#1f9e55;border-radius:50%;height:13px;left:0;margin:-6.5px 0 0 -4px;position:absolute;top:50%;width:13px}
.pa-page .vn-av{align-items:center;border-radius:50%;color:#fff;display:flex;font-size:18px;font-weight:600;grid-column:3;grid-row:1;height:42px;justify-content:center;position:relative;width:42px}
.pa-page .vn-badge{align-items:center;background:#fff;border-radius:50%;bottom:-3px;color:#1f9e55;display:flex;height:18px;justify-content:center;left:-5px;position:absolute;width:18px}
.pa-page .wa-out .vn-badge{background:#d9fdd3}
.pa-page .vn-dur{color:#667781;font-size:12px;grid-column:2;grid-row:2;line-height:15px}
.pa-page .wc-kind{align-items:center;background:#d9eaf2;border-radius:8px;color:#0b4aa8;display:flex;flex:none;font-size:12px;font-weight:700;height:30px;justify-content:center;min-width:48px;padding:0 8px}
/* "Comes with Shipy S&P": phone, live link and laptop */
.pa-page .sync-head{margin:0 auto;max-width:760px;text-align:center}
.pa-page .sync-head .eyebrow{justify-content:center}
.pa-page .sync-head .lede{margin-left:auto;margin-right:auto}
.pa-page .sync-stage{align-items:center;display:flex;gap:0;justify-content:center;margin-top:40px}
.pa-page .sync-phone .phone{zoom:.5}
.pa-page .sync{align-self:center;flex:none;height:90px;position:relative;width:150px}
.pa-page .sync-cap{color:#566268;font-size:11px;font-weight:700;left:50%;letter-spacing:.12em;position:absolute;text-transform:uppercase;top:12px;transform:translateX(-50%);white-space:nowrap}
.pa-page .sync-line{border-top:2px dashed #9fb6c6;left:6px;position:absolute;right:6px;top:45px}
.pa-page .sync-dot{background:#0d59d7;border-radius:50%;box-shadow:0 0 0 6px rgba(13,89,215,.16);height:12px;left:0;opacity:0;position:absolute;top:40px;width:12px}
.pa-page .sync.is-ltr .sync-dot{animation:sync-ltr .95s ease-in-out infinite}
.pa-page .sync.is-rtl .sync-dot{animation:sync-rtl .95s ease-in-out infinite}
@keyframes sync-ltr{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:138px;opacity:0}}
@keyframes sync-rtl{0%{left:138px;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:0;opacity:0}}
.pa-page .sync-label{color:#0b4aa8;font-size:12px;font-weight:600;left:50%;opacity:0;position:absolute;top:60px;transform:translateX(-50%);transition:opacity .3s ease;white-space:nowrap}
.pa-page .sync.is-ltr .sync-label--ltr,.pa-page .sync.is-rtl .sync-label--rtl{opacity:1}
.pa-page .laptop{flex:none;width:540px}
.pa-page .lt-screen{background:#1b1f22;border-radius:16px 16px 4px 4px;padding:12px 12px 14px}
.pa-page .lt-app{background:#f6f7f9;border-radius:6px;font-family:Manrope,Arial,sans-serif;height:336px;overflow:hidden}
.pa-page .lt-top{align-items:center;background:#fff;border-bottom:1px solid #e3eaec;display:flex;gap:12px;height:38px;padding:0 12px}
.pa-page .lt-word{color:#171717;font-size:16px;font-weight:700;letter-spacing:-.05em}
.pa-page .lt-crumb{color:#566268;font-size:11.5px}
.pa-page .lt-live{align-items:center;color:#0f5c3a;display:flex;font-size:11px;font-weight:700;gap:5px;margin-left:auto}
.pa-page .lt-live-dot{animation:lt-live 1.6s ease-in-out infinite;background:#1f9e55;border-radius:50%;height:7px;width:7px}
@keyframes lt-live{0%,100%{opacity:1}50%{opacity:.35}}
.pa-page .lt-body{display:flex;height:298px}
.pa-page .lt-nav{background:#fff;border-right:1px solid #e3eaec;display:flex;flex:none;flex-direction:column;font-size:11.5px;gap:2px;padding:10px 8px;width:96px}
.pa-page .lt-nav span{border-radius:6px;color:#566268;padding:5px 8px}
.pa-page .lt-nav .is-on{background:#d9eaf2;color:#0b4aa8;font-weight:700}
.pa-page .lt-main{flex:1;min-width:0;padding:10px 12px}
.pa-page .lt-h{color:#171d21;font-size:12.5px;font-weight:700;margin:0 0 6px}
.pa-page .lt-h--2{margin-top:12px}
.pa-page .lt-table{background:#fff;border:1px solid #e3eaec;border-radius:8px;overflow:hidden}
.pa-page .lt-table sc-if{display:contents}
.pa-page .lt-row{align-items:center;border-top:1px solid #eef1f2;display:grid;font-size:11px;gap:8px;grid-template-columns:1.15fr 1.5fr .8fr .8fr;padding:6px 10px}
.pa-page .lt-row:first-child{border-top:0}
.pa-page .lt-row b{color:#171d21;font-weight:700}
.pa-page .lt-row span{color:#3d4a50;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-page .lt-row--head span{color:#606a72;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pa-page .lt-row--new{animation:lt-new 2.4s ease both;background:#eef8f2}
@keyframes lt-new{0%{background:#c9ecd6;opacity:0;transform:translateY(-6px)}15%{opacity:1;transform:none}100%{background:#eef8f2}}
.pa-page .lt-row--v{grid-template-columns:1.15fr 1.5fr .8fr .8fr}
.pa-page .lt-src{background:#eef1f4;border-radius:999px;color:#3d4a50;font-size:10px;font-style:normal;font-weight:700;padding:2px 7px}
.pa-page .lt-src--wa{background:#dcf3e6;color:#0f5c3a}
.pa-page .lt-chip{border-radius:999px;font-size:10px;font-style:normal;font-weight:700;padding:2px 7px;transition:background-color .4s ease,color .4s ease}
.pa-page .lt-chip--open{background:#e7eef1;color:#3b4a54}
.pa-page .lt-chip--offer{background:#fbefd6;color:#76490a}
.pa-page .lt-by{color:#606a72;font-size:10.5px}
.pa-page .lt-base{background:linear-gradient(#d9dee2,#aab3b9);border-radius:0 0 14px 14px;height:14px;margin:0 -36px}
@media (max-width:1000px){
  .pa-page .sync-stage{flex-direction:column}
  .pa-page .sync{height:90px;transform:rotate(90deg);width:110px}
  .pa-page .sync-cap,.pa-page .sync-label{transform:translateX(-50%) rotate(-90deg)}
  .pa-page .laptop{width:540px;zoom:.62}
}
@media (prefers-reduced-motion:reduce){
  .pa-page .sync-dot,.pa-page .lt-live-dot,.pa-page .lt-row--new{animation:none}
}
.pa-page .sel-row--gap{margin-top:9px}
.pa-page .sel-row:not(.sel-row--gap){margin-top:2px}
/* QA fixes */
.pa-page .also-l.aside-l{margin:30px 0 10px}
.pa-page .wa-draft{flex-shrink:0}
.pa-page .sync.is-ltr .sync-dot{animation:sync-ltr .95s ease-in-out 1 both}
.pa-page .sync.is-rtl .sync-dot{animation:sync-rtl .95s ease-in-out 1 both}
.pa-page .lay.is-ahead{transform:translateX(calc(100% + 40px))}
.pa-page .lays.is-fading .lay{transition:none}
.pa-page .wc-vers,.pa-page .lt-main{transition:opacity 450ms ease}
.pa-page .wc-vers.is-fading,.pa-page .lt-main.is-fading{opacity:0}
.pa-page .laptop{width:600px}
.pa-page .lt-nav{width:108px}
.pa-page .lt-row{grid-template-columns:minmax(0,1.25fr) minmax(0,1.45fr) .8fr .75fr}
.pa-page .lt-row--v{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) 72px 76px}
.pa-page .lt-chip,.pa-page .lt-src{display:inline-block;line-height:13px;vertical-align:middle}
@media (min-width:1001px) and (max-width:1100px){
  .pa-page .laptop{zoom:.9}
}
@media (max-width:1000px){
  .pa-page .laptop{width:600px;zoom:.56}
  .pa-page .sync-cap{top:-18px}
  .pa-page .sync-label{top:96px}
}
@media (min-width:640px) and (max-width:1000px){
  .pa-page .laptop{zoom:1}
}
@media (max-width:380px){
  .pa-page .laptop{zoom:.5}
}
/* A wider UI column for rows that show a phone with a desk card or a laptop */
.pa-page .feature.feature--ui{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pa-page .feature--flip.feature--ui{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:900px){
  .pa-page .feature.feature--ui,.pa-page .feature--flip.feature--ui{grid-template-columns:minmax(0,1fr)}
}
/* Phone and desk card together on the UI side */
.pa-page .ui-pair{align-items:flex-end;display:flex;justify-content:center}
.pa-page .ui-pair .phone{flex:none;position:relative;z-index:1}
.pa-page .ui-pair .webcard{box-shadow:0 30px 60px -28px rgba(14,30,44,.5);flex:none;margin:0 0 40px -48px;position:relative;width:320px;z-index:2}
@media (max-width:1000px){
  .pa-page .ui-pair{align-items:center;flex-direction:column}
  .pa-page .ui-pair .webcard{margin:-56px 0 0;max-width:100%;width:340px}
}
/* "Comes with Shipy S&P": the laptop with the phone in front, joined by a live link */
.pa-page .sync-ui{flex:none;height:500px;position:relative;width:660px}
.pa-page .sync-ui .laptop{position:absolute;right:0;top:0;width:600px;zoom:.9}
.pa-page .sync-ui .sync-phone{bottom:0;left:0;position:absolute;z-index:2}
.pa-page .sync-ui .sync-phone .phone{zoom:.5}
.pa-page .sync-ui .sync-path{height:500px;left:0;overflow:visible;pointer-events:none;position:absolute;top:0;transform:none;width:660px;z-index:3}
.pa-page .sp-track{fill:none;stroke:#0d59d7;stroke-linecap:round;stroke-opacity:.7;stroke-width:2.5}
.pa-page .sp-node{fill:#fff;stroke:#0d59d7;stroke-width:2.5}
.pa-page .sp-pulse{fill:none;opacity:0;stroke:#0d59d7;stroke-dasharray:12 100;stroke-dashoffset:12;stroke-linecap:round;stroke-width:7}
.pa-page .sync.is-ltr .sp-pulse{animation:sp-ltr .9s ease-in-out 1 both}
.pa-page .sync.is-rtl .sp-pulse{animation:sp-rtl .9s ease-in-out 1 both}
@keyframes sp-ltr{0%{opacity:1;stroke-dashoffset:12}100%{opacity:1;stroke-dashoffset:-100}}
@keyframes sp-rtl{0%{opacity:1;stroke-dashoffset:-100}100%{opacity:1;stroke-dashoffset:12}}
.pa-page .sync-ui .sync-pill{align-items:center;background:#fff;border:1px solid rgba(13,89,215,.28);border-radius:999px;box-shadow:0 10px 24px -14px rgba(14,30,44,.45);color:#0b2f66;display:flex;font-size:13px;font-weight:700;gap:8px;height:auto;left:232px;padding:7px 14px;position:absolute;top:356px;transform:none;white-space:nowrap;width:auto;z-index:3}
.pa-page .sp-live{animation:lt-live 1.6s ease-in-out infinite;background:#1f9e55;border-radius:50%;flex:none;height:8px;width:8px}
.pa-page .sp-state{color:#0d59d7;display:none;font-weight:600}
.pa-page .sync.is-ltr .sp-state--ltr,.pa-page .sync.is-rtl .sp-state--rtl{display:inline}
@media (prefers-reduced-motion:reduce){
  .pa-page .sp-live,.pa-page .sp-pulse{animation:none}
}
/* Snappier taps, menus, sheets and screen slides */
.pa-page .lay{transition:transform 280ms cubic-bezier(.3,.7,.2,1)}
.pa-page .sheet{transition:transform 280ms cubic-bezier(.3,.7,.2,1)}
.pa-page .sh-dim{transition:opacity 200ms ease}
.pa-page .sh-send{transition:transform 200ms cubic-bezier(.3,.7,.2,1)}
.pa-page .ctx{transition:opacity 150ms ease,transform 180ms cubic-bezier(.3,.7,.2,1)}
.pa-page .chat-dim,.pa-page .dim{transition:opacity 160ms ease}
.pa-page .sel{transition:width 180ms ease,margin 180ms ease,opacity 180ms ease,background 150ms ease}
.pa-page .wa-chat{transition:opacity 450ms ease,padding-bottom 200ms cubic-bezier(.3,.7,.2,1)}
.pa-page .tap{animation-duration:260ms}
.pa-page .tap--hold{animation-duration:460ms}
/* Long chats overflow their column; bubbles keep their size instead of being squashed (the typing dots had shrunk to a thin bar) */
.pa-page .wa-chat .wa-b,.pa-page .wa-chat .wa-btns,.pa-page .wa-chat .sel-row,.pa-page .wa-chat .wa-day,.pa-page .wa-chat .wa-typing{flex-shrink:0}
/* "One desk": phone, live link and laptop side by side, nothing overlapping */
.pa-page .sync-ui{align-items:center;display:flex;height:auto;justify-content:center;position:static;width:auto}
.pa-page .sync-ui .sync-phone{flex:none;position:static}
.pa-page .sync-ui .laptop{flex:none;position:static;width:480px;zoom:.86}
.pa-page .sync-ui .lt-nav{display:none}
.pa-page .sync-ui .sync-link{align-self:center;flex:none;height:96px;margin:0 8px;position:relative;transform:none;width:120px}
.pa-page .sl-pill{align-items:center;background:#fff;border:1px solid rgba(13,89,215,.28);border-radius:999px;box-shadow:0 8px 20px -12px rgba(14,30,44,.4);color:#0b2f66;display:flex;font-size:12.5px;font-weight:700;gap:7px;left:50%;padding:5px 12px;position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.pa-page .sl-track{height:12px;left:0;position:absolute;right:0;top:44px}
.pa-page .sl-line{background:#0d59d7;border-radius:2px;height:2.5px;left:5px;opacity:.6;position:absolute;right:5px;top:5px}
.pa-page .sl-node{background:#fff;border:2.5px solid #0d59d7;border-radius:50%;box-sizing:border-box;height:12px;position:absolute;top:0;width:12px}
.pa-page .sl-node--a{left:0}
.pa-page .sl-node--b{right:0}
.pa-page .sl-pulse{background:#0d59d7;border-radius:50%;box-shadow:0 0 0 6px rgba(13,89,215,.2);height:12px;left:0;opacity:0;position:absolute;top:0;width:12px}
.pa-page .sync.is-ltr .sl-pulse{animation:sl-ltr .9s ease-in-out 1 both}
.pa-page .sync.is-rtl .sl-pulse{animation:sl-rtl .9s ease-in-out 1 both}
@keyframes sl-ltr{0%{left:0;opacity:1}100%{left:calc(100% - 12px);opacity:1}}
@keyframes sl-rtl{0%{left:calc(100% - 12px);opacity:1}100%{left:0;opacity:1}}
.pa-page .sl-state{color:#0b4aa8;font-size:12px;font-weight:700;left:50%;opacity:0;position:absolute;top:66px;transform:translateX(-50%);transition:opacity .3s ease;white-space:nowrap}
.pa-page .sync.is-ltr .sl-state--ltr,.pa-page .sync.is-rtl .sl-state--rtl{opacity:1}
@media (max-width:1000px){
  .pa-page .sync-ui{flex-direction:column}
  .pa-page .sync-ui .sync-link{height:120px;margin:6px 0;transform:none;width:180px}
  .pa-page .sl-pill{left:calc(50% + 18px);top:32px;transform:none}
  .pa-page .sl-track{bottom:4px;height:auto;left:calc(50% - 6px);right:auto;top:4px;width:12px}
  .pa-page .sl-line{bottom:5px;height:auto;left:5px;right:auto;top:5px;width:2.5px}
  .pa-page .sl-node--a{left:0;top:0}
  .pa-page .sl-node--b{bottom:0;left:0;right:auto;top:auto}
  .pa-page .sl-pulse{left:0;top:0}
  .pa-page .sync.is-ltr .sl-pulse{animation-name:sl-ttb}
  .pa-page .sync.is-rtl .sl-pulse{animation-name:sl-btt}
  .pa-page .sl-state{left:calc(50% + 18px);top:66px;transform:none}
}
@keyframes sl-ttb{0%{opacity:1;top:0}100%{opacity:1;top:calc(100% - 12px)}}
@keyframes sl-btt{0%{opacity:1;top:calc(100% - 12px)}100%{opacity:1;top:0}}
@media (prefers-reduced-motion:reduce){
  .pa-page .sl-pulse{animation:none}
}
/* "One desk", larger: bigger phone, a wider laptop with larger table text, the base kept inside the panel */
.pa-page .sync-ui .sync-phone .phone{zoom:.62}
.pa-page .sync-ui .laptop{width:520px;zoom:.9}
.pa-page .sync-ui .lt-base{margin:0 -18px}
.pa-page .sync-ui .lt-word{font-size:18px}
.pa-page .sync-ui .lt-crumb{font-size:12.5px}
.pa-page .sync-ui .lt-h{font-size:14px}
.pa-page .sync-ui .lt-row{font-size:12.5px;padding:7px 10px}
.pa-page .sync-ui .lt-row--head span{font-size:11px}
.pa-page .sync-ui .lt-chip,.pa-page .sync-ui .lt-src{font-size:11px}
.pa-page .sync-ui .lt-by{font-size:11.5px}
.pa-page .sync-ui .lt-app{height:356px}
.pa-page .sync-ui .lt-body{height:318px}
/* Desk cards sit in the copy column, under a small label */
.pa-page .aside-l{margin:30px 0 10px}
.pa-page .copy .webcard{width:100%}
/* Feature rows */
.pa-page .feature{align-items:center;display:grid;gap:88px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.pa-page .feature--flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
.pa-page .feature--flip .panel{order:2}
.pa-page .panel{border-radius:24px;display:flex;justify-content:center;overflow:hidden;padding:52px 16px;position:relative}
.pa-page .copy{max-width:480px}
.pa-page .ticks{display:grid;gap:14px;list-style:none;margin:28px 0 0;padding:0}
.pa-page .ticks li{align-items:flex-start;display:flex;font-size:16.5px;gap:12px;line-height:1.45}
.pa-page .tick{align-items:center;background:#d9eaf2;border-radius:50%;color:#0d59d7;display:inline-flex;flex:none;height:24px;justify-content:center;width:24px}
.pa-page .also{border-top:1px solid #d9e2e1;margin-top:32px;padding-top:24px}
.pa-page .also-l{color:#566268;font-size:12px;font-weight:600;letter-spacing:.12em;margin:0 0 12px;text-transform:uppercase}
.pa-page .also-row{display:flex;flex-wrap:wrap;gap:8px}
.pa-page .prompt{background:#d9fdd3;border-radius:10px 10px 2px 10px;box-shadow:0 1px .5px rgba(11,20,26,.13);color:#111b21;font-size:14px;line-height:1.35;padding:8px 12px}
/* How it connects */
.pa-page .connect-head{align-items:end;display:grid;gap:40px;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pa-page .connect-head .lede{margin:0}
.pa-page .steps{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px}
.pa-page .step{background:#fff;border:1px solid #d9e2e1;border-radius:16px;display:flex;flex-direction:column;padding:20px 20px 26px}
.pa-page .step-vis{align-items:center;border-radius:10px;display:flex;flex:none;justify-content:center;min-height:172px;padding:16px}
.pa-page .step-n{color:#0d59d7;font-size:13px;font-weight:700;letter-spacing:.1em;margin:24px 0 8px}
.pa-page .step-t{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0}
.pa-page .step-p{color:#566268;font-size:16px;line-height:1.5;margin:10px 0 0}
.pa-page .code{display:flex;gap:6px}
.pa-page .code span{align-items:center;background:#fff;border:1px solid #d7dfe2;border-radius:7px;display:inline-flex;font-size:19px;font-weight:700;height:42px;justify-content:center;width:32px}
.pa-page .desk{background:#fff;border:1px solid #d7dfe2;border-radius:10px;padding:8px 12px;width:100%}
.pa-page .desk-row{align-items:center;border-top:1px solid #eef1f2;display:flex;font-size:12.5px;gap:8px;justify-content:space-between;padding:5px 0}
.pa-page .desk-row:first-of-type{border-top:0}
.pa-page .desk-row span:last-child{color:#606a72}
/* Footer */
@media (max-width:1080px){
  .pa-page .feature,.pa-page .feature--flip{gap:56px}
}
@media (max-width:900px){
  .pa-page .feature,.pa-page .feature--flip{grid-template-columns:minmax(0,1fr);gap:40px}
  .pa-page .feature--flip .panel{order:0}
  .pa-page .copy{max-width:none}
  .pa-page .connect-head{grid-template-columns:minmax(0,1fr);gap:0}
  .pa-page .connect-head .lede{margin-top:20px}
  .pa-page .steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .pa-page .wrap{padding:0 16px}
  .pa-page .hero{padding-bottom:64px}
  .pa-page .hero-inner{padding-top:48px}
  .pa-page .hero-actions .btn{flex:1 1 auto}
  .pa-page .sect{padding-top:72px;padding-bottom:72px}
  .pa-page .panel{border-radius:18px;padding:28px 0}
  .pa-page .phone{zoom:.8}
  .pa-page .grp{width:calc(100% - 24px)}
}
@media (max-width:370px){
  .pa-page .phone{zoom:.76}
}
@media (max-width:350px){
  .pa-page .phone{zoom:.7}
}
@media (prefers-reduced-motion:reduce){
  .pa-page .dots span{animation:none;opacity:.6}
  .pa-page .btn{transition:none}
}
/* ---------- One screen per section, as on the S&P page (/brochure) ---------- */
.pa-page .shp{background:transparent;overflow-x:clip}
.pa-page .lock{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:118px 0 48px;position:relative;scroll-snap-align:start}
.pa-page .pa-lock .wrap{max-width:1240px}
.pa-page .pa-lock .feature{gap:72px}
.pa-page .panel{background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(231,240,253,.84));border:1px solid rgba(13,89,215,.16);padding:28px 16px}
.pa-page .feature--flip .panel{background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(250,243,231,.86));border-color:rgba(160,120,60,.18)}
.pa-page .lede{color:#263238}
/* The opening: the sea photograph under a dark wash, white type, and the cue to scroll: the Shipy boat surfaces at the bottom of the screen, rocks, leaps and dives; the splash throws up a drop that opens into a down arrow. One 7s loop drives every part. */
.pa-page .open{background:url("/prototypes/hero/img/hero-water.jpg") center 56% / cover no-repeat fixed;color:#fff;padding:122px 0 120px}
.pa-page .open::before{background:linear-gradient(105deg,rgba(6,22,38,.7) 0%,rgba(6,22,38,.44) 46%,rgba(6,22,38,.18) 100%);content:"";inset:0;position:absolute}
.pa-page .open > *{position:relative;z-index:1}
.pa-page .open .wrap{max-width:1440px}
.pa-page .open .eyebrow{color:rgba(255,255,255,.76)}
.pa-page .open .soon{background:rgba(255,255,255,.16);color:#fff}
.pa-page .open-h1{color:rgba(255,255,255,.74);font-size:clamp(36px,5.2vw,76px);font-weight:400;letter-spacing:-.035em;line-height:1.04;margin:0;text-shadow:0 2px 30px rgba(4,16,28,.3)}
.pa-page .open-h1 em{color:#fff;display:block;font-size:1.16em;font-style:normal;font-weight:700;margin-top:.04em}
.pa-page .open-sub{color:rgba(255,255,255,.86);font-size:clamp(18px,1.5vw,21px);line-height:1.5;margin:26px 0 0;max-width:58ch}
.pa-page .open-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}
.pa-page .btn--white{background:#fff;border-color:#fff;color:#12191d}
.pa-page .dive{bottom:0;display:block;height:72px;left:50%;overflow:hidden;position:absolute;transform:translateX(-50%);transition:opacity .22s ease;width:84px}.pa-page .dive:hover{opacity:.8}.pa-page .dive:focus-visible{border-radius:10px;outline:2px solid #fff;outline-offset:-4px}.pa-page .dive-boat{animation:pa-dive-y 7s linear infinite;bottom:0;height:36px;left:50%;margin-left:-25px;position:absolute;transform:translateY(46px);width:50px}.pa-page .dive-tilt{animation:pa-dive-tilt 7s linear infinite;display:block;height:36px;width:50px}.pa-page .dive-tilt .paper-boat{transform:scale(1.39);transform-origin:0 0}.pa-page .dive .paper-boat>span{background:#fff}.pa-page .dive-drop{animation:pa-dive-drop 7s linear infinite;background:#fff;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;bottom:0;height:9px;left:50%;margin-left:-3px;opacity:0;position:absolute;width:6px}.pa-page .dive-arrow{animation:pa-dive-nudge 7s linear infinite;bottom:28px;height:14px;left:50%;position:absolute;width:0}.pa-page .dive-arrow i{animation:pa-dive-arm-l 7s linear infinite;background:#fff;border-radius:2px;bottom:0;height:14px;left:-1.5px;opacity:0;position:absolute;transform-origin:50% 100%;width:3px}.pa-page .dive-arrow i+i{animation-name:pa-dive-arm-r}.pa-page .dive::after{animation:pa-dive-ripple 7s ease-out infinite;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;bottom:-6px;content:"";height:12px;left:50%;margin-left:-24px;opacity:0;position:absolute;width:48px}@keyframes pa-dive-y{0%{transform:translateY(46px);animation-timing-function:cubic-bezier(.22,1,.36,1)}12%{transform:translateY(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}19%{transform:translateY(2px);animation-timing-function:cubic-bezier(.37,0,.63,1)}26%{transform:translateY(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}33%{transform:translateY(2px);animation-timing-function:cubic-bezier(.37,0,.63,1)}40%{transform:translateY(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}47%{transform:translateY(-20px);animation-timing-function:cubic-bezier(.11,0,.5,0)}60%,100%{transform:translateY(72px)}}@keyframes pa-dive-tilt{0%{transform:translateX(0) rotate(8deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}12%{transform:translateX(0) rotate(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}19%{transform:translateX(0) rotate(-3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}26%{transform:translateX(0) rotate(3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}33%{transform:translateX(0) rotate(-3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}40%{transform:translateX(0) rotate(0);animation-timing-function:cubic-bezier(.5,1,.89,1)}47%{transform:translateX(4px) rotate(-14deg);animation-timing-function:cubic-bezier(.11,0,.5,0)}60%,100%{transform:translateX(12px) rotate(60deg)}}@keyframes pa-dive-drop{0%,53%{opacity:0;transform:translateY(0) scale(.6,1.4)}55%{opacity:1;transform:translateY(-6px) scale(.8,1.3);animation-timing-function:cubic-bezier(.5,1,.89,1)}63%{opacity:1;transform:translateY(-30px) scale(1)}66%,100%{opacity:0;transform:translateY(-31px) scale(.7)}}@keyframes pa-dive-arm-l{0%,62%{opacity:0;transform:rotate(0) scaleY(.6)}64%{opacity:1;transform:rotate(0) scaleY(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70%,93%{opacity:1;transform:rotate(-42deg) scaleY(1)}98%,100%{opacity:0;transform:rotate(-42deg) scaleY(1)}}@keyframes pa-dive-arm-r{0%,62%{opacity:0;transform:rotate(0) scaleY(.6)}64%{opacity:1;transform:rotate(0) scaleY(.6);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}70%,93%{opacity:1;transform:rotate(42deg) scaleY(1)}98%,100%{opacity:0;transform:rotate(42deg) scaleY(1)}}@keyframes pa-dive-nudge{0%,70%{transform:translateY(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}76%{transform:translateY(5px);animation-timing-function:cubic-bezier(.37,0,.63,1)}82%{transform:translateY(0);animation-timing-function:cubic-bezier(.37,0,.63,1)}88%{transform:translateY(5px);animation-timing-function:cubic-bezier(.37,0,.63,1)}94%,100%{transform:translateY(0)}}@keyframes pa-dive-ripple{0%{opacity:0;transform:scale(.4)}6%{opacity:.6;transform:scale(.6)}18%{opacity:0;transform:scale(1.4)}52%{opacity:0;transform:scale(.4)}55%{opacity:.85;transform:scale(.7)}70%,100%{opacity:0;transform:scale(1.8)}}
/* How it connects: a glass panel over the sea. */
.pa-page .pa-connect > .wrap{background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.7);border-radius:24px;padding:48px}
/* The close: black, as on the S&P page. */
.pa-page .pa-close{background:#000;color:#edf5f7;text-align:center}
.pa-page .pa-close .h2{color:#edf5f7}
.pa-page .close-sub{color:rgba(237,245,247,.66);font-size:19px;line-height:1.5;margin:26px auto 0;max-width:46ch}
.pa-page .pa-close .btn{background:#fff;border-color:#fff;color:#171717}
.pa-page .pa-close .btn--line{background:transparent;border-color:rgba(237,245,247,.4);color:#edf5f7}
/* The phones shrink with the screen's height so a whole conversation fits one screen. */
@media (min-width:1001px) and (max-height:1160px){.pa-page .pa-lock .phone{zoom:.9}}
@media (min-width:1001px) and (max-height:1080px){.pa-page .pa-lock .phone{zoom:.8}}
@media (min-width:1001px) and (max-height:990px){.pa-page .pa-lock .phone{zoom:.7}}
@media (min-width:1001px) and (max-height:900px){.pa-page .pa-lock .phone{zoom:.6}.pa-page .lock{padding:108px 0 40px}}
@media (min-width:1001px) and (max-height:820px){.pa-page .pa-lock .phone{zoom:.58}.pa-page .panel{padding:16px}.pa-page .pa-lock .h2{font-size:clamp(28px,2.8vw,40px)}}
/* Locks drop wherever one screen can no longer hold a section. */
@media (max-width:1000px),(max-height:720px){
  .pa-page .lock{min-height:0;padding:80px 0 64px;scroll-margin-top:32px}
  .pa-page .lock.open{min-height:100svh;padding:110px 0 110px}
  .pa-page .pa-connect > .wrap{padding:32px 24px}
}
@media (max-width:700px){
  .pa-page .open{background-attachment:scroll;background-image:url("/prototypes/hero/img/hero-water-mobile.webp")}
  .pa-page .lock{padding:72px 0 56px}
  .pa-page .lock.open{padding:104px 0 96px}
  .pa-page .open-actions .btn{flex:1 1 100%}
  .pa-page .pa-connect > .wrap{border-radius:18px;padding:28px 16px}
}
@media (prefers-reduced-motion:reduce){.pa-page .dive-boat,.pa-page .dive-tilt,.pa-page .dive-drop,.pa-page .dive-arrow,.pa-page .dive-arrow i{animation:none}.pa-page .dive-boat{transform:none}.pa-page .dive-drop,.pa-page .dive::after{display:none}.pa-page .dive-arrow{bottom:44px}.pa-page .dive-arrow i{opacity:1;transform:rotate(-42deg)}.pa-page .dive-arrow i+i{transform:rotate(42deg)}}
/* QA fixes: the #sync phone keeps its own size on every screen, contrast on the sea wash, short and landscape screens */
.pa-page .pa-lock.pa-sync .sync-phone .phone{zoom:.62}
.pa-page .pa-lock .eyebrow,.pa-page .also-l,.pa-page .sync-cap{color:#2f3b41}
@media (min-width:1001px) and (max-height:900px){
  .pa-page .also-l.aside-l{margin:22px 0 8px}
  .pa-page .copy .wc-bar{padding-top:5px;padding-bottom:5px}
  .pa-page .copy .wc-body{padding-top:12px;padding-bottom:12px}
}
@media (min-width:1001px) and (max-height:820px){.pa-page .also-l.aside-l{margin:16px 0 8px}}
@media (min-width:901px) and (max-width:1000px){.pa-page .pa-lock:not(.pa-sync) .phone{zoom:.9}}
@media (max-width:1000px) and (max-height:820px) and (orientation:landscape){.pa-page .pa-lock:not(.pa-sync) .phone{zoom:.6}}
@media (max-width:1000px) and (max-height:500px){
  .pa-page .pa-lock:not(.pa-sync) .phone{zoom:.5}
  .pa-page .pa-lock.pa-sync .sync-phone .phone{zoom:.5}
  .pa-page .lock.open{padding:96px 0 24px}
  .pa-page .open-h1{font-size:34px}
  .pa-page .open-sub{font-size:16px;margin-top:12px}
  .pa-page .open-actions{margin-top:16px}
  .pa-page .dive{display:none}
}
/* Short laptop screens (721-780px tall) keep the locks, as on the S&P page, with a compact layout so each screen still holds its section. */
@media (min-width:1001px) and (min-height:721px) and (max-height:780px){
  .pa-page .lock{padding:110px 0 22px}
  .pa-page .pa-lock .phone{zoom:.56}
  .pa-page .panel{padding:12px}
  .pa-page .pa-lock .feature{gap:56px}
  .pa-page .pa-lock .eyebrow{margin-bottom:12px}
  .pa-page .pa-lock .h2{font-size:32px}
  .pa-page .pa-lock .lede{font-size:15.5px;line-height:1.5;margin-top:12px}
  .pa-page .pa-lock .ticks{gap:8px;margin-top:16px}
  .pa-page .pa-lock .ticks li{font-size:15px}
  .pa-page .pa-lock .also{margin-top:16px;padding-top:14px}
  .pa-page .also-l.aside-l{margin:12px 0 6px}
  .pa-page .copy .wc-sub{display:none}
  .pa-page .copy .wc-body{padding-top:10px;padding-bottom:10px}
  .pa-page .copy .wc-vers{margin-top:8px;min-height:0}
  .pa-page .sync-stage{margin-top:16px}
  .pa-page .pa-connect > .wrap,.pa-page .sync-head .lede{margin-top:8px}
}
/* Rows with a phone and a desk card: the pair scales with the screen */
@media (min-width:1001px){.pa-page .pa-lock .ui-pair .phone{zoom:.88}}
@media (min-width:1001px) and (min-height:1081px){.pa-page .ui-pair .webcard{margin-left:-70px}}
@media (min-width:1001px) and (max-width:1240px){.pa-page .ui-pair .webcard{margin-left:-90px;width:320px;zoom:.9}}
@media (min-width:1001px) and (max-width:1100px){.pa-page .ui-pair .webcard{margin-left:-100px;width:300px;zoom:.86}}
@media (min-width:1001px) and (max-height:1080px){.pa-page .pa-lock .ui-pair .phone{zoom:.8}}
@media (min-width:1001px) and (max-height:990px){.pa-page .pa-lock .ui-pair .phone{zoom:.7}}
@media (min-width:1001px) and (max-height:900px){.pa-page .pa-lock .ui-pair .phone{zoom:.6}}
@media (min-width:1001px) and (max-height:820px){.pa-page .pa-lock .ui-pair .phone{zoom:.58}}
@media (min-width:1001px) and (min-height:721px) and (max-height:780px){.pa-page .pa-lock .ui-pair .phone{zoom:.56}}
/* The laptop and phone in "Comes with Shipy S&P" scale as one picture */
/* "One desk" gives most of the row to the phone and laptop */
@media (min-width:901px){
  .pa-page .pa-sync .feature.feature--ui{gap:40px;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr)}
  .pa-page .pa-sync .panel{padding:16px 12px}
  .pa-page .pa-sync .h2{font-size:clamp(30px,2.8vw,40px)}
  .pa-page .pa-sync .lede{font-size:16.5px}
}
.pa-page .sync-ui{zoom:.92}
@media (max-width:1280px){.pa-page .sync-ui{zoom:.88}}
@media (max-width:1200px){.pa-page .sync-ui{zoom:.82}}
@media (max-width:1100px){.pa-page .sync-ui{zoom:.74}}
@media (max-width:1040px){.pa-page .sync-ui{zoom:.68}}
@media (max-width:1000px){.pa-page .sync-ui{zoom:1}}
@media (max-width:600px){.pa-page .sync-ui{zoom:.7}}
@media (max-width:380px){.pa-page .sync-ui{zoom:.64}}
/* Narrow desktop windows: keep the phone-and-card pair inside its column on tall screens */
@media (min-width:1001px) and (max-width:1240px) and (min-height:901px){.pa-page .pa-lock .ui-pair .phone{zoom:.66}}
/* The opener names each messaging app in turn, in its own colour; WhatsApp first */
.pa-page .app-rotator{display:inline-grid;vertical-align:bottom}
.pa-page .app-word{animation:app-cycle 8s cubic-bezier(.16,1,.3,1) infinite both;grid-area:1/1;opacity:0;white-space:nowrap}
@keyframes app-cycle{0%{opacity:0;transform:translateY(.35em)}5%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-.35em)}}
.pa-page .sr-only{clip:rect(0 0 0 0);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
@media (prefers-reduced-motion:reduce){.pa-page .app-word{animation:none}.pa-page .app-word:first-child{opacity:1}}
/* Even line lengths where the browser supports it */
.pa-page .ticks li span,.pa-page .lede,.pa-page .open-sub,.pa-page .close-sub,.pa-page .step-p{text-wrap:pretty}
/* Static-page bindings: pa-chat.js shows, hides and restyles these as the chats play. */
.pa-page .dc-if{display:contents}
.pa-page .dc-if[hidden]{display:none}
/* Phones (one column): each section reads title first, then its demo, then the rest of the copy. The copy box dissolves
   so its eyebrow and heading can sit above the panel while the lede and ticks stay below it. pa-chat.js settles the
   title just under the nav and sizes the phone to fit under the title. */
@media (max-width:900px){
  .pa-page .pa-lock .feature{align-items:stretch;display:flex;flex-direction:column;gap:0}
  .pa-page .pa-lock .copy{display:contents}
  .pa-page .pa-lock .copy > *{order:2}
  .pa-page .pa-lock .copy > .eyebrow,.pa-page .pa-lock .copy > .h2{order:0}
  .pa-page .pa-lock .feature .panel{margin:20px 0 6px;order:1}
  .pa-page .pa-lock .eyebrow{margin-bottom:12px}
}