/* Fusion Developers, v2.
   A light, monochrome, airy system: soft grey canvas, white surfaces, near-black
   type and buttons, and black feature sections. Our own cobalt survives only in
   the logo and focus states. Self-hosted, no external requests. */

@font-face{font-family:'Inter';src:url('../fonts/inter.woff2')format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --canvas:#f5f5f5;
  --surface:#ffffff;
  --alt:#f2f2f2;
  --ink:#121519;
  --ink-2:#2b2f36;
  --muted:#5f646d;
  --faint:#8b9099;
  --line:#e4e4e6;
  --dark:#0a0a0b;
  --dark-2:#161618;
  --dark-line:rgba(255,255,255,.1);
  --accent:#2643c4;
  --radius:16px;
  --shell:1160px;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.625;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;color:var(--ink);letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:#dfe5fb}
.shell{width:min(var(--shell),100% - 2*clamp(20px,5vw,48px));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px}
.icon{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}
/* The check icon's tick is cut out of a filled circle. Where the circle turns
   light (dark backgrounds), the tick must turn dark, or it disappears. */
.section-dark .icon .tick,.plan--featured .icon .tick,.form-card .icon .tick,.footer .icon .tick{stroke:var(--dark)}

/* ---------- buttons, badges ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;
  font:500 14px/1 var(--font);cursor:pointer;border:0;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap}
.btn .icon{width:15px;height:15px;transition:transform .18s ease}
.btn:hover .icon{transform:translateX(3px)}
.btn-dark{color:#fff;background:linear-gradient(93deg,rgba(7,3,3,.92),rgba(19,24,33,.92));box-shadow:inset 0 0 2px rgba(255,255,255,.15),0 8px 20px -10px rgba(0,0,0,.5)}
.btn-dark:hover{transform:translateY(-1px);box-shadow:inset 0 0 2px rgba(255,255,255,.2),0 14px 26px -12px rgba(0,0,0,.55)}
.btn-light{color:var(--ink);background:rgba(255,255,255,.65);border:1px solid #fff;padding:13px 26px;box-shadow:0 6px 18px -12px rgba(0,0,0,.25)}
.btn-light:hover{background:#fff}
.btn-white{color:var(--ink);background:#fff}
.btn-white:hover{transform:translateY(-1px)}
.btn-sm{min-height:36px;padding:8px 16px;font-size:13px}
.btn-ghost-dark{color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.1)}

.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 22px;border-radius:999px;font-size:14px;font-weight:500;color:#333;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.4);box-shadow:inset 4px 4px 15px rgba(222,222,222,.68)}
.badge .icon{width:15px;height:15px}
.badge-dark{color:#d6d8dc;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);box-shadow:inset 3px 3px 12px rgba(255,255,255,.04)}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:50;background:var(--canvas)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:96px}
.logo img{height:42px;width:auto}
.navpill{display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.4);box-shadow:inset 2px 2px 12px rgba(222,222,222,.6)}
.navpill > a,.navpill .has-menu > a{display:inline-flex;align-items:center;gap:5px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink)}
.navpill > a:hover,.navpill .has-menu:hover > a,.navpill a[aria-current=page]{background:rgba(18,21,25,.05)}
.navpill .icon{width:13px;height:13px;transition:transform .2s ease}
/* Services mega menu: pure CSS, opens on hover and on keyboard focus. It is
   positioned against the whole header so it can be wider than the pill. */
.masthead-in{position:relative}
.has-menu{position:static}
.menu-panel{position:absolute;top:calc(100% - 6px);left:50%;transform:translate(-50%,10px);width:min(1000px,calc(100vw - 32px));
  display:grid;grid-template-columns:minmax(0,1fr) 300px;border-radius:24px;background:#fff;overflow:hidden;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.05);
  opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s}
.menu-panel::before{content:"";position:absolute;left:0;right:0;top:-30px;height:30px}
.has-menu:hover .menu-panel,.has-menu:focus-within .menu-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega-cols{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;padding:26px 26px 18px}
.mega-h{margin:0 0 6px;padding:0 12px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mega-group + .mega-group{margin-top:14px}
.mega-item{display:flex;align-items:flex-start;gap:14px;padding:11px 12px;border-radius:14px;transition:background .15s ease}
.mega-item:hover,.mega-item:focus-visible{background:var(--canvas)}
.mega-ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--canvas);color:var(--ink);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.05);transition:background .15s ease,color .15s ease}
.mega-ic .icon{width:20px;height:20px}
.mega-item:hover .mega-ic{background:var(--ink);color:#fff}
.mega-tx b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.mega-tx small{display:block;font-size:12.5px;line-height:1.45;color:var(--muted);margin-top:3px}
.mega-feature{grid-row:1 / 3;grid-column:2;display:flex;flex-direction:column;gap:8px;padding:22px;background:var(--dark);color:#c9ccd2}
.mega-shot{display:block;border-radius:12px;overflow:hidden;border:6px solid #232427;margin-bottom:8px;aspect-ratio:16/10}
.mega-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .5s ease}
.mega-feature:hover .mega-shot img{transform:scale(1.04)}
.mega-kicker{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8e96}
.mega-feature b{font-size:16px;font-weight:600;line-height:1.4;color:#fff}
.mega-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#fff}
.mega-more .icon,.mega-all .icon{width:13px;height:13px;transition:transform .18s ease}
.mega-feature:hover .mega-more .icon,.mega-all:hover .icon{transform:translateX(3px)}
.mega-foot{grid-column:1;grid-row:2;display:flex;align-items:center;gap:18px;padding:14px 26px;background:var(--canvas);border-top:1px solid var(--line)}
.mega-foot p{margin:0 auto 0 0;display:flex;align-items:center;gap:9px;font-size:13.5px;color:#3d4249;white-space:nowrap}
.mega-foot p .icon{width:15px;height:15px}
.mega-all{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;white-space:nowrap}
.mega-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mega-tags span{padding:5px 10px;border-radius:999px;font-size:12px;font-weight:500;color:#d6d8dc;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}
.navpill .mega-foot .btn{color:#fff;padding:8px 16px}
.menu-btn{display:none}
/* The CTA appears twice: beside the nav on desktop, inside the menu on phones.
   Inside the pill it must keep button colours over the nav's link styling. */
.navpill .header-cta{display:none}
.navpill > a.header-cta,.navpill > a.header-cta:hover{color:#fff;background:linear-gradient(93deg,rgba(7,3,3,.92),rgba(19,24,33,.92));justify-content:center}
.after-acc{margin:26px 0 0}
.after-hero{margin-top:28px}
.page-hero .badge .icon{width:16px;height:16px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--canvas);text-align:center;padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,96px)}
/* Soft water-ripple rings, faded out towards the edges. */
.hero::before{content:"";position:absolute;inset:-10% -10% -40%;pointer-events:none;
  background:repeating-radial-gradient(ellipse at 50% 88%,rgba(255,255,255,0) 0 58px,rgba(255,255,255,.7) 64px,rgba(255,255,255,0) 74px 120px);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 80%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 80%,#000 20%,transparent 75%)}
.hero > .shell{position:relative}
.hero h1{font-size:clamp(36px,5vw,56px);font-weight:600;line-height:1.48;letter-spacing:.3px;margin:22px auto 14px;max-width:22ch}
/* The emphasis word carries a slow light sweep, like polished metal. */
.hero h1 em,.page-hero h1 em{font-style:normal;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(120deg,#111 0%,#444 25%,#737373 50%,#444 75%,#111 100%);background-size:240% 100%;
  animation:shine 5s ease-in-out infinite}
@keyframes shine{0%{background-position:100% 0}60%,100%{background-position:0 0}}
.hero .lead{font-size:17px;line-height:1.65;color:#1d2026;max-width:600px;margin:0 auto 30px}
.hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:960px;margin:clamp(44px,5vw,64px) auto 0;text-align:left}
.trust-item{display:flex;align-items:center;gap:13px;justify-content:center;padding:12px 14px;border-radius:18px}
.trust-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#2b2f36;box-shadow:inset 2px 2px 8px rgba(0,0,0,.06),0 6px 14px -10px rgba(0,0,0,.3);transition:transform .35s ease,background .25s ease,color .25s ease}
.trust-ic .icon{width:24px;height:24px}
.trust-item:hover .trust-ic{transform:rotate(-8deg) scale(1.06);background:var(--ink);color:#fff}
.trust-item b{display:block;font-size:18px;font-weight:600;line-height:1.2}
.trust-item span:not(.trust-ic):not(.count){display:block;font-size:13px;font-weight:500;color:var(--muted);line-height:1.3}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(72px,8vw,112px) 0}
.section-alt{background:var(--alt)}
.section-canvas{background:var(--canvas)}
.section-dark{background:var(--dark);color:#c9ccd2}
.section-dark h2,.section-dark h3{color:#fff}
.section-head{text-align:center;max-width:720px;margin:0 auto clamp(40px,5vw,60px)}
.section-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.45;margin:18px 0 10px}
.section-head p{color:var(--muted);margin:0}
.section-dark .section-head p{color:#9a9ea7}

/* ---------- statement + device ---------- */
.statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.statement-copy p{font-size:clamp(19px,1.8vw,24px);font-weight:650;line-height:1.5;color:#1d2026}
.statement-copy p + p{color:#6b7078}
/* Progressive enhancement: where scroll-driven animation exists, the
   statement darkens as it scrolls into view. Elsewhere it is simply visible. */
@supports (animation-timeline:view()){
  .statement-copy p{animation:ink-in linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
  @keyframes ink-in{from{color:#c4c7cc}}
}
.device{position:relative;border:10px solid #2a2b2e;border-radius:22px;background:#2a2b2e;box-shadow:0 30px 60px -28px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.2)}
.device-screen{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#ddd}
.device-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
/* Only a device holding several screens cross-fades between them. */
.is-slideshow .device-screen img{opacity:0;animation:slides 16s infinite}
.is-slideshow .device-screen img:nth-child(1){opacity:1;animation-delay:0s}
.is-slideshow .device-screen img:nth-child(2){animation-delay:4s}
.is-slideshow .device-screen img:nth-child(3){animation-delay:8s}
.is-slideshow .device-screen img:nth-child(4){animation-delay:12s}
@keyframes slides{0%{opacity:0;transform:scale(1.03)}4%,25%{opacity:1;transform:scale(1)}30%,100%{opacity:0}}
.stack{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 44px;margin-top:clamp(48px,5vw,72px);color:#3a3e45}
.stack span{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;opacity:.82;transition:opacity .2s ease}
.stack span:hover{opacity:1}
.stack .icon{width:24px;height:24px}

/* ---------- services (dark) ---------- */
.services{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,72px);align-items:center}
.services-head h2{font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.35;margin:18px 0 12px}
.services-head p{color:#9a9ea7;margin-bottom:28px;max-width:44ch}
.acc{display:grid;gap:10px}
.acc details{border:1px solid rgba(255,255,255,.14);border-radius:28px;transition:background .45s cubic-bezier(.4,0,.2,1),border-radius .45s cubic-bezier(.4,0,.2,1)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 20px;color:#fff;font-size:15px;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary .icon{width:15px;height:15px;transition:transform .45s cubic-bezier(.4,0,.2,1);color:#c9ccd2}
.acc details[open]{border-radius:18px;background:linear-gradient(160deg,#1d1e21,#131315);border-color:rgba(255,255,255,.09)}
.acc details[open] summary .icon{transform:rotate(45deg)}
/* The open/close animation itself is driven by site.js, which slides the
   body height with an eased max-height transition. The summary keeps a
   constant size so the toggle row never moves during the transition, and
   the panel content carries a slight upward settle. Without JavaScript the
   details element keeps its native instant behaviour. */
.acc-body{overflow:hidden;transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .45s cubic-bezier(.4,0,.2,1),transform .45s cubic-bezier(.4,0,.2,1)}
.acc-body-in{padding:0 22px 20px}
.acc-body p{font-size:14.5px;color:#a6aab2;margin-bottom:14px}
.acc-body ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.acc-body li{display:flex;align-items:center;gap:10px;font-size:14px;color:#e6e7ea}
.acc-body li::before{content:"";width:5px;height:5px;border-radius:50%;background:#8a8e96;flex:none}
.monitor{width:100%;max-width:560px;margin-inline:auto}
.monitor .device{border-color:#1b1c1f;background:#1b1c1f;box-shadow:0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06)}
.monitor-stand{width:24%;height:46px;margin:0 auto;background:linear-gradient(#202125,#151518);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.monitor-base{width:42%;height:10px;margin:0 auto;border-radius:6px;background:#1e1f23}

/* ---------- cases ---------- */
.cases{display:grid;gap:clamp(56px,6vw,96px)}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.case--flip .case-media{order:2}
.case-media .device{border-width:8px;border-radius:18px}
.case-label{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:10px}
.case h3{font-size:clamp(22px,2.4vw,30px);font-weight:500;line-height:1.5;margin-bottom:14px}
.case p{font-size:15px;color:#4b5058}
.case-table{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border-top:1px solid var(--line)}
.case-table h4{font-size:14px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line)}
.case-table ul{list-style:none;margin:0;padding:12px 0 0;display:grid;gap:8px;font-size:14px;color:#4b5058}
.case-table > div + div{padding-left:22px;border-left:1px solid var(--line)}
.case-table > div + div h4{margin-left:-22px;padding-left:22px}
.case-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:20px 0 0}
.case-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.case-link .icon{width:14px;height:14px;transition:transform .18s ease}
.case-link:hover .icon{transform:translateX(3px)}

/* ---------- plugins (dark cards) ---------- */
.plugin-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.plugin-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 22px 24px;border-radius:18px;
  background:linear-gradient(170deg,#1c1d20,#121214);border:1px solid rgba(255,255,255,.07);transition:transform .25s ease,border-color .25s ease}
.plugin-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16)}
.plugin-card img,.plugin-mono{width:64px;height:64px;border-radius:16px;margin-bottom:18px}
.plugin-mono{display:grid;place-items:center;background:#2a2b2f;color:#fff;font-size:26px;font-weight:600}
.plugin-card h3{font-size:18px;font-weight:600;margin-bottom:6px}
.plugin-card .installs{font-size:13px;color:#9a9ea7;margin-bottom:12px}
.plugin-card p{font-size:13.5px;line-height:1.55;color:#a6aab2;margin-bottom:18px;flex:1}

/* ---------- reviews + stats ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review{margin:0;padding:28px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px -22px rgba(0,0,0,.2);display:flex;flex-direction:column}
.review blockquote{margin:0 0 22px;font-size:17px;line-height:1.6;color:var(--ink-2);flex:1}
.review figcaption{font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.review figcaption b{display:block;color:var(--ink);font-weight:600;font-size:14px}
/* The proof band: four facts, each with an icon, a counting figure and a note. */
.proof-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(52px,6vw,80px);border-radius:24px;background:#fff;border:1px solid var(--line);
  box-shadow:0 24px 50px -40px rgba(0,0,0,.35);overflow:hidden}
.proof{position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;transition:background .25s ease}
.proof + .proof{border-left:1px solid var(--line)}
.proof::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.proof:hover{background:#fafafa}
.proof:hover::before{transform:scaleX(1)}
.proof-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--canvas);color:var(--ink);margin-bottom:22px;transition:transform .35s ease,background .25s ease,color .25s ease}
.proof-ic .icon{width:24px;height:24px}
.proof:hover .proof-ic{background:var(--ink);color:#fff;transform:rotate(-8deg)}
.proof-fig{white-space:nowrap;font-size:clamp(28px,2.7vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums}
.proof-label{margin-top:10px;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink)}
.proof-note{margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font-size:13px;line-height:1.45;color:var(--muted)}
.proof-label + .proof-note{margin-top:14px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,72px);align-items:center}
.contact h2,.contact .contact-title{font-size:clamp(28px,3.2vw,38px);font-weight:600;line-height:1.35;margin:18px 0 16px}
.contact-copy > p{color:#4b5058}
.promises{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.promises li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500}
.promises .icon{width:20px;height:20px;color:var(--ink)}
.form-card{padding:clamp(22px,3vw,32px);border-radius:22px;background:var(--dark);color:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1 / -1}
.form-card label{display:block;font-size:13px;font-weight:500;margin-bottom:8px;color:#e9eaec}
.form-card input,.form-card textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#f1f2f4;border:1px solid transparent;border-radius:10px;padding:12px 14px}
.form-card textarea{min-height:120px;resize:vertical}
.form-card input:focus,.form-card textarea:focus{outline:2px solid #8ea0f2;outline-offset:1px}
.form-card .btn{margin-top:20px}
.form-note{font-size:13px;color:#9a9ea7;margin:16px 0 0}
.form-note a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.field-error{margin:6px 0 0;font-size:13px;color:#ff9b8e}
.notice{padding:12px 14px;border-radius:10px;background:#3a2a12;color:#ffd9a3;font-size:14px;margin-bottom:16px}
.hp{position:absolute;left:-9999px}

/* ---------- inner pages ---------- */
.page-hero{background:var(--canvas);text-align:center;padding:clamp(56px,6vw,88px) 0 clamp(56px,6vw,84px);position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(34px,4.6vw,52px);font-weight:600;line-height:1.4;margin:20px auto 12px;max-width:24ch;text-wrap:balance}
.page-hero p{color:#3d4249;max-width:620px;margin:0 auto}
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.svc-card{padding:30px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);scroll-margin-top:120px}
.svc-card h2{font-size:22px;font-weight:600;margin:0 0 10px}
.svc-card > p{color:#4b5058;font-size:15px}
.svc-card ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.svc-card li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500}
.svc-card li .icon{width:17px;height:17px}
.svc-num{display:inline-flex;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;background:var(--canvas);font-size:13px;font-weight:600;margin-bottom:18px}
.center-note{text-align:center;color:var(--muted);margin-top:36px}
.story{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,5vw,72px)}
.story h2{font-size:clamp(26px,2.8vw,34px);font-weight:600;line-height:1.35}
.story-copy p{font-size:17px;color:#3d4249}
.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.tl{padding:22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.tl b{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px}
.tl h3{font-size:16px;font-weight:600;margin-bottom:6px}
.tl p{font-size:13.5px;color:#4b5058;margin:0}
.principles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.principle{padding:26px;border-radius:var(--radius);background:linear-gradient(170deg,#1c1d20,#121214);border:1px solid rgba(255,255,255,.07)}
.principle h3{font-size:16px;font-weight:600;margin-bottom:8px;text-wrap:balance}
.principle p{font-size:14px;color:#a6aab2;margin:0}
.legal{max-width:720px;margin:0 auto}
.legal h2{font-size:22px;font-weight:600;margin:2em 0 .5em}
.legal h2:first-child{margin-top:0}
.legal p{color:#3d4249}

/* ---------- footer ---------- */
.footer{background:var(--dark);color:#9a9ea7;font-size:14.5px}
.footer a{color:#d6d8dc;transition:color .15s ease}
.footer a:hover{color:#fff}
/* Buttons keep their own colours inside the footer's link styling. */
.footer .btn-white,.footer .btn-white:hover{color:var(--ink)}
.footer-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(56px,6vw,80px) 0;border-bottom:1px solid var(--dark-line)}
.footer-cta h2{font-size:clamp(26px,3vw,38px);font-weight:600;line-height:1.3;color:#fff;max-width:20ch}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px 48px;padding:clamp(52px,6vw,72px) 0}
.footer-brand img{height:44px;width:auto;margin:0 0 18px -6px}
.footer-brand p{max-width:34ch;line-height:1.6;margin-bottom:22px}
.footer-contact{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.footer-contact dt{color:#6f737c;font-size:13px}
.footer-contact dd{margin:0}
.footer-col h3{font-size:16px;font-weight:600;color:#fff;margin-bottom:18px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer-col small{display:block;font-size:12px;color:#6f737c}
.footer-creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:30px 0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.cred{display:flex;align-items:center;gap:14px;justify-content:center;text-align:left;padding:14px 16px;border-radius:16px;transition:background .25s ease,transform .25s ease}
.cred:hover{background:rgba(255,255,255,.05);transform:translateY(-2px)}
.cred .icon{width:30px;height:30px;color:#e6e7ea;transition:transform .35s ease}
.cred:hover .icon{transform:rotate(-8deg) scale(1.08)}
.cred b{display:block;color:#fff;font-size:15px;font-weight:600}
.cred span{font-size:13px}
.footer-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;padding:26px 0 8px;list-style:none;margin:0}
.footer-legal li::before{content:"•";margin-right:10px;color:#4a4e56}
.footer-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 0 34px}
.footer-bar p{margin:0;font-size:13.5px}
.footer-bar .wordmark img{height:52px;width:auto}
.footer-bar .right{text-align:right}

/* ---------- dedicated service pages ---------- */
.section-tight{padding:clamp(48px,5vw,72px) 0}
.section-tight-top{padding-top:clamp(40px,4vw,56px)}
.svc-hero{position:relative;background:var(--canvas);padding:clamp(40px,5vw,72px) 0 clamp(48px,5vw,72px);overflow:hidden}
/* A faint grid, like drafting paper, faded towards the edges. */
.svc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 30%,transparent 80%)}
.svc-hero > .shell{position:relative}
.svc-hero-in > *,.contact > *,.get > *,.faq-wrap > *,.why-free > *{min-width:0}
.svc-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.svc-hero h1{font-size:clamp(34px,4.4vw,52px);font-weight:600;line-height:1.3;margin:22px 0 18px;text-wrap:balance}
.svc-hero h1 em{font-style:normal;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(120deg,#111 0%,#444 25%,#737373 50%,#444 75%,#111 100%);background-size:240% 100%;animation:shine 5s ease-in-out infinite}
.svc-hero .lead{font-size:16.5px;line-height:1.7;color:#1d2026;max-width:52ch}
.svc-hero .tagline{font-size:15px;font-weight:600;color:var(--ink);margin:0}
.svc-hero-form{scroll-margin-top:110px}
.form-title{font-size:20px;font-weight:600;color:#fff;margin-bottom:8px}
.form-intro{font-size:14px;color:#9a9ea7;margin-bottom:20px}
.trust-wide{max-width:none;margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}

.svc-q{font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.3;margin-bottom:clamp(32px,4vw,52px)}
.problem-card{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(28px,4vw,44px);border-radius:var(--radius);background:#000;color:#b9bcc3}
.problem-copy h3{font-size:clamp(22px,2.4vw,30px);font-weight:600;line-height:1.4;color:#fff;margin-bottom:18px}
.problem-copy p{font-size:15px;line-height:1.7}
.problem-copy p:last-child{margin:0}
.problem-media{margin:calc(-1 * clamp(52px,6vw,84px)) 0 0}
.svc-statement{font-size:clamp(22px,2.4vw,30px);font-weight:500;line-height:1.55;color:var(--ink);max-width:30ch;margin:clamp(48px,6vw,80px) 0 0}
.svc-statement span{color:#a3a7ae}
@supports (animation-timeline:view()){
  .svc-statement span{animation:ink-in-2 linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
  @keyframes ink-in-2{from{color:#d2d4d8}to{color:var(--ink)}}
}

/* Carousels scroll natively (and by swipe); the arrows are added by site.js. */
.carousel{position:relative}
.carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 8px}
.carousel-track::-webkit-scrollbar{display:none}
.slide{scroll-snap-align:start}
.carousel-nav{display:none;justify-content:center;gap:12px;margin-top:28px}
.js .carousel-nav{display:flex}
.carousel-nav button{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:#25272b;transition:background .15s ease}
.carousel-nav button:hover{background:#000}
.carousel-nav button:disabled{opacity:.35;cursor:default}
.carousel-nav .icon{width:18px;height:18px}
.case-slide{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(22px,3vw,36px);border-radius:22px;background:linear-gradient(160deg,#fafafa,#f1f1f1);border:1px solid #ececee}
.case-slide-media .device{border-width:8px;border-radius:18px}
.case-slide h3{font-size:clamp(22px,2.4vw,30px);font-weight:500;line-height:1.4;margin-bottom:18px}
.results-label{font-size:13.5px;color:var(--muted);margin-bottom:12px}
.highlights{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin:0 0 26px}
.highlights dt{font-size:clamp(22px,2.2vw,28px);font-weight:500;line-height:1.2;color:var(--ink);margin-bottom:6px}
.highlights dd{margin:0;font-size:13.5px;font-weight:500;line-height:1.45;color:#3d4249}

.get{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.get-acc details{border-top:1px solid var(--line)}
.get-acc details:last-child{border-bottom:1px solid var(--line)}
.get-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 18px;font-size:17px;font-weight:600;color:var(--ink)}
.get-acc summary::-webkit-details-marker{display:none}
.get-acc summary .icon{width:18px;height:18px;transition:transform .25s ease}
.get-acc details[open] summary .icon{transform:rotate(45deg)}
.get-acc ul{list-style:none;margin:0;padding:0 18px 22px;display:grid;gap:12px}
.get-acc li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:#2b2f36}
.get-acc li .icon{width:14px;height:14px;flex:none}
.get-cta{margin-top:30px}
.get-media{position:relative}

.carousel-narrow{max-width:860px;margin-inline:auto}
.quote-slide{margin:0;padding:clamp(28px,4vw,48px);border-radius:22px;background:#fff;
  border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(0,0,0,.25)}
.quote-slide blockquote{margin:0 0 26px;font-size:clamp(19px,2vw,24px);line-height:1.6;color:var(--ink)}
.quote-slide figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;color:var(--muted)}
.quote-slide figcaption b{color:var(--ink);font-weight:600}
.quote-slide figcaption b::after{content:"|";margin-left:14px;color:#c9cbd0;font-weight:400}

.section-head-tight{margin-bottom:clamp(28px,3vw,40px)}
.stack-flush{margin-top:0}

.who-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.who-card{min-height:184px;padding:24px 22px;border-radius:14px;background:linear-gradient(170deg,#2a2b2f,#1c1d20);border:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;justify-content:flex-end;transition:background .25s ease,transform .25s ease}
.who-card:hover{background:linear-gradient(170deg,#3a3b40,#2a2b2f);transform:translateY(-3px)}
.who-card h3{font-size:17px;font-weight:600;line-height:1.35;margin-bottom:8px}
.who-card p{font-size:13.5px;line-height:1.55;color:#a6aab2;margin:0}

.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #dcdcdf}
.why-cell{padding:clamp(28px,3vw,40px) clamp(22px,3vw,40px);border-bottom:1px solid #dcdcdf}
.why-cell:not(:nth-child(3n)){border-right:1px solid #dcdcdf}
.why-cell .icon{width:40px;height:40px;color:var(--ink);margin-bottom:22px}
.why-cell h3{font-size:18px;font-weight:600;margin-bottom:10px}
.why-cell p{font-size:14.5px;color:#3d4249;margin:0}
.why-foot{text-align:center;font-size:16px;color:var(--ink-2);margin:clamp(40px,5vw,60px) 0 0;line-height:1.6}

.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.process::before{content:"";position:absolute;left:28px;right:calc(25% - 49px);top:28px;height:1px;background:#dcdcdf}
.process li{position:relative}
.step-num{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid #dcdcdf;
  font-size:15px;font-weight:600;margin-bottom:22px;box-shadow:0 8px 20px -14px rgba(0,0,0,.3)}
.process h3{font-size:18px;font-weight:600;margin-bottom:8px}
.process p{font-size:14.5px;color:#4b5058;margin:0}
.center-cta{text-align:center;margin:clamp(40px,5vw,56px) 0 0}
.final-note{margin-top:24px;font-size:14.5px;color:var(--muted)}

.others-title{font-size:20px;font-weight:600;margin-bottom:20px}
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.others a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .15s ease,transform .15s ease}
.others a:hover{border-color:#c9cbd0;transform:translateY(-2px)}
.others a > .icon:first-child{width:26px;height:26px}
.others a > .icon:last-child{width:15px;height:15px;margin-left:auto;color:var(--muted)}
.others span{font-size:13px;color:var(--muted);line-height:1.4}
.others b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.acc-more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:#fff}
.acc-more .icon{width:14px;height:14px;transition:transform .18s ease}
.acc-more:hover .icon{transform:translateX(3px)}

/* ---------- care plans and free review ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.hero-points li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500}
.hero-points .icon{width:18px;height:18px}
.hero-ctas-left{justify-content:flex-start;margin-top:30px}
.hero-note{margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.hero-art{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.04);background:#fff}
.hero-art img{width:100%;height:auto}
.hero-art-tilt{transform:rotate(1.5deg);transition:transform .4s ease}
.hero-art-tilt:hover{transform:rotate(0)}
.form-card select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#f1f2f4;border:1px solid transparent;border-radius:10px;padding:12px 14px}


/* The monthly routine as a winding route. The SVG path is stretched across
   the full width (preserveAspectRatio none, non-scaling stroke) so its points
   land on each step's dot; the steps sit in five equal columns. */
.journey{position:relative;padding-top:8px}
.journey-path{position:absolute;left:0;top:8px;width:100%;height:400px;overflow:visible;pointer-events:none}
.journey-path path{fill:none;stroke:#b8bdc8;stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;animation:route 40s linear infinite}
@keyframes route{to{stroke-dashoffset:-480}}
.journey-steps{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.journey-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px}
.journey-step:nth-child(odd){padding-top:170px}
.journey-dot{position:relative;width:20px;height:20px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px #fff,0 0 0 7px #dcdde1;margin-bottom:18px;flex:none}
.journey-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--ink);opacity:0;animation:ping 3s ease-out infinite}
.journey-step:nth-child(2) .journey-dot::after{animation-delay:.6s}
.journey-step:nth-child(3) .journey-dot::after{animation-delay:1.2s}
.journey-step:nth-child(4) .journey-dot::after{animation-delay:1.8s}
.journey-step:nth-child(5) .journey-dot::after{animation-delay:2.4s}
@keyframes ping{0%{transform:scale(.7);opacity:.5}70%,100%{transform:scale(1.9);opacity:0}}
/* A white halo so the route passes behind each illustration, not through it. */
.journey-art{width:100%;max-width:190px;height:auto;padding:8px 10px;border-radius:24px;background:#fff;animation:bob 6s ease-in-out infinite}
.journey-step:nth-child(even) .journey-art{animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-6px)}}
.journey-num{margin-top:12px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--canvas);border:1px solid #ececee}
.journey-step h3{font-size:19px;font-weight:600;margin:10px 0 6px}
.journey-step p{font-size:14px;line-height:1.55;color:#4b5058;margin:0;max-width:22ch}

.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px 28px 26px;border-radius:24px;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px -32px rgba(0,0,0,.3);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.plan:hover{transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(0,0,0,.38);border-color:#d6d8dc}
.plan-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--canvas);margin-bottom:18px;transition:transform .3s ease}
.plan-ic .icon{width:24px;height:24px}
.plan:hover .plan-ic{transform:rotate(-6deg) scale(1.06)}
.plan h3{font-size:22px;font-weight:600}
.plan-for{font-size:14.5px;color:var(--muted);margin:8px 0 20px;min-height:3.2em}
.plan-price{display:flex;align-items:flex-start;gap:4px;margin:0 0 22px}
.plan-price sup{font-size:22px;font-weight:600;line-height:1;margin-top:8px;top:0}
.plan-price b{font-size:56px;font-weight:600;letter-spacing:-.03em;line-height:1}
.plan-price span{align-self:flex-end;margin-left:8px;font-size:12.5px;line-height:1.3;color:var(--muted)}
.plan .btn{width:100%}
.plan-includes{margin:26px 0 12px;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.plan ul{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.plan li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;font-weight:500;line-height:1.45}
.plan li .icon{width:18px;height:18px;flex:none;margin-top:1px;transition:transform .2s ease}
.plan li:hover .icon{transform:scale(1.15)}
.plan-terms{margin:auto 0 0;padding-top:16px;border-top:1px dashed var(--line);display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.plan-terms .icon{width:15px;height:15px}
.plan--featured{background:radial-gradient(120% 80% at 100% 0,#26282e 0,var(--dark) 55%);color:#c9ccd2;border-color:var(--dark);box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.plan--featured:hover{border-color:#2e3036;box-shadow:0 50px 90px -40px rgba(0,0,0,.7)}
.plan--featured h3,.plan--featured .plan-price b,.plan--featured .plan-price sup{color:#fff}
.plan--featured .plan-for,.plan--featured .plan-price span,.plan--featured .plan-terms{color:#9a9ea7}
.plan--featured .plan-ic{background:rgba(255,255,255,.08);color:#fff}
.plan--featured .plan-includes{color:#8a8e96;border-color:rgba(255,255,255,.12)}
.plan--featured .plan-terms{border-color:rgba(255,255,255,.12)}
.plan--featured li{color:#e6e7ea}
.plan-flag{position:absolute;top:24px;right:24px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink);background:#fff}
.plan-flag .icon{width:13px;height:13px}
.plans-agency{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:36px auto 0;max-width:900px;text-align:center;font-size:15px;color:#3d4249}
.plans-agency > .icon{width:22px;height:22px}
.plans-agency a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.plans-agency a .icon{width:13px;height:13px;transition:transform .18s ease}
.plans-agency a:hover .icon{transform:translateX(3px)}

/* Comparison table: grouped rows, a highlighted recommended column, and a
   sticky first column so the labels stay visible when it scrolls sideways. */
.compare-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 40px -34px rgba(0,0,0,.25)}
.compare{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:14.5px}
.compare th,.compare td{padding:16px 20px;text-align:center;vertical-align:middle;border-bottom:1px solid #f0f0f1}
.compare thead th{padding:26px 16px 22px;border-bottom:1px solid var(--line);background:#fff;vertical-align:bottom}
.compare thead th:first-child,.compare tbody th{position:sticky;left:0;z-index:1;background:#fff;text-align:left}
.cmp-corner-t{display:block;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.cmp-name{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.cmp-price{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;margin:4px 0 14px;color:var(--ink)}
.cmp-price small{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.compare thead .btn{min-height:36px;width:100%;max-width:150px}
.cmp-flag{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:#fff}
.compare thead th.is-featured{background:radial-gradient(120% 90% at 100% 0,#26282e 0,var(--dark) 60%);border-radius:18px 18px 0 0}
.compare thead th.is-featured .cmp-name,.compare thead th.is-featured .cmp-price{color:#fff}
.compare thead th.is-featured small{color:#9a9ea7}
.compare td.is-featured{background:#f7f7f8}
.cmp-group th{padding:22px 20px 10px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);background:#fff;border-bottom:1px solid var(--line)}
.compare tbody th[scope=row]{font-weight:600;color:var(--ink);min-width:240px}
.compare tbody th small{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--muted);max-width:32ch}
.compare tbody tr:not(.cmp-group){transition:background .15s ease}
.compare tbody tr:not(.cmp-group):hover th,.compare tbody tr:not(.cmp-group):hover td{background:#fafafa}
.compare tbody tr:not(.cmp-group):hover td.is-featured{background:#f0f0f2}
.compare tbody:last-of-type tr:last-child th,.compare tbody:last-of-type tr:last-child td{border-bottom:0}
.compare .val{font-weight:500;color:var(--ink-2)}
.compare .yes .icon{width:22px;height:22px;color:#1f9d55;transition:transform .2s ease}
.compare tr:hover .yes .icon{transform:scale(1.12)}
.compare .no .icon{width:16px;height:16px;color:#c3c6cc}
.compare .pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:500;color:#5f646d;background:var(--canvas);border:1px solid #ececee}
.compare-hint{display:none;text-align:center;font-size:13px;color:var(--muted);margin:14px 0 0}
.who-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.who-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.who-card-ic{justify-content:flex-start;min-height:0}
.who-card-ic .icon{width:30px;height:30px;color:#fff;margin-bottom:22px}

.faq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq-head h2{font-size:clamp(28px,3.2vw,38px);font-weight:600;line-height:1.3;margin:18px 0 10px}
.faq-head p{color:var(--muted)}
.faq-head a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font-size:16.5px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .icon{width:18px;height:18px;flex:none;transition:transform .25s ease}
.faq details[open] summary .icon{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 4px 22px;font-size:15px;color:#3d4249;max-width:62ch}

.get-title{font-size:clamp(28px,3.2vw,38px);font-weight:600;line-height:1.3;margin:18px 0 10px}
.get-lede{color:#4b5058}
.sample-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.sample-points li{display:flex;gap:16px}
.sample-points li > span{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:14px;font-weight:600}
.sample-points b{display:block;font-size:16px;font-weight:600}
.sample-points p{margin:2px 0 0;font-size:14.5px;color:#4b5058}
.process-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Steps with an illustration tile; the number sits on the tile's lower edge,
   so the connecting line runs along the bottom of the tiles. */
.process-art::before{top:170px;left:48px;right:calc(25% - 69px)}
.step-art{display:grid;place-items:center;height:170px;border-radius:20px;background:var(--canvas);border:1px solid #ececee;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.step-art img{width:78%;max-width:200px;transition:transform .4s ease}
.process-art li:hover .step-art{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(0,0,0,.3)}
.process-art li:hover .step-art img{transform:scale(1.05)}
.process-art .step-num{margin:-28px 0 18px 20px;transition:background .2s ease,color .2s ease}
.process-art li:hover .step-num{background:var(--ink);color:#fff}
.process-3::before{right:calc(33.33% - 47px)}
.why-free{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.why-free h2{font-size:clamp(28px,3.2vw,40px);font-weight:600;margin:18px 0 16px}
.why-free p{font-size:16.5px;color:#b9bcc3}

/* ---------- services hub ---------- */
.hub-intro{max-width:760px;margin:0 auto clamp(40px,5vw,60px)}
.hub-intro p{font-size:17px;color:#2b2f36}
.hub{display:grid;gap:20px}
.hub-group{border:1px solid var(--line);border-radius:20px;background:#fff;overflow:hidden}
.hub-group summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px clamp(20px,3vw,32px)}
.hub-group summary::-webkit-details-marker{display:none}
.hub-group summary b{display:block;font-size:22px;font-weight:600;color:var(--ink)}
.hub-group summary span{font-size:14.5px;color:var(--muted)}
.hub-group summary .icon{width:18px;height:18px;transition:transform .25s ease}
.hub-group[open] summary .icon{transform:rotate(180deg)}
.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0 clamp(20px,3vw,32px) clamp(20px,3vw,32px)}
.hub-card{display:flex;flex-direction:column;padding:26px;border-radius:16px;background:var(--canvas);border:1px solid #ececee;scroll-margin-top:120px;transition:transform .2s ease,box-shadow .2s ease}
.hub-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(0,0,0,.35)}
.hub-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;margin-bottom:20px;box-shadow:inset 2px 2px 8px rgba(0,0,0,.05)}
.hub-icon .icon{width:26px;height:26px}
.hub-card h2{font-size:19px;font-weight:600;margin-bottom:8px}
.hub-card p{font-size:14.5px;color:#4b5058}
.hub-card ul{list-style:none;margin:6px 0 20px;padding:0;display:grid;gap:8px}
.hub-card li{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}
.hub-card li .icon{width:15px;height:15px}
.hub-more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.hub-more .icon{width:14px;height:14px;transition:transform .18s ease}
.hub-card:hover .hub-more .icon{transform:translateX(3px)}

/* ---------- scene photographs ---------- */
.photo{margin:0;border-radius:22px;overflow:hidden;background:#e6e7ea;box-shadow:0 30px 60px -36px rgba(0,0,0,.45)}
.photo img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s ease}
.photo:hover img{transform:scale(1.04)}
.problem-media .photo{transform:rotate(1.2deg);border:6px solid #fff;transition:transform .5s ease}
.problem-media .photo:hover{transform:rotate(0)}
.photo-pair{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;margin-top:clamp(40px,5vw,64px)}
.photo-pair:has(> :only-child){grid-template-columns:1fr}
.photo-pair .photo img{height:100%;aspect-ratio:auto;min-height:300px}
.photo-dark{margin-top:28px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.08)}

/* ---------- micro-interactions ----------
   Small, consistent responses to every hover, press, focus and scroll.
   All of it is switched off by the reduced-motion block below. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn:active{transform:translateY(0) scale(.97)}
/* A soft light sweeps across dark buttons on hover. */
.btn-dark::after,.btn-white::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease}
.btn-white::after{background:linear-gradient(105deg,transparent 30%,rgba(0,0,0,.07) 50%,transparent 70%)}
.btn-dark:hover::after,.btn-white:hover::after{transform:translateX(120%);transition:transform .6s ease .08s}
.btn.is-busy{pointer-events:none;opacity:.8}
.btn.is-busy .icon{animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Text links draw their underline in. */
.legal a,.faq details p a,.faq-head a,.form-note a,.contact-copy p a,.story-copy a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;text-decoration:none;transition:background-size .3s ease}
.legal a:hover,.faq-head a:hover,.form-note a:hover,.contact-copy p a:hover,.story-copy a:hover{background-size:100% 1px}
.footer-col a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s ease,color .15s ease}
.footer-col a:hover{background-size:100% 1px}

/* The header gains a soft shadow once the page scrolls. */
.masthead{transition:box-shadow .3s ease,background .3s ease}
.masthead.is-stuck{box-shadow:0 10px 30px -22px rgba(0,0,0,.35);background:rgba(245,245,245,.92);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}

.badge{transition:transform .25s ease,box-shadow .25s ease}
.badge:hover{transform:translateY(-1px)}
a.badge:hover{box-shadow:inset 4px 4px 15px rgba(222,222,222,.68),0 8px 18px -12px rgba(0,0,0,.3)}

/* Cards respond to the pointer. */
.review,.quote-slide,.why-cell,.who-card,.svc-card,.tl,.principle{transition:transform .3s ease,box-shadow .3s ease,background .25s ease,border-color .25s ease}
.review:hover,.svc-card:hover,.tl:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(0,0,0,.35)}
.quote-slide:hover{box-shadow:0 30px 60px -36px rgba(0,0,0,.35)}
.why-cell:hover{background:#fff}
.why-cell .icon{transition:transform .35s ease}
.why-cell:hover .icon{transform:translateY(-3px) rotate(-6deg)}
.principle:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.16)}
.case-media .device,.case-slide-media .device{transition:transform .5s ease,box-shadow .5s ease}
.case-media:hover .device,.case-slide-media:hover .device{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 44px 70px -32px rgba(0,0,0,.5)}
.device-screen img{transition:transform 1.2s ease}
.case-media:hover .device-screen img,.case-slide-media:hover .device-screen img{transform:scale(1.03)}
/* Keep the entire Gosh header and four-worker hero visible in every device frame.
   Single-image frames follow the capture's ratio; rotating frames contain it. */
.device:not(.is-slideshow) .device-screen:has(> img[src*="/work-gosh.webp"]){aspect-ratio:1270/714}
.device-screen img[src*="/work-gosh.webp"]{object-fit:contain;object-position:top center}
.case-media:hover .device-screen img[src*="/work-gosh.webp"],.case-slide-media:hover .device-screen img[src*="/work-gosh.webp"]{transform:none}

.others a > .icon:first-child,.hub-icon .icon{transition:transform .35s ease}
.others a:hover > .icon:first-child,.hub-card:hover .hub-icon .icon{transform:rotate(-8deg) scale(1.1)}
.carousel-nav button{transition:background .15s ease,transform .15s ease}
.carousel-nav button:active{transform:scale(.92)}
.plugin-card img,.plugin-mono{transition:transform .35s ease}
.plugin-card:hover img,.plugin-card:hover .plugin-mono{transform:rotate(-6deg) scale(1.06)}

/* Form fields: a calm focus state, and the label follows. */
.form-card input,.form-card textarea,.form-card select{transition:background .2s ease,box-shadow .2s ease,border-color .2s ease}
.form-card input:hover,.form-card textarea:hover,.form-card select:hover{background:#fff}
.form-card input:focus,.form-card textarea:focus,.form-card select:focus{background:#fff;outline:0;box-shadow:0 0 0 3px rgba(142,160,242,.55)}
.form-card label{transition:color .2s ease}
.form-card div:focus-within > label{color:#fff}

/* Accordions open smoothly where the browser supports it. */
details > :not(summary){animation:open .35s ease both}
@keyframes open{from{opacity:0;transform:translateY(-6px)}}

/* Sections reveal as they scroll into view. Only with JavaScript, so content
   is never hidden from someone without it. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .is-slideshow .device-screen img{opacity:0}
  .is-slideshow .device-screen img:nth-child(1){opacity:1}
  .hero h1 em,.page-hero h1 em,.svc-hero h1 em{color:var(--ink);background:none}
  .hero-art-tilt{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .js .navpill,.masthead .header-cta{display:none}
  .js .menu-btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--font);padding:10px 18px;border-radius:999px;border:1px solid #ddd;background:#fff;cursor:pointer}
  /* The header is sticky, so a menu taller than the screen must scroll inside itself. */
  .masthead.is-open .navpill{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:16px;right:16px;top:86px;border-radius:20px;background:#fff;padding:12px;box-shadow:0 24px 60px -20px rgba(0,0,0,.3);max-height:calc(100vh - 102px);max-height:calc(100dvh - 102px);overflow-y:auto;overscroll-behavior:contain}
  .masthead.is-open .navpill > a,.masthead.is-open .has-menu > a{padding:13px 14px}
  .masthead.is-open .menu-panel{position:static;transform:none;opacity:1;visibility:visible;width:auto;box-shadow:none;border-radius:0;display:block;padding:0 0 6px 6px}
  .masthead.is-open .menu-panel::before{display:none}
  .masthead.is-open .mega-cols{display:flex;flex-direction:column;padding:0}
  .masthead.is-open .mega-col{display:contents}
  .masthead.is-open .mega-group--last{order:1}
  .masthead.is-open .mega-group + .mega-group{margin-top:0}
  .masthead.is-open .mega-h{margin:10px 0 2px}
  .masthead.is-open .mega-item{padding:8px 10px;align-items:center}
  .masthead.is-open .mega-ic{width:32px;height:32px}
  .masthead.is-open .mega-tx small,.masthead.is-open .mega-feature,.masthead.is-open .mega-foot{display:none}
  .masthead.is-open .navpill .header-cta{display:inline-flex;margin-top:8px}
  .photo-pair{grid-template-columns:1fr}
  .statement,.services,.case,.contact,.story,.svc-hero-in,.problem-card,.case-slide,.get{grid-template-columns:1fr}
  .problem-media{margin:0}
  .who-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-cell:not(:nth-child(3n)){border-right:0}
  .why-cell:nth-child(odd){border-right:1px solid #dcdcdf}
  .process{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process::before{display:none}
  .hub-grid,.others{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-path{display:none}
  .journey-steps{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .journey-step,.journey-step:nth-child(odd){display:grid;grid-template-columns:120px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:22px;align-items:start;text-align:left;padding:0 0 34px;position:relative}
  .journey-step:not(:last-child)::before{content:"";position:absolute;left:60px;top:120px;bottom:6px;border-left:2px dashed #c9cdd5}
  .journey-dot{display:none}
  .journey-art{grid-row:1 / 4;max-width:120px;padding:4px}
  .journey-num{justify-self:start;margin-top:6px}
  .journey-step p{max-width:none}
  .plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .compare-hint{display:block}
  .plan-for{min-height:0}
  .who-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .faq-wrap,.why-free{grid-template-columns:1fr}
  .process-3::before{display:none}
  .case--flip .case-media{order:0}
  .plugin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews{grid-template-columns:1fr}
  .proof-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof:nth-child(3){border-left:0}
  .proof:nth-child(n+3){border-top:1px solid var(--line)}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
  .footer-creds{grid-template-columns:1fr}
  .cred{justify-content:flex-start}
}

/* A quieter opening, with real work doing the explaining. */
.eyebrow{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.hero-home{text-align:left;padding:58px 0 32px;overflow:visible}
.hero-home::before{display:none}
.home-opening{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(36px,5vw,76px)}
.hero-home h1{max-width:13ch;font-size:clamp(40px,4.8vw,62px);line-height:1.13;letter-spacing:-.045em;margin:0 0 24px;text-wrap:balance}
.hero-home h1 em{color:#666;background:none;animation:none}
.page-hero h1 em,.svc-hero h1 em{color:#666;background:none;animation:none}
.statement-copy p{animation:none;color:#1d2026}
.statement-copy p + p,.svc-statement span{animation:none;color:var(--muted)}
.about-work{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:48px}
.about-work a{min-width:0}
.about-work > a > span{display:block;font-size:13px;line-height:1.7;color:var(--muted);margin-top:18px}
.about-work b{color:var(--ink);font-weight:600}
.hero-home .lead{margin:0 0 20px;max-width:46ch;font-size:16px;line-height:1.75;color:#4b5058}
.hero-home .hero-ctas{justify-content:flex-start;align-items:center;gap:20px}
.text-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;min-height:44px}
.text-link .icon{width:16px;height:16px;transition:transform .2s ease}
.text-link:hover .icon{transform:translateX(4px)}
.hero-reassurance{font-size:12px;line-height:1.6;color:var(--muted);margin:20px 0 0}
.hero-routes{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;padding-top:20px;border-top:1px solid #dcdcdf;font-size:12px;color:var(--muted)}
.hero-routes a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.hero-routes b{font-weight:600;color:var(--ink)}
.opening-project{min-width:0;display:block;background:#fff;border:1px solid #dedee1;border-radius:18px;overflow:hidden;box-shadow:0 18px 42px -30px rgba(0,0,0,.25);transition:transform .25s ease}
.opening-project:hover{transform:translateY(-4px)}
.opening-project-top{display:flex;justify-content:space-between;gap:12px;padding:17px 22px;font-size:11px;color:var(--muted)}
.opening-project-top span:first-child{font-weight:600;color:var(--ink)}
.opening-project-image{margin:0 16px;background:#222;border:6px solid #242424;border-radius:9px;overflow:hidden;aspect-ratio:16/11}
.opening-project-image img{width:100%;height:100%;object-fit:cover;object-position:top}
.opening-project-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px}
.opening-project-caption h2{font-size:16px;line-height:1.5;font-weight:600;letter-spacing:-.02em}
.opening-project-caption p{margin:5px 0 0;font-size:11px;color:var(--muted)}
.project-arrow{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
  transition:background .3s ease,border-color .3s ease,box-shadow .35s cubic-bezier(.33,1,.68,1),transform .25s cubic-bezier(.33,1,.68,1)}
.project-arrow .icon{transition:color .3s ease}
/* Hovering the project card fills the circular arrow black, the same dark
   pill used by the site's buttons, and the arrow launches off to the right
   and re-enters from the left, always landing pointing forward. */
@keyframes fd-arrow-swap{
  0%{transform:translateX(0);opacity:1}
  45%{transform:translateX(22px);opacity:0}
  50%{transform:translateX(-22px);opacity:0}
  100%{transform:translateX(0);opacity:1}
}
.opening-project:hover .project-arrow{background:linear-gradient(93deg,rgba(7,3,3,.92),rgba(19,24,33,.92));
  border-color:transparent;transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(0,0,0,.55)}
.opening-project:hover .project-arrow .icon{color:#fff;animation:fd-arrow-swap .55s cubic-bezier(.33,1,.68,1) .05s both}
.hero-home .trust{max-width:none;padding-top:26px;margin-top:46px;border-top:1px solid #dcdcdf}
.hero-home .trust-item{justify-content:flex-start;padding-inline:0}
.hero-home .trust-item b{font-size:17px}
.hero-home .trust-ic{width:38px;height:38px;box-shadow:none;border:1px solid #e1e1e4}
.hero-home .trust-ic .icon{width:19px;height:19px}
.review-invitation{padding:32px 0;background:#fff;border-bottom:1px solid var(--line)}
.review-invitation-in{display:flex;align-items:center;justify-content:space-between;gap:32px}
.review-invitation .eyebrow{margin-bottom:8px}
.review-invitation h2{font-size:22px;font-weight:600;line-height:1.4;letter-spacing:-.025em}
.review-invitation p:not(.eyebrow){font-size:14px;color:var(--muted);margin:8px 0 0;max-width:66ch}
.review-invitation .text-link{flex:none}
/* The review-invitation call to action reads as a plain text link at rest.
   On hover the dark pill wipes in across the full width from the left edge,
   the site's signature light sweep runs across it just after the fill, and
   the button lifts with the deeper shadow the header buttons use. The
   pill's box is reserved from the start, so nothing shifts on hover. */
.review-invitation .review-invite{position:relative;overflow:hidden;isolation:isolate;
  padding:12px 24px;border-radius:999px;border:1px solid transparent;
  transition:color .3s ease,box-shadow .35s cubic-bezier(.33,1,.68,1),transform .25s cubic-bezier(.33,1,.68,1)}
.review-invitation .review-invite::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:linear-gradient(93deg,rgba(7,3,3,.92),rgba(19,24,33,.92));
  transform:translateX(-101%);
  transition:transform .5s cubic-bezier(.33,1,.68,1)}
.review-invitation .review-invite::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s ease}
.review-invitation .review-invite:hover{color:#fff;transform:translateY(-1px);
  box-shadow:inset 0 0 2px rgba(255,255,255,.15),0 14px 26px -12px rgba(0,0,0,.55)}
.review-invitation .review-invite:hover::before{transform:none}
.review-invitation .review-invite:hover::after{transform:translateX(120%);transition:transform .6s ease .08s}
.notice-error{background:#321d1c;color:#ffcfca}
.notice-error a{text-decoration:underline;text-underline-offset:3px}
.notice-error p{margin:0 0 8px}
.notice-error ul{padding-left:18px;margin:0}
.form-card [aria-invalid="true"]{border-color:#ff9b8e}
.form-privacy{font-size:12px;line-height:1.6;color:#b6b9c0;margin:16px 0 0}
.form-privacy a{text-decoration:underline;text-underline-offset:3px;color:#e4e4e6}
.form-card .form-note{overflow-wrap:anywhere}
.page-free-review .svc-hero-in{align-items:start}
.page-free-review .svc-hero-copy{padding-top:18px}
.form-proof{margin:20px 0 0;padding:18px 0 0;border-top:1px solid #dedee1;color:var(--ink)}
.form-proof blockquote{font-size:14px;line-height:1.65;margin:0 0 8px}
.form-proof figcaption{font-size:12px;color:var(--muted)}
.receipt{max-width:620px;margin:30px auto 0;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left}
.receipt p + p{margin-top:10px}
.receipt code{font-size:13px;overflow-wrap:anywhere}
.page-hero .after-hero{margin-top:28px}
.work-jumps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px auto 0;max-width:760px}
.work-jumps a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid #dedee1;border-radius:8px;background:#fff;font-size:13px;font-weight:500;min-height:44px}
.work-jumps a:hover{border-color:#9a9ea7}
.work-jumps .icon{width:13px;height:13px}
[id^="project-"],#main,#plans,#contact-form{scroll-margin-top:116px}
.case h3{font-size:clamp(23px,2.5vw,32px);line-height:1.3;letter-spacing:-.025em}
@media (min-width:981px) and (max-width:1120px){.navpill > a,.navpill .has-menu > a{padding-inline:10px;font-size:13px}.masthead-in{gap:14px}.logo img{height:38px}}
@media (max-width:980px){
  .home-opening{grid-template-columns:1fr 1fr;gap:28px}
  .hero-home h1{font-size:clamp(38px,5.5vw,52px)}
  .hero-home .hero-ctas{align-items:flex-start;gap:10px}
  .hero-home .hero-ctas .text-link{padding-inline:2px}
  .opening-project-caption{padding:18px}
  html:not(.js) .masthead{position:relative}
  html:not(.js) .masthead-in{flex-wrap:wrap;padding-block:18px}
  html:not(.js) .navpill{display:flex;flex-wrap:wrap;width:100%;border-radius:12px;box-shadow:none;order:2}
  html:not(.js) .has-menu .menu-panel{display:none}
}
@media (max-width:680px){
  .masthead-in{min-height:80px}.logo img{height:36px}
  .hero-home{padding:34px 0 24px}
  .home-opening{grid-template-columns:1fr;gap:34px}
  .about-work{grid-template-columns:1fr;gap:30px}
  .hero-home h1{font-size:clamp(38px,10.4vw,52px);max-width:14ch;line-height:1.12}
  .hero-home .lead{font-size:15px;line-height:1.7}
  .hero-home .hero-ctas{align-items:center;gap:6px 18px}
  .hero-home .hero-ctas .btn{padding-inline:20px}
  .hero-routes{margin-top:20px;padding-top:16px}
  .opening-project-image{aspect-ratio:16/10}
  .hero-home .trust{margin-top:28px;padding-top:20px;gap:10px}
  .hero-home .trust-item{align-items:flex-start;gap:9px}
  .hero-home .trust-item b{font-size:15px}.hero-home .trust-item span:not(.trust-ic):not(.count){font-size:11px}
  .hero-home .trust-ic{width:30px;height:30px}
  .hero-home .trust-ic .icon{width:16px;height:16px}
  .review-invitation-in{align-items:flex-start;flex-direction:column;gap:14px}
  .review-invitation h2{font-size:21px}
  .btn{white-space:normal;line-height:1.25;text-align:center}
  .form-proof{margin-bottom:8px}
}
@media (max-width:680px){
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-band{grid-template-columns:1fr}
  .proof + .proof{border-left:0;border-top:1px solid var(--line)}
  .trust-item{justify-content:flex-start;padding:10px 8px}
  .svc-grid{grid-template-columns:1fr}
  .svc-card ul{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .plugin-grid,.timeline,.principles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bar{grid-template-columns:1fr;text-align:center}
  .footer-bar .right{text-align:center}
  .footer-cta{flex-direction:column;align-items:flex-start}
  .hero h1{line-height:1.3}
  .who-grid,.why-grid,.process,.hub-grid,.others,.who-grid-3,.who-grid-2{grid-template-columns:1fr}
  .journey-step,.journey-step:nth-child(odd){display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 56px}
  .journey-art{max-width:170px;padding:6px 8px}
  .journey-num{justify-self:auto;margin-top:10px}
  .journey-step p{max-width:30ch}
  .journey-step:not(:last-child)::before{left:50%;top:auto;bottom:6px;height:40px;border-left:2px dashed #c9cdd5}
  .hero-art-tilt{transform:none}
  .why-cell:nth-child(odd){border-right:0}
  .who-card{min-height:0}
  .highlights{gap:18px}
  .hub-group summary b{font-size:19px}
}

/* Show the whole NationChat homepage capture without a cropped header. */
.device:not(.is-slideshow) .device-screen:has(> img[src*="/work-nationchat.webp"]){aspect-ratio:1269/714}
.device-screen img[src*="/work-nationchat.webp"]{object-fit:contain;object-position:top center}
.case-media:hover .device-screen img[src*="/work-nationchat.webp"],.case-slide-media:hover .device-screen img[src*="/work-nationchat.webp"]{transform:none}