/* Hex Studios: cool paper, deep ink, one signature violet. Archivo at two widths: wide for display, normal for reading. */
:root{
  --paper:#EEEFEB; --paper-2:#E2E4DF; --card:#F8F8F6; --line:#CBCEC7;
  --ink:#151816; --ink-2:#5A5F5B; --night:#0E1630; --night-2:#18244A; --mist:#A9B3CC; --night-line:#2A3866;
  --violet:#5B3DF5; --violet-2:#4A2EE0; --violet-soft:#B9ADFF;
  --ease:cubic-bezier(.22,.8,.24,1);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
h1,h2,.display-type{font-stretch:125%;font-weight:800;letter-spacing:-.025em;line-height:.95}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(238,239,235,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .4s,color .4s,border-color .4s}
.nav.dark{background:rgba(14,22,48,.86);color:#EEEFEB;border-color:var(--night-line)}
.nav-in{max-width:1180px;margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:32px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-stretch:118%;font-size:18px;letter-spacing:-.01em;margin-right:auto}
.hex{width:30px;height:30px;fill:var(--violet)}
.hex .hex-h{fill:#fff}
.nav ul{display:flex;gap:28px;list-style:none;font-size:15px}
.nav ul a{text-decoration:none;opacity:.75;transition:opacity .2s}
.nav ul a:hover{opacity:1}
.nav-cta{background:var(--violet);color:#fff;text-decoration:none;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;transition:background .2s}
.nav-cta:hover{background:var(--violet-2)}

/* Buttons and links */
.ctas{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:24px}
.btn{display:inline-block;background:var(--violet);color:#fff;text-decoration:none;font:600 16px/1 var(--font);padding:15px 24px;border-radius:999px;border:0;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--violet-2)}
.btn:active{transform:scale(.97)}
.btn-light{background:#fff;color:var(--violet)}
.btn-light:hover{background:#ECE8FF}
.link{font:600 16px/1.2 var(--font);color:inherit;text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:2px;text-underline-offset:5px;background:none;border:0;cursor:pointer}
.link:hover{color:var(--violet)}
/* bigger thumb target without moving the layout */
a.link,button.link{display:inline-block;padding:12px 0;margin:-12px 0}
.dark .link:hover,.inspo .link:hover,.viewer .link:hover{color:var(--violet-soft)}

/* Hero */
.hero{padding-top:72px}
.hero-copy{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:auto auto;gap:10px 64px;align-items:end}
.hero-copy h1{grid-column:1;grid-row:1 / span 2;align-self:center}
.hero-scene{grid-column:2;grid-row:1;width:100%;max-width:460px;height:auto;justify-self:end;margin-bottom:-10px}
.hero-side{grid-column:2;grid-row:2}
.hexy-sit{position:absolute;z-index:6;width:16cqw;height:auto;left:6cqw;top:-13.8cqw;pointer-events:none}

.hero h1{font-size:clamp(44px,6.1vw,88px);max-width:9.5em}
.hero-side p{font-size:19px;color:var(--ink-2);max-width:34ch}
.hero-stage{position:relative;margin-top:110px}
.hero-sticky{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 80px}
.js-motion .hero-stage{height:320vh}
.js-motion .hero-sticky{position:sticky;top:60px;height:calc(100vh - 60px);overflow:hidden;padding:0}
.hero-rig{position:relative;width:min(980px,88vw);perspective:1600px}
.hero-display{transform-origin:50% 70%;will-change:transform}
.iphone.hero-phone{position:absolute;right:-4%;bottom:12%;width:21%;will-change:transform,opacity}
/* How it works: track record strip, dated steps with deliverables, professional standards */
.proof{padding:0 0 30px}
.proof-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf{padding:22px 20px 24px;border-left:1px solid var(--line)}
.pf:first-child{border-left:0;padding-left:0}
.pf b{display:block;font-size:clamp(34px,4vw,52px);font-weight:800;font-stretch:118%;letter-spacing:-.03em;line-height:1;color:var(--violet)}
.pf span{display:block;font-size:15px;color:var(--ink-2);margin-top:8px;line-height:1.4}
.steps-pro li em{display:inline-block;font-style:normal;font-size:13px;font-weight:800;color:var(--violet);background:#EDE9FF;border-radius:999px;padding:4px 10px;margin-bottom:10px}
.steps-pro li small{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);font-size:14px;font-weight:600;color:var(--ink)}
/* How it works: a real headline over the steps, and desktop-sized reading text */
.how-steps-h{font-size:clamp(36px,4.6vw,64px);font-weight:850;font-stretch:120%;letter-spacing:-.035em;line-height:.98;max-width:16ch}
.how-steps-sub{margin-top:14px}
@media (min-width:1100px){
  /* four steps as one timeline across the screen, joined by a line through the numbers */
  .steps-long.steps-pro{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px;position:relative}
  .steps-long.steps-pro::before{content:"";position:absolute;left:52px;right:52px;top:58px;height:3px;background:repeating-linear-gradient(90deg,var(--violet) 0 10px,transparent 10px 18px);opacity:.35}
  .steps-pro li{position:relative;display:flex;flex-direction:column;padding:30px 26px 26px}
  .steps-pro li b{font-size:25px;line-height:1.1}
  .steps-pro li span{font-size:17px;line-height:1.55;margin-top:10px;color:#3E433F}
  .steps-pro li em{font-size:14px;align-self:flex-start}
  .steps-pro li span{flex:1;margin-bottom:20px}
  .steps-pro li small{margin-top:0;border-top:0;padding:14px 16px;background:#EDE9FF;border-radius:14px;font-size:15px;line-height:1.45;color:var(--ink)}
  .standards .sd-grid{gap:16px}
  .standards .sd-grid li{padding:24px 24px 26px}
  .standards .sd-grid b{font-size:19px;line-height:1.25}
  .standards .sd-grid span{font-size:16.5px;line-height:1.55;color:#3E433F}
  .pf span{font-size:16.5px;color:#3E433F}
  .tb-tools span{font-size:16.5px}
}
.standards{padding:100px 0;background:var(--paper-2)}
.standards h2{font-size:clamp(38px,5vw,68px);max-width:16ch}
.sd-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.sd-grid li{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 20px 22px}
.sd-grid b{display:block;font-size:17px;font-weight:800;font-stretch:110%}
.sd-grid b::before{content:"✓";display:inline-grid;place-items:center;width:24px;height:27px;margin-right:10px;color:#fff;font-size:12px;background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);vertical-align:-6px}
.sd-grid span{display:block;font-size:15px;color:var(--ink-2);line-height:1.45;margin-top:10px}
@media (max-width:900px){.proof-in{grid-template-columns:repeat(2,minmax(0,1fr))}.pf:nth-child(3){border-left:0;padding-left:0}.pf:nth-child(n+3){border-top:1px solid var(--line)}.sd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.standards{padding:80px 0}}
@media (max-width:520px){.sd-grid{grid-template-columns:1fr}}
/* Hero headline fades into a second line and back */
.hero-swap{display:grid}
/* One line leaves completely before the next arrives, so they never overlap into a muddy blend */
/* The leaving line fades out in place, then the new one rises gently into its spot */
.hero-swap>span{grid-area:1 / 1}
.hero-swap>span{opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .7s cubic-bezier(.4,0,.6,1),transform 0s linear .7s}
.hero-swap>span.on,.hero-swap:not(:has(.on))>.hs-a{opacity:1;transform:none;pointer-events:auto;transition:opacity 1.1s cubic-bezier(.22,1,.36,1) .65s,transform 1.1s cubic-bezier(.22,1,.36,1) .65s}
@media (prefers-reduced-motion:reduce){.hero-swap .hs-b{display:none}}
/* One wide sunbeam of colour bands. JS keeps its edges locked to the screen's four corners while the monitor turns. */
.sunbeam{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;filter:blur(7px);opacity:0}
.js-motion .sunbeam{display:block}
.scr-corners{position:absolute;inset:1.5cqw;pointer-events:none}
.scr-corners i{position:absolute;width:0;height:0}
.scr-corners i:nth-child(1){left:0;top:0}.scr-corners i:nth-child(2){right:0;top:0}.scr-corners i:nth-child(3){right:0;bottom:0}.scr-corners i:nth-child(4){left:0;bottom:0}
/* The light on the glass itself: colour bands spread across the whole screen as it turns, then dissolve into the site */
.screen-light{position:absolute;inset:1.5cqw;z-index:3;pointer-events:none;border-radius:.3cqw;opacity:0;--fill:0;--shift:0%;--blur:3px;
  background:linear-gradient(125deg,rgba(255,255,255,.62) 0%,rgba(236,230,255,.5) 30%,rgba(205,192,255,.4) 55%,rgba(190,225,255,.32) 80%,rgba(255,255,255,.22) 100%);
  background-size:180% 180%;background-position:var(--shift) 40%;
  -webkit-mask-image:radial-gradient(circle at 0% 0%,#000 calc(var(--fill) * 100%),transparent calc(var(--fill) * 100% + 30%));
  mask-image:radial-gradient(circle at 0% 0%,#000 calc(var(--fill) * 100%),transparent calc(var(--fill) * 100% + 30%));
  mix-blend-mode:screen;filter:blur(var(--blur))}
.beam-flash{position:absolute;inset:1.5cqw;z-index:3;pointer-events:none;opacity:0;border-radius:.3cqw;
  background:radial-gradient(60% 80% at 22% 18%,#fff 0,rgba(255,214,150,.85) 22%,rgba(255,140,200,.6) 42%,rgba(150,120,255,.5) 62%,rgba(80,200,255,.3) 82%,rgba(80,200,255,0) 100%);mix-blend-mode:screen}
.screen-stack{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.screen-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.screen-stack img+img{opacity:0}
.display-screen .screen-stack{inset:1.5cqw;border-radius:.3cqw}
.screen-off{position:absolute;inset:1.5cqw;border-radius:.3cqw;background:#050606;opacity:0;pointer-events:none;z-index:2}
.js-motion .screen-off{opacity:1}
.now{margin-top:26px;font-size:15px;color:var(--ink-2);min-height:22px;text-align:center}
.now b{color:var(--ink);font-weight:600}

.facts{display:flex;list-style:none;margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts li{flex:1;display:flex;flex-direction:column;gap:2px;padding:14px 0 14px 16px;border-left:1px solid var(--line)}
.facts li:first-child{padding-left:0;border-left:0}
.facts b{font-size:24px;font-weight:800;font-stretch:118%;letter-spacing:-.02em;line-height:1.1;color:var(--violet)}
.facts span{font-size:13px;font-weight:600;color:var(--ink-2)}

/* Mobile menu and current page */
.nav ul a[aria-current=page]{opacity:1;font-weight:700;text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:2px;text-underline-offset:6px}
.nav-menu{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px;margin-left:-10px}
.nav-menu span{display:block;width:22px;height:2.5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.nav-menu[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-menu[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{display:flex;flex-direction:column;padding:8px 24px 22px;border-top:1px solid var(--line)}
.mobile-nav[hidden]{display:none}
.mobile-nav a{padding:14px 0;font-size:22px;font-weight:800;font-stretch:115%;text-decoration:none;border-bottom:1px solid var(--line)}

/* Hexy */

@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}

/* Page header (inner pages) */
.page-head{padding:96px 0 40px}
.page-head p{font-size:clamp(18px,2vw,22px);color:var(--ink-2);margin-top:22px;max-width:52ch}
.page-head h1{max-width:18ch}
.ph-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.ph-hexy{width:min(260px,30vw);height:auto}

/* Home teasers */
.teaser{padding:110px 0 100px}
.teaser-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.teaser-head p{font-size:19px;color:var(--ink-2);max-width:40ch}
.teaser-head.with-hexy{align-items:center}
.teaser-hexy{width:min(200px,34vw);height:auto}
.more{margin-top:40px}
.work-teaser{background:var(--paper-2)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px;margin-top:46px}
.wt-card{display:block;border:0;background:none;padding:0;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.wt-card .display{display:block;transition:transform .5s var(--ease)}
.wt-card:hover .display{transform:translateY(-6px)}
.wt-card .display-screen{display:block}
.wt-card .display-screen img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.3cqw;display:block}
.wt-meta{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:15px;color:var(--ink-2)}
.wt-meta b{font-size:20px;font-stretch:115%;color:var(--ink)}
.inspo-teaser{background:var(--night);color:#EEEFEB}
.inspo-teaser .teaser-head p{color:var(--mist)}
.teaser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.it-card{display:block;text-decoration:none;background:var(--night-2);border:1px solid var(--night-line);border-radius:18px;padding:8px 8px 14px;transition:border-color .3s,transform .4s var(--ease)}
.it-card:hover{border-color:var(--violet-soft);transform:translateY(-4px)}
.it-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:11px}
.it-card b{display:block;margin:10px 4px 0;font-size:15px}
.it-card span{display:block;margin:2px 4px 0;font-size:12px;color:var(--mist)}
.mini-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.mini{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 24px 26px;transition:border-color .3s,transform .4s var(--ease)}
.mini:hover{border-color:var(--ink);transform:translateY(-4px)}
.mini b{font-size:22px;font-stretch:118%}
.mp{font-size:46px;font-weight:800;font-stretch:118%;letter-spacing:-.03em;line-height:1}
.mp small{font-size:16px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.mb{color:var(--ink-2);font-size:15px}
.mini.featured{background:var(--night);color:#EEEFEB;border-color:var(--night)}
.mini.featured .mp small,.mini.featured .mb{color:var(--mist)}

/* Why page */
.growth{padding:110px 0;background:var(--paper-2)}
.growth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:48px}
.g-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px 30px 34px;overflow:hidden}
.g-card b{display:block;font-size:26px;font-stretch:115%;letter-spacing:-.02em}
.g-card b::before{content:"";display:block;width:26px;height:30px;margin-bottom:18px;background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.g-card p{color:var(--ink-2);margin-top:10px;max-width:46ch}
.g-card.with-hexy{padding-right:170px}
.g-card.with-hexy img{position:absolute;right:6px;bottom:4px;width:170px;height:auto}
.ba-section,.calc-section,.reviews,.included,.faq{padding:110px 0}
.sub{font-size:19px;color:var(--ink-2);margin-top:16px;max-width:52ch}
.ba-list{display:grid;gap:44px;margin-top:46px}
.ba-frame{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line)}
.ba-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ba-before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--p);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.ba-handle::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--violet);color:#fff;font-weight:800;font-size:18px;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ba-frame input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-tag{position:absolute;top:14px;font-size:13px;font-weight:700;padding:6px 12px;border-radius:999px;pointer-events:none}
.ba-tag.before{left:14px;background:rgba(21,24,22,.8);color:#fff}
.ba-tag.after{right:14px;background:var(--violet);color:#fff}
.ba figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:var(--ink-2)}
.ba figcaption b{font-size:20px;font-stretch:115%;color:var(--ink)}
.calc-section{background:var(--night);color:#EEEFEB}
.calc-section .sub{color:var(--mist)}
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;margin-top:46px}
.calc-inputs{display:grid;gap:22px;background:var(--night-2);border:1px solid var(--night-line);border-radius:26px;padding:30px}
.calc-inputs label{display:grid;grid-template-columns:1fr auto;gap:10px;font-size:15px;font-weight:600}
.calc-inputs output{font-weight:800;font-variant-numeric:tabular-nums;color:var(--violet-soft)}
.calc-inputs input{grid-column:1 / -1;width:100%;accent-color:var(--violet);height:28px}
.calc-plan{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px;font-weight:600}
.calc-plan span{margin-right:6px}
.calc-plan button{font:600 14px var(--font);border:1px solid var(--night-line);background:none;color:#EEEFEB;border-radius:999px;padding:9px 14px;cursor:pointer}
.calc-plan button[aria-pressed=true]{background:var(--violet);border-color:var(--violet)}
.calc-out{display:grid;gap:14px;align-content:start}
.co{border-radius:26px;padding:26px 28px}
.co span{display:block;font-size:15px;font-weight:600}
.co b{display:block;font-size:clamp(44px,5vw,64px);font-weight:800;font-stretch:118%;letter-spacing:-.03em;line-height:1;margin-top:8px;font-variant-numeric:tabular-nums}
.co small{display:block;margin-top:8px;font-size:14px}
.co.co-old{background:var(--night-2);border:1px solid var(--night-line);color:var(--mist)}
.co.co-old b{color:#EEEFEB}
.co.co-hex{background:var(--violet);color:#fff}
.co-note{font-size:17px;line-height:1.5;color:#EEEFEB;padding:4px 4px 0}
/* Real-price tiers and the quote builder */
.cost-tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.ct{background:var(--night-2);border:1px solid var(--night-line);border-radius:22px;padding:22px 22px 24px}
.ct span{font-size:15px;font-weight:700;color:var(--mist)}
.ct b{display:block;font-size:clamp(24px,2.4vw,32px);font-weight:800;font-stretch:112%;letter-spacing:-.02em;line-height:1.1;margin-top:10px;font-variant-numeric:tabular-nums}
.ct small{display:block;font-size:13px;color:var(--mist);margin-top:4px}
.ct p{font-size:15px;line-height:1.45;margin-top:14px;color:#D5D8E4}
.cost-h{font-size:clamp(30px,3.6vw,46px);font-weight:800;font-stretch:118%;letter-spacing:-.025em;line-height:1.05;margin-top:80px}
.cp-group{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}
.calc-inputs{min-width:0}
.calc-inputs .cp-row select{min-width:0;max-width:60%}
.cp-group legend{font-size:14px;font-weight:800;color:var(--violet-soft);margin-bottom:8px;padding:0}
#costPick{align-content:start}
#costPick + .calc-out{position:sticky;top:84px;align-self:start}
.calc-inputs .cp,.calc-inputs .cp-row{grid-template-columns:none}
.calc-inputs .cp input,.calc-inputs .cp-row select{grid-column:auto}
.calc-inputs .cp{display:flex;gap:12px;align-items:center;background:var(--night);border:1px solid var(--night-line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.cp:hover{border-color:var(--violet-soft)}
.cp:has(input:checked){border-color:var(--violet);background:#221B5C}
.cp input{width:20px;height:20px;accent-color:var(--violet);flex:none;margin:0}
.cp b{display:block;font-size:15px;font-weight:700}
.cp small{display:block;font-size:13px;color:var(--mist);margin-top:2px;font-variant-numeric:tabular-nums}
.calc-inputs .cp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;font-weight:600}
.cp-row select{font:700 14px var(--font);color:#EEEFEB;background:var(--night);border:1px solid var(--night-line);border-radius:10px;padding:9px 10px;min-height:44px}
.cp-fine{font-size:13px;line-height:1.5;color:var(--mist)}
.co-break{list-style:none;display:grid;gap:0;border-top:1px solid var(--night-line);margin-top:4px}
.co-break li{display:flex;justify-content:space-between;gap:14px;padding:12px 4px;border-bottom:1px solid var(--night-line);font-size:14px;color:var(--mist)}
.co-break b{color:#EEEFEB;font-variant-numeric:tabular-nums;white-space:nowrap}
.co.co-hex span{font-weight:700}
.cost-src{font-size:13px;line-height:1.6;color:var(--mist);margin-top:28px;max-width:80ch}
.cost-src a{color:#C9BDFF}
@media (max-width:900px){.cost-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cost-tiers{grid-template-columns:1fr}}
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.rv{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px}
.rv p{font-size:19px;line-height:1.45}
.rv footer{margin-top:16px;font-size:14px;color:var(--ink-2)}

/* Plans page */
.page-head + .plans{padding-top:20px}
.included{background:var(--paper-2)}
.inc-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.inc-grid li{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px 24px 26px}
.inc-grid b{display:block;font-size:20px;font-stretch:115%}
.inc-grid span{display:block;color:var(--ink-2);margin-top:6px;font-size:15px}
.faq-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:56px;align-items:start}
.faq-side{position:sticky;top:96px}
.faq .faq-side h2{max-width:10ch}
.faq-ask{margin-top:30px;background:var(--night);color:#EEEFEB;border-radius:24px;padding:24px}
.faq-ask img{width:120px;height:auto;display:block;margin-bottom:6px}
.faq-ask b{display:block;font-size:20px;font-stretch:112%}
.faq-ask p{color:var(--mist);margin:6px 0 18px;font-size:15px}
.faq-group+.faq-group{margin-top:40px}
.faq-group h3{font-size:14px;font-weight:800;color:var(--violet);margin-bottom:6px}
.faq-group .faq-list{margin-top:0}
@media (max-width:900px){.faq-in{grid-template-columns:1fr;gap:30px}.faq-side{position:static}}
.faq-list{margin-top:40px;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font-size:20px;font-weight:700;font-stretch:110%;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:28px;color:var(--violet);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ink-2);max-width:62ch}

/* How page: text chat */
.steps-long{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.chat-demo{padding:110px 0;background:var(--paper)}
.chat-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center}
.chat{position:relative;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:30px 26px 150px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;padding:12px 16px;border-radius:20px;font-size:16px;opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.msg.in{opacity:1;transform:none}
.msg:nth-child(2){transition-delay:.5s}.msg:nth-child(3){transition-delay:1s}.msg:nth-child(4){transition-delay:1.5s}
.msg.them{align-self:flex-start;background:var(--paper-2);border-bottom-left-radius:6px}
.msg.us{align-self:flex-end;background:var(--violet);color:#fff;border-bottom-right-radius:6px}
.chat-hexy{position:absolute;right:14px;bottom:6px;width:150px;height:auto}

/* Contact with Hexy */
.contact-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center}
.contact-hexy{width:min(300px,30vw);height:auto;background:#EEEFEB;border-radius:44px;padding:18px 10px 6px;box-shadow:0 20px 50px rgba(20,10,80,.35);transform:rotate(4deg)}
.foot-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-bottom:16px}
.foot-links a{color:#EEEFEB;text-decoration:none;font-weight:600;font-size:14px;padding:10px 0}
.foot-links a:hover{color:var(--violet-soft)}
.foot-social{display:flex;flex-wrap:wrap;gap:10px 12px;margin:4px 0 18px}
.foot-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--night-line);border-radius:999px;color:#EEEFEB;text-decoration:none;font-weight:600;font-size:14px;transition:border-color .2s,color .2s}
.foot-social a:hover,.foot-social a:focus-visible{border-color:var(--violet-soft);color:var(--violet-soft)}
.foot-social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.foot-social svg .dot{fill:currentColor;stroke:none}

/* Why page: off your plate */
.plate{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:40px;align-items:center;margin-top:48px;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:36px 36px 36px 40px}
.plate-head h2{font-size:clamp(34px,4vw,52px);font-weight:800;font-stretch:125%;letter-spacing:-.025em;line-height:1}
.plate-head p{color:var(--ink-2);margin-top:14px;font-size:17px;max-width:30ch}
.plate-hexy{width:190px;height:auto;margin-top:18px}
.plate-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plate-list li{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;background:var(--paper);border-radius:16px;padding:14px 16px;line-height:1.3}
.plate-list li::before{content:"✓";flex:none;display:grid;place-items:center;width:30px;height:34px;color:#fff;font-size:15px;font-weight:800;background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* Versus: big upfront numbers */
.vs-big{font-size:clamp(48px,6vw,80px);font-weight:800;font-stretch:118%;letter-spacing:-.035em;line-height:1;margin:6px 0 20px}
.vs-big small{display:block;font-size:15px;font-weight:600;letter-spacing:0;font-stretch:100%;margin-top:10px;opacity:.8}
.vs.old .vs-big{color:#5D6A8A}
.vs.old .vs-big s{text-decoration-thickness:4px}
.vs.old .vs-big small{color:var(--ink-2)}
.vs{padding:34px 32px 22px}

/* Old way vs Hex */
.versus{padding:120px 0}
.versus h2{font-size:clamp(38px,5vw,68px);max-width:18ch}
.vs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:52px}
.vs{border-radius:26px;padding:32px 30px 20px}
.vs h3{display:flex;align-items:center;gap:10px;font-size:24px;font-stretch:115%;letter-spacing:-.02em;margin-bottom:14px}
.vs ul{list-style:none}
.vs li{display:flex;gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid;font-size:17px}
.vs.old{background:var(--paper-2);color:var(--ink-2)}
.vs.old li{border-color:var(--line)}
.vs.old li::before{content:"✕";font-size:13px;color:#5D6A8A;font-weight:700}
.vs.hex-side{background:var(--violet);color:#fff}
.vs.hex-side .hex{fill:#fff}
.vs.hex-side .hex .hex-h{fill:var(--violet)}
.vs.hex-side li{border-color:rgba(255,255,255,.22)}
.vs.hex-side li::before{content:"✓";font-size:14px;font-weight:700;color:#D9D2FF}

/* Statement: words light up as you scroll */
.statement{padding:120px 0 130px}
.words{font-size:clamp(30px,4.4vw,60px);line-height:1.08;font-weight:800;font-stretch:112%;letter-spacing:-.02em;max-width:1180px}
.words .w{color:#C3C7C1;transition:color .25s}
.words .w.on{color:var(--ink)}

/* Studio Display style monitor */
.display{position:relative;container-type:inline-size}
.display-screen{position:relative;aspect-ratio:16/9.6;background:#0a0a0b;border-radius:1.6cqw;padding:1.5cqw;
  box-shadow:inset 0 0 0 .3cqw #c9cbcf,inset 0 0 0 .5cqw #1a1a1c,0 0 0 .06cqw #8e9095,0 3cqw 6cqw rgba(0,0,0,.18)}
.display-screen>img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:.3cqw;display:block}
.display-screen::before{content:"";position:absolute;z-index:3;top:.55cqw;left:50%;width:.55cqw;height:.55cqw;margin-left:-.27cqw;border-radius:50%;background:#1d2433}
.display-screen::after{content:"";position:absolute;z-index:4;inset:1.5cqw;border-radius:.3cqw;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.035) 36%,rgba(255,255,255,0) 36.2%)}
.display-neck{width:20cqw;height:13cqw;margin:0 auto;clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  background:linear-gradient(90deg,#9fa1a5 0%,#e4e5e8 30%,#f3f4f6 50%,#d9dadd 70%,#9a9ca0 100%)}
.display-foot{width:30cqw;height:1.5cqw;margin:0 auto;border-radius:.4cqw .4cqw 1cqw 1cqw;
  background:linear-gradient(#eef0f2,#b9bbbf);box-shadow:0 1.4cqw 2.4cqw rgba(0,0,0,.22)}

/* Phone */
.iphone{position:relative;container-type:inline-size}
.iphone::before{content:"";position:absolute;left:-2.9cqw;top:20%;width:1.4cqw;height:7%;border-radius:1cqw 0 0 1cqw;background:#76787c;
  box-shadow:0 13cqw 0 #76787c,0 -9cqw 0 #76787c}
.iphone::after{content:"";position:absolute;right:-2.9cqw;top:28%;width:1.4cqw;height:12%;border-radius:0 1cqw 1cqw 0;background:#76787c}
.iphone-screen{position:relative;border:3.4cqw solid #050506;border-radius:15.5cqw;overflow:hidden;background:#000;aspect-ratio:600/1236;
  box-shadow:0 0 0 .45cqw #2c2d30,0 0 0 .9cqw #5b5d61,0 0 0 1.3cqw #9b9da1,0 0 0 1.7cqw #6b6d71,0 5cqw 12cqw rgba(0,0,0,.30),0 2cqw 4cqw rgba(0,0,0,.18)}
.iphone-screen>img{width:100%;height:100%;object-fit:cover;object-position:top}
.iphone-screen::before{content:"";position:absolute;z-index:3;top:2.4cqw;left:50%;transform:translateX(-50%);width:30cqw;height:8.6cqw;border-radius:5cqw;
  background:radial-gradient(circle at 78% 50%,#1d2638 0 1.3cqw,#000 1.5cqw)}
.iphone-screen::after{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 30%,rgba(255,255,255,0) 30.3%)}

/* Client sections: text beside the screen, alternating sides */
.client{padding:130px 0;overflow:hidden}
.client.dark{background:var(--night);color:#EEEFEB}
.client.light{background:var(--paper-2)}
.client-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.client.flip .client-copy{order:2}
.client .type{font-size:15px;color:var(--ink-2);font-weight:600}
.client.dark .type{color:var(--mist)}
.client h2{font-size:clamp(40px,5vw,70px);margin-top:12px}
.client .tag{font-size:20px;margin-top:16px;max-width:28ch}
.client.dark .tag{color:#D5D8D3}
.palette{display:flex;gap:16px;list-style:none;margin-top:30px}
.palette li{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.client.dark .palette li{color:var(--mist)}
.palette i{display:block;width:44px;height:50px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--line);padding:1.5px}
.palette i::after{content:"";display:block;width:100%;height:100%;clip-path:inherit;background:var(--c)}
.client.dark .palette i{background:var(--night-line)}
.devices{position:relative}
.devices .iphone{position:absolute;left:-7%;bottom:10%;width:22%}
.client.flip .devices .iphone{left:auto;right:-7%}
.screen-dev{cursor:zoom-in}
/* Laptop (Work page): aluminium base, dark bezel, lid hinged at the bottom so it can open */
.laptop{position:relative;container-type:inline-size;perspective:1800px;padding-top:2%}
.lt-lid{position:relative;margin:0 7%;background:#16171A;border-radius:3.2cqw 3.2cqw .8cqw .8cqw;padding:2.2cqw 2.2cqw 2.6cqw;transform-origin:50% 100%;box-shadow:inset 0 0 0 .3cqw #3B3D42,0 -1cqw 4cqw -2cqw rgba(0,0,0,.25);backface-visibility:hidden}
.lt-lid::before{content:"";position:absolute;left:50%;top:.9cqw;width:.7cqw;height:.7cqw;margin-left:-.35cqw;border-radius:50%;background:#2E3036}
.lt-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:.5cqw;background:#000}
.lt-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.lt-screen::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12) 0,rgba(255,255,255,0) 38%);pointer-events:none}
.lt-base{position:relative;height:2.6cqw;background:linear-gradient(180deg,#F1F2F4 0,#D3D5DA 45%,#AEB1B8 100%);border-radius:.4cqw .4cqw 3.5cqw 3.5cqw / .4cqw .4cqw 2.6cqw 2.6cqw;box-shadow:0 2.4cqw 3.5cqw -1.6cqw rgba(20,22,30,.45)}
.lt-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);background:linear-gradient(180deg,#B9BCC2,#CDD0D5);border-radius:0 0 1.4cqw 1.4cqw}

/* Phone gallery */
.gallery{padding:120px 0 90px}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.quiz-sec h2,.diy h2,.updates h2,.team h2,.work-show h2,.gallery h2,.plans h2,.how h2,.inspo h2,.inspo h1,.tiktok h2,.page-head h1,.teaser h2,.growth h2,.ba-section h2,.calc-section h2,.reviews h2,.included h2,.faq h2,.chat-demo h2{font-size:clamp(38px,5vw,68px);max-width:16ch}
.rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px max(24px,calc((100vw - 1180px)/2 + 24px)) 20px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 auto;width:min(310px,74vw);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:24px 24px 0;overflow:hidden;cursor:pointer;transition:transform .5s var(--ease),border-color .3s}
.card:hover{border-color:var(--ink)}
.card p{font-size:14px;font-weight:600;color:var(--ink-2)}
.card h3{font-size:24px;font-stretch:115%;letter-spacing:-.02em;margin:2px 0 22px;line-height:1.1}
.card .iphone{width:76%;margin:0 auto -18%}
.rail-ctl{display:flex;gap:10px;flex:none}
.rbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.rbtn:hover{border-color:var(--ink)}

/* Inspiration gallery */
.inspo{background:var(--night);color:#EEEFEB;padding:130px 0 110px;overflow:hidden}
.inspo .lede,.tiktok .lede{font-size:clamp(17px,1.8vw,20px);color:var(--mist);max-width:56ch;margin-top:20px}
.note{display:inline-block;margin-top:22px;font-size:14px;font-weight:600;border:1px solid currentColor;border-radius:999px;padding:8px 14px}
.inspo .note{color:var(--violet-soft)}
.inspo-stage{width:min(940px,88vw);margin:60px auto 0}
.inspo-stage{position:relative}
.inspo-stage .display-screen>img{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.inspo-arrow{position:absolute;top:30%;width:56px;height:56px;border-radius:50%;border:0;background:var(--violet);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:6;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s var(--ease),background .2s}
.inspo-arrow:hover{background:var(--violet-2);transform:scale(1.08)}
.inspo-arrow:active{transform:scale(.94)}
.inspo-arrow.prev{left:-28px}
.inspo-arrow.next{right:-28px}
.inspo-count{position:absolute;right:0;bottom:6px;font-size:13px;font-weight:600;color:var(--mist);font-variant-numeric:tabular-nums}
.inspo-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:40px;max-width:988px}
.inspo-meta h2{font-size:30px;font-stretch:115%;letter-spacing:-.02em}
.inspo-meta p{color:var(--mist);font-size:15px;margin-top:4px}
.inspo-meta .idea{color:#EEEFEB;font-size:18px;margin-top:12px;max-width:52ch}
.inspo-meta .link{white-space:nowrap;margin-top:10px}
.inspo-picks{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px max(24px,calc((100vw - 988px)/2 + 24px)) 6px;scrollbar-width:none}
.inspo-picks::-webkit-scrollbar{display:none}
.pick{flex:0 0 auto;width:190px;scroll-snap-align:start;background:var(--night-2);border:1px solid var(--night-line);border-radius:16px;padding:8px 8px 12px;color:#EEEFEB;text-align:left;cursor:pointer;font-family:inherit;transition:border-color .3s}
.pick img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:9px}
.pick b{display:block;font-size:14px;margin:10px 4px 0;font-weight:600}
.pick span{display:block;font-size:12px;color:var(--mist);margin:2px 4px 0}
.pick[aria-pressed=true]{border-color:var(--violet-soft)}

/* TikTok section */
.tiktok{padding:130px 0 110px}
.tiktok .lede{color:var(--ink-2)}
.tiktok .note{color:var(--violet)}
.tt-rail{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:44px max(24px,calc((100vw - 1180px)/2 + 24px)) 20px;scrollbar-width:none}
.tt-rail::-webkit-scrollbar{display:none}
.tt{flex:0 0 auto;width:325px;scroll-snap-align:start}
.tt .tiktok-embed{margin:0!important;border-radius:18px;overflow:hidden}
.tt p{font-size:15px;margin-top:12px;color:var(--ink-2)}
.tt p b{color:var(--ink)}

/* Plans */
.plans{padding:130px 0;background:var(--paper)}
.plans .sub{font-size:20px;color:var(--ink-2);margin-top:18px;max-width:46ch}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:32px 30px 30px;display:flex;flex-direction:column}
.plan.featured{background:var(--night);color:#EEEFEB;border-color:var(--night)}
.plan .badge{align-self:flex-start;font-size:12px;font-weight:700;color:#fff;background:var(--violet);padding:5px 10px;border-radius:999px;position:absolute;top:30px;right:28px}
.plan h3{font-size:30px;font-stretch:118%;letter-spacing:-.02em}
.plan .blurb{color:var(--ink-2);margin-top:6px}
.plan.featured .blurb{color:var(--mist)}
.plan .price{margin:28px 0 24px;font-size:16px;color:var(--ink-2)}
.plan.featured .price{color:var(--mist)}
.plan .price span{display:block;font-size:64px;font-weight:800;font-stretch:118%;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.plan.featured .price span{color:#fff}
.plan .price{margin-bottom:10px}
.plan .term{display:inline-block;margin:0 0 22px;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--paper);color:var(--ink-2)}
.plan.featured .term{background:var(--night-2);color:#C9BDFF}
.plan .btn{align-self:flex-start}
.plan:not(.featured) .btn{background:var(--ink)}
.plan:not(.featured) .btn:hover{background:#2B302D}
.plan ul{list-style:none;margin-top:28px;border-top:1px solid var(--line)}
.plan.featured ul{border-color:var(--night-line)}
.plan li{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.plan.featured li{border-color:var(--night-line)}

/* How it works */
.how{background:var(--paper-2);padding:120px 0}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:52px;counter-reset:s}
.steps li{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:30px 28px 34px;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:50px;height:56px;margin-bottom:26px;color:#fff;font-weight:800;font-size:20px;
  background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.steps b{display:block;font-size:24px;font-stretch:115%;letter-spacing:-.02em}
.steps span{display:block;color:var(--ink-2);margin-top:8px}

/* Contact */
.contact{background:var(--violet);color:#fff;padding:140px 0}
.contact h2{font-size:clamp(44px,7vw,104px);max-width:12ch}
.contact p{font-size:20px;margin-top:20px;max-width:40ch;color:#E4DEFF}

.foot{background:var(--night);color:var(--mist);font-size:13px;padding:30px 0 40px;line-height:1.7}
.foot p+p{margin-top:8px}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.slide-in{opacity:0;transform:translateY(60px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.slide-in.in{opacity:1;transform:none}
.slide-in .iphone{opacity:0;transition:opacity 1s .35s var(--ease)}
.slide-in.in .iphone{opacity:1}
html.lenis,html.lenis body{height:auto}
.js-motion .card,.js-motion .pick{transition:border-color .3s}

/* Live site viewer */
.viewer{position:fixed;inset:0;z-index:100;background:rgba(14,16,15,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);color:#EEEFEB;display:flex;flex-direction:column;animation:vin .4s var(--ease)}
.viewer[hidden]{display:none}
@keyframes vin{from{opacity:0}to{opacity:1}}
.v-bar{display:flex;align-items:center;gap:18px;padding:12px 18px;font-size:15px}
.v-bar b{flex:1;font-size:17px;font-stretch:115%}
.v-seg{display:flex;background:#262B28;border-radius:999px;padding:3px}
.v-seg button{border:0;background:none;color:#EEEFEB;font:inherit;font-size:13px;padding:7px 14px;border-radius:999px;cursor:pointer}
.v-seg button[aria-pressed=true]{background:var(--violet)}
.v-close{border:0;background:#262B28;color:#EEEFEB;width:40px;height:40px;border-radius:50%;font-size:15px;cursor:pointer}
.v-body{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 18px 22px;min-height:0}
.v-frame{background:#000;overflow:hidden;transition:width .6s var(--ease),height .6s var(--ease),border-radius .6s var(--ease);animation:vpop .6s var(--ease)}
@keyframes vpop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.v-frame.phone{width:min(390px,100%);height:min(800px,100%);border-radius:40px;border:9px solid #050506;box-shadow:0 0 0 1.5px #3a3a3c}
.v-frame.desktop{width:100%;height:100%;border-radius:12px}
.v-frame iframe{width:100%;height:100%;border:0;background:#fff}

@media (max-width:1100px) and (min-width:901px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tablet and phone */
@media (max-width:900px){
  .nav ul{display:none}
  .nav-in{height:56px}
  .hero{padding-top:44px}
  .hero-copy{grid-template-columns:1fr;gap:22px}
  .js-motion .hero-sticky{top:56px;height:calc(100vh - 56px)}
  .js-motion .hero-stage{height:260vh}
  .hero-rig{width:92vw}
  .iphone.hero-phone{width:24%;right:-1%}
  .client{padding:90px 0}
  .client-in{grid-template-columns:1fr;gap:44px}
  .client.flip .client-copy{order:0}
  .devices{margin:0 4% 0 6%}
  .client.flip .devices .iphone{right:auto;left:-7%}
  .palette{gap:12px}
  .gal-head{display:block}
  .rail-ctl{margin-top:22px}
  .plan-grid,.steps,.vs-grid{grid-template-columns:1fr}
  .versus{padding:90px 0}
  .inspo-meta{flex-direction:column;gap:6px}
  .plate{grid-template-columns:1fr;gap:24px;padding:26px 20px}
  .plate-list{grid-template-columns:1fr}
  .plate-hexy{width:140px}
  .nav-menu{display:flex}
  .nav-cta{margin-left:auto}
  .logo{margin-right:0}
  .page-head{padding:60px 0 20px}
  .ph-in,.contact-in,.chat-in,.calc{grid-template-columns:minmax(0,1fr)}
  .calc-inputs{padding:22px 18px}
  .calc-inputs .cp-row{flex-wrap:wrap}
  .calc-inputs .cp-row select{max-width:100%}
  .ph-hexy{width:170px}
  .contact-hexy{width:190px;justify-self:end;margin-top:-20px}
  .work-grid{grid-template-columns:1fr;gap:30px}
  .teaser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mini-plans,.growth-grid,.inc-grid,.rv-grid{grid-template-columns:1fr}
  .steps-long{grid-template-columns:1fr!important}
  .g-card.with-hexy{padding-right:30px;padding-bottom:150px}
  .g-card.with-hexy img{width:150px}
  .teaser,.growth,.ba-section,.calc-section,.reviews,.included,.faq,.chat-demo{padding:80px 0}
  .ba-handle::after{width:42px;height:42px;font-size:15px}
  .inspo-arrow{width:44px;height:44px;font-size:24px;top:22%}
  .inspo-arrow.prev{left:-14px}
  .inspo-arrow.next{right:-14px}
  .statement{padding:90px 0}
  .gallery,.inspo,.tiktok,.plans,.how{padding-top:90px;padding-bottom:80px}
  .contact{padding:100px 0}
  .v-seg{display:none}
  .v-frame.phone{width:100%;height:100%;border-radius:20px;border-width:0}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.slide-in,.slide-in .iphone{opacity:1;transform:none;transition:none}
  .words .w{color:var(--ink)}
  .viewer,.v-frame{animation:none}
}

.plan .plus{margin-top:26px;font-size:14px;font-weight:700;color:var(--violet)}
.plan.featured .plus{color:var(--violet-soft)}
.plan .plus + ul{margin-top:10px}
/* Home: our work big screen */
.work-show{background:var(--paper-2);padding:110px 0 100px;overflow:hidden}
.ws-stage{position:relative;width:min(940px,88vw);margin:50px auto 0}
.ws-display,.iphone.ws-phone{cursor:zoom-in}
/* Our work intro: an angled laptop opens first, then sweeps into the big monitor */
.ws-laptop{display:none;position:absolute;left:14%;width:72%;top:6%;z-index:2;pointer-events:none;transform-origin:50% 60%}
.js-motion .ws-laptop{display:block;opacity:0}
.ws-rig{position:relative;transform-style:preserve-3d;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.ws-rig.turning{cursor:grabbing}
.ws-rig img{-webkit-user-drag:none;user-drag:none}
.ws-rig .iphone.ws-phone{bottom:12%}
.ws-hint{display:none;text-align:center;margin-top:14px;font-size:14px;font-weight:700;color:#D5D8E4}
.js-motion .ws-hint{display:block}
.ws-stage .display-screen img,.ws-phone img,.ws-meta{transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.ws-stage .display-screen img.ws-out,.ws-phone img.ws-out,.ws-meta.ws-out{opacity:0;transform:scale(.985);transition-duration:.45s;transition-timing-function:cubic-bezier(.4,0,1,1)}
.ws-meta.ws-out{transform:translateY(6px)}
.iphone.ws-phone{position:absolute;right:-5%;bottom:12%;width:20%}
.ws-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:40px;max-width:988px}
.ws-meta .type{font-size:15px;font-weight:600;color:var(--ink-2)}
.ws-meta h3{font-size:clamp(34px,4vw,52px);font-weight:800;font-stretch:125%;letter-spacing:-.025em;line-height:1;margin-top:8px}
.ws-meta .tag{font-size:19px;margin-top:10px}
.ws-meta .palette{margin-top:20px}
.ws-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ws-count{font-size:14px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* The section wears the current site's hero: its screenshot blown up and blurred so only the colour and shapes remain */
.work-show{position:relative;isolation:isolate;background:var(--night);color:#EEEFEB;--ws-tint:#18244A}
.ws-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--night)}
.ws-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 80%);transform-origin:var(--focus,50% 80%);filter:blur(24px) saturate(1.6) brightness(1.2);transform:scale(1.75);opacity:0;transition:opacity 1.1s var(--ease),transform 7s var(--ease)}
.ws-bg img.on{opacity:1;transform:scale(1.55)}
.ws-bg iframe{position:absolute;left:50%;top:50%;width:1600px;height:1000px;border:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.45);filter:blur(7px) saturate(1.4) brightness(1.2);opacity:0;transition:opacity 1.4s var(--ease)}
.ws-bg iframe.on{opacity:1}
.ws-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 50%,rgba(14,22,48,.05) 0,rgba(14,22,48,.25) 60%,rgba(14,22,48,.6) 100%),linear-gradient(180deg,rgba(14,22,48,.45) 0,rgba(14,22,48,0) 22%,rgba(14,22,48,0) 70%,rgba(14,22,48,.55) 100%)}
.work-show h2,.work-show .teaser-head p,.ws-meta{text-shadow:0 2px 18px rgba(8,12,28,.55)}.work-show .teaser-head p,.work-show .ws-meta .type,.work-show .ws-count{color:#D5D8E4}
.work-show .ws-meta .tag{color:#EEEFEB}
.work-show .palette li{color:#D5D8E4}
.work-show .palette i{background:rgba(255,255,255,.35)}
.work-show .link{color:#fff}
@media (max-width:900px){
  .work-show{padding:80px 0}
  .iphone.ws-phone{right:-2%;width:24%}
  .ws-meta{flex-direction:column;align-items:flex-start}
  .ws-side{align-items:flex-start}
}
/* Home: 3 steps to get started */
.steps3{padding:110px 0;background:var(--paper)}
.steps3 h2{font-size:clamp(38px,5vw,68px);max-width:16ch}
.s3-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:46px 0 34px;counter-reset:s3}
.s3-list li{counter-increment:s3;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px 26px 28px}
.s3-list li::before{content:counter(s3);display:grid;place-items:center;width:46px;height:52px;margin-bottom:20px;color:#fff;font-weight:800;font-size:19px;background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.s3-list b{display:block;font-size:22px;font-stretch:115%;letter-spacing:-.01em}
.s3-list span{display:block;color:var(--ink-2);margin-top:6px}
.link.light{color:#fff;text-decoration-color:#fff}

/* Get started page */
body[data-page=start] .contact{display:none}
.start{padding:10px 0 110px}
.start-in{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.start-form{display:grid;gap:22px}
.st-step{border:1px solid var(--line);background:var(--card);border-radius:26px;padding:28px 28px 30px;min-width:0}
.st-step legend{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:800;font-stretch:115%;padding:0;float:left;width:100%;margin-bottom:20px}
.st-num{display:grid;place-items:center;width:36px;height:40px;flex:none;color:#fff;font-size:16px;background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.st-plans{clear:both;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.st-plan{display:flex;flex-direction:column;gap:4px;text-align:left;font-family:inherit;color:inherit;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:16px 16px 18px;cursor:pointer;transition:border-color .2s,background .2s}
.st-plan:hover{border-color:var(--ink-2)}
.st-plan.on{border-color:var(--violet);background:#F1EEFF}
.st-plan b{font-size:18px;font-stretch:115%}
.stp-price{font-size:30px;font-weight:800;font-stretch:118%;letter-spacing:-.02em}
.stp-price small{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.stp-blurb{font-size:13px;color:var(--ink-2);line-height:1.4}
.st-mockup{clear:both;display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:16px;background:var(--paper);font-size:15px;cursor:pointer}
.st-mockup input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--violet)}
.st-grid{clear:both;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.st-grid label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:700}
.st-grid label small{font-weight:500;color:var(--ink-2)}
.st-grid .wide{grid-column:1 / -1}
.st-grid input,.st-grid textarea{font:16px var(--font);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;min-height:48px;transition:border-color .2s}
.st-grid input:focus,.st-grid textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px #DDD6FF}
.st-grid [aria-invalid=true]{border-color:#C2412D}
.st-pay{clear:both;color:var(--ink-2)}
.st-error{margin-top:14px;color:#A8321F;font-weight:700;font-size:15px}
.st-submit{margin-top:20px;width:100%;font-size:17px;padding:18px 24px}
.st-submit[disabled]{opacity:.6;cursor:wait}
.st-fine{margin-top:12px;font-size:13px;color:var(--ink-2);text-align:center}
.st-side{position:sticky;top:84px;display:grid;gap:10px}
.st-summary{background:var(--night);color:#EEEFEB;border-radius:26px;padding:28px}
.sum-k{font-size:13px;font-weight:700;color:var(--violet-soft)}
.st-summary h2{font-size:34px;font-stretch:125%;margin-top:4px}
.sum-price{font-size:52px;font-weight:800;font-stretch:118%;letter-spacing:-.03em;line-height:1;margin:14px 0 18px}
.sum-price small{font-size:16px;font-weight:600;color:var(--mist);letter-spacing:0}
.st-summary ul{list-style:none;display:grid;gap:8px;font-size:15px}
.sum-terms li::before{content:"✓ ";color:#9DF0B8;font-weight:800}
.sum-plus{margin-top:18px;font-size:13px;font-weight:700;color:var(--violet-soft)}
.sum-pts{margin:8px 0 18px}
.sum-pts li{color:#C9CDC7}
.st-summary .link{color:#fff;font-size:15px}
.st-hexy{width:190px;height:auto;justify-self:end;margin-top:-6px}
.st-done{padding:90px 0 130px;text-align:center}
.st-done img{width:220px;height:auto;margin:0 auto}
.st-done h2{font-size:clamp(40px,6vw,72px);margin-top:20px}
.st-done p{font-size:20px;color:var(--ink-2);max-width:46ch;margin:18px auto 0}
@media (max-width:900px){
  .s3-list{grid-template-columns:1fr}
  .steps3{padding:80px 0}
  .start-in{grid-template-columns:1fr}
  .st-side{position:static;order:-1}
  .st-hexy{display:none}
  .st-plans,.st-grid{grid-template-columns:1fr}
  .st-step{padding:22px 18px 24px}
  .facts b{font-size:20px}
}
@media (max-width:900px){.sum-pts,.sum-plus,.st-summary .link{display:none}.sum-price{font-size:40px;margin:8px 0 12px}}
/* Duolingo-style pressable buttons */
.btn{box-shadow:0 5px 0 var(--violet-deep,#3A22B8);transform:translateY(0);transition:background .2s,transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 0 #3A22B8}
.btn:active{transform:translateY(5px);box-shadow:0 0 0 #3A22B8}
.btn-light{box-shadow:0 5px 0 #C9BFFF}
.btn-light:hover{box-shadow:0 6px 0 #C9BFFF}
.plan:not(.featured) .btn{box-shadow:0 5px 0 #000}
.nav-cta{box-shadow:0 3px 0 #3A22B8;transition:transform .12s,box-shadow .12s,background .2s}
.nav-cta:active{transform:translateY(3px);box-shadow:none}

/* Home: steps with the build animation */
.s3-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:30px;align-items:center}
.s3-scene{width:100%;height:auto}

@media (max-width:900px){
  .hero-copy h1,.hero-scene,.hero-side{grid-column:1;grid-row:auto}
  /* bleed the scene to the screen edges and tuck it under the headline, so it reads as part of the page, not a framed picture */
  .hero-scene{max-width:none;width:calc(100% + 44px);justify-self:center;margin:-34px -22px -18px}
  .s3-top{grid-template-columns:1fr;gap:10px}
}
.ph-hexy{width:min(300px,30vw)}
.inspo-head{position:relative}
.inspo-hexy{position:absolute;right:24px;top:-30px;width:min(300px,28vw);height:auto}
.how-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.how-scene{width:100%;height:auto}
@media (max-width:900px){
  .inspo-hexy{position:static;width:200px;margin:-20px 0 0 -10px}
  .how-head{grid-template-columns:1fr}
}
/* Arrows beside the big screens */
.ws-stage,.inspo-stage{width:min(860px,76vw)}
.inspo-arrow{top:34%;width:64px;height:64px;padding:0;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);font-size:0;z-index:6;transition:transform .12s,box-shadow .12s,background .2s,color .2s}
.inspo-arrow svg{width:26px;height:26px}
.inspo-arrow:hover{background:var(--violet);color:#fff;transform:translateY(-1px)}
.inspo-arrow:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.inspo-arrow.prev{left:-104px}
.inspo-arrow.next{right:-104px}
.inspo .inspo-arrow{border-color:#fff;box-shadow:0 5px 0 #8C90A6}
.iphone.ws-phone{right:-3%}
@media (max-width:900px){
  .ws-stage,.inspo-stage{width:88vw;padding-bottom:86px}
  .inspo-arrow{top:auto;bottom:0;width:56px;height:56px}
  .inspo-arrow.prev{left:calc(50% - 72px)}
  .inspo-arrow.next{right:calc(50% - 72px)}
  .iphone.ws-phone{bottom:calc(86px + 12%)}
}
.ba-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.ba-col{border-radius:20px;padding:20px 22px 18px}
.ba-col h4{font-size:16px;font-weight:800;font-stretch:112%;margin-bottom:8px}
.ba-col ul{list-style:none;display:grid;gap:8px}
.ba-col li{display:flex;gap:10px;font-size:15px;line-height:1.4}
.ba-col.before{background:var(--paper-2);color:var(--ink-2)}
.ba-col.before li::before{content:"✕";color:#5D6A8A;font-weight:800}
.ba-col.after{background:var(--violet);color:#fff}
.ba-col.after li::before{content:"✓";color:#D9D2FF;font-weight:800}
@media (max-width:900px){.ba-why{grid-template-columns:1fr}}
.concept{display:inline-block;margin-left:8px;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--violet);border:1.5px solid currentColor;border-radius:999px;padding:2px 8px;vertical-align:2px}
.dark .concept{color:var(--violet-soft)}
.js-motion .hero-stage{height:380vh}
.rbtn{width:52px;height:52px;background:#fff;border:2px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:24px;font-weight:700;transition:transform .12s,box-shadow .12s,background .2s,color .2s}
.rbtn:hover{background:var(--violet);color:#fff;border-color:var(--ink)}
.rbtn:active{transform:translateY(4px);box-shadow:none}
/* Phone gallery: slow self-moving loop */
.rail.marquee{overflow:hidden;padding:44px 0 24px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:glide var(--dur,60s) linear infinite}
.marquee-track .card{scroll-snap-align:none}
@keyframes glide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 10px))}}
@media (prefers-reduced-motion:reduce){.rail.marquee{overflow-x:auto}.marquee-track{animation:none}.marquee-track [aria-hidden=true]{display:none}}

/* Get started: one step at a time */
.st-head{padding-bottom:10px}
.st-progress{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 40px;counter-reset:none}
.st-progress li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;color:var(--ink-2);padding:14px 16px;border-radius:16px;background:var(--paper-2);position:relative;overflow:hidden}
.st-progress li span{display:grid;place-items:center;width:32px;height:36px;flex:none;color:var(--ink-2);background:#fff;font-weight:800;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.st-progress li.on{background:var(--violet);color:#fff}
.st-progress li.on span{background:#fff;color:var(--violet)}
.st-progress li.done{background:#E3DDFF;color:var(--violet)}
.st-progress li.done span{background:var(--violet);color:#fff}
.st-panel{animation:stIn .45s var(--ease)}
@keyframes stIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.st-title{font-size:clamp(30px,3.6vw,46px);font-weight:800;font-stretch:125%;letter-spacing:-.025em;line-height:1;margin-bottom:26px;outline:none}
.st-panel .plan-grid{margin-top:0}
.st-alt{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:22px;background:var(--card);border:1.5px dashed var(--line);border-radius:22px;padding:20px 24px}
.st-alt p{max-width:52ch}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.btn-ghost:hover{background:var(--paper-2);box-shadow:0 6px 0 var(--ink)}
.st-cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
.st-cols .st-summary{position:sticky;top:90px}
.st-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.st-nav .btn{min-width:180px}
.st-summary .link{color:#fff;font-size:15px;margin-top:16px;padding:0}
.st-review{display:grid;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-bottom:22px}
.st-review div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:14px 20px;border-bottom:1px solid var(--line)}
.st-review div:last-child{border-bottom:0}
.st-review dt{font-size:14px;font-weight:700;color:var(--ink-2)}
.st-review dd{font-weight:600;word-break:break-word}
@media (max-width:900px){
  .st-progress{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:28px}
  .st-progress li{flex-direction:column;gap:6px;font-size:12px;padding:10px 6px;text-align:center}
  .st-cols{grid-template-columns:1fr;gap:24px}
  .st-cols .st-summary{position:static;order:-1}
  .st-review div{grid-template-columns:1fr;gap:2px}
  .st-alt{padding:18px}
}
@media (max-width:900px){.st-summary .link{display:inline-block}}
/* Legal pages */
.legal{padding:10px 0 110px}
.legal-in{max-width:760px}
.legal h2{font-size:24px;font-weight:800;font-stretch:115%;margin:38px 0 10px}
.legal p,.legal li{color:var(--ink-2);line-height:1.65}
.legal ul{padding-left:20px;display:grid;gap:8px;margin-top:8px}
.legal b{color:var(--ink)}
.legal a{color:var(--violet)}

/* 404 */
.nf{padding:90px 0 120px}
.nf-in{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.nf img{width:min(340px,40vw);height:auto}
.nf-code{font-size:18px;font-weight:800;color:var(--violet)}
.nf h1{font-size:clamp(44px,6vw,80px);margin-top:8px}
.nf p{font-size:20px;color:var(--ink-2);margin-top:14px}
body[data-page="404"] .contact{display:none}
@media (max-width:900px){.nf-in{grid-template-columns:1fr}.nf img{width:220px}}
/* Home: see your website in 10 seconds */
.pv{padding:110px 0;background:var(--paper-2);overflow:hidden}
/* "See your website in 10 seconds": on phones it stays on the home page; on computers it lives on How it works */
@media (min-width:901px){.pv-home{display:none}}
.pv-how{background:var(--paper)}
.pv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.pv-head h2{font-size:clamp(38px,5vw,68px);max-width:12ch}
.pv-head p{font-size:19px;color:var(--ink-2);max-width:40ch}
.pv-in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:48px;align-items:center;margin-top:46px}
.pv-form{display:grid;gap:20px;background:var(--card);border:1px solid var(--line);border-radius:26px;padding:26px}
.pv-form fieldset{border:0;padding:0;margin:0;min-width:0}
.pv-form legend,.pv-name{font-size:14px;font-weight:700}
.pv-name{display:grid;gap:8px}
.pv-name input{font:600 18px var(--font);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;min-height:50px}
.pv-name input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px #DDD6FF}
.pv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pv-chips button{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--font);color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:9px 14px;min-height:40px;cursor:pointer;transition:border-color .2s,background .2s}
.pv-chips button:hover{border-color:var(--ink-2)}
.pv-chips button[aria-pressed=true]{background:var(--violet);border-color:var(--violet);color:#fff}
.pv-swatches{display:flex;gap:10px;margin-top:10px}
.pv-swatches button{width:40px;height:44px;border:0;background:var(--c);cursor:pointer;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:transform .2s}
.pv-swatches button[aria-pressed=true]{transform:scale(1.18);outline:none;filter:drop-shadow(0 0 0 #000)}
.pv-swatches button[aria-pressed=true]::after{content:"✓";display:grid;place-items:center;height:100%;color:#fff;font-weight:800}
.pv-go{width:100%}
.pv-stage{position:relative;padding-right:6%}
.pv-screen{position:absolute;inset:1.5cqw;overflow:hidden;border-radius:.3cqw;background:#fff}
.pv-mobile{inset:0;border-radius:0}
.iphone.pv-phone{position:absolute;right:0;bottom:12%;width:19%}
.pv-hoot{position:absolute;left:-8%;bottom:-6%;width:26%;height:auto}
.pv-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:34px;background:var(--violet);color:#fff;border-radius:22px;padding:22px 26px}
.pv-cta p{max-width:60ch}
.pv-cta .btn{background:#fff;color:var(--violet);box-shadow:0 5px 0 #C9BFFF}

/* The mock website itself (drawn at 1200x750, or 390 wide for phone, then scaled) */
.pv-site{width:1200px;height:750px;transform-origin:0 0;background:var(--s);color:var(--d);font-family:"Archivo",sans-serif;overflow:hidden}
.pv-site.is-mobile{width:390px;height:803px}
.pv-elegant{font-family:"Fraunces",Georgia,serif}
.pv-friendly{font-family:"Nunito","Archivo",sans-serif}
.pvs-nav{display:flex;align-items:center;gap:40px;padding:26px 56px;background:#fff}
.is-mobile .pvs-nav{padding:18px 22px;justify-content:space-between}
.pvs-logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:24px;margin-right:auto;white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
.is-mobile .pvs-logo{font-size:18px;max-width:280px}
.pvs-logo i{display:grid;place-items:center;width:40px;height:44px;flex:none;font-style:normal;color:#fff;background:var(--m);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.pvs-nav nav{display:flex;gap:30px;font-size:18px;font-weight:600}
.pvs-btn,.pvs-ghost{display:inline-block;font-weight:800;font-size:18px;padding:15px 26px;border-radius:999px;background:var(--m);color:#fff;white-space:nowrap}
.pvs-ghost{background:transparent;color:var(--d);box-shadow:inset 0 0 0 2px var(--d)}
.pvs-burger{width:30px;height:18px;border-top:4px solid var(--d);border-bottom:4px solid var(--d)}
.pvs-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding:56px 56px 40px}
.is-mobile .pvs-hero{grid-template-columns:1fr;padding:34px 22px 26px}
.pvs-kick{font-size:18px;font-weight:700;color:var(--m)}
.pvs-hero .pvs-h1{font-size:66px;line-height:1.02;letter-spacing:-.02em;margin-top:14px;font-weight:800;word-break:break-word}
.is-mobile .pvs-hero .pvs-h1{font-size:40px}
.pv-bold .pvs-hero .pvs-h1{font-stretch:118%}
.pv-elegant .pvs-hero .pvs-h1{font-weight:600;letter-spacing:-.01em}
.pv-friendly .pvs-hero .pvs-h1{font-weight:900}
.pvs-hero .pvs-h1 em{font-style:normal;color:var(--m)}
.pv-elegant .pvs-hero .pvs-h1 em{font-style:italic}
.pvs-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.is-mobile .pvs-btn,.is-mobile .pvs-ghost{font-size:16px;padding:13px 20px}
.pvs-art{position:relative;height:330px;border-radius:30px;background:var(--m);display:grid;place-items:center}
.pv-friendly .pvs-art{border-radius:60px}
.pv-elegant .pvs-art{border-radius:180px 180px 20px 20px}
.pvs-icon{font-size:150px;filter:saturate(.9)}
.pvs-badge{position:absolute;left:-26px;bottom:26px;background:#fff;color:#F5A300;font-size:22px;padding:14px 20px;border-radius:18px;box-shadow:0 14px 30px rgba(0,0,0,.15)}
.pvs-badge small{display:block;color:var(--d);font-size:15px;font-weight:700;margin-top:2px}
.pvs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 56px}
.is-mobile .pvs-cards{grid-template-columns:1fr;padding:0 22px;gap:12px}
.pvs-cards div{background:#fff;border-radius:20px;padding:22px 24px}
.pvs-cards b{display:block;font-size:22px}
.pvs-cards span{display:block;font-size:16px;opacity:.75;margin-top:6px}
.pv-anim .pvs-piece{animation:pvDrop .7s cubic-bezier(.3,1.4,.5,1) both;animation-delay:calc(var(--i) * .45s)}
@keyframes pvDrop{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .pv{padding:80px 0}
  .pv-in{grid-template-columns:1fr;gap:30px}
  .pv-stage{order:-1;padding-right:8%}
  .pv-hoot{width:24%;left:-2%}
}
.pv-cta[hidden]{display:none}
/* Hoot tips */
.hoot-tip{display:flex;align-items:center;gap:14px;max-width:760px;margin:0 0 28px;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:12px 18px 12px 12px;position:relative}
.hoot-tip img{width:56px;height:56px;flex:none;border-radius:14px}
.hoot-tip p{font-size:15px;line-height:1.45}
.hoot-tip a{color:var(--violet);font-weight:700}
.hoot-tip.dark{background:var(--night-2);border-color:var(--night-line);color:#EEEFEB}
.hoot-tip.dark a{color:var(--violet-soft)}

/* Plans quiz */
.quiz-sec{padding:110px 0;background:var(--night);color:#EEEFEB}
.quiz-sec .sub{color:var(--mist)}
.quiz-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:50px;align-items:center}
.quiz-hoot{width:min(300px,70%);height:auto;margin-top:20px;transform-origin:50% 100%}
.quiz-hoot.qz-pop{animation:qzPop .55s cubic-bezier(.3,1.5,.5,1)}
@keyframes qzPop{0%{transform:scale(.8) translateY(14px);opacity:.3}60%{transform:scale(1.06) translateY(-6px);opacity:1}100%{transform:none}}
.quiz{background:#fff;color:var(--ink);border-radius:28px;padding:30px;min-height:360px;box-shadow:0 8px 0 #2A3866}
.qz-step{font-size:13px;font-weight:800;color:var(--violet)}
.qz-bar{height:8px;border-radius:8px;background:var(--paper-2);margin:10px 0 22px;overflow:hidden}
.qz-bar i{display:block;height:100%;background:var(--violet);border-radius:8px;transition:width .4s var(--ease)}
.quiz h3{font-size:clamp(26px,3vw,36px);font-weight:800;font-stretch:118%;letter-spacing:-.02em;line-height:1.05}
.qz-opts{display:grid;gap:10px;margin-top:22px}
.qz-opt{text-align:left;font:700 17px var(--font);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;box-shadow:0 4px 0 var(--line);transition:border-color .15s,transform .1s,box-shadow .1s}
.qz-opt:hover{border-color:var(--violet)}
.qz-opt:active{transform:translateY(4px);box-shadow:none}
.qz-back{margin-top:16px;padding:0}
.qz-result{color:var(--violet)}
.qz-result span{font-size:.55em;color:var(--ink-2);font-weight:700}
.qz-why{color:var(--ink-2);margin-top:8px}
.quiz ul{list-style:none;display:grid;gap:8px;margin:16px 0 6px}
.quiz li::before{content:"✓ ";color:var(--violet);font-weight:800}
@media (max-width:900px){.quiz-in{grid-template-columns:1fr;gap:20px}.quiz-sec{padding:80px 0}.quiz-hoot{width:170px}.quiz{padding:22px}}
/* Nav: free check-up link */
.nav ul a.nav-free{color:var(--violet);opacity:1;font-weight:700}
.nav.dark ul a.nav-free{color:var(--violet-soft)}

/* Speed badge */
.speed{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:14px;font-weight:700;background:#E8FBEF;color:#14703F;border-radius:999px;padding:7px 14px}
.client.dark .speed{background:rgba(61,220,132,.14);color:#9DF0B8}

/* Live status board */
.status{padding:10px 0 50px}
.status-in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 26px}
.status h2{display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800;font-stretch:115%}
.status p{color:var(--ink-2);font-size:14px;margin-top:4px}
.pulse-dot{width:12px;height:12px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pdot 2s infinite}
@keyframes pdot{70%{box-shadow:0 0 0 10px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.sb-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sb-list li{display:flex;align-items:center;gap:7px;font-size:13px;background:var(--paper);border-radius:999px;padding:6px 12px}
.sb-list li i{width:8px;height:8px;border-radius:50%;background:#C9CCC6}
.sb-list li.ok i{background:#3DDC84}
.sb-list li.slow i{background:#F5A300}
.sb-list li span{color:var(--ink-2);font-variant-numeric:tabular-nums}

/* Free check-up page */
.ck{padding:10px 0 110px}
.ck-form{display:flex;gap:12px;max-width:720px}
.ck-form input{flex:1;font:600 18px var(--font);color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:16px;padding:16px 18px;min-height:58px;min-width:0}
.ck-form input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px #DDD6FF}
.ck-loading{text-align:center;margin-top:40px}
.ck-loading img{width:min(560px,100%);height:auto}
.ck-loading p{font-size:18px;font-weight:700;color:var(--violet);margin-top:10px}
.ck-report{margin-top:46px}
.ck-top{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:30px}
.ck-shot .iphone{width:170px}
.ck-shot .iphone-screen{position:relative;overflow:hidden}
.ck-shot iframe{position:absolute;left:0;top:0;width:390px;height:844px;border:0;transform-origin:0 0;transform:scale(calc(158 / 390));pointer-events:none;background:#fff}
.ck-top.no-shot{grid-template-columns:1fr}
.ck-top.no-shot .ck-shot{display:none}
.ck-finds li.ck-group{background:none;border:0;padding:14px 0 2px;font-size:19px;font-weight:800;font-stretch:112%}
.ck-finds li.ck-group::before{content:none}
.ck-n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;margin-left:8px;border-radius:999px;background:#C2412D;color:#fff;font-size:15px;vertical-align:3px}
.ck-finds li.ck-more{display:block;background:none;border:0;padding:6px 0 0}
.ck-finds li.ck-more::before{content:none}
.ck-more summary{cursor:pointer;font-size:15px;font-weight:700;color:var(--ink-2);padding:10px 0;list-style:none}
.ck-more summary::-webkit-details-marker{display:none}
.ck-more summary::before{content:"✓ ";color:#1F9D55}
.ck-more ul{list-style:none;display:grid;gap:8px;margin-top:6px}
.ck-for{font-weight:700;color:var(--ink-2)}
.ck-grade-h{font-size:clamp(30px,4vw,46px);font-weight:800;font-stretch:118%;display:flex;align-items:center;gap:16px;margin-top:6px}
.ck-grade{display:grid;place-items:center;width:74px;height:84px;color:#fff;font-size:42px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.g-A{--g:#1F9D55}.g-B{--g:#5B3DF5}.g-C{--g:#E0A100}.g-D{--g:#E07C00}.g-F{--g:#C2412D}
.ck-grade{background:var(--g)}
.ck-scores{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.ck-score{background:var(--paper);border-radius:18px;padding:14px 16px;position:relative;overflow:hidden}
.ck-score b{display:block;font-size:34px;font-weight:800;color:var(--g)}
.ck-score span{font-size:13px;font-weight:700;color:var(--ink-2)}
.ck-score i{position:absolute;left:0;bottom:0;height:5px;width:var(--w);background:var(--g)}
.ck-sub{font-size:26px;font-weight:800;font-stretch:115%;margin:40px 0 14px}
.ck-finds{list-style:none;display:grid;gap:10px}
.ck-finds li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 18px;font-size:16px;line-height:1.45}
.ck-finds li::before{flex:none;font-weight:800;font-size:16px}
.ck-finds li.good::before{content:"✓";color:#1F9D55}
.ck-finds li.bad::before{content:"✕";color:#C2412D}
.ck-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:30px 0 14px;background:var(--violet);color:#fff;border-radius:22px;padding:24px 28px}
.ck-cta b{font-size:22px;font-stretch:112%}
.ck-cta p{color:#E4DEFF;margin-top:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){
  .ck-form{flex-direction:column}
  .ck-top{grid-template-columns:1fr;padding:22px}
  .ck-shot{display:none}
  .ck-scores{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-in{padding:18px}
}
.ck-teaser{padding:0 0 30px}
.ckt-in{display:grid;grid-template-columns:120px 1fr auto;gap:26px;align-items:center;background:var(--night);color:#EEEFEB;border-radius:28px;padding:22px 32px 22px 22px}
.ckt-in img{width:120px;height:auto}
.ckt-in h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;font-stretch:118%;line-height:1.05}
.ckt-in p{color:var(--mist);margin-top:6px}
@media (max-width:900px){.ckt-in{grid-template-columns:80px 1fr;padding:20px}.ckt-in img{width:80px}.ckt-in .btn{grid-column:1 / -1}}
/* Why page: DIY comparison */
.diy{padding:110px 0}
.diy-table{margin-top:40px;background:var(--card);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.dt-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;border-top:1px solid var(--line)}
.dt-row:first-child{border-top:0}
.dt-row span{padding:16px 20px;font-size:15px}
.dt-row span:first-child{font-weight:700}
.dt-head span{font-weight:800;font-size:16px}
.dt-hex{background:#F1EEFF;color:var(--violet);font-weight:800}
.dt-head .dt-hex{background:var(--violet);color:#fff}
@media (max-width:900px){.dt-row{grid-template-columns:1fr 1fr 1fr 1fr}.dt-row span{padding:12px 10px;font-size:12.5px}.dt-head span{font-size:12.5px}}

/* Why page: recently updated feed */
.updates{padding:20px 0 110px}
.up-list{list-style:none;display:grid;gap:10px;margin-top:36px;max-width:900px}
.up-list li{display:grid;grid-template-columns:110px 170px 1fr auto;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 18px}
.up-when{font-size:13px;font-weight:700;color:var(--ink-2)}
.up-what{color:var(--ink-2)}
.up-list i{font-style:normal;font-size:13px;font-weight:800;color:#14703F;background:#E8FBEF;border-radius:999px;padding:5px 11px;white-space:nowrap}
@media (max-width:900px){.up-list li{grid-template-columns:1fr auto;gap:4px 12px}.up-what{grid-column:1 / -1}}

/* Plans page: guarantee */
.guarantee{padding:0 0 90px}
.gu-in{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;background:#fff;border:2px solid #DDD6FF;border-radius:28px;padding:28px 34px}
.gu-check{display:grid;place-items:center;width:120px;height:120px;border-radius:32px;background:var(--violet);box-shadow:0 7px 0 #3A22C9}
.gu-check svg{width:72px;height:72px}
.gu-in h2{font-size:clamp(30px,3.6vw,46px);font-weight:800;font-stretch:122%;letter-spacing:-.02em}
.gu-in p{font-size:18px;color:var(--ink-2);margin-top:10px;max-width:58ch}
@media (max-width:900px){.gu-in{grid-template-columns:1fr;padding:22px}.gu-check{width:88px;height:88px;border-radius:24px}.gu-check svg{width:54px;height:54px}}
/* Sticky phone bar (phones only) */
.phone-bar{display:none}
@media (max-width:900px){
  .phone-bar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(238,239,235,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .phone-bar .btn{flex:1.4;text-align:center;padding:14px 10px}
  .phone-bar .pb-alt{flex:1;display:grid;place-items:center;font-weight:800;font-size:15px;text-decoration:none;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:0 4px 0 var(--ink)}
  body{padding-bottom:84px}
  body[data-page=start] .phone-bar{display:none}
  body[data-page=start]{padding-bottom:0}
}

/* Team */
.team{padding:20px 0 110px}
.tm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:40px}
.tm{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:18px 18px 22px}
.tm img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:18px;background:var(--paper-2)}
.tm-hoot img{object-fit:contain;padding:10px}
.tm b{display:block;font-size:20px;font-stretch:115%;margin-top:14px}
.tm span{display:block;font-size:14px;font-weight:700;color:var(--violet)}
.tm p{color:var(--ink-2);font-size:15px;margin-top:8px}

/* Book a call */
.book-call{padding:0 0 30px}
.bc-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--night);color:#EEEFEB;border-radius:24px;padding:24px 28px}
.bc-in h2{font-size:28px;font-weight:800;font-stretch:118%}
.bc-in p{color:var(--mist);margin-top:4px}

/* Referral */
.referral{padding:90px 0}
.rf-in{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:22px 32px 22px 22px}
.rf-in img{width:200px;height:auto}
.rf-in h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;font-stretch:122%;letter-spacing:-.02em;line-height:1.02}
.rf-in p{font-size:17px;color:var(--ink-2);margin-top:12px;max-width:56ch}
.rf-how{font-size:14px!important;font-weight:700;color:var(--violet)!important}
@media (max-width:900px){.rf-in{grid-template-columns:1fr;padding:20px}.rf-in img{width:150px}}
/* Client stories */
.sy-kick{font-size:14px;font-weight:700;color:var(--ink-2)}
.sy-kick a{color:var(--violet)}
.sy-head h1{margin-top:10px}
.sy-hero{width:min(900px,100%);margin:10px auto 60px}
.sy-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sy-cols section,.sy-today{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px}
.sy-cols h2,.sy-today h2{font-size:28px;font-weight:800;font-stretch:118%;margin-bottom:14px}
.sy-cols ul{list-style:none;display:grid;gap:10px}
.sy-cols li{display:flex;gap:10px;line-height:1.45;color:var(--ink-2)}
.sy-x li::before{content:"✕";color:#C2412D;font-weight:800}
.sy-v li::before{content:"✓";color:var(--violet);font-weight:800}
.sy-before{margin-top:20px}
.sy-before img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.sy-before figcaption{font-size:13px;color:var(--ink-2);margin-top:6px}
.sy-today{margin:20px 0 110px}
.sy-today p{font-size:19px}
@media (max-width:900px){.sy-cols{grid-template-columns:1fr}}

/* Tips */
.tips{padding:10px 0 110px}
.tips-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tip-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;transition:border-color .2s,transform .3s var(--ease)}
.tip-card:hover{border-color:var(--ink);transform:translateY(-4px)}
.tip-tag{align-self:flex-start;font-size:12px;font-weight:800;color:var(--violet);background:#EDE9FF;border-radius:999px;padding:4px 10px}
.tip-card h2{font-size:24px;font-weight:800;font-stretch:115%;line-height:1.1}
.tip-card p{color:var(--ink-2);flex:1}
.post-w{max-width:760px}
.post-body{padding-bottom:110px}
.post-body h2{font-size:26px;font-weight:800;font-stretch:115%;margin:34px 0 8px}
.post-body p,.post-body li{color:var(--ink-2);font-size:18px;line-height:1.65}
.post-body ul{padding-left:20px;display:grid;gap:8px}
.post-body b{color:var(--ink)}
.post-cta{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;margin-top:44px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 20px}
.post-cta img{border-radius:14px}
.post-cta p{font-size:16px!important}
.post-cta a:not(.btn){color:var(--violet)}
@media (max-width:900px){.tips-grid{grid-template-columns:1fr}.post-cta{grid-template-columns:56px 1fr}.post-cta .btn{grid-column:1 / -1}}
.pf b.pf-word{font-size:clamp(26px,2.6vw,36px);line-height:1.1;padding-top:.2em}

/* ---------- Phone polish ---------- */
.logo span,.nav-cta{white-space:nowrap}
@media (max-width:600px){
  .nav-in{gap:12px;padding:0 16px}
  .logo{font-size:17px;gap:8px}
  .hex{width:28px;height:28px}
  .nav-in > .lang{display:none}
  .nav-cta{font-size:13px;padding:8px 13px}
  .wrap.status-in,.wrap.ckt-in{width:auto;margin-left:16px;margin-right:16px}
  .status h2{font-size:19px;line-height:1.2;align-items:flex-start}
  .status h2 .pulse-dot{margin-top:6px;flex:none}
  .sb-list li{font-size:13px}
  .plan .term{display:block;width:fit-content}
  .proof-in{margin-left:16px;margin-right:16px;width:auto}
  .cost-tiers .ct b{font-size:26px}
  .co b{font-size:38px}
  .ws-hint{font-size:13px}
}
.plan .term{width:fit-content}

/* Home on phones: simpler. Skip the 10-second preview builder and show "Getting started takes 2 minutes" before Our work. Desktop is unchanged. */
@media (max-width:760px){
  main:has(> .hero){display:flex;flex-direction:column}
  main:has(> .hero) > *{order:3}
  main:has(> .hero) > .hero{order:0}
  main:has(> .hero) > .statement{order:1}
  main:has(> .hero) > .steps3{order:2}
  main:has(> .hero) > .pv{display:none}
}

/* Hero facts on phones: three clean rows (value left, label right) instead of three squeezed columns */
@media (max-width:600px){
  .facts{flex-direction:column;border-bottom:0}
  .facts li{flex-direction:row;align-items:baseline;gap:14px;padding:12px 0;border-left:0;border-bottom:1px solid var(--line)}
  .facts li:first-child{padding-left:0}
  .facts b{font-size:22px;min-width:7.2em}
  .facts span{font-size:15px}
}

/* Longer headline ("look professional"): smaller so it stays 4 lines on desktop and fits phones */
.hero h1{font-size:clamp(40px,5vw,74px);max-width:11em}
@media (max-width:600px){
  .hero h1{font-size:clamp(30px,10vw,42px)}
  html[lang=fr] .hero h1{font-size:clamp(27px,8.4vw,38px);-webkit-hyphens:auto;hyphens:auto}
}
/* Our work on phones: no arrows, no buttons. The sites change on their own. */
@media (max-width:760px){
  #wsPrev,#wsNext,.ws-side,.ws-hint{display:none}
  .ws-stage{padding-bottom:0}
}

/* Phone menu: a clean panel that slides down from the bar */
.mobile-nav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;gap:14px;padding:10px 16px 20px;border-top:1px solid var(--line);background:var(--paper);box-shadow:0 24px 40px -18px rgba(14,22,48,.35);max-height:calc(100vh - 60px);overflow:auto;animation:mnIn .28s cubic-bezier(.22,1,.36,1)}
@keyframes mnIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobile-nav .mn-links{display:flex;flex-direction:column}
.mobile-nav .mn-links a{padding:13px 4px;font-size:20px;font-weight:700;font-stretch:112%;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile-nav .mn-links a:last-child{border-bottom:0}
.mobile-nav .mn-links a[aria-current=page]{color:var(--violet)}
.mobile-nav a.mn-check{display:block;text-decoration:none;background:#EDE9FF;border-radius:18px;padding:14px 16px;border:0;font-size:inherit}
.mobile-nav a.mn-check b{display:block;font-size:17px;color:var(--violet);font-stretch:110%}
.mobile-nav a.mn-check span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px;font-weight:500}
.mobile-nav a.mn-cta{display:flex;justify-content:center;width:100%;border:0;font-size:17px;padding:15px}
.mobile-nav a.mn-lang{align-self:center;font-size:15px;font-weight:700;color:var(--ink-2);padding:4px 10px;border:0}
@media (prefers-reduced-motion:reduce){.mobile-nav{animation:none}}
.nav-menu span{transform-origin:50% 50%}
.nav-menu[aria-expanded=true] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav-menu[aria-expanded=true] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* Phones: the hero monitor plays on its own (no tall scroll track, no sticky) */
@media (max-width:760px){
  .js-motion .hero-stage{height:auto}
  .js-motion .hero-sticky{position:relative;top:auto;height:auto;padding:30px 0 50px;overflow:visible}
}
@media (max-width:760px){
  .js-motion .hero-stage{overflow:hidden;
    /* fade the glow out at the top and bottom instead of cutting it off in a hard box */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%)}
  /* smaller monitor so the phone beside it fits on screen with room to breathe */
  .hero-rig{width:80vw}
  .iphone.hero-phone{right:2%;bottom:10%;width:21%}
}

/* Check-up: Hex-built site badge */
.ck-hex{display:flex;align-items:center;gap:20px;background:#EDE9FF;border:2px solid var(--violet);border-radius:24px;padding:18px 24px;margin-bottom:18px}
.ck-hex img{width:110px;height:auto;flex:none}
.ck-hex b{display:block;font-size:26px;font-weight:800;font-stretch:115%;color:var(--violet)}
.ck-hex p{margin-top:4px;color:var(--ink)}
.ck-hex[hidden]{display:none}
.ck-n.ours{background:var(--violet)}
@media (max-width:600px){.ck-hex{flex-direction:column;align-items:flex-start}.ck-hex img{width:84px}}

/* Inspiration: "We bring all the tools" */
.toolbox{padding:110px 0 70px;background:var(--paper)}
.tb-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:40px;align-items:center}
.toolbox h1{font-size:clamp(44px,6vw,84px);font-weight:800;font-stretch:122%;letter-spacing:-.035em;line-height:.95;max-width:12ch}
.toolbox .lede{font-size:20px;color:var(--ink-2);margin-top:20px;max-width:56ch}
.tb-tools{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:30px}
.tb-tools li{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.tb-tools b{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;font-stretch:110%}
.tb-tools b::before{content:"";width:22px;height:25px;flex:none;background:var(--violet);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.tb-tools span{display:block;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.45}
.tb-good{margin-top:24px;font-size:19px;font-weight:700;color:var(--violet);max-width:46ch}
.tb-hoot{width:100%;max-width:420px;height:auto;justify-self:end}
/* Inspiration page: the gallery leads, one navy "showroom" from top to bottom */
/* (light, on-brand: paper gallery, then a solid violet toolbox block) */
.inspo-first{padding:120px 0 80px;background:var(--paper);color:var(--ink)}
.inspo-title{font-size:clamp(44px,7vw,104px);font-weight:850;font-stretch:122%;letter-spacing:-.04em;line-height:.93;max-width:13ch;color:var(--ink)}
.inspo-first .lede{font-size:clamp(17px,1.8vw,21px);max-width:52ch;margin-top:22px;color:var(--ink-2)}
.inspo-first .lede a{color:var(--violet);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.inspo-first .inspo-meta p{color:var(--ink-2)}
.inspo-first .inspo-meta .idea{color:var(--ink)}
.inspo-first .inspo-count{color:var(--ink-2)}
.inspo-first .inspo-arrow{border-color:var(--ink);box-shadow:0 5px 0 var(--ink)}
.inspo-first .link.light{color:var(--ink);text-decoration-color:var(--violet)}
.inspo-credit{margin-top:22px;font-size:13px;color:var(--ink-2)}
.inspo-first .pick{background:#fff;border:2px solid var(--line);color:var(--ink)}
.inspo-first .pick span{color:var(--ink-2)}
.inspo-first .pick[aria-pressed=true]{border-color:var(--violet);box-shadow:0 4px 0 var(--violet)}
.toolbox.dark{background:var(--violet);color:#fff;padding:20px 0 110px}
.toolbox.dark h2{font-size:clamp(36px,4.6vw,64px);font-weight:850;font-stretch:120%;letter-spacing:-.035em;line-height:.98;max-width:14ch;padding-top:80px;color:#fff}
.toolbox.dark .lede{color:#E4DEFF}
.toolbox.dark .tb-tools li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
.toolbox.dark .tb-tools b::before{background:#FFC857}
.toolbox.dark .tb-tools span{color:#E4DEFF}
.toolbox.dark .tb-good{color:#FFC857;font-size:clamp(20px,2.2vw,26px);font-weight:800;font-stretch:112%}
.toolbox.dark .ctas{margin-top:26px}
.inspo-sub{font-size:clamp(30px,3.6vw,46px);font-weight:800;font-stretch:118%;letter-spacing:-.025em;line-height:1.05;max-width:20ch}
@media (max-width:900px){.tb-in{grid-template-columns:1fr}.tb-hoot{order:-1;justify-self:start;max-width:240px}.toolbox{padding:60px 0 50px}}
@media (max-width:520px){.tb-tools{grid-template-columns:1fr}}

/* Why page: "We don't just sell you a website" iceberg */
.notjust{padding:100px 0;background:linear-gradient(180deg,var(--paper) 0,var(--paper) 34%,#DCE6F5 34%,#0E1630 100%)}
.notjust h2{font-size:clamp(38px,5vw,68px);font-weight:800;font-stretch:122%;letter-spacing:-.03em;line-height:1;max-width:16ch}
.notjust .sub{font-size:19px;color:var(--ink-2);margin-top:16px;max-width:60ch}
.nj-iceberg{margin-top:46px;display:flex;flex-direction:column;align-items:center;text-align:center}
.nj-top{background:#fff;border-radius:22px 22px 6px 6px;padding:20px 34px;box-shadow:0 18px 40px -20px rgba(14,22,48,.4);min-width:min(420px,100%)}
.nj-top b{display:block;font-size:14px;font-weight:800;color:var(--violet)}
.nj-top span{display:block;font-size:26px;font-weight:800;font-stretch:115%}
.nj-under{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:960px;margin-top:40px}
.nj-under li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#EEEFEB;border-radius:16px;padding:16px;font-size:17px;font-weight:700}
.nj-cap{margin-top:24px;color:#C9BDFF;font-weight:700;font-size:18px}
@media (max-width:760px){.nj-under{grid-template-columns:1fr 1fr}.notjust{padding:70px 0;background:linear-gradient(180deg,var(--paper) 0,var(--paper) 40%,#DCE6F5 40%,#0E1630 100%)}}

/* "Hi, I'm Hoot!" speech bubble */
.hoot-say{position:absolute;z-index:80;transform:translate(-50%,-100%);background:#fff;color:var(--ink);font:800 20px var(--font);font-stretch:110%;padding:12px 18px;border-radius:18px;border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);white-space:nowrap;pointer-events:none;animation:sayIn .35s cubic-bezier(.3,1.5,.5,1)}
.hoot-say::after{content:"";position:absolute;left:50%;bottom:-12px;width:18px;height:18px;margin-left:-9px;background:#fff;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg)}
.hoot-say.out{opacity:0;transition:opacity .35s}
@keyframes sayIn{from{opacity:0;transform:translate(-50%,-80%) scale(.6)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}
@media (prefers-reduced-motion:reduce){.hoot-say{animation:none}}

/* Preview site: the rest of the page */
.pvs-strip{display:flex;justify-content:space-around;gap:20px;margin:40px 56px 0;padding:22px;border-radius:22px;background:var(--d);color:#fff;font-size:19px;font-weight:700}
.is-mobile .pvs-strip{flex-direction:column;gap:10px;margin:22px 22px 0;font-size:16px;text-align:center}
.pvs-gal{padding:56px}
.is-mobile .pvs-gal{padding:34px 22px}
.pvs-gal h2,.pvs-find h2{font-size:40px;font-weight:800;letter-spacing:-.02em}
.is-mobile .pvs-gal h2,.is-mobile .pvs-find h2{font-size:28px}
.pvs-tiles{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:180px 180px;gap:16px;margin-top:22px}
.is-mobile .pvs-tiles{grid-template-columns:1fr 1fr;grid-template-rows:140px 140px}
.pvs-tile{border-radius:22px;display:grid;place-items:center;font-size:64px}
.pv-friendly .pvs-tile{border-radius:40px}
.pvs-tile.t0{grid-row:span 2;background:linear-gradient(135deg,var(--m),var(--d));font-size:110px}
.is-mobile .pvs-tile.t0{grid-row:auto;font-size:64px}
.pvs-tile.t1{background:#fff}.pvs-tile.t2{background:color-mix(in srgb,var(--m) 25%,#fff)}.pvs-tile.t3{background:var(--d);grid-column:span 2}
.is-mobile .pvs-tile.t3{grid-column:auto}
.pvs-find{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:20px 56px 56px}
.is-mobile .pvs-find{grid-template-columns:1fr;padding:10px 22px 34px;gap:22px}
.pvs-find p{font-size:19px;opacity:.75;margin-top:10px}
.pvs-map{position:relative;height:240px;border-radius:24px;background:#E4EBE3;overflow:hidden}
.pvs-map i{position:absolute;background:#fff;border-radius:6px}
.pvs-map i:nth-child(1){left:-10%;right:-10%;top:45%;height:22px;transform:rotate(-8deg)}
.pvs-map i:nth-child(2){top:-10%;bottom:-10%;left:38%;width:18px;transform:rotate(12deg)}
.pvs-map i:nth-child(3){left:60%;right:-10%;top:18%;height:14px;transform:rotate(20deg)}
.pvs-map b{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);font-size:52px}
.pvs-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px 56px;background:var(--d);color:#fff}
.is-mobile .pvs-foot{padding:22px;flex-direction:column;align-items:flex-start}
.pvs-foot small{opacity:.6;font-size:14px}
/* tap to open full screen */
.pv-display,.pv-phone{cursor:zoom-in}
.pv-full{position:fixed;inset:0;z-index:90;background:rgba(14,22,48,.92);display:flex;flex-direction:column;animation:pvfIn .3s ease}
@keyframes pvfIn{from{opacity:0}to{opacity:1}}
.pvf-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#fff}
.pvf-bar .v-seg{display:flex;background:rgba(255,255,255,.12);border-radius:999px;padding:4px}
.pvf-bar .v-seg button{font:700 15px var(--font);color:#fff;background:none;border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.pvf-bar .v-seg button[aria-pressed=true]{background:#fff;color:var(--violet)}
.pvf-cta{margin-left:auto;padding:10px 18px;font-size:15px}
.pvf-x{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.pvf-scroll{flex:1;overflow:auto;padding:8px 16px 40px;display:flex;justify-content:center;align-items:flex-start}
.pvf-frame{flex:none;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pv-full.is-phone .pvf-frame{border-radius:36px;outline:12px solid #0B0B0D}
.pvf-frame .pv-site{transform-origin:0 0}
@media (prefers-reduced-motion:reduce){.pv-full{animation:none}}
.nj-kick{font-size:clamp(22px,2.4vw,30px);font-weight:800;font-stretch:112%;color:var(--violet);max-width:34ch;line-height:1.2;margin-bottom:18px}
/* Score teaser on phones: its own space, owl on top, centred */
@media (max-width:760px){
  .ck-teaser{padding:40px 0 30px}
  .ckt-in{grid-template-columns:1fr;text-align:center;justify-items:center;gap:14px;padding:26px 22px}
  .ckt-in img{width:96px}
  .ckt-in .btn{width:100%;justify-content:center}
}
@media (max-width:760px){.js-motion .ws-hint{display:none}}
.pvs-tile.t3 span{filter:brightness(0) invert(1)}.pv-full{background:rgba(14,22,48,.98)}