/* PostOffer marketing site (one-of-one build, 2026-11-12). Loads after card.css. */
:root{--navy:#13294B;--navy2:#1D3A66;--ink:#0F1B2D;--or:#FF6B2C;--or-t:#C9440E;--cream:#FFF8F0;--paper:#fff;--sand:#F6EEE3;--muted:#5B6678;--line:#E9E1D5;--ok:#1F7A4D;--r:8px;
--h:"Archivo",Inter,system-ui,sans-serif;--b:Inter,-apple-system,system-ui,sans-serif;--nav:64px}
*{box-sizing:border-box}
html{background:var(--navy);scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.6 var(--b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--h);font-stretch:108%;letter-spacing:-.02em;text-wrap:balance;margin:0}
h2{font-size:clamp(30px,4vw,46px);line-height:1.06;font-weight:800;color:var(--navy)}
.lead{font-size:18px;color:var(--muted);max-width:640px;margin:14px 0 0;text-wrap:pretty}
.sec{padding:112px 0}
.sec.alt{background:var(--sand)}
.head{margin-bottom:48px}.head.c{text-align:center}.head.c .lead{margin-left:auto;margin-right:auto}
/* wordmark */
.po-word{font-family:var(--h);font-stretch:100%;font-weight:900;font-size:25px;letter-spacing:-.04em;color:var(--navy);line-height:1}
.po-word b{color:var(--or);font-weight:900}
/* buttons (6-8px corners, orange carries navy text for contrast) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1 var(--b);padding:15px 22px;border-radius:var(--r);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn.or{background:var(--or);color:var(--navy);box-shadow:0 1px 0 rgba(0,0,0,.08),0 8px 22px rgba(255,107,44,.28)}
.btn.or:hover{background:#ff7a40;box-shadow:0 1px 0 rgba(0,0,0,.08),0 12px 28px rgba(255,107,44,.36)}
.btn.nv{background:var(--navy);color:#fff}.btn.nv:hover{background:var(--navy2)}
.btn.gh{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px #cdd3dd}.btn.gh:hover{box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.sm{padding:10px 14px;font-size:14.5px}
.tlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--navy);text-decoration:none}
.tlink svg{width:16px;height:16px;transition:transform .2s}.tlink:hover svg{transform:translateX(3px)}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,240,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);transition:box-shadow .2s}
.nav.sc{box-shadow:0 6px 24px rgba(19,41,75,.08)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:var(--nav)}
.nav .po-word{text-decoration:none}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;font-weight:600;font-size:15px;color:#33405a}
.nav nav a:hover{color:var(--navy)}
.nav .nv-cta{display:flex;gap:10px;align-items:center}
.nav .cc-btn{display:inline-flex;align-items:center;font:700 14.5px/1 var(--b);padding:10px 14px;border-radius:var(--r);text-decoration:none;color:var(--navy);box-shadow:inset 0 0 0 1.5px #cdd3dd}
.nav .cc-btn.navy{background:var(--navy);color:#fff;box-shadow:none}
/* ---------- hero ---------- */
.hero{min-height:min(calc(100svh - var(--nav)),980px);display:flex;align-items:center;padding:24px 0 28px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 78% 50%,#FFE6D6 0,rgba(255,230,214,0) 70%),radial-gradient(40% 50% at 10% 90%,#F2E7D8 0,rgba(242,231,216,0) 70%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.32fr .68fr;gap:32px;align-items:center;width:100%}
.hero h1{font-size:clamp(28px,3.9vw,54px);line-height:1.04;font-weight:800;color:var(--navy);letter-spacing:-.035em}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 em{font-style:normal;color:var(--or)}
.hero .sub{font-size:19px;color:#3b4760;max-width:520px;margin:22px 0 30px;text-wrap:pretty}
.hero .ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero .fine{margin:18px 0 0;font-size:14px;color:var(--muted)}
.hero .fine b{color:var(--navy)}
/* phone stage */
.stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;--ph:min(560px,calc(100svh - var(--nav) - 140px))}
.phone{position:relative;height:var(--ph);aspect-ratio:9/19;background:#0c1626;border-radius:calc(var(--ph)*.085);padding:calc(var(--ph)*.018);box-shadow:0 2px 0 #24324a inset,0 30px 70px rgba(19,41,75,.32),0 8px 20px rgba(19,41,75,.18)}
.phone::before{content:"";position:absolute;top:calc(var(--ph)*.03);left:50%;transform:translateX(-50%);width:28%;height:calc(var(--ph)*.032);background:#0c1626;border-radius:20px;z-index:9}
.scr{position:relative;height:100%;width:100%;border-radius:calc(var(--ph)*.068);overflow:hidden;background:var(--cream);font-size:calc(var(--ph)*.024);container-type:inline-size}
.scr .bar{position:absolute;top:0;left:0;right:0;height:9%;display:flex;justify-content:space-between;align-items:flex-start;padding:4.2% 9% 0;font:700 1em/1 var(--b);color:#fff;z-index:8;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.layer{position:absolute;inset:0;transition:opacity .45s,transform .6s cubic-bezier(.2,.8,.2,1)}
/* camera layer */
.cam img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;transform:scale(1.12);transition:transform 3.4s ease-out}
.cam .vf{position:absolute;inset:22% 12% 30%;}
.cam .vf i{position:absolute;width:14%;aspect-ratio:1;border:3px solid #fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.cam .vf i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.cam .vf i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.cam .vf i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.cam .vf i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.cam .gps{position:absolute;left:50%;top:13%;transform:translateX(-50%);background:rgba(12,22,38,.78);color:#fff;font:700 .95em/1 var(--b);padding:.7em 1em;border-radius:6px;white-space:nowrap;display:flex;gap:.5em;align-items:center}
.cam .gps::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--or);box-shadow:0 0 0 .3em rgba(255,107,44,.35)}
.cam .shut{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);width:20%;aspect-ratio:1;border-radius:50%;border:.45em solid #fff;background:rgba(255,255,255,.3)}
.cam .shut::after{content:"";position:absolute;inset:12%;border-radius:50%;background:#fff;transition:transform .2s}
.cam .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* owner sheet */
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--cream);border-radius:1.4em 1.4em 0 0;padding:1.6em 1.5em 1.6em;box-shadow:0 -10px 30px rgba(0,0,0,.18);transform:translateY(105%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sheet .ok{display:inline-flex;align-items:center;gap:.4em;font:800 .85em/1 var(--b);color:var(--ok);background:#E3F3EA;padding:.5em .7em;border-radius:5px}
.sheet .addr{font:800 1.35em/1.2 var(--h);color:var(--navy);margin:.6em 0 .15em}
.sheet .own{font-size:.95em;color:var(--muted);margin:0 0 .9em}
.sheet .offs{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin-bottom:1em}
.sheet .offs span{border:1.5px solid var(--line);background:#fff;border-radius:6px;padding:.55em .6em;font:700 .88em/1.2 var(--b);color:var(--navy);transition:all .3s}
.sheet .offs span b{display:block;color:var(--or-t);font-size:1.05em}
.sheet .offs span.on{border-color:var(--or);background:#FFF0E7;box-shadow:0 0 0 2px rgba(255,107,44,.25)}
.sheet .go{display:flex;justify-content:center;align-items:center;gap:.4em;background:var(--or);color:var(--navy);font:800 1.1em/1 var(--b);padding:.95em;border-radius:7px;transition:transform .2s}
/* send layer */
.send{background:linear-gradient(180deg,#E9EEF5,#F7F3EC);opacity:0;padding:18% 7% 0}
.send .mini{width:100%;border-radius:4px;overflow:hidden;box-shadow:0 10px 30px rgba(19,41,75,.25);transform-origin:90% 0;transition:transform 1.1s cubic-bezier(.6,0,.3,1),opacity .4s 1s}
.send .mbx{position:absolute;right:7%;top:9%;width:15%;aspect-ratio:1;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff;transition:transform .3s}
.send .mbx svg{width:58%;height:58%}
.send .trk{margin-top:9%;background:#fff;border-radius:10px;padding:1em 1.1em;box-shadow:0 4px 16px rgba(19,41,75,.08)}
.send .trk h4{margin:0 0 .6em;font:800 1em/1.2 var(--b);color:var(--navy)}
.send .trk li{list-style:none;display:flex;align-items:center;gap:.7em;padding:.38em 0;font-size:.95em;color:#97a0ae;transition:color .3s}
.send .trk ul{margin:0;padding:0}
.send .trk li i{width:1.3em;height:1.3em;border-radius:50%;border:2px solid #cfd5df;flex:none;display:grid;place-items:center;transition:all .3s}
.send .trk li.d{color:var(--navy);font-weight:600}.send .trk li.d i{background:var(--ok);border-color:var(--ok)}
.send .trk li.d i::after{content:"";width:.35em;height:.6em;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
/* book layer */
.book{background:linear-gradient(180deg,#13294B 0,#1D3A66 100%);opacity:0;padding:22% 6% 0;color:#fff}
.book .t{font:700 1em/1 var(--b);opacity:.75;text-align:center}
.book .clock{font:800 4.4em/1 var(--h);text-align:center;margin:.15em 0 .8em;letter-spacing:-.03em}
.ntf{background:rgba(255,255,255,.94);color:var(--ink);border-radius:12px;padding:.85em .95em;display:flex;gap:.75em;align-items:flex-start;margin-bottom:.6em;box-shadow:0 8px 24px rgba(0,0,0,.2);transform:translateY(-20px) scale(.96);opacity:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.3),opacity .3s}
.ntf .ic{width:2.4em;height:2.4em;border-radius:7px;background:var(--or);display:grid;place-items:center;flex:none;color:var(--navy);font:900 1em/1 var(--h)}
.ntf .ic.g{background:#2EA567;color:#fff}
.ntf b{display:block;font-size:.95em;line-height:1.25}
.ntf small{display:block;font-size:.85em;color:#4d586b;line-height:1.3;margin-top:.15em}
.ntf em{font-style:normal;margin-left:auto;font-size:.75em;color:#7a8496;white-space:nowrap}
/* stage states */
.phone[data-s=see] .cam img{transform:scale(1)}
.phone[data-s=snap] .cam img{transform:scale(1)}
.phone[data-s=snap] .flash{animation:flash .5s ease-out}
.phone[data-s=snap] .sheet{transform:none;transition-delay:.35s}
.phone[data-s=snap] .offs span:first-child{animation:pick .5s 1.4s both}
.phone[data-s=snap] .go{animation:press .4s 2.3s both}
.phone[data-s=send] .send{opacity:1}
.phone[data-s=send] .send .mini{animation:fly 1.3s 1.1s cubic-bezier(.6,0,.3,1) both}
.phone[data-s=send] .mbx{animation:bump .4s 2.3s both}
.phone[data-s=send] .trk li:nth-child(1){animation:tick .01s .3s both}
.phone[data-s=send] .trk li:nth-child(2){animation:tick .01s 2.5s both}
.phone[data-s=send] .trk li:nth-child(3){animation:tick .01s 2.9s both}
.phone[data-s=send] .trk li:nth-child(4){animation:tick .01s 3.3s both}
.phone[data-s=book] .book{opacity:1}
.phone[data-s=book] .ntf{transform:none;opacity:1}
.phone[data-s=book] .ntf:nth-of-type(3){transition-delay:.5s}
.phone[data-s=book] .ntf:nth-of-type(4){transition-delay:1.6s}
.phone[data-s=book] .ntf:nth-of-type(5){transition-delay:2.7s}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
@keyframes pick{to{border-color:var(--or);background:#FFF0E7;box-shadow:0 0 0 2px rgba(255,107,44,.25)}}
@keyframes press{50%{transform:scale(.94)}100%{transform:none}}
@keyframes fly{0%{transform:none}25%{transform:scale(.92) rotate(-2deg)}100%{transform:translate(4%,-62%) scale(.12) rotate(8deg);opacity:0}}
@keyframes bump{50%{transform:scale(1.18)}100%{transform:none}}
@keyframes tick{to{color:var(--navy);font-weight:600}}
.phone[data-s=send] .trk li i{animation:inherit}
.trk li{--d:0s}
/* stage bar (Flighty-style) */
.sbar{display:flex;gap:4px;background:var(--navy);padding:4px;border-radius:9px;box-shadow:0 10px 26px rgba(19,41,75,.25)}
.sbar button{all:unset;cursor:pointer;font:700 14px/1 var(--b);color:#c9d4e6;padding:10px 14px;border-radius:6px;position:relative;overflow:hidden;transition:color .2s,background .2s}
.sbar button[aria-selected=true]{background:var(--or);color:var(--navy)}
.sbar button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.sbar button .pg{position:absolute;left:0;bottom:0;height:3px;background:rgba(19,41,75,.45);width:0}
.sbar button[aria-selected=true] .pg{animation:pg var(--dur,4s) linear both}
.paused .sbar button .pg{animation:none}
@keyframes pg{to{width:100%}}
/* floating notifications beside the phone (light on cream) */
.pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;background:#fff;border-radius:10px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px rgba(19,41,75,.14);font-size:13.5px;line-height:1.3;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s cubic-bezier(.2,.9,.3,1.2);white-space:nowrap}
.pop b{display:block;color:var(--navy);font-size:14px}
.pop small{color:var(--muted)}
.pop i{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;background:#FFF0E7;color:var(--or-t);flex:none}
.pop i svg{width:17px;height:17px}
.pop.p1{right:-9%;top:27%}.pop.p2{left:-30%;top:58%}.pop.p3{right:-8%;top:78%}
.stage[data-s=snap] .p1,.stage[data-s=send] .p2,.stage[data-s=book] .p3{opacity:1;transform:none}
.stage[data-s=send] .p1,.stage[data-s=book] .p1,.stage[data-s=book] .p2{opacity:.55;transform:none}
/* ---------- reveal ---------- */
/* progressive: hidden only when JS + motion are on (html.js-anim); hero text never fades, it only slides */
.js-anim .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.js-anim .rv.in{opacity:1;transform:none}
.js-anim .rv.d1{transition-delay:.08s}.js-anim .rv.d2{transition-delay:.16s}.js-anim .rv.d3{transition-delay:.24s}
.js-anim .hero .rv{opacity:1;transform:translateY(14px);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.js-anim .hero .rv.in{transform:none}
/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.route{position:absolute;left:6%;right:6%;top:118px;height:4px;z-index:0}
.route path{stroke:var(--or);stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round;fill:none}
.route .mask{stroke:var(--sand);stroke-width:8;stroke-dasharray:1200;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s ease}
.steps.in .route .mask{stroke-dashoffset:-1200}
.step{position:relative;z-index:1}
.step .vis{height:236px;border-radius:10px;overflow:hidden;position:relative;background:#fff;box-shadow:0 10px 30px rgba(19,41,75,.08)}
.step .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--navy);color:#fff;font:800 14px/1 var(--h);margin:20px 0 10px}
.step h3{font-size:24px;color:var(--navy);font-weight:800}
.step p{margin:6px 0 0;color:var(--muted);font-size:15.5px}
.v-see img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 4s ease-out}
.in .v-see img{transform:scale(1)}
.v-see .scan{position:absolute;left:0;right:0;height:2px;background:var(--or);box-shadow:0 0 18px 4px rgba(255,107,44,.6);top:10%;opacity:0}
.in .v-see .scan{animation:scan 2.2s .4s ease-in-out 2 both}
@keyframes scan{0%{top:10%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:88%;opacity:0}}
.v-see .chip{position:absolute;left:12px;bottom:12px;background:rgba(12,22,38,.8);color:#fff;font:700 12.5px/1 var(--b);padding:8px 10px;border-radius:6px}
.v-snap{padding:22px;background:linear-gradient(180deg,#fff,#FBF6EF)}
.v-snap .r{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:7px;background:#F6F1E9;margin-bottom:8px;font-size:14px;opacity:0;transform:translateX(-10px);transition:all .5s}
.v-snap .r span{color:var(--muted)}.v-snap .r b{color:var(--navy);text-align:right}
.v-snap .ok{display:inline-flex;gap:6px;align-items:center;font:800 12.5px/1 var(--b);color:var(--ok);background:#E3F3EA;padding:7px 9px;border-radius:5px;margin-bottom:12px;opacity:0;transition:opacity .4s 1.6s}
.in .v-snap .r{opacity:1;transform:none}.in .v-snap .r:nth-child(2){transition-delay:.35s}.in .v-snap .r:nth-child(3){transition-delay:.7s}.in .v-snap .r:nth-child(4){transition-delay:1.05s}.in .v-snap .ok{opacity:1}
.v-send{display:grid;place-items:center;background:linear-gradient(180deg,#EEF2F7,#FBF6EF)}
.v-send .pc{width:76%;box-shadow:0 12px 30px rgba(19,41,75,.22);border-radius:4px;transform:translateY(16px) rotate(-4deg);opacity:0;transition:all .9s cubic-bezier(.2,.8,.2,1) .2s}
.in .v-send .pc{transform:rotate(-3deg);opacity:1}
.v-send .mstamp{position:absolute;right:16px;top:14px;background:var(--navy);color:#fff;font:800 11.5px/1 var(--b);padding:7px 9px;border-radius:5px;opacity:0;transform:scale(1.6);transition:all .35s cubic-bezier(.3,1.6,.5,1) 1.3s}
.in .v-send .mstamp{opacity:1;transform:rotate(6deg)}
.v-book{padding:18px;background:linear-gradient(180deg,#EEF2F7,#FBF6EF)}
.v-book .ntf{font-size:13.5px}
.in .v-book .ntf{transform:none;opacity:1}.in .v-book .ntf:nth-child(2){transition-delay:.7s}.in .v-book .ntf:nth-child(3){transition-delay:1.4s}
/* ---------- card builder ---------- */
.build{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.ctl .lb{display:block;font:700 14px/1 var(--b);color:var(--navy);margin:0 0 10px}
.ctl input[type=text]{width:100%;font:600 18px/1.2 var(--b);padding:15px 16px;border-radius:var(--r);border:1.5px solid #d8d0c3;background:#fff;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.ctl input[type=text]:focus{border-color:var(--or);box-shadow:0 0 0 4px rgba(255,107,44,.18)}
.ctl .grp{margin-bottom:28px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg button{all:unset;box-sizing:border-box;cursor:pointer;background:#fff;border:1.5px solid #e2d9cc;border-radius:var(--r);padding:12px 14px;font:700 15px/1.2 var(--b);color:var(--navy);transition:all .2s;text-align:left}
.seg button small{display:block;font-weight:600;color:var(--or-t);font-size:13.5px;margin-top:2px}
.seg button:hover{border-color:#cbbfae}
.seg button[aria-pressed=true]{border-color:var(--navy);background:var(--navy);color:#fff}
.seg button[aria-pressed=true] small{color:var(--or)}
.seg button:focus-visible,.flip button:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.flip{display:inline-flex;background:#fff;border-radius:var(--r);padding:4px;gap:4px;box-shadow:inset 0 0 0 1.5px #e2d9cc;margin-top:18px}
.flip button{all:unset;cursor:pointer;padding:9px 16px;border-radius:6px;font:700 14px/1 var(--b);color:var(--navy)}
.flip button[aria-pressed=true]{background:var(--navy);color:#fff}
.cardview{perspective:1600px}
.cardflip{position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.cardflip.b{transform:rotateY(180deg)}
.cardflip .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,.06),0 30px 60px rgba(19,41,75,.22)}
.cardflip .face.bk{position:absolute;inset:0;transform:rotateY(180deg)}
.cardview .cap{margin:18px 0 0;font-size:13.5px;color:var(--muted);text-align:center}
/* postcard recolor to brand */
.pcf .kick{color:#FFB48F}.pcf .pin + .ring{background:var(--or);box-shadow:0 0 0 1cqw rgba(255,107,44,.35)}.pcf h3 span{color:var(--or)}
.pcf .offer{background:var(--or);color:var(--navy)}
.pcb .ba div:last-child span{background:var(--or);color:var(--navy)}
.pcf .brand .lg,.pcb .hd .lg{display:grid;place-items:center;border-radius:50%;background:var(--navy);color:#fff;font-family:var(--h);font-weight:900;flex:none}
.pcf .brand .lg{width:7.4cqw;height:7.4cqw;border:.35cqw solid #fff;font-size:3cqw}
.pcb .hd .lg{width:5.6cqw;height:5.6cqw;font-size:2.4cqw}
.pc .swap{transition:opacity .25s}
.pc.fade .swap{opacity:0}
.pcb .lights{margin-top:2.2cqw;background:#13294B;color:#fff;border-radius:.8cqw;padding:2.2cqw;font-size:1.8cqw;line-height:1.4;font-weight:600}
/* ---------- cost slider ---------- */
.cost{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch}
.cost .ctl,.cost .out{background:#fff;border-radius:12px;padding:34px;box-shadow:0 10px 30px rgba(19,41,75,.06)}
.cost .seg{grid-template-columns:repeat(3,1fr)}
.cost .seg button{text-align:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--or) var(--p,20%),#EADFD0 var(--p,20%));outline:none;margin:14px 0 6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--navy);box-shadow:0 4px 12px rgba(19,41,75,.25);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--navy);cursor:grab}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(255,107,44,.35)}
.rng{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.big{font:800 64px/1 var(--h);color:var(--navy);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.big small{font-size:20px;color:var(--muted);font-weight:700;letter-spacing:0;margin-left:6px}
.ctl .val{font:800 34px/1 var(--h);color:var(--navy);letter-spacing:-.03em}
.ctl .val small{font:600 15px var(--b);color:var(--muted);letter-spacing:0}
.out .lines{margin:22px 0;display:grid;gap:8px}
.out .lines div{display:flex;justify-content:space-between;background:#FBF6EF;border-radius:7px;padding:11px 14px;font-size:15px;font-variant-numeric:tabular-nums}
.out .lines span{color:var(--muted)}.out .lines b{color:var(--navy)}
.out .job{display:flex;gap:14px;align-items:center;background:#FFF0E7;border-radius:8px;padding:16px}
.out .job b{font:800 28px/1 var(--h);color:var(--or-t);font-variant-numeric:tabular-nums}
.out .job p{margin:0;font-size:15px;color:#4a3a30}
.jobin{display:flex;align-items:center;gap:8px;margin-top:8px}
.jobin span{font:800 22px var(--h);color:var(--navy)}
.jobin input{width:120px;font:700 18px var(--b);padding:10px 12px;border-radius:var(--r);border:1.5px solid #d8d0c3}
.fineprint{font-size:13px;color:var(--muted);margin:14px 0 0}
/* ---------- trades ---------- */
.trades{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trade{background:#fff;border-radius:10px;padding:24px;box-shadow:0 6px 20px rgba(19,41,75,.05);transition:transform .25s,box-shadow .25s}
.trade:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(19,41,75,.1)}
.trade .ti{width:40px;height:40px;border-radius:8px;background:#FFF0E7;color:var(--or-t);display:grid;place-items:center;margin-bottom:14px}
.trade .ti svg{width:22px;height:22px}
.trade h3{font-size:19px;color:var(--navy);font-weight:800;margin-bottom:6px}
.trade p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.trade q{display:block;margin-top:12px;font-size:13.5px;font-weight:600;color:var(--navy);quotes:none;background:#FBF6EF;border-radius:6px;padding:9px 11px}
.showall{display:none}
/* ---------- pricing ---------- */
/* billing switch: an app control, square-ish corners (no pills) */
.ptop{display:flex;justify-content:center;align-items:center;gap:12px;margin:-12px 0 64px;flex-wrap:wrap}
.ptop .lbl{all:unset;cursor:pointer;font:700 16px/1 var(--b);color:#8a93a3;transition:color .25s;padding:6px 2px}
.ptop .lbl.on{color:var(--navy)}
.ptop .lbl:focus-visible,.sw:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:4px}
.sw{all:unset;cursor:pointer;position:relative;width:58px;height:32px;border-radius:8px;background:#d9d1c4;transition:background .3s;box-shadow:inset 0 1px 3px rgba(0,0,0,.12)}
.sw .th{position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:6px;background:#fff;box-shadow:0 2px 6px rgba(19,41,75,.3);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.sw[aria-checked=true]{background:var(--navy)}
.sw[aria-checked=true] .th{transform:translateX(26px)}
.save{font:800 13.5px/1 var(--b);color:var(--ok);background:#E3F3EA;padding:8px 10px;border-radius:6px;transition:transform .3s,opacity .3s;opacity:.55}
.yearly .save{opacity:1;animation:bump .45s}
/* plans as postcards */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch;max-width:1120px;margin:0 auto}
.plan{position:relative;background:#FFFDF9;border-radius:6px;padding:28px 26px 26px;display:flex;flex-direction:column;
box-shadow:0 1px 2px rgba(19,41,75,.06),0 14px 34px rgba(19,41,75,.10);
background-image:linear-gradient(90deg,rgba(19,41,75,.035) 1px,transparent 1px);background-size:22px 100%}
.plan.hot{box-shadow:0 0 0 2.5px var(--or),0 22px 50px rgba(255,107,44,.22),0 8px 18px rgba(19,41,75,.10);transform:translateY(-10px)}
.phd{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;min-height:132px}
.plan h3{font-size:26px;font-weight:800;color:var(--navy)}
.plan .for{font-size:14.5px;color:var(--muted);margin:6px 0 0;line-height:1.45}
/* the stamp: perforated edge made with a dotted border in the card's paper color */
.stamp{position:relative;flex:none;width:118px;padding:7px;background:#fff;box-shadow:0 2px 8px rgba(19,41,75,.16);transform:rotate(2deg)}
.stamp::before{content:"";position:absolute;inset:-5px;border:6px dotted #FFFDF9;pointer-events:none}
.stamp .sf{background:var(--navy);color:#fff;text-align:center;padding:14px 6px 12px;min-height:104px;display:flex;flex-direction:column;justify-content:center}
.plan.hot .stamp .sf{background:var(--or);color:var(--navy)}
.stamp .amt{display:block;font:800 34px/1 var(--h);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stamp small{display:block;font:700 12px/1.2 var(--b);margin-top:5px;opacity:.85}
.stamp em{font-style:normal;display:block;font:800 10.5px/1.2 var(--b);letter-spacing:.04em;text-transform:uppercase;margin-top:7px;color:#7FE0AE}
.plan.hot .stamp em{color:var(--navy)}
html:not(.js) .stamp .yr{display:none}
.js .stamp .yr,.js .plans .yr{display:none}
.js .yearly .stamp span.yr,.js .yearly .plans span.yr{display:inline}
.js .yearly .stamp em.yr{display:block}
.js .yearly .plans .mo{display:none}
.stamp .amt.tick{animation:tick2 .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tick2{0%{transform:translateY(8px);opacity:.2}100%{transform:none;opacity:1}}
/* postmark on Crew */
.pmark{position:absolute;width:250px;right:-54px;top:-48px;color:var(--or);transform:rotate(-14deg);pointer-events:none;z-index:2;opacity:.92;mix-blend-mode:multiply}
.pmark text{font-family:var(--h)}
.js-anim .plan.hot .pmark{opacity:0;transform:rotate(-14deg) scale(1.5)}
.js-anim .plan.hot.in .pmark{opacity:.92;transform:rotate(-14deg) scale(1);transition:transform .35s cubic-bezier(.3,1.5,.5,1) .75s,opacity .2s .75s}
/* second hero number */
.per{display:flex;align-items:center;gap:14px;margin:18px 0 18px;padding:16px 0 0}
.per b{font:800 44px/1 var(--h);letter-spacing:-.04em;color:var(--navy)}
.plan.hot .per b{color:var(--or-t)}
.per span{font-size:13.5px;line-height:1.35;color:var(--muted)}
.rows{margin:0 0 6px;display:grid;gap:6px}
.rows div{display:flex;justify-content:space-between;gap:10px;align-items:baseline;background:#F7F0E6;border-radius:6px;padding:11px 12px;font-size:14.5px}
.rows dt{color:#4a5568}.rows dd{margin:0;font-weight:800;color:var(--navy);white-space:nowrap}
.plan .ex{font-size:12.5px;color:var(--muted);margin:4px 2px 20px}
.plan .btn{width:100%;margin-top:auto}
/* dealt in like postcards */
.js-anim .plans .plan.rv{opacity:0;transform:translateY(60px) rotate(calc(var(--r,0) * 1deg))}
.js-anim .plans .plan.rv.in{opacity:1;transform:none;transition:opacity .5s,transform .9s cubic-bezier(.2,.9,.25,1.15)}
.js-anim .plans .plan.hot.rv.in{transform:translateY(-10px)}
.js-anim .plans .plan.rv.d1{transition-delay:.12s}.js-anim .plans .plan.rv.d2{transition-delay:.24s}
@media (max-width:900px){.plan.hot,.js-anim .plans .plan.hot.rv.in{transform:none}.pmark{width:210px;right:-22px;top:-18px}}
@media (max-width:640px){.phd{min-height:0}.stamp{width:104px}.stamp .amt{font-size:30px}.per b{font-size:40px}.plan{padding:24px 20px 22px}}
.every{max-width:1100px;margin:64px auto 0;text-align:center}
.every h3{font-size:24px;color:var(--navy);font-weight:800;margin-bottom:26px}
.every .g{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:left}
.every .g div{background:#fff;border-radius:9px;padding:18px;display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#33405a;line-height:1.45}
.every .g div i{width:32px;height:32px;border-radius:7px;background:#FFF0E7;color:var(--or-t);display:grid;place-items:center;flex:none}
.every .g div i svg{width:18px;height:18px}
.every .g b{display:block;color:var(--navy);font-size:15px}
/* compare table */
.cmp{max-width:1100px;margin:80px auto 0}
.cmp h3{font-size:28px;color:var(--navy);font-weight:800;text-align:center;margin-bottom:28px}
.cmp table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.cmp thead th{position:sticky;top:var(--nav);background:var(--sand);z-index:2;padding:14px 12px 16px;text-align:center;vertical-align:bottom}
.cmp thead th:first-child{text-align:left}
.cmp thead th b{display:block;font:800 19px/1.2 var(--h);color:var(--navy)}
.cmp thead th small{display:block;font-size:13px;color:var(--muted);font-weight:600;margin:3px 0 10px}
.cmp thead .btn{padding:9px 12px;font-size:13.5px;width:100%}
.cmp tbody th{text-align:left;font-weight:500;color:#33405a;padding:12px 14px}
.cmp tbody td{text-align:center;padding:12px;color:var(--navy);font-weight:600}
.cmp tbody tr:nth-child(odd):not(.grp) th,.cmp tbody tr:nth-child(odd):not(.grp) td{background:rgba(255,255,255,.55)}
.cmp tbody tr:not(.grp) th{border-radius:7px 0 0 7px}.cmp tbody tr:not(.grp) td:last-child{border-radius:0 7px 7px 0}
.cmp td.c2,.cmp th.c2{background:rgba(19,41,75,.06)!important}
.cmp .grp th{padding:30px 14px 10px;font:800 16px/1 var(--h);color:var(--navy);background:none}
.cmp td svg{width:20px;height:20px;color:var(--ok);vertical-align:middle}
.cmp .ptabs{display:none}
.js .cmp tbody.more{display:none}.js .cmp.open tbody.more{display:table-row-group}
.cmp .morebtn{display:flex;margin:22px auto 0}.cmp.open .morebtn,html:not(.js) .cmp .morebtn{display:none}
.cmp .mo2,.cmp .yr2{white-space:nowrap}
.js .yearly .cmp .mo2,.js .cmp .yr2{display:none}.js .yearly .cmp .yr2{display:inline}
/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
.faq details{background:#fff;border-radius:10px;padding:0 24px;box-shadow:0 4px 14px rgba(19,41,75,.04);transition:box-shadow .2s}
.faq details[open]{box-shadow:0 10px 26px rgba(19,41,75,.08)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:700 17.5px/1.35 var(--b);color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:28px;height:28px;border-radius:7px;background:#FFF0E7;color:var(--or-t);display:grid;place-items:center;flex:none;transition:transform .3s}
.faq summary i svg{width:16px;height:16px}
.faq summary i svg{transition:transform .3s}.faq details[open] summary i svg{transform:rotate(45deg)}
.faq p{margin:0;padding:0 0 22px;color:#3b4760;font-size:16px;max-width:720px}
/* ---------- final + footer (one dark block, no containers) ---------- */
.final{background:var(--navy);color:#fff;padding:120px 0 90px;text-align:center;position:relative;overflow:hidden}
.final h2{color:#fff;font-size:clamp(32px,4.6vw,56px)}
.final p{color:#c9d4e6;font-size:19px;margin:16px 0 34px}
.final .ctas{display:flex;justify-content:center;gap:24px;align-items:center;flex-wrap:wrap}
.final .tlink{color:#fff}
.final .trail{position:absolute;left:0;right:0;top:40px;height:60px;opacity:.35}
.final .trail path{stroke:var(--or);stroke-width:2;stroke-dasharray:2 12;stroke-linecap:round;fill:none;animation:march 18s linear infinite}
@keyframes march{to{stroke-dashoffset:-600}}
.foot{background:var(--navy);color:#c9d4e6;padding:0 0 36px;font-size:14.5px}
.foot .top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:34px 0 26px;flex-wrap:wrap}
.foot .po-word{color:#fff;text-decoration:none}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:#c9d4e6;font-weight:600}.foot nav a:hover{color:#fff}
.foot .cr{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot .cr a{color:var(--or);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* ---------- responsive ---------- */
@media (max-width:1100px){
.nav nav{display:none}
.nav .nv-cta{margin-left:auto}
.trades{grid-template-columns:repeat(2,1fr)}
.every .g{grid-template-columns:repeat(2,1fr)}
.pop.p1{right:-8%}.pop.p2{left:-14%}.pop.p3{right:-6%}
}
@media (max-width:900px){
.hero{min-height:auto;padding:20px 0 30px}
.hero .wrap{grid-template-columns:1fr;gap:22px;text-align:left}
.stage{--ph:min(400px,calc(100svh - var(--nav) - 340px));min-height:200px}
.pops{display:none}
.steps{grid-template-columns:1fr 1fr}
.route{display:none}
.build,.cost{grid-template-columns:1fr;gap:28px}
.build .cardview{order:-1}
.plans{grid-template-columns:1fr;max-width:460px;gap:28px}
.plan.hot{order:-1}
.sec{padding:80px 0}
}
@media (max-width:640px){
:root{--nav:58px}
.wrap{padding:0 16px}
.nav .wrap{gap:10px}
.nav .nv-cta .btn{display:none}
.hero h1{font-size:clamp(22px,6.4vw,30px);letter-spacing:-.04em}
.hero .sub{font-size:16px;margin:12px 0 16px}
.hero .ctas{gap:16px}
.hero .btn{padding:13px 18px}
.hero .fine{margin-top:10px;font-size:13px}
.stage{--ph:clamp(300px,calc(100svh - var(--nav) - 370px),420px);gap:10px}
.sbar button{padding:9px 10px;font-size:13px}
.steps{grid-template-columns:1fr;gap:34px}
.step .vis{height:210px}
.trades{grid-template-columns:1fr}
.trades .trade:nth-child(n+5){display:none}
.trades.all .trade{display:block}
.showall{display:flex;margin:16px auto 0}
.trades.all + .showall{display:none}
.every .g{grid-template-columns:1fr}
.cost .ctl,.cost .out{padding:22px}
.big{font-size:50px}
h2{font-size:30px}
.lead{font-size:16.5px}
.sec{padding:68px 0}
.head{margin-bottom:32px}
.cmp .ptabs{display:flex;gap:6px;margin:0 0 14px;position:sticky;top:var(--nav);background:var(--sand);padding:8px 0;z-index:3}
.cmp .ptabs button{all:unset;cursor:pointer;flex:1;text-align:center;padding:11px 6px;border-radius:7px;font:700 14.5px/1 var(--b);color:var(--navy);background:#fff}
.cmp .ptabs button[aria-pressed=true]{background:var(--navy);color:#fff}
.cmp thead{display:none}
.cmp tbody td{display:none;text-align:right;white-space:nowrap}
.cmp[data-p="1"] td.c1,.cmp[data-p="2"] td.c2,.cmp[data-p="3"] td.c3{display:table-cell}
.cmp td.c2{background:none!important}
.cmp tbody th{font-size:14.5px;padding:11px 10px}
.final{padding:84px 0 64px}
.foot .top{flex-direction:column;align-items:flex-start}
.foot .cr{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.rv{opacity:1!important;transform:none!important}
}
.yearly .plans .plan:last-child .stamp .amt{font-size:26px;letter-spacing:-.05em}
@media (max-width:640px){.yearly .plans .plan:last-child .stamp .amt{font-size:23px}}
.ptop{margin-bottom:88px}
.pops{z-index:5}.phone{z-index:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .plans .yr{display:none}
.save{opacity:1}
.cmp thead th.c2{background:#ECE3D6!important}
input[type=range]::-webkit-slider-thumb{border-radius:7px}
input[type=range]::-moz-range-thumb{border-radius:7px}
.v-book .ntf{box-shadow:0 6px 16px rgba(19,41,75,.12)}
.chk{list-style:none;margin:4px 0 22px;padding:0;display:grid;gap:2px;font-size:14.5px}
.chk li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;color:#33405a;line-height:1.4}
.chk li svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--ok)}
.chk li.k{font-weight:800;color:var(--navy)}
.chk li.k svg{color:var(--or-t)}
.plan.hot .chk li.k span{color:var(--or-t)}
.phd{position:relative;z-index:1}
.pmark{z-index:3}
.stamp .pcard{display:block;font-style:normal;font:700 12px/1.25 var(--b);margin-top:8px;padding-top:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28);opacity:.95}
.plan.hot .stamp .pcard{box-shadow:inset 0 1px 0 rgba(19,41,75,.25)}
.stamp{width:132px}
.phd{min-height:150px;margin-bottom:18px}
.plan .btn{margin-top:0;margin-bottom:22px}
.chk{margin:0;flex:1}
main>section{overflow-x:clip}
@media (max-width:640px){.pmark{width:190px;right:-10px;top:-24px}}
/* ---------- full-bleed photo hero (2026-11-12 v3) ---------- */
.hero{position:relative;min-height:max(560px,calc(100svh - var(--nav)));display:flex;align-items:center;padding:40px 0;overflow:hidden;background:#EDE6DC}
.hero::before{display:none}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.hero-bg img{object-fit:cover;object-position:18% 50%;animation:heroIn 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{transform:scale(1.06)}to{transform:none}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(255,248,240,.96) 0,rgba(255,248,240,.9) 26%,rgba(255,248,240,.55) 44%,rgba(255,248,240,0) 60%)}
.hero .wrap{position:relative;z-index:2;display:block;width:100%;max-width:1200px}
.hero .copy{max-width:660px}
.hero h1{font-size:clamp(34px,3.5vw,52px);line-height:1.04;letter-spacing:-.035em}
.hero h1 span{display:block;white-space:nowrap}
.hero .sub{font-size:20px;color:#2f3b52;max-width:500px;margin:22px 0 30px}
@media (max-width:900px){
.hero::after{background:linear-gradient(90deg,rgba(255,248,240,.96) 0,rgba(255,248,240,.88) 45%,rgba(255,248,240,.2) 80%)}
}
/* phones: photo on top (phone + postcard in frame), copy below on cream */
@media (max-width:640px){
.hero{display:block;min-height:0;padding:0 0 26px;background:var(--cream)}
.hero::after{display:none}
.hero-bg{position:relative;display:block;height:min(46svh,380px);inset:auto}
.hero-bg img{position:absolute;inset:0;object-position:55% 40%}
.hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(0deg,var(--cream),rgba(255,248,240,0))}
.hero .wrap{margin-top:-6px}
.hero h1{font-size:clamp(22px,6.5vw,30px)}
.hero .sub{font-size:16.5px;margin:12px 0 18px}
}
/* hero v4: truck-window photo, copy top-left over a soft dark fade, white text */
.hero{align-items:flex-start;padding:clamp(48px,11vh,120px) 0 40px;background:#1b2433}
.hero-bg img{object-position:60% 45%}
.hero::after{background:linear-gradient(105deg,rgba(9,18,33,.86) 0,rgba(9,18,33,.66) 30%,rgba(9,18,33,.25) 50%,rgba(9,18,33,0) 62%),linear-gradient(180deg,rgba(9,18,33,.35) 0,rgba(9,18,33,0) 30%)}
.hero h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero .sub{color:#e6ebf3}
.hero .tlink{color:#fff}
.hero .fine{color:#cfd7e4}.hero .fine b{color:#fff}
@media (max-width:900px){.hero::after{background:linear-gradient(105deg,rgba(9,18,33,.88) 0,rgba(9,18,33,.7) 45%,rgba(9,18,33,.2) 80%)}}
@media (max-width:640px){
.hero{padding:0 0 26px;background:var(--cream)}
.hero-bg img{object-position:50% 40%}
.hero h1{color:var(--navy);text-shadow:none}
.hero .sub{color:#2f3b52}.hero .tlink{color:var(--navy)}
.hero .fine{color:var(--muted)}.hero .fine b{color:var(--navy)}
}
/* ================= hero v5 (cinematic dusk, after Leander's Harrisburg / Abena previews) ================= */
:root{--disp:"Bricolage Grotesque","Archivo",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;--out:cubic-bezier(.16,1,.3,1);--gut:clamp(16px,4vw,56px)}
/* nav: thin, transparent over the photo, solid cream after scrolling */
.nav{position:fixed;left:0;right:0;top:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .3s ease,box-shadow .3s ease}
.nav::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,26,.55),rgba(6,12,26,0));pointer-events:none;transition:opacity .3s}
.nav .wrap{position:relative;height:72px;max-width:none;width:min(1240px,100% - 2*var(--gut));padding:0}
.nav:not(.sc) .po-word{color:#fff}
.nav:not(.sc) nav a{color:rgba(255,255,255,.92)}
.nav:not(.sc) nav a:hover{color:#fff}
.nav:not(.sc) .cc-btn{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.nav.sc{background:rgba(255,248,240,.96);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 10px 30px -18px rgba(19,41,75,.45)}
.nav.sc::before{opacity:0}
.nav.sc .wrap{height:64px;transition:height .3s}
.nav .btn.or.sm{padding:11px 16px}
.phero{position:relative;min-height:max(640px,100svh);display:flex;align-items:center;overflow:hidden;background:#0a1324;color:#fff}
.ph-media{position:absolute;inset:0}
.ph-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%;animation:phKb 28s ease-in-out infinite alternate}
@keyframes phKb{from{object-position:66% 50%}to{object-position:56% 44%}}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(6,12,26,.88) 0%,rgba(6,12,26,.66) 30%,rgba(6,12,26,.18) 56%,rgba(6,12,26,0) 70%),
linear-gradient(0deg,rgba(6,12,26,.72) 0%,rgba(6,12,26,0) 34%),
linear-gradient(rgba(19,41,75,.1),rgba(19,41,75,.1))}
.ph-in{position:relative;z-index:2;width:min(1240px,100% - 2*var(--gut));margin-inline:auto;padding:96px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:48px;align-items:center}
.ph-h1{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 80;font-stretch:normal;font-size:clamp(40px,4.6vw,72px);line-height:.98;letter-spacing:-.02em;color:#fff;margin:0}
.ph-h1 .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ph-h1 .ln>span{display:block;white-space:nowrap;animation:phUp 1s var(--out) both}
.ph-h1 .ln:nth-child(2)>span{animation-delay:.12s}
.ph-h1 em{font-style:normal;color:var(--or);text-shadow:0 0 30px rgba(255,107,44,.35)}
@keyframes phUp{from{transform:translateY(105%)}to{transform:none}}
.ph-sub{margin:22px 0 0;max-width:31em;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(255,255,255,.9)}
.ph-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.ph-proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-size:14.5px;color:rgba(255,255,255,.85)}
.ph-proof span{display:inline-flex;align-items:center;gap:9px}
.ph-proof svg{width:18px;height:18px;color:var(--or);flex:none}
.ph-rise{animation:phRise .9s var(--out) both}
.ph-rise.d1{animation-delay:.3s}.ph-rise.d2{animation-delay:.45s}.ph-rise.d3{animation-delay:.6s}
@keyframes phRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* buttons (Harrisburg pattern) */
.pbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 24px;border-radius:8px;font:700 16px/1 var(--b);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .2s}
.pbtn::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.28);transform:translateX(-101%);transition:transform .45s var(--out)}
.pbtn:hover{transform:translateY(-2px)}.pbtn:hover::before{transform:none}
.pbtn:active{transform:scale(.97)}
.pbtn svg{width:18px;height:18px;transition:transform .25s}.pbtn:hover svg.arr{transform:translateX(4px)}
.pbtn-or{background:var(--or);color:var(--navy);box-shadow:0 12px 34px -12px rgba(255,107,44,.8)}
.pbtn-glass{background:rgba(8,16,34,.42);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pbtn-glass::before{background:rgba(255,255,255,.12)}
/* glass "Send an offer" card (Abena pattern) */
.ph-card{align-self:end;margin-bottom:8px;border-radius:16px;padding:20px;color:#fff;
background:linear-gradient(160deg,rgba(29,58,102,.58),rgba(6,14,32,.74));border:1px solid rgba(214,226,255,.2);
backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
box-shadow:0 40px 80px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.oc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.oc-head h2{font:800 22px/1 var(--disp);font-variation-settings:"wdth" 85;letter-spacing:-.01em;color:#fff}
.oc-steps{display:flex;gap:6px}.oc-steps i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.2)}.oc-steps i.on{background:var(--or);width:30px}
.oc-house{display:flex;gap:12px;align-items:center;background:rgba(5,11,31,.42);border-radius:10px;padding:8px}
.oc-house img{width:52px;height:52px;object-fit:cover;border-radius:7px}
.oc-house b{display:block;font:700 15px/1.2 var(--b)}
.oc-house span{display:inline-flex;align-items:center;gap:5px;font:700 12.5px/1 var(--b);color:#7FE0AE;margin-top:5px}
.oc-house span svg{width:13px;height:13px}
.oc-lbl{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a7b3d1;margin:16px 0 8px}
.oc-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.oc-chips button{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 11px;border-radius:8px;font:600 13.5px/1.2 var(--b);color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(214,226,255,.22);transition:background-color .2s,box-shadow .2s,color .2s}
.oc-chips button small{display:block;font-weight:800;color:var(--or);margin-top:2px}
.oc-chips button:hover{background:rgba(255,255,255,.12)}
.oc-chips button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:none}
.oc-chips button[aria-pressed=true] small{color:var(--or-t)}
.oc-chips button:focus-visible,.oc-send:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.oc-card{display:grid;grid-template-columns:42% 1fr;margin-top:14px;background:#FFFDF9;border-radius:6px;overflow:hidden;color:var(--ink);box-shadow:0 14px 30px -12px rgba(0,0,0,.6);transform:rotate(-1.2deg)}
.oc-card img{width:100%;height:100%;object-fit:cover;min-height:108px}
.oc-card>div{padding:11px 12px;display:flex;flex-direction:column}
.oc-card small{font:700 10.5px/1.2 var(--b);color:var(--muted)}
.oc-card b{font:800 30px/1 var(--disp);font-variation-settings:"wdth" 85;color:var(--or);margin-top:6px;letter-spacing:-.02em}
.oc-card span{font:700 13px/1.2 var(--b);color:var(--navy);margin-top:2px}
.oc-card em{font-style:normal;font:700 10.5px/1 var(--b);color:var(--muted);margin-top:auto;padding-top:8px}
.oc-card.swap b,.oc-card.swap span{animation:phSwap .35s var(--out)}
@keyframes phSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.oc-send{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:14px;min-height:50px;border-radius:8px;background:#fff;color:var(--navy);font:800 16px/1 var(--b);text-decoration:none;transition:transform .2s}
.oc-send svg{width:18px;height:18px;transition:transform .25s}.oc-send:hover svg{transform:translateX(4px)}
/* vertical scroll cue */
.ph-cue{position:absolute;right:var(--gut);bottom:28px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;color:rgba(255,255,255,.7);text-decoration:none;writing-mode:vertical-rl;font:500 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase}
.ph-cue i{display:block;width:2px;height:54px;background:rgba(255,255,255,.25);overflow:hidden;position:relative}
.ph-cue i::after{content:"";position:absolute;inset:0;background:var(--or);animation:phCue 2.2s ease-in-out infinite}
@keyframes phCue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:1100px){.ph-in{grid-template-columns:minmax(0,1fr) 340px;gap:32px}.ph-h1{font-size:clamp(38px,5vw,60px)}}
@media (max-width:900px){
.phero{display:block;min-height:0}
.ph-media{height:100svh}
.phero::after{bottom:auto;height:100svh;background:linear-gradient(0deg,rgba(6,12,26,1) 0%,rgba(6,12,26,.86) 40%,rgba(6,12,26,.15) 70%,rgba(6,12,26,.45) 100%)}
.ph-in{display:block;padding:0 0 48px}
.ph-copy{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:96px 0 34px}
.ph-card{margin:0 auto;max-width:440px}
.ph-cue{display:none}
}
@media (max-width:640px){
.nav .wrap{height:60px}
.ph-media img{object-position:62% 30%;height:70%}
.ph-h1{font-size:clamp(27px,7.9vw,44px)}
.ph-sub{font-size:16.5px;margin-top:14px}
.ph-ctas{margin-top:20px}.ph-ctas .pbtn{flex:1 1 auto}
.ph-proof{margin-top:18px;font-size:13.5px;gap:8px 18px}
}
@media (prefers-reduced-motion:reduce){.ph-media img{animation:none}}
/* ================= hero v6: the whole hero is a postcard lying on a surface ================= */
.pc-hero{display:block;min-height:0;padding:14px;background:#E7DED0;overflow:visible}
.pc-hero::after{display:none}
.ph-frame{position:relative;background:#FFFBF3;padding:12px;border-radius:5px;
box-shadow:0 1px 1px rgba(60,40,10,.08),0 2px 6px rgba(60,40,10,.10),0 30px 60px -24px rgba(40,28,10,.45)}
/* paper grain over the whole card, border and photo */
.ph-frame::after{content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;z-index:6;opacity:.22;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
.ph-photo{position:relative;overflow:hidden;border-radius:2px;background:#0a1324;color:#fff;min-height:calc(100svh - 52px);display:flex;align-items:center}
.ph-photo::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background:linear-gradient(90deg,rgba(6,12,26,.86) 0%,rgba(6,12,26,.62) 32%,rgba(6,12,26,.14) 58%,rgba(6,12,26,0) 72%),
linear-gradient(0deg,rgba(6,12,26,.66) 0%,rgba(6,12,26,0) 34%),linear-gradient(rgba(19,41,75,.1),rgba(19,41,75,.1)),
radial-gradient(120% 90% at 50% 50%,rgba(0,0,0,0) 60%,rgba(0,0,0,.28) 100%)}
.pc-hero .ph-media{position:absolute;inset:0;overflow:hidden}
.pc-hero .ph-media img{animation:pcKb 26s ease-in-out infinite alternate}
@keyframes pcKb{from{object-view-box:inset(0% 0% 0% 0%)}to{object-view-box:inset(3% 2.4% 4% 5%)}}
.pc-hero .ph-in{padding:104px 0 64px;grid-template-columns:minmax(0,1fr) 420px;gap:40px}
.pc-hero .ph-cue{bottom:24px;right:calc(var(--gut) - 6px);z-index:3}
/* stamp + postmark */
.ph-stamp{position:absolute;right:clamp(20px,3vw,44px);top:96px;z-index:3;width:min(300px,30vw);height:120px;pointer-events:none}
.stp{position:absolute;right:0;top:0;width:86px;height:104px;background:#FFFBF3;padding:6px;transform:rotate(4deg);
box-shadow:0 2px 5px rgba(0,0,0,.35);
-webkit-mask:radial-gradient(circle at 5px 5px,transparent 3.2px,#000 3.6px) -5px -5px/10px 10px,linear-gradient(#000,#000) 5px 5px/calc(100% - 10px) calc(100% - 10px) no-repeat;
mask:radial-gradient(circle at 5px 5px,transparent 3.2px,#000 3.6px) -5px -5px/10px 10px,linear-gradient(#000,#000) 5px 5px/calc(100% - 10px) calc(100% - 10px) no-repeat}
.stp-in{height:100%;background:var(--or);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 4px var(--or),inset 0 0 0 5px rgba(19,41,75,.35)}
.stp-in svg{width:34px;height:28px}
.stp-in b{font:800 12px/1 var(--disp);font-variation-settings:"wdth" 80;letter-spacing:.01em}
.stp-in span{font:600 7.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pm-ring{position:absolute;right:52px;top:22px;width:94px;color:rgba(255,248,240,.55);transform:rotate(-12deg)}
.pm-lines{position:absolute;right:110px;top:34px;width:min(240px,22vw);color:rgba(255,248,240,.4)}
.js-anim .stp{animation:stpIn .7s 1s cubic-bezier(.3,1.5,.5,1) both}
.js-anim .pm-ring,.js-anim .pm-lines{animation:phRise .8s 1.4s var(--out) both}
@keyframes stpIn{from{opacity:0;transform:rotate(-8deg) scale(1.5)}to{opacity:1;transform:rotate(4deg)}}
/* rotating offer postcard */
.rot{align-self:end;margin-bottom:6px;perspective:1600px}
.rot-deck{position:relative;aspect-ratio:3/2;transform:rotate(-2.5deg)}
.rc{position:absolute;inset:0;display:grid;grid-template-columns:55% 45%;background:#FFFDF8;color:var(--ink);border-radius:4px;overflow:hidden;
box-shadow:0 1px 2px rgba(0,0,0,.2),0 26px 50px -18px rgba(0,0,0,.75);
opacity:0;transform:rotateY(-70deg) translateX(40px);transform-origin:left center;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none;container-type:inline-size}
.rc.on{opacity:1;transform:none;pointer-events:auto}
.rc.out{opacity:0;transform:rotateY(60deg) translateX(-30px);transform-origin:right center}
.rc-l{padding:4.2cqw 3.6cqw 4cqw 4.4cqw;display:flex;flex-direction:column;box-shadow:inset -1px 0 0 #e4dccd;position:relative}
.rc-l>img{width:100%;height:24cqw;object-fit:cover;object-position:50% 35%;border-radius:2px}
.rc-l small{font:700 2.9cqw/1.2 var(--b);color:var(--muted);margin-top:2.6cqw}
.rc-l b{font:800 10.5cqw/.95 var(--disp);font-variation-settings:"wdth" 80;color:var(--or);letter-spacing:-.02em;margin-top:1cqw}
.rc-l span{font:800 3.6cqw/1.1 var(--b);color:var(--navy)}
.rc-qr{display:flex;align-items:center;gap:2cqw;margin-top:auto;padding-top:2cqw}
.rc-qr img{width:9cqw;height:9cqw}
.rc-qr em{font-style:normal;font:700 2.8cqw/1 var(--b);color:var(--navy)}
.rc-r{position:relative;padding:4.4cqw}
.rc-stp{position:absolute;right:4cqw;top:4cqw;width:11cqw;height:13cqw;background:var(--or);box-shadow:0 0 0 .9cqw #FFFDF8,0 0 0 1.1cqw #d9cfbe}
.rc-r p{position:absolute;left:4.4cqw;right:4cqw;top:46%;margin:0;font:600 3.2cqw/1.5 var(--b);text-transform:uppercase;letter-spacing:.02em;color:#111}
.rot-dots{display:flex;align-items:center;gap:8px;margin-top:18px;padding-left:4px}
.rot-dots button{all:unset;cursor:pointer;width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);transition:width .35s var(--out),background-color .3s}
.rot-dots button[aria-pressed=true]{width:36px;background:var(--or)}
.rot-dots button:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.rot-dots small{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
@media (max-width:1100px){.pc-hero .ph-in{grid-template-columns:minmax(0,1fr) 360px}.ph-stamp{display:none}}
@media (max-width:900px){
.pc-hero{padding:8px}
.ph-frame{padding:7px}
.ph-photo{display:block;min-height:0}
.ph-photo::after{bottom:auto;height:calc(100svh - 30px);background:linear-gradient(0deg,rgba(6,12,26,1) 0%,rgba(6,12,26,.86) 40%,rgba(6,12,26,.15) 70%,rgba(6,12,26,.45) 100%)}
.pc-hero .ph-media{bottom:auto;height:calc(100svh - 30px)}
.pc-hero .ph-in{display:block;padding:0 0 40px;position:relative;z-index:2}
.pc-hero .ph-copy{min-height:calc(100svh - 30px);padding:96px 0 30px}
.rot{max-width:420px;margin:8px auto 0}
}
@media (max-width:640px){
.pc-hero .ph-media img{object-position:62% 30%;height:70%}
.pc-hero .ph-copy{padding-bottom:26px}
}
@media (prefers-reduced-motion:reduce){.pc-hero .ph-media img{animation:none}.rc{transition:none}}
/* rotating card lives outside the big postcard: absolute over the photo on desktop, its own card on the surface on phones */
.pc-hero{position:relative}
.pc-hero .ph-in{grid-template-columns:minmax(0,1fr)}
.pc-hero .ph-copy{max-width:calc(100% - 460px)}
.pc-hero>.rot{position:absolute;z-index:4;width:420px;right:calc(26px + max(var(--gut),(100% - 52px - 1240px) / 2));bottom:calc(26px + 64px)}
@media (max-width:1100px){.pc-hero>.rot{width:340px}.pc-hero .ph-copy{max-width:calc(100% - 370px)}}
@media (max-width:900px){
.pc-hero .ph-copy{max-width:none}
.ph-photo{height:calc(100svh - 30px)}
.pc-hero .ph-in{padding:0}
.pc-hero>.rot{position:relative;right:auto;bottom:auto;width:auto;max-width:420px;margin:26px auto 12px;padding:0 8px}
.pc-hero>.rot .rot-dots button{background:rgba(19,41,75,.25)}
.pc-hero>.rot .rot-dots button[aria-pressed=true]{background:var(--or)}
.pc-hero>.rot .rot-dots small{color:var(--muted)}
}
/* nav sits inside the postcard until you scroll */
.nav{transition:background-color .3s ease,box-shadow .3s ease,top .3s ease,left .3s ease,right .3s ease}
.nav:not(.sc){top:26px;left:26px;right:26px}
.nav:not(.sc)::before{border-radius:2px 2px 0 0}
.nav:not(.sc) .wrap{width:min(1240px,100% - 2*var(--gut) + 52px)}
.pc-hero>.rot{bottom:calc(26px + 92px)}
.pc-hero .ph-in{padding-top:120px}
@media (max-width:900px){.nav:not(.sc){top:15px;left:15px;right:15px}.pc-hero>.rot{bottom:auto}}
@media (max-width:900px){
.pc-hero .ph-in{padding:0}
.ph-photo{overflow:hidden}
.nav:not(.sc) .wrap{width:calc(100% - 32px)}
}
@media (max-width:640px){
.pc-hero .ph-copy{padding:90px 0 22px}
.ph-ctas .pbtn{min-height:50px}
.ph-proof span:first-child{flex-basis:100%}
}
/* ================= hero v7: the hero IS a printed postcard lying on a surface ================= */
/* nav back to normal: thin, over the surface, navy */
.nav:not(.sc){top:0;left:0;right:0}
.nav:not(.sc)::before{display:none}
.nav:not(.sc) .po-word{color:var(--navy)}
.nav:not(.sc) nav a{color:#33405a}
.nav:not(.sc) nav a:hover{color:var(--navy)}
.nav:not(.sc) .cc-btn{color:var(--navy);box-shadow:inset 0 0 0 1.5px #c8bfae}
.nav:not(.sc) .wrap{width:min(1240px,100% - 2*var(--gut))}
.nav .wrap{height:64px}
.pch{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:84px 0 36px;overflow:hidden;
background:#E4DACB radial-gradient(120% 90% at 50% 40%,#EEE6D9 0,#E2D7C6 60%,#D6C9B5 100%)}
.pch::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
.pcd{--w:min(1240px,100vw - 64px,(100svh - 120px) * 1.5);position:relative;width:var(--w);aspect-ratio:3/2;container-type:inline-size;
display:grid;grid-template-columns:50% 50%;background:#FFFCF5;border-radius:4px;transform:rotate(-.6deg);
box-shadow:0 1px 1px rgba(60,40,10,.12),0 3px 8px rgba(60,40,10,.12),0 40px 70px -30px rgba(40,28,10,.55),0 18px 30px -18px rgba(40,28,10,.3);
animation:pcdIn 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes pcdIn{from{opacity:0;transform:translateY(30px) rotate(-2.2deg)}to{opacity:1;transform:rotate(-.6deg)}}
.pcd::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;z-index:8;opacity:.2;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,")}
/* left: printed copy on card stock */
.pcd-copy{display:flex;flex-direction:column;padding:3.2cqw 2.6cqw 2.4cqw 3.4cqw;color:var(--ink);min-width:0}
.pcd-top{display:flex;align-items:baseline;gap:1.4cqw;padding-bottom:1.1cqw;box-shadow:inset 0 -1px 0 rgba(19,41,75,.18)}
.pcd-pc{font:800 1.5cqw/1 var(--disp);font-variation-settings:"wdth" 80;letter-spacing:.32em;text-transform:uppercase;color:var(--navy)}
.pcd-from{font:500 .95cqw/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7b7464}
.pcd-h1{margin:2.6cqw 0 0;font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 78;font-size:3.75cqw;line-height:.98;letter-spacing:-.02em;color:var(--navy)}
.pcd-h1 span{display:block;white-space:nowrap}
.pcd-h1 em{font-style:normal;color:var(--or)}
.pcd-sub{margin:1.5cqw 0 0;font:500 1.3cqw/1.5 var(--b);color:#3b4458;max-width:36cqw}
.pcd-act{display:grid;grid-template-columns:1fr 1fr;gap:1.4cqw;margin-top:auto;align-items:stretch}
/* printed coupon with the rotating offer */
.cpn{position:relative;border:.16cqw dashed var(--or);border-radius:.6cqw;padding:1.3cqw 1.4cqw 1.1cqw;background:repeating-linear-gradient(135deg,rgba(255,107,44,.05) 0 .6cqw,transparent .6cqw 1.2cqw)}
.cpn-k{display:block;font:500 .85cqw/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#8a7f6c}
.cpn-deck{position:relative;height:7.4cqw;margin-top:.7cqw;perspective:800px}
.cpn-o{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;transform:rotateX(-80deg);transform-origin:50% 0;transition:opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1)}
.cpn-o.on{opacity:1;transform:none}
.cpn-o.out{opacity:0;transform:rotateX(80deg);transform-origin:50% 100%}
.cpn-o b{font:800 4.4cqw/.9 var(--disp);font-variation-settings:"wdth" 78;color:var(--or);letter-spacing:-.02em}
.cpn-o span{font:800 1.35cqw/1.15 var(--b);color:var(--navy);margin-top:.4cqw}
.cpn-o small{font:600 .95cqw/1.2 var(--b);color:#6b6455;margin-top:.3cqw}
.cpn-dots{display:flex;gap:.5cqw;margin-top:.6cqw}
.cpn-dots button{all:unset;cursor:pointer;width:1.6cqw;height:.32cqw;min-height:3px;border-radius:2px;background:rgba(19,41,75,.22);transition:width .3s,background-color .3s}
.cpn-dots button[aria-pressed=true]{width:2.8cqw;background:var(--or)}
.cpn-dots button:focus-visible{outline:2px solid var(--or);outline-offset:3px}
/* printed buttons */
.pcd-btns{display:flex;flex-direction:column;gap:.9cqw}
.pb-main{position:relative;flex:1;display:flex;align-items:center;justify-content:space-between;gap:1cqw;padding:0 1.6cqw;background:var(--or);color:var(--navy);text-decoration:none;border-radius:.4cqw;
font:800 1.55cqw/1.05 var(--disp);font-variation-settings:"wdth" 85;letter-spacing:.01em;text-transform:uppercase;
-webkit-mask:radial-gradient(circle at 0 50%,transparent .9cqw,#000 .95cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .9cqw,#000 .95cqw) right/51% 100% no-repeat;
mask:radial-gradient(circle at 0 50%,transparent .9cqw,#000 .95cqw) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent .9cqw,#000 .95cqw) right/51% 100% no-repeat;
transition:transform .2s,filter .2s}
.pb-main::after{content:"";position:absolute;left:1.6cqw;right:1.6cqw;top:.5cqw;bottom:.5cqw;border:.1cqw dashed rgba(19,41,75,.35);border-radius:.2cqw;pointer-events:none}
.pb-main svg{width:1.9cqw;height:1.9cqw;flex:none;transition:transform .25s}
.pb-main:hover{filter:brightness(1.05);transform:translateY(-2px)}.pb-main:hover svg{transform:translateX(4px)}
.pb-scan{display:flex;align-items:center;gap:1cqw;padding:.8cqw 1cqw;border:.14cqw solid var(--navy);border-radius:.4cqw;color:var(--navy);text-decoration:none;transition:background-color .2s}
.pb-scan img{width:3.4cqw;height:3.4cqw}
.pb-scan b{display:block;font:800 1.2cqw/1.1 var(--b)}
.pb-scan small{display:block;font:500 .85cqw/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#7b7464;margin-top:.3cqw}
.pb-scan:hover{background:rgba(19,41,75,.05)}
.pb-main:focus-visible,.pb-scan:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.pcd-fine{margin:1.5cqw 0 0;font:500 .92cqw/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#7b7464}
.pcd-fine i{font-style:normal;margin:0 .8cqw;color:var(--or)}
/* right: printed photo with a thin white border */
.pcd-photo{position:relative;padding:1.6cqw 1.6cqw 1.6cqw 0}
.pcd-img{position:relative;height:100%;overflow:hidden;box-shadow:0 0 0 .7cqw #fff,0 0 0 calc(.7cqw + 1px) rgba(19,41,75,.12)}
.pcd-img img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block;filter:saturate(1.08) contrast(1.04);animation:pcdKb 26s ease-in-out infinite alternate}
@keyframes pcdKb{from{object-view-box:inset(0% 0% 0% 0%)}to{object-view-box:inset(3% 2% 4% 6%)}}
.pcd-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,12,26,.35),rgba(6,12,26,0) 40%),radial-gradient(120% 90% at 60% 40%,transparent 60%,rgba(0,0,0,.25))}
/* typed address label on the photo */
.pcd-to{position:absolute;right:3.4cqw;bottom:3.4cqw;z-index:3;width:17cqw;background:#FFFCF5;padding:1cqw 1.2cqw .9cqw;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.35);transform:rotate(1deg)}
.pcd-to .ok{display:inline-flex;align-items:center;gap:.4cqw;font:800 .95cqw/1 var(--b);color:var(--ok);margin-bottom:.6cqw}
.pcd-to .ok svg{width:1.1cqw;height:1.1cqw}
.pcd-to p{margin:0;font:500 1.05cqw/1.9 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:#1d2636;box-shadow:inset 0 -1px 0 rgba(19,41,75,.18)}
/* stamp + postmark on the top right corner */
.pcd-post{position:absolute;right:2.6cqw;top:2.6cqw;z-index:4;width:30cqw;height:12cqw;pointer-events:none}
.stp2{position:absolute;right:0;top:0;width:7.4cqw;height:9cqw;background:#FFFCF5;padding:.55cqw;transform:rotate(4deg);filter:drop-shadow(0 .2cqw .4cqw rgba(0,0,0,.35));
-webkit-mask:radial-gradient(circle at .45cqw .45cqw,transparent .3cqw,#000 .34cqw) -.45cqw -.45cqw/.9cqw .9cqw,linear-gradient(#000,#000) .45cqw .45cqw/calc(100% - .9cqw) calc(100% - .9cqw) no-repeat;
mask:radial-gradient(circle at .45cqw .45cqw,transparent .3cqw,#000 .34cqw) -.45cqw -.45cqw/.9cqw .9cqw,linear-gradient(#000,#000) .45cqw .45cqw/calc(100% - .9cqw) calc(100% - .9cqw) no-repeat}
.stp2>div{height:100%;background:var(--or);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.55),inset 0 0 0 .4cqw var(--or),inset 0 0 0 .5cqw rgba(19,41,75,.35)}
.stp2 svg{width:3cqw;height:2.5cqw}
.stp2 b{font:800 1.05cqw/1 var(--disp);font-variation-settings:"wdth" 80}
.stp2 span{font:600 .65cqw/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.pm-c{position:absolute;right:4.6cqw;top:1.6cqw;width:8cqw;color:rgba(255,252,245,.62);transform:rotate(-12deg)}
.pm-w{position:absolute;right:9.6cqw;top:2.6cqw;width:20cqw;color:rgba(255,252,245,.45)}
.js-anim .stp2{animation:stp2In .7s .9s cubic-bezier(.3,1.5,.5,1) both}
@keyframes stp2In{from{opacity:0;transform:rotate(-10deg) scale(1.6)}to{opacity:1;transform:rotate(4deg)}}
.js-anim .pm-c,.js-anim .pm-w{animation:phRise .8s 1.3s var(--out) both}
/* phones: a vertical postcard */
@media (max-width:760px){
.pch{padding:70px 0 16px;align-items:flex-start}
.pcd{--w:calc(100vw - 20px);aspect-ratio:auto;display:flex;flex-direction:column-reverse;transform:rotate(-.4deg)}
.pcd-photo{padding:10px 10px 0;height:28svh}
.pcd-img{box-shadow:0 0 0 5px #fff,0 0 0 6px rgba(19,41,75,.12)}
.pcd-to{right:18px;bottom:10px;width:150px;padding:7px 9px 6px}
.pcd-to .ok{font-size:10px;gap:4px;margin-bottom:4px}.pcd-to .ok svg{width:11px;height:11px}
.pcd-to p{font-size:9px}
.pcd-post{right:12px;top:10px;width:220px;height:90px}
.stp2{width:52px;height:62px;padding:4px}
.stp2 svg{width:22px;height:18px}.stp2 b{font-size:8px}.stp2 span{font-size:5px}
.pm-c{right:34px;top:8px;width:58px}.pm-w{right:70px;top:14px;width:140px}
.pcd-copy{padding:14px 16px 14px}
.pcd-top{gap:10px;padding-bottom:8px}.pcd-pc{font-size:12px}.pcd-from{font-size:8.5px}
.pcd-h1{font-size:clamp(25px,7.9vw,34px);margin-top:12px}
.pcd-sub{font-size:14px;margin-top:8px;max-width:none}
.pcd-act{margin-top:14px;grid-template-columns:1fr 1fr;gap:10px}
.cpn{padding:9px 10px 8px;border-width:1.5px;border-radius:5px}
.cpn-k{font-size:8px}.cpn-deck{height:58px;margin-top:5px}
.cpn-o b{font-size:30px}.cpn-o span{font-size:12px;margin-top:3px}.cpn-o small{font-size:9px}
.cpn-dots{gap:5px;margin-top:6px}.cpn-dots button{width:14px;height:3px}.cpn-dots button[aria-pressed=true]{width:22px}
.pcd-btns{gap:8px}
.pb-main{min-height:52px;font-size:14px;padding:0 14px;border-radius:4px;
-webkit-mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat;
mask:radial-gradient(circle at 0 50%,transparent 7px,#000 7.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 7px,#000 7.5px) right/51% 100% no-repeat}
.pb-main::after{left:12px;right:12px;top:4px;bottom:4px;border-width:1px}
.pb-main svg{width:16px;height:16px}
.pb-scan{padding:6px 8px;border-width:1.5px;gap:7px}.pb-scan img{width:26px;height:26px}.pb-scan b{font-size:12px}.pb-scan small{font-size:7.5px}
.pcd-fine{font-size:8.5px;margin-top:10px}.pcd-fine i{margin:0 5px}
}
@media (prefers-reduced-motion:reduce){.pcd{animation:none}.pcd-img img{animation:none}.cpn-o{transition:none}}
.pcd-hand{font:600 1.75cqw/1 "Caveat",cursive;color:#2b4a8a;transform:rotate(-3deg) translateY(.2cqw);margin-left:.6cqw}
.pcd-ind{margin-left:auto;align-self:flex-start;border:.12cqw solid #1d2636;padding:.45cqw .7cqw;font:600 .72cqw/1.3 var(--mono);letter-spacing:.06em;text-align:center;color:#1d2636;opacity:.85;margin-top:-.4cqw;margin-right:9cqw}
.pcd-h1 em{text-shadow:.035em .02em 0 rgba(0,150,210,.16),-.025em -.012em 0 rgba(220,0,110,.12)}
.pcd-copy{position:relative}
.pcd-copy::after{content:"";position:absolute;right:0;top:9%;bottom:9%;width:1px;background:rgba(19,41,75,.16)}
.pb-main .sc{width:1.6cqw;height:1.6cqw;flex:none;opacity:.8}
.pb-main span{flex:1}
.pcd-to{background:#FFFCF5}
.pcd-to p{font:600 1.75cqw/1.25 "Caveat",cursive;text-transform:none;letter-spacing:0;color:#22408a;padding-top:.15cqw}
.stp2>div{box-shadow:inset 0 0 0 .2cqw rgba(255,255,255,.55),inset 0 0 0 .4cqw var(--or),inset 0 0 0 .5cqw rgba(19,41,75,.35),inset .25cqw .25cqw .5cqw rgba(255,255,255,.35),inset -.25cqw -.3cqw .5cqw rgba(0,0,0,.18)}
.stp2 svg,.stp2 b,.stp2 span{filter:drop-shadow(.05cqw .08cqw 0 rgba(255,255,255,.45))}
@media (max-width:760px){
.pcd-hand{font-size:15px;margin-left:4px}
.pcd-ind{font-size:6px;padding:3px 5px;margin-right:0;border-width:1px}
.pb-main .sc{width:14px;height:14px}
.pcd-to p{font-size:14px}
}
/* v7 balance: wider copy side, bigger print, no dead space */
.pcd{grid-template-columns:55% 45%}
.pcd-photo{padding:1.6cqw 1.6cqw 1.6cqw 0}
.pcd-h1{font-size:4.5cqw;margin-top:3cqw}
.pcd-sub{font-size:1.6cqw;max-width:44cqw;margin-top:1.8cqw}
.pcd-hand{white-space:nowrap;font-size:1.9cqw}
.pcd-act{margin-top:auto;grid-template-columns:1.05fr 1fr;gap:1.6cqw}
.cpn-deck{height:8.6cqw}
.cpn-o b{font-size:5.4cqw}
.cpn-o span{font-size:1.55cqw}
.cpn-o small{font-size:1.05cqw}
.pb-main{font-size:1.75cqw}
.pb-scan b{font-size:1.4cqw}
.pcd-fine{font-size:.86cqw;white-space:nowrap}
.pcd-to{width:15cqw}
@media (max-width:760px){
.pch{min-height:0;padding-bottom:34px}
.pcd-h1{font-size:clamp(25px,7.9vw,34px);margin-top:12px}
.pcd-sub{font-size:14.5px;max-width:none}
.pcd-hand{font-size:15px}
.cpn-deck{height:62px}.cpn-o b{font-size:30px}.cpn-o span{font-size:12.5px}.cpn-o small{font-size:9.5px}
.pb-main{font-size:14px}.pb-scan b{font-size:12.5px}
.pcd-fine{font-size:8.5px;white-space:normal}
.pcd-to{width:150px}
}
.pcd-note{margin-top:auto;padding-top:1.8cqw;transform:rotate(-1deg)}
.pcd-note p{margin:0;font:600 1.85cqw/1.62 "Caveat",cursive;color:#22408a;box-shadow:inset 0 -1px 0 rgba(19,41,75,.14);white-space:nowrap}
.pcd-note span{margin-left:2cqw;font-size:2.2cqw;color:#22408a}
.pcd-act{margin-top:2.2cqw}
.pcd-to{width:17.5cqw}
@media (max-width:760px){.pcd-note{display:none}.pcd-act{margin-top:14px}}
/* ================= hero v8: the whole hero is one postcard photo-front that rotates through trades ================= */
.nav{transition:background-color .3s ease,box-shadow .3s ease,top .3s ease,left .3s ease,right .3s ease}
.nav:not(.sc){top:12px;left:12px;right:12px}
.nav:not(.sc)::before{display:block;border-radius:2px 2px 0 0}
.nav:not(.sc) .po-word{color:#fff}
.nav:not(.sc) nav a{color:rgba(255,255,255,.92)}
.nav:not(.sc) nav a:hover{color:#fff}
.nav:not(.sc) .cc-btn{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.nav:not(.sc) .wrap{width:min(1240px,100% - 2*var(--gut))}
.tph{position:relative;height:max(620px,100svh);overflow:hidden;background:#0a1324;color:#fff;isolation:isolate}
/* printed postcard border at the very edges + grain */
.tph::before{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;box-shadow:inset 0 0 0 12px #FFFCF5,inset 0 0 0 13px rgba(19,41,75,.25),inset 0 0 0 19px rgba(255,252,245,.0)}
.tph::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.2;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml;utf8,")}
.tph-slides{position:absolute;inset:0}
.tph-s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease}
.tph-s.on{opacity:1}
.tph-s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:saturate(1.06) contrast(1.04)}
.tph-s.on img{animation:tphKb 9s ease-out both}
@keyframes tphKb{from{object-view-box:inset(0% 0% 0% 0%)}to{object-view-box:inset(2.6% 1.6% 3% 3.4%)}}
.tph-slides::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,rgba(6,12,26,.82) 0%,rgba(6,12,26,.55) 32%,rgba(6,12,26,.08) 56%,rgba(6,12,26,0) 66%),
linear-gradient(0deg,rgba(6,12,26,.62) 0%,rgba(6,12,26,0) 30%),
radial-gradient(130% 100% at 55% 45%,transparent 60%,rgba(0,0,0,.3) 100%)}
.tph-in{position:relative;z-index:3;height:100%;width:min(1240px,100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;padding:84px 0 92px}
.tph-copy{max-width:720px}
/* printed trade label */
.tph-trade{position:relative;height:24px;margin-bottom:18px}
.tt{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:10px;font:600 12.5px/24px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s var(--out)}
.tt::before{content:"";width:22px;height:2px;background:var(--or)}
.tt.on{opacity:1;transform:none;transition-delay:.25s}
.tph-h1{font-family:var(--disp);font-weight:800;font-variation-settings:"wdth" 78;font-size:clamp(40px,5vw,78px);line-height:.96;letter-spacing:-.02em;color:#FFFCF5;margin:0;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.tph-h1 span{display:block;white-space:nowrap}
.tph-h1 em{font-style:normal;color:var(--or);text-shadow:.03em .018em 0 rgba(0,150,210,.22),-.022em -.01em 0 rgba(230,0,120,.18),0 0 30px rgba(255,107,44,.25)}
.tph-sub{margin:20px 0 0;max-width:31em;font:500 clamp(16.5px,1.3vw,19.5px)/1.5 var(--b);color:rgba(255,252,245,.9)}
.tph-ctas{display:flex;gap:14px;margin-top:30px;align-items:stretch;flex-wrap:wrap}
/* printed ticket stub */
.tk-main{position:relative;display:flex;align-items:center;gap:14px;min-height:62px;padding:0 26px;background:var(--or);color:var(--navy);text-decoration:none;border-radius:4px;
font:800 19px/1 var(--disp);font-variation-settings:"wdth" 85;letter-spacing:.03em;text-transform:uppercase;
-webkit-mask:radial-gradient(circle at 0 50%,transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 10px,#000 10.5px) right/51% 100% no-repeat;
mask:radial-gradient(circle at 0 50%,transparent 10px,#000 10.5px) left/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 10px,#000 10.5px) right/51% 100% no-repeat;
box-shadow:0 14px 34px -12px rgba(255,107,44,.75);transition:transform .2s,filter .2s}
.tk-main::after{content:"";position:absolute;left:18px;right:18px;top:6px;bottom:6px;border:1.5px dashed rgba(19,41,75,.38);border-radius:2px;pointer-events:none}
.tk-main .sc{width:17px;height:17px;opacity:.8}
.tk-main .ar{width:19px;height:19px;transition:transform .25s}
.tk-main:hover{transform:translateY(-2px);filter:brightness(1.05)}.tk-main:hover .ar{transform:translateX(4px)}
.tk-scan{display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border:1.5px solid rgba(255,252,245,.75);border-radius:4px;color:#fff;text-decoration:none;background:rgba(6,12,26,.25);transition:background-color .2s}
.tk-scan:hover{background:rgba(255,255,255,.1)}
.tk-scan .qrw{background:#FFFCF5;padding:4px;border-radius:2px;display:block}
.tk-scan img{width:38px;height:38px;display:block}
.tk-scan small{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,252,245,.75)}
.tk-scan b{display:block;font:800 16px/1.1 var(--b);margin-top:5px}
.tk-main:focus-visible,.tk-scan:focus-visible,.tph-tabs button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tph-fine{margin:22px 0 0;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,252,245,.72)}
.tph-fine i{font-style:normal;color:var(--or);margin:0 10px}
/* stamp + postmark */
.tph-post{position:absolute;z-index:4;right:calc(12px + var(--gut));top:96px;width:320px;height:130px;pointer-events:none}
.stp3{position:absolute;right:0;top:0;width:92px;height:112px;background:#FFFCF5;padding:7px;transform:rotate(4deg);filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));
-webkit-mask:radial-gradient(circle at 5px 5px,transparent 3.3px,#000 3.7px) -5px -5px/10px 10px,linear-gradient(#000,#000) 5px 5px/calc(100% - 10px) calc(100% - 10px) no-repeat;
mask:radial-gradient(circle at 5px 5px,transparent 3.3px,#000 3.7px) -5px -5px/10px 10px,linear-gradient(#000,#000) 5px 5px/calc(100% - 10px) calc(100% - 10px) no-repeat}
.stp3>div{height:100%;background:var(--or);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.55),inset 0 0 0 4px var(--or),inset 0 0 0 5px rgba(19,41,75,.35),inset 3px 3px 6px rgba(255,255,255,.35),inset -3px -4px 6px rgba(0,0,0,.18)}
.stp3 svg{width:36px;height:30px}.stp3 b{font:800 13px/1 var(--disp);font-variation-settings:"wdth" 80}.stp3 span{font:600 7.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.tph-post .pm-c{position:absolute;right:56px;top:20px;width:98px;color:rgba(255,252,245,.6);transform:rotate(-12deg)}
.tph-post .pm-w{position:absolute;right:118px;top:30px;width:210px;color:rgba(255,252,245,.42)}
.js-anim .stp3{animation:stp2In .7s .8s cubic-bezier(.3,1.5,.5,1) both}
/* printed offer coupon (changes per trade) */
.tph-offer{position:absolute;z-index:4;right:calc(12px + var(--gut));bottom:104px;width:300px;height:190px}
.to{position:absolute;inset:0;display:flex;flex-direction:column;padding:18px 20px 16px;border:1.5px dashed rgba(255,252,245,.8);border-radius:4px;background:rgba(6,12,26,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
opacity:0;transform:translateY(14px) rotate(-1.5deg);transition:opacity .5s,transform .7s var(--out)}
.to.on{opacity:1;transform:rotate(-1.5deg);transition-delay:.35s}
.to-k{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,252,245,.75)}
.to b{font:800 64px/.9 var(--disp);font-variation-settings:"wdth" 78;color:var(--or);letter-spacing:-.02em;margin-top:10px;text-shadow:.03em .018em 0 rgba(0,150,210,.2),-.02em -.01em 0 rgba(230,0,120,.15)}
.to-w{font:800 18px/1.15 var(--b);color:#FFFCF5;margin-top:4px}
.to-c{font:600 13px/1.2 var(--b);color:rgba(255,252,245,.8);margin-top:3px}
.to-a{margin-top:auto;font:600 17px/1 "Caveat",cursive;color:#cfe0ff}
/* trade tabs (printed index along the bottom) */
.tph-tabs{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:30px;width:min(1240px,100% - 2*var(--gut));display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tph-tabs button{all:unset;cursor:pointer;position:relative;padding:12px 0 0;font:600 13px/1.2 var(--b);color:rgba(255,252,245,.62);transition:color .3s}
.tph-tabs button span{font:500 11px/1 var(--mono);letter-spacing:.12em;margin-right:10px;color:rgba(255,252,245,.5)}
.tph-tabs button i{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,252,245,.25);overflow:hidden}
.tph-tabs button i::after{content:"";position:absolute;inset:0;background:var(--or);transform:scaleX(0);transform-origin:left}
.tph-tabs button[aria-pressed=true]{color:#fff}
.tph-tabs button[aria-pressed=true] i::after{animation:tabRun 5s linear both;animation:var(--run,tabRun 5s linear both)}
.tph.hold .tph-tabs button[aria-pressed=true] i::after{animation-play-state:paused}
@keyframes tabRun{to{transform:scaleX(1)}}
@media (max-width:1180px){.tph-offer{width:260px;height:172px}.to b{font-size:54px}.tph-post{width:240px}.tph-post .pm-w{display:none}.tph-copy{max-width:600px}}
@media (max-width:960px){.tph-offer,.tph-post{display:none}}
/* phones: same postcard, vertical crop */
@media (max-width:760px){
.tph::before{box-shadow:inset 0 0 0 8px #FFFCF5,inset 0 0 0 9px rgba(19,41,75,.25)}
.nav:not(.sc){top:8px;left:8px;right:8px}
.tph-s img{object-position:72% 40%}
.tph-slides::after{background:linear-gradient(0deg,rgba(6,12,26,.95) 0%,rgba(6,12,26,.82) 40%,rgba(6,12,26,.1) 66%,rgba(6,12,26,.35) 100%)}
.tph-in{align-items:flex-end;padding:80px 0 62px}
.tph-trade{margin-bottom:12px}
.tph-h1{font-size:clamp(27px,8.1vw,40px)}
.tph-sub{font-size:15px;margin-top:12px}
.tph-ctas{margin-top:18px;gap:10px}
.tk-main{flex:1 1 100%;justify-content:space-between;min-height:56px;font-size:17px}
.tk-scan{flex:1 1 100%}
.tph-fine{font-size:9.5px;margin-top:14px}
.tph-fine i{margin:0 6px}
.tph-offer{display:block;right:20px;top:92px;bottom:auto;width:178px;height:118px}
.to{padding:11px 12px 10px}
.to-k{font-size:8px}.to b{font-size:38px;margin-top:6px}.to-w{font-size:12.5px}.to-c{font-size:10px}.to-a{display:none}
.tph-tabs{bottom:22px;gap:6px}
.tph-tabs button{font-size:0;padding-top:0;height:10px}
.tph-tabs button span{display:none}
}
@media (prefers-reduced-motion:reduce){.tph-s,.tt,.to{transition:none}.tph-s.on img{animation:none}.tph-tabs button i::after{animation:none;transform:scaleX(1)}}
.to-k em{font-style:normal}
@media (max-width:760px){.to-k em{display:none}}
/* ================= hero v9: the real PostOffer card front, blown up to the full frame ================= */
.tph9{--bd:12px;--strip:96px;background:#FFFCF5;font-family:Inter,var(--b)}
.tph9::before{box-shadow:inset 0 0 0 var(--bd) #FFFCF5}
.cf-photo{position:absolute;left:var(--bd);right:var(--bd);top:var(--bd);bottom:var(--strip);overflow:hidden;container-type:size;background:#0a1324;border-radius:2px}
.cf{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.cf.on{opacity:1;pointer-events:auto}
/* the art box keeps the photo's 16:9 so the pin stays on the problem spot at any size */
.cf-art{position:absolute;left:50%;top:50%;width:max(100cqw,177.78cqh);height:max(100cqh,56.25cqw);transform:translate(-50%,-50%)}
.cf-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
.cf.on .cf-art{animation:cfKb 9s ease-out both}
@keyframes cfKb{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.045)}}
.cf-shade{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(0deg,rgba(6,20,40,.9) 0,rgba(6,20,40,.55) 30%,rgba(6,20,40,0) 55%),linear-gradient(180deg,rgba(6,20,40,.6) 0,rgba(6,20,40,0) 24%),linear-gradient(90deg,rgba(6,20,40,.45) 0,rgba(6,20,40,0) 45%)}
/* pin callout */
.cf-pin{position:absolute;width:0;height:0;z-index:2}
.cf-call{position:absolute;left:0;bottom:22px;transform:translateX(-50%);background:#fff;color:var(--navy);border-radius:10px;padding:9px 14px 8px;white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.4);text-align:center}
.cf-call::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);border:9px solid transparent;border-bottom:0;border-top-color:#fff}
.cf-call b{display:flex;align-items:center;gap:6px;font:800 clamp(14px,1.25vw,19px)/1.1 Inter,var(--b)}
.cf-call b svg{width:1.05em;height:1.05em;color:#d64545}
.cf-call small{display:block;font:700 clamp(11px,.85vw,13px)/1.2 Inter,var(--b);color:var(--or-t);margin-top:3px}
.cf-dot{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--or);border:3px solid #fff;box-shadow:0 0 0 0 rgba(255,107,44,.6);animation:cfPulse 1.8s ease-out infinite}
@keyframes cfPulse{0%{box-shadow:0 0 0 0 rgba(255,107,44,.6)}100%{box-shadow:0 0 0 18px rgba(255,107,44,0)}}
.cf.on .cf-call{animation:cfPop .6s .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes cfPop{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.92)}to{opacity:1;transform:translateX(-50%)}}
/* company badge (top-left, under the nav) */
.cf-brand{position:absolute;left:var(--gut);top:84px;display:flex;align-items:center;gap:14px;color:#fff;z-index:2}
.cf-lg{width:62px;height:62px;border-radius:50%;background:var(--navy);border:3px solid #fff;display:grid;place-items:center;font:900 21px/1 Inter,var(--b);letter-spacing:-.02em;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.cf-brand b{display:block;font:800 clamp(15px,1.3vw,20px)/1.1 Inter,var(--b);letter-spacing:.01em}
.cf-brand small{display:block;font:500 clamp(12px,.95vw,14px)/1.2 Inter,var(--b);opacity:.85;margin-top:4px}
/* card copy (bottom-left) */
.cf-copy{position:absolute;left:var(--gut);bottom:clamp(28px,4.2cqh,56px);max-width:66cqw;color:#fff;z-index:2}
.cf-kick{margin:0 0 12px;font:700 clamp(14px,1.15vw,18px)/1 Inter,var(--b);color:var(--or)}
.cf-h{margin:0;font:800 clamp(34px,3.7vw,62px)/1.02 Inter,var(--b);letter-spacing:-.035em}
.cf-h span{display:block;white-space:nowrap}
.cf-h .a{color:var(--or)}
.cf-sub{margin:14px 0 0;font:500 clamp(14px,1.2vw,18px)/1.4 Inter,var(--b);opacity:.92}
/* offer badge (bottom-right) */
.cf-offer{position:absolute;right:var(--gut);bottom:clamp(28px,4.2cqh,56px);z-index:2;background:var(--or);color:var(--navy);border-radius:clamp(10px,1vw,16px);padding:clamp(14px,1.4vw,22px) clamp(20px,2vw,32px);text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.cf-offer b{display:block;font:900 clamp(38px,4.2vw,68px)/1 Inter,var(--b);letter-spacing:-.04em}
.cf-offer small{display:block;font:800 clamp(11px,.95vw,14px)/1 Inter,var(--b);letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.cf.on .cf-copy{animation:phRise .8s .2s var(--out) both}
.cf.on .cf-offer{animation:cfPopB .7s .55s cubic-bezier(.3,1.4,.5,1) both}
@keyframes cfPopB{from{opacity:0;transform:scale(.85) rotate(-4deg)}to{opacity:1;transform:none}}
/* the printed strip along the bottom edge of the card: PostOffer's own message */
.cf-strip{position:absolute;left:var(--bd);right:var(--bd);bottom:0;height:var(--strip);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:0 calc(var(--gut) - var(--bd));color:var(--navy);z-index:8}
.cs-msg .tph-h1{font:800 17px/1.1 Inter,var(--b);letter-spacing:-.01em;color:var(--navy);text-shadow:none;margin:0;font-variation-settings:normal}
.cs-msg .tph-h1 span{display:block;white-space:nowrap}
.cs-msg .tph-h1 em{color:var(--or-t);text-shadow:none}
.cs-msg p{margin:5px 0 0;font:500 12.5px/1.3 Inter,var(--b);color:#5b6475}
.tph9 .tph-tabs{position:static;transform:none;width:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tph9 .tph-tabs button{color:#6b7385;font-size:12.5px;padding-top:10px}
.tph9 .tph-tabs button span{color:#9aa1ae}
.tph9 .tph-tabs button i{background:rgba(19,41,75,.15)}
.tph9 .tph-tabs button[aria-pressed=true]{color:var(--navy)}
.tph9 .tph-tabs button:focus-visible{outline:2px solid var(--navy)}
.cs-cta{display:flex;align-items:center;gap:20px}
.cs-badge{display:block;background:var(--or);color:var(--navy);border-radius:12px;padding:10px 20px 9px;text-decoration:none;text-align:center;box-shadow:0 8px 20px -8px rgba(255,107,44,.8);transition:transform .2s}
.cs-badge b{display:block;font:900 19px/1 Inter,var(--b);letter-spacing:-.02em}
.cs-badge small{display:block;font:800 10px/1 Inter,var(--b);letter-spacing:.06em;text-transform:uppercase;margin-top:5px}
.cs-badge:hover{transform:translateY(-2px)}
.cs-link{display:inline-flex;align-items:center;gap:6px;font:700 14.5px/1 Inter,var(--b);color:var(--navy);text-decoration:none;white-space:nowrap}
.cs-link svg{width:16px;height:16px;transition:transform .2s}.cs-link:hover svg{transform:translateX(3px)}
.cs-badge:focus-visible,.cs-link:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (max-width:1180px){.cf-strip{grid-template-columns:auto auto;gap:20px}.tph9 .tph-tabs{display:none}}
/* phones: the same card front, vertical crop */
@media (max-width:760px){
.tph9{--bd:8px;--strip:178px}
.nav:not(.sc){top:8px;left:8px;right:8px}
.cf-art{left:50%;transform:translate(-68%,-50%)}
@keyframes cfKb{from{transform:translate(-68%,-50%) scale(1)}to{transform:translate(-68%,-50%) scale(1.045)}}
.cf-brand{left:16px;top:70px;gap:10px}.cf-lg{width:44px;height:44px;font-size:15px;border-width:2px}
.cf-copy{left:16px;right:16px;max-width:none;bottom:96px}
.cf-h{font-size:clamp(26px,7.4vw,34px)}.cf-h span{white-space:normal}
.cf-kick{margin-bottom:8px;font-size:13px}.cf-sub{font-size:13.5px;margin-top:8px}
.cf-offer{left:16px;right:auto;bottom:18px;padding:10px 16px;border-radius:10px;display:flex;align-items:baseline;gap:10px}
.cf-offer b{font-size:30px}.cf-offer small{margin:0;font-size:10.5px}
.cf-call{padding:7px 10px 6px}.cf-call b{font-size:13px}.cf-call small{font-size:10px}
.cf-strip{grid-template-columns:1fr;gap:12px;align-content:center;padding:0 8px}
.cs-msg .tph-h1{font-size:16px}.cs-msg p{font-size:11.5px}
.cs-cta{gap:14px}.cs-badge{flex:1;padding:12px 14px 10px}.cs-badge b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.cf{transition:none}.cf.on .cf-art,.cf-dot{animation:none}}
@media (max-width:760px){
.cf-pin{top:var(--my) !important}
.cf-brand b{font-size:13px}.cf-brand small{font-size:11px}
}
@media (max-width:760px){.cf-pin{left:var(--mx,var(--x)) !important}}
@media (max-width:1180px){
.tph9 .tph-tabs{display:grid;position:absolute;left:calc(var(--gut) - var(--bd));right:calc(var(--gut) - var(--bd));bottom:calc(100% + 10px);gap:6px}
.tph9 .tph-tabs button{font-size:0;padding:0;height:12px}
.tph9 .tph-tabs button span{display:none}
.tph9 .tph-tabs button i{top:5px;background:rgba(255,255,255,.3)}
.cf-copy,.cf-offer{bottom:44px}
}
@media (max-width:760px){.cf-offer{bottom:30px}.cf-copy{bottom:108px}}
/* ================= v10: solid nav above, hero = only the card front, H1 in the intro below ================= */
.nav,.nav:not(.sc){position:sticky;top:0;left:0;right:0;background:rgba(255,248,240,.97);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.nav::before,.nav:not(.sc)::before{display:none}
.nav:not(.sc) .po-word{color:var(--navy)}
.nav:not(.sc) nav a{color:#33405a}
.nav:not(.sc) nav a:hover{color:var(--navy)}
.nav:not(.sc) .cc-btn{color:var(--navy);box-shadow:inset 0 0 0 1.5px #cdd3dd}
.nav .wrap,.nav.sc .wrap{height:var(--nav)}
.tph9{--strip:var(--bd);height:max(520px,calc(100svh - var(--nav)))}
.cf-brand{top:clamp(30px,5cqh,56px);left:clamp(28px,4cqw,64px)}
.cf-copy{left:clamp(28px,4cqw,64px);bottom:clamp(40px,7cqh,76px)}
.cf-offer{right:clamp(28px,4cqw,64px);bottom:clamp(40px,7cqh,76px)}
/* subtle dot row inside the card */
.tph9 .tph-tabs{position:absolute;z-index:8;left:50%;transform:translateX(-50%);bottom:calc(var(--bd) + 18px);width:auto;display:flex;gap:8px}
.tph9 .tph-tabs button{font-size:0;padding:0;width:26px;height:12px;display:block}
.tph9 .tph-tabs button i{top:5px;height:2px;background:rgba(255,255,255,.35)}
.tph9 .tph-tabs button[aria-pressed=true]{width:40px}
.tph9 .tph-tabs button:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* intro under the hero */
.intro{background:var(--cream);padding:clamp(56px,7vw,96px) 0}
.intro .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:end}
.intro-h1{font:800 clamp(30px,4vw,56px)/1.03 Inter,var(--b);letter-spacing:-.035em;color:var(--navy);margin:0}
.intro-h1 span{display:block;white-space:nowrap}
.intro-h1 em{font-style:normal;color:var(--or-t)}
.intro-r p{margin:0;font-size:18px;color:#3b4760;max-width:440px}
.intro-r .ctas{display:flex;gap:22px;align-items:center;margin-top:22px;flex-wrap:wrap}
.intro-r .fine{margin-top:14px;font-size:13.5px;color:var(--muted)}
.intro-r .fine b{color:var(--navy)}
@media (max-width:1180px){.tph9 .tph-tabs{bottom:calc(var(--bd) + 14px);left:50%;right:auto;gap:6px}.tph9 .tph-tabs button i{top:5px}}
@media (max-width:900px){.intro .wrap{grid-template-columns:1fr;gap:20px}}
@media (max-width:760px){
.tph9{--strip:var(--bd);height:calc(100svh - var(--nav))}
.cf-brand{top:20px;left:18px}
.cf-copy{left:18px;right:18px;bottom:96px}
.cf-offer{left:18px;bottom:34px}
.intro-h1{font-size:clamp(26px,7.6vw,34px)}
.intro-r p{font-size:16px}
}
/* v10b: photo is clipped by its own box (no oversized art), pins follow the cover math */
.cf-art{left:0;top:0;width:100%;height:100%;transform:none}
.cf.on .cf-art{animation:none}
.cf-art img{object-position:calc(var(--opx,.5) * 100%) 50%}
.cf.on .cf-art img{animation:cfZoom 9s ease-out both}
@keyframes cfZoom{from{object-view-box:inset(0% 0% 0% 0%)}to{object-view-box:inset(1.6% 1.4% 1.6% 1.4%)}}
.cf-pin{--iw:max(100cqw,177.78cqh);--ih:max(100cqh,56.25cqw);
left:calc((100cqw - var(--iw)) * var(--opx,.5) + var(--px) * var(--iw)) !important;
top:calc((100cqh - var(--ih)) * .5 + var(--py) * var(--ih)) !important}
.nav .btn .ns{display:none}
@media (max-width:760px){
.cf-photo{--opx:.74}
.cf-pin{left:calc((100cqw - var(--iw)) * var(--opx) + var(--mpx,var(--px)) * var(--iw)) !important;top:calc((100cqh - var(--ih)) * .5 + var(--mpy,var(--py)) * var(--ih)) !important}
.nav .nv-cta .btn{display:inline-flex;padding:9px 12px;font-size:14px}
.nav .btn .nl{display:none}.nav .btn .ns{display:inline}
.nav .cc-btn{padding:9px 12px;font-size:14px}
.nav .wrap{gap:8px}
}
@media (max-width:760px){.cf-offer{right:auto;bottom:40px}.cf-copy{bottom:112px}}