/* ==========================================================================
   Costworks - the shared stylesheet for every page of costworks.co.uk.

   One file, linked from every page with a ?v= hash that
   tools/costworks-site.py keeps current, so a change here reaches every page
   without anybody hunting for copies.

   CONTRAST IS MEASURED, NOT EYEBALLED. Every text colour below is paired with
   the grounds it is allowed on, and the ratios are WCAG 2.1, computed:

     on --ground #F1F5F7 / --surface #FFFFFF (light)
       --ink       #10263A   14.1 / 15.6
       --muted     #56616D    5.6 /  6.2   (darker than the brand's #5F6B78,
                                            which is 5.0 / 5.5, so small grey
                                            text has a margin rather than a hair)
       --accent-ink #00705E   5.6 /  6.0   links, eyebrows, icons
       --steel-ink #1B5E8C    6.3 /  7.0
     on --ink #10263A / --ink-2 #0B1D2D (dark)
       --on-dark   #F1F5F7   14.1 / 15.9
       --dim       #A3B3C2    7.4 /  8.4   (the brand's #93A6B8 is 6.2; lifted
                                            so 14px grey on dark is comfortable)
       --accent-bright #2ECFB4  8.4 / 9.5
     buttons
       #FFFFFF on --accent-ink #00705E 6.0   (primary)
       #FFFFFF on --accent-press       4.9   (primary hover)
       #FFFFFF on --ink                15.6  (dark button)

   --accent #00A98F IS NEVER TEXT ON LIGHT (2.7:1 on --ground). It fills,
   rules and marks. Recolouring a link to it reads fine to the author and is
   unreadable to a good share of the people it is for.
   ========================================================================== */

@view-transition{navigation:auto}

:root{
  color-scheme:light;
  --ink:#10263A;
  --ink-2:#0B1D2D;
  --ink-3:#07131F;
  --ink-raised:#14314A;
  --ground:#F1F5F7;
  --surface:#FFFFFF;
  --surface-2:#F7FAFB;
  --tint:#E6F5F1;
  --tint-steel:#E7EEF6;
  --line:#E1E6EC;
  --line-strong:#CBD3DC;
  --line-dark:#23394D;
  --line-dark-2:rgba(163,179,194,.18);
  --muted:#56616D;
  --dim:#A3B3C2;
  --on-dark:#F1F5F7;
  --accent:#00A98F;
  --accent-bright:#2ECFB4;
  --accent-press:#00806C;
  --accent-ink:#00705E;
  --steel:#1B5E8C;
  --steel-ink:#1B5E8C;
  --steel-bright:#7FB3D9;
  /* The pay bands, in the app's own colours (App/.../core/brand.dart) so a
     chart on this site and a chart in the product read as one system. Fills
     only - every band label is set in --ink beside its swatch. */
  --b-std:#1B5E8C;
  --b-ot:#7A5A4E;
  --b-sat:#B07D1A;
  --b-sun:#F4511E;
  --b-bh:#C0392B;
  --b-wot:#5C4237;
  --good:#2F7D32;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(16,38,58,.06),0 4px 14px rgba(16,38,58,.05);
  --shadow:0 2px 4px rgba(16,38,58,.04),0 18px 44px -12px rgba(16,38,58,.16);
  --shadow-lift:0 4px 8px rgba(16,38,58,.06),0 36px 80px -20px rgba(16,38,58,.32);
  --shadow-glow:0 10px 30px -10px rgba(0,169,143,.55);
  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --nav-h:72px;
  --wrap:1240px;
  --gutter:clamp(20px,4.6vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset & base ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* `overflow-x:clip` on BOTH html and body, and clip rather than hidden: a
   closed drawer parked off the right edge is otherwise a page that slides
   sideways under a thumb, and `hidden` would make html a scroll box and break
   the sticky header. (Measured on the old page: 705px wide at 390.) */
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 20px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--sans);font-size:1.0625rem;background:var(--ground);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent-ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(46,207,180,.32);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.on-dark :focus-visible,footer :focus-visible{outline-color:var(--accent-bright)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--on-dark);padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{left:8px}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.container.narrow{max-width:880px}
.container.wide{max-width:1400px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-weight:750;line-height:1.08;letter-spacing:-.025em;text-wrap:balance;color:inherit}
/* Archivo is variable across WIDTH as well as weight. Headlines are set a
   little expanded - the engineering-drawing feel - and body copy at normal
   width. Same family throughout, because the wordmark is Archivo and the app
   renders in it. */
.display,h1{font-stretch:112%}
.display{font-size:clamp(2.7rem,6.6vw,5.6rem);font-weight:800;letter-spacing:-.04em;line-height:.98}
h1{font-size:clamp(2.35rem,5.2vw,4.1rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.95rem,3.7vw,3.1rem);font-stretch:108%;margin-bottom:18px}
h3{font-size:1.24rem;letter-spacing:-.015em;margin-bottom:8px;line-height:1.2}
h4{font-size:1.02rem;letter-spacing:-.01em;margin-bottom:6px}
p{max-width:68ch;text-wrap:pretty}
strong{font-weight:650}
.lead{font-size:clamp(1.08rem,1.55vw,1.27rem);line-height:1.6;color:var(--muted);max-width:62ch}
.dark .lead,.on-dark .lead{color:var(--dim)}
.muted{color:var(--muted)}
.dark .muted{color:var(--dim)}
.center{text-align:center}
.center p,.center .lead{margin-left:auto;margin-right:auto}
.tnum{font-variant-numeric:tabular-nums}
.grad{background:linear-gradient(100deg,var(--accent-bright) 0%,#9CF0DF 38%,#A8D4F0 70%,var(--accent-bright) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradShift 9s linear infinite}
/* The same idea on a light ground needs DARK ends, or the words vanish: the
   brightest stop here is the accent-ink, 5.6:1 on the ground. */
.grad-light{background:linear-gradient(100deg,var(--accent-ink),var(--steel-ink) 55%,var(--accent-ink));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradShift 12s linear infinite}
@keyframes gradShift{to{background-position:-220% 0}}

/* Eyebrow: a mono spec label with a ruled tick in front, like a callout on a
   drawing. */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:16px}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;opacity:.8}
.center .eyebrow{justify-content:center}
.dark .eyebrow,.on-dark .eyebrow{color:var(--accent-bright)}
.spec{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dark .spec{color:var(--dim)}
.kbd{font-family:var(--mono);font-size:.72rem;padding:2px 7px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--surface);color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:650;font-size:.98rem;line-height:1.2;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:0 0 18px;transition:transform .25s var(--ease)}
.btn:hover svg.go{transform:translateX(4px)}
/* WHITE ON THE DEEP TEAL (29 Oct 2026, Graham: the dark label on the bright
   teal was hard to read). White on --accent-ink is 6.0:1, better than the
   5.2:1 ink had on --accent; white on --accent itself would be 3.0:1, so the
   fill had to darken for the text to go white. The hover lightens only to
   --accent-press, where white is still 4.9:1. The thin bright ring keeps the
   button standing off the dark grounds now its fill is darker. */
.btn-primary{background:var(--accent-ink);color:#fff;box-shadow:var(--shadow-glow),inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(46,207,180,.45)}
.btn-primary:hover{background:var(--accent-press);box-shadow:0 16px 36px -12px rgba(0,169,143,.75),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(46,207,180,.6)}
/* The sheen: a soft bar of light that crosses the button on hover. */
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 10px 26px -12px rgba(16,38,58,.6)}
.btn-dark:hover{background:var(--ink-raised)}
.btn-ghost{background:rgba(255,255,255,.6);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:#fff}
.dark .btn-ghost,.on-dark .btn-ghost,.site-foot .btn-ghost{background:rgba(241,245,247,.04);color:var(--on-dark);border-color:rgba(241,245,247,.28)}
.dark .btn-ghost:hover,.on-dark .btn-ghost:hover,.site-foot .btn-ghost:hover{border-color:var(--on-dark);background:rgba(241,245,247,.09)}
.btn-sm{padding:10px 18px;font-size:.9rem}
.btn-lg{padding:17px 30px;font-size:1.05rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .btn-row{justify-content:center}
.link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:650;text-decoration:none;color:var(--accent-ink)}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover svg{transform:translateX(4px)}
.dark .link-arrow{color:var(--accent-bright)}

/* ---------- Icons ---------- */
.ico{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-tile{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--tint);color:var(--accent-ink);margin-bottom:18px;box-shadow:inset 0 0 0 1px rgba(0,112,94,.12)}
.icon-tile.steel{background:var(--tint-steel);color:var(--steel-ink);box-shadow:inset 0 0 0 1px rgba(27,94,140,.12)}
.dark .icon-tile{background:rgba(46,207,180,.1);color:var(--accent-bright);box-shadow:inset 0 0 0 1px rgba(46,207,180,.22)}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:80;height:var(--nav-h);background:rgba(241,245,247,.94);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;view-transition-name:site-nav}
.nav.stuck{background:rgba(255,255,255,.95);border-bottom-color:var(--line);box-shadow:0 8px 30px -14px rgba(16,38,58,.18)}
.nav-inner{display:flex;align-items:center;height:100%;gap:28px}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;border-radius:8px}
.brand img{width:156px;height:auto}
.nav-links{display:flex;align-items:center;gap:4px;list-style:none;margin-right:auto}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-trigger{display:inline-flex;align-items:center;gap:5px;padding:9px 13px;border-radius:10px;font-size:.95rem;font-weight:550;color:var(--ink);text-decoration:none;background:transparent;border:0;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.nav-links>li>a:hover,.nav-trigger:hover,.has-menu.open .nav-trigger{background:rgba(16,38,58,.06)}
.nav-links a[aria-current="page"],.nav-trigger[data-current]{color:var(--accent-ink)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--accent)}
.nav-trigger .chev{width:14px;height:14px;transition:transform .25s var(--ease)}
.has-menu.open .nav-trigger .chev{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-signin{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none;padding:9px 12px;border-radius:10px}
.nav-signin:hover{background:rgba(16,38,58,.06);text-decoration:none}
/* The mega menu. Opened by script (click, Enter, Escape closes) and by hover
   where there is a mouse; the CSS for both is the same `.open`. A bridge
   pseudo-element stops the menu closing as the pointer crosses the gap. */
.mega{position:absolute;top:calc(100% + 12px);left:-24px;width:min(720px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lift);padding:14px;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:top left;transition:opacity .2s ease,transform .25s var(--ease),visibility 0s linear .25s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.has-menu.open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s var(--ease),visibility 0s}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega a{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--ink);transition:background-color .18s ease}
.mega a:hover{background:var(--ground);text-decoration:none}
.mega a .icon-tile{width:38px;height:38px;border-radius:11px;margin:0;flex:0 0 38px}
.mega a .icon-tile .ico{width:19px;height:19px}
.mega a b{display:block;font-weight:650;font-size:.95rem;line-height:1.3}
.mega a span.d{display:block;font-size:.85rem;color:var(--muted);line-height:1.45;margin-top:2px}
.mega.small{width:340px;left:-16px}
.mega.small .mega-grid{grid-template-columns:1fr}
.mega-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;padding:14px 16px 6px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.ham{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:12px}
.ham:hover{background:rgba(16,38,58,.06)}
.ham span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),opacity .2s ease}
body.drawer-open .ham span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.drawer-open .ham span:nth-child(2){opacity:0}
body.drawer-open .ham span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Reading progress: a 2px accent rule under the bar, driven by the scroll
   timeline where the browser has one and simply absent where it does not. */
.nav-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-bright),var(--steel-bright));transform-origin:0 50%;transform:scaleX(0);opacity:0}
@supports (animation-timeline:scroll()){
  .nav-progress{opacity:1;animation:progress linear both;animation-timeline:scroll(root)}
  @keyframes progress{to{transform:scaleX(1)}}
}

/* The drawer lives OUTSIDE the header on purpose: the header carries a
   backdrop-filter, which makes it the containing block for any fixed child,
   and the old page's scrim came out 785x0 because of exactly that. */
.drawer{position:fixed;top:var(--nav-h);right:0;bottom:0;width:min(380px,100vw);background:var(--surface);z-index:79;transform:translateX(102%);transition:transform .32s var(--ease),visibility 0s linear .32s;visibility:hidden;overflow-y:auto;padding:16px 20px 40px;box-shadow:-20px 0 50px -20px rgba(16,38,58,.3);overscroll-behavior:contain}
body.drawer-open .drawer{transform:none;visibility:visible;transition:transform .32s var(--ease)}
.drawer-scrim{position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(7,19,31,.45);z-index:78;opacity:0;pointer-events:none;transition:opacity .3s ease}
body.drawer-open .drawer-scrim{opacity:1;pointer-events:auto}
.drawer h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:18px 4px 8px}
.drawer a:not(.btn){display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:12px;text-decoration:none;color:var(--ink);font-weight:550}
.drawer a:not(.btn):hover{background:var(--ground)}
.drawer a:not(.btn) .ico{color:var(--accent-ink);width:20px;height:20px}
.drawer .btn-row{margin-top:22px;flex-direction:column;align-items:stretch}
.drawer .btn{width:100%}

/* ---------- Sections ---------- */
.section{position:relative;padding:clamp(72px,10vw,132px) 0}
.section.tight{padding:clamp(52px,7vw,88px) 0}
.section.white{background:var(--surface)}
.section.alt{background:var(--surface-2)}
.section.lined{border-top:1px solid var(--line)}
.dark{position:relative;background:var(--ink);color:var(--on-dark)}
.dark.deep{background:var(--ink-2)}
.sec-head{margin-bottom:clamp(40px,5vw,64px)}
.sec-head.center{text-align:center}
.sec-head.center .lead{margin:0 auto}
.sec-head.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.sec-head.split .lead{margin:0}

/* Blueprint ground: a fine 32px grid and a 160px major grid, both faint,
   masked to fade out. Decoration under text, never behind it at strength:
   the lines are 4-7% white, which moves the ink ground by less than 1% and
   leaves every ratio above where it was. */
.blueprint{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(127,179,217,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(127,179,217,.075) 1px,transparent 1px),linear-gradient(rgba(127,179,217,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(127,179,217,.035) 1px,transparent 1px);background-size:160px 160px,160px 160px,32px 32px,32px 32px;background-position:-1px -1px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 18%,#000 25%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 50% 18%,#000 25%,transparent 78%)}
.blueprint.light{background-image:linear-gradient(rgba(16,38,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(16,38,58,.06) 1px,transparent 1px),linear-gradient(rgba(16,38,58,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(16,38,58,.03) 1px,transparent 1px)}
/* The aurora: two soft blooms drifting slowly. Transform-only, so it is
   composited and costs nothing on the main thread. */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(10px);opacity:.9;will-change:transform}
.aurora i:nth-child(1){width:62vw;height:62vw;max-width:900px;max-height:900px;left:-14vw;top:-30vw;background:radial-gradient(closest-side,rgba(0,169,143,.30),rgba(0,169,143,0));animation:drift1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:54vw;height:54vw;max-width:820px;max-height:820px;right:-16vw;top:-12vw;background:radial-gradient(closest-side,rgba(27,94,140,.42),rgba(27,94,140,0));animation:drift2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:40vw;height:40vw;max-width:600px;max-height:600px;left:30%;top:40%;background:radial-gradient(closest-side,rgba(46,207,180,.12),rgba(46,207,180,0));animation:drift1 30s ease-in-out infinite alternate-reverse}
@keyframes drift1{to{transform:translate(9vw,7vw) scale(1.12)}}
@keyframes drift2{to{transform:translate(-8vw,9vw) scale(.92)}}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Home hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#173653 0%,var(--ink) 42%,var(--ink-2) 100%);color:var(--on-dark);padding:clamp(56px,8vw,104px) 0 0;isolation:isolate}
.hero .container{position:relative;z-index:2}
.hero-copy{text-align:center;max-width:980px;margin:0 auto}
.hero-copy .lead{margin:24px auto 34px;color:#C3CFDA;max-width:60ch}
.hero-copy .btn-row{justify-content:center}
.pill{display:inline-flex;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:999px;background:rgba(241,245,247,.06);border:1px solid rgba(241,245,247,.14);font-size:.86rem;color:var(--on-dark);text-decoration:none;margin-bottom:28px;transition:background-color .2s ease,border-color .2s ease}
.pill:hover{background:rgba(241,245,247,.1);border-color:rgba(241,245,247,.26);text-decoration:none}
.pill b{background:var(--accent-ink);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px}
.pill .ico{width:15px;height:15px;color:var(--accent-bright);margin-right:4px}
.hero-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:30px;list-style:none;font-size:.9rem;color:#C3CFDA}
.hero-facts li{display:flex;align-items:center;gap:8px}
.hero-facts .ico{width:17px;height:17px;color:var(--accent-bright)}

/* The product stage: a browser with the dashboard, a phone overlapping its
   foot, and three small cards floating round them. It starts tipped back and
   lays flat as the page scrolls - where scroll timelines exist. Elsewhere it
   is simply flat, which is also what reduced motion gets. */
.stage{position:relative;margin:clamp(52px,7vw,84px) auto 0;max-width:1120px;perspective:1800px;padding-bottom:clamp(40px,6vw,80px)}
.stage-tilt{position:relative;transform-style:preserve-3d;transform-origin:50% 100%}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .stage-tilt{animation:layflat linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    @keyframes layflat{from{transform:rotateX(16deg) scale(.95) translateY(-10px)}to{transform:none}}
  }
}
.stage::after{content:"";position:absolute;left:8%;right:8%;bottom:6%;height:40%;background:radial-gradient(closest-side,rgba(46,207,180,.35),transparent);filter:blur(40px);z-index:-1}
.frame{position:relative;background:linear-gradient(180deg,#1E2A35,#18222C);border-radius:16px;padding:10px 10px 0;box-shadow:0 0 0 1px rgba(241,245,247,.08),0 50px 100px -30px rgba(0,0,0,.6),0 30px 60px -30px rgba(0,169,143,.25)}
.frame-bar{display:flex;align-items:center;gap:7px;padding:2px 6px 10px}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:#3A4652}
.frame-bar i:nth-child(1){background:#FF5F57}
.frame-bar i:nth-child(2){background:#FEBC2E}
.frame-bar i:nth-child(3){background:#28C840}
.frame-bar .url{display:flex;align-items:center;gap:7px;margin:0 auto;padding:5px 16px;border-radius:8px;background:rgba(241,245,247,.07);font-size:.76rem;color:var(--dim);max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-bar .url .ico{width:12px;height:12px;stroke-width:2.2}
.frame-screen{border-radius:8px 8px 0 0;overflow:hidden;background:#fff}
.frame-screen img{width:100%}
.frame.light{background:linear-gradient(180deg,#ECEFF2,#E3E7EB);box-shadow:0 0 0 1px var(--line),var(--shadow-lift)}
.frame.light .frame-bar .url{background:#fff;color:var(--muted)}
.frame.round{padding-bottom:10px}
.frame.round .frame-screen{border-radius:8px}
/* The phone. Drawn in CSS so it stays sharp at every size and costs no
   image: a bezel, a screen, an island, and two side keys. */
.phone{position:relative;width:100%;max-width:300px;aspect-ratio:390/884;border-radius:46px;padding:9px;background:linear-gradient(145deg,#2A3642,#0B141C 60%);box-shadow:0 0 0 1.5px #3A4652,inset 0 0 0 1px rgba(255,255,255,.06),0 40px 80px -24px rgba(0,0,0,.55),0 18px 36px -18px rgba(16,38,58,.5)}
.phone::before{content:"";position:absolute;right:-3px;top:22%;width:3px;height:12%;border-radius:0 3px 3px 0;background:#2A3642}
.phone::after{content:"";position:absolute;left:-3px;top:18%;width:3px;height:7%;border-radius:3px 0 0 3px;background:#2A3642;box-shadow:0 46px 0 #2A3642}

.phone-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#F1F5F7}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top}
/* A status bar above the screenshot, so the island never sits on the app's
   own heading. The screenshots start at the app's first line. */
.phone-screen::before{content:"9:41";position:absolute;top:0;left:0;right:0;height:4.6%;padding:0 0 0 11%;display:flex;align-items:center;font-size:clamp(.5rem,1.1vw,.74rem);font-weight:700;color:var(--ink);background:#fff;z-index:2}
.phone-screen::after{content:"";position:absolute;top:1.9%;right:9%;width:14%;height:1.1%;border-radius:2px;background:linear-gradient(90deg,var(--ink) 0 30%,transparent 30% 38%,var(--ink) 38% 62%,transparent 62% 70%,var(--ink) 70%);z-index:2;opacity:.85}
.phone-screen>img,.phone-screen .slide{top:4.6%!important;height:95.4%!important}
.phone-screen>img{position:absolute;left:0}
.phone-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:31%;height:22px;border-radius:20px;background:#05090D;z-index:3}
/* THE PHONE SCALES AS ONE PIECE (29 Oct 2026). With pixel corners, the 46px
   that suits a 300px phone made the 123px hero phone on a real iPhone a
   capsule. The outer corner is a proportion of the phone's own box - 14.5% of
   its width, written as width% / height% so the corner stays round on a tall
   box. Everything inside uses cqw, which a CHILD resolves against the phone
   (an element cannot query its own container size, so cqw on .phone itself
   would read the viewport - the first attempt made 56px corners that way). */
.phone{border-radius:14.5% / 6.4%}
@supports (width:1cqw){
  .phone{container-type:inline-size;padding:0}
  .phone-screen{position:absolute;inset:2.8cqw;width:auto;height:auto;border-radius:11.7cqw}
  .phone-island{top:4.2cqw;height:7.6cqw}
  .phone-screen::before{font-size:3.7cqw}
}
/* Several screens crossfading inside one phone. :nth-child, no classes the
   script needs to know about; the script only flips `data-on`. */
.phone-screen .slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease,transform .7s var(--ease);transform:scale(1.03)}
.phone-screen .slide[data-on]{opacity:1;transform:none}
.stage .phone{position:absolute;left:-2%;bottom:0;width:23%;max-width:260px;transform:translateZ(60px)}
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 20px 50px -18px rgba(7,19,31,.55),0 0 0 1px rgba(16,38,58,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.86rem;line-height:1.3;white-space:nowrap;transform:translateZ(90px)}
.chip b{display:block;font-weight:700;font-size:.94rem}
.chip small{display:block;color:var(--muted);font-size:.78rem}
.chip .dot{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 34px}
.chip .dot .ico{width:18px;height:18px}
.chip .dot.ok{background:#E6F2E4;color:var(--good)}
.chip .dot.teal{background:var(--tint);color:var(--accent-ink)}
.chip .dot.warm{background:#FDEDE7;color:#B23A12}
.chip.c1{right:-3%;top:14%}
.chip.c2{right:6%;bottom:22%}
.chip.c3{left:16%;top:-4%}
@media (prefers-reduced-motion:no-preference){
  .chip{animation:bob 6s ease-in-out infinite}
  .chip.c2{animation-delay:-2s}
  .chip.c3{animation-delay:-4s}
  @keyframes bob{50%{translate:0 -10px}}
}

/* ---------- Customer strip & marquee ---------- */
.trust{display:flex;align-items:center;justify-content:center;gap:18px 26px;flex-wrap:wrap;padding:34px 0 8px;color:var(--dim);font-size:.92rem}
.trust a{display:flex;align-items:center;gap:14px;color:var(--on-dark);text-decoration:none;font-weight:600;padding:8px 16px 8px 8px;border-radius:16px;border:1px solid rgba(241,245,247,.12);background:rgba(241,245,247,.04);transition:border-color .2s ease,background-color .2s ease}
.trust a:hover{border-color:rgba(241,245,247,.3);background:rgba(241,245,247,.08);text-decoration:none}
.trust img{width:52px;height:auto;border-radius:10px;background:var(--ink-3);padding:6px}
.trust small{display:block;font-weight:400;color:#B8C6D3;font-size:.8rem}
.marquee{position:relative;overflow:hidden;padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:12px;width:max-content;animation:marq 60s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.9rem;font-weight:550;color:var(--ink);white-space:nowrap}
.marquee-track span .ico{width:16px;height:16px;color:var(--accent-ink)}
.dark .marquee-track span{background:rgba(241,245,247,.04);border-color:rgba(241,245,247,.12);color:var(--on-dark)}
.dark .marquee-track span .ico{color:var(--accent-bright)}
@keyframes marq{to{transform:translateX(calc(-50% - 6px))}}

/* ---------- Cards, grids, bento ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,2.6vw,32px);box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s ease;isolation:isolate}
.card p{color:var(--muted);font-size:.98rem}
.card h3{margin-bottom:10px}
a.card{display:block;color:inherit;text-decoration:none}
a.card:hover,.card.lift:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-strong);text-decoration:none}
a.card .link-arrow{margin-top:16px}
.dark .card{background:rgba(241,245,247,.035);border-color:var(--line-dark-2);box-shadow:none}
.dark .card p{color:var(--dim)}
.dark a.card:hover{border-color:rgba(46,207,180,.4);background:rgba(241,245,247,.055)}
/* The spotlight: a soft teal bloom that follows the pointer across a card,
   and a brighter one on its border. --mx/--my are set by site.js on
   pointermove; with no pointer the bloom simply never appears. */
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;opacity:0;transition:opacity .3s ease;background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(0,169,143,.09),transparent 42%)}
.spot::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;opacity:0;transition:opacity .3s ease;pointer-events:none;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(0,169,143,.7),transparent 45%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.spot:hover::before,.spot:hover::after{opacity:1}
.dark .spot::before{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(46,207,180,.12),transparent 42%)}

.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.bento>.card{display:flex;flex-direction:column;overflow:hidden;min-height:300px}
.bento .s2{grid-column:span 2}
.bento .s3{grid-column:span 3}
.bento .s4{grid-column:span 4}
.bento .s6{grid-column:span 6}
.bento .viz{margin-top:auto;padding-top:22px}
.bento .card .spec{margin-bottom:12px;display:block}

/* Small UI fragments drawn in HTML inside the bento tiles - each one shows the
   real thing the tile is about, in the app's own colours and words. */
.mini{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:.86rem}
.mini-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.mini-row:last-child{border-bottom:0}
.mini-row b{font-weight:650}
.mini-row .tnum{font-weight:650}
.bandbar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--line);gap:2px}
.bandbar i{display:block;height:100%;transition:flex-grow .6s var(--ease)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.8rem;color:var(--ink)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c,var(--b-std))}
.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.76rem;font-weight:650;white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.ok{background:#E6F2E4;color:#255F27}
.status.wait{background:#FBF0DC;color:#7A5410}
.status.back{background:#FBE6E3;color:#9C2B1F}
.status.draft{background:#EBEEF1;color:#4A5561}
.status.teal{background:var(--tint);color:var(--accent-ink)}
.jobchip{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.9rem;font-weight:500;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--accent);vertical-align:bottom}
@media (prefers-reduced-motion:no-preference){
  .typed{width:0;animation:typing 1.6s steps(6) .6s forwards,caret .8s step-end infinite}
  @keyframes typing{to{width:6.2ch}}
  @keyframes caret{50%{border-color:transparent}}
}
.week-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.week-strip span{display:grid;place-items:center;height:38px;border-radius:9px;background:var(--surface);border:1px solid var(--line);font-size:.74rem;font-weight:650;color:var(--muted)}
.week-strip span.h{background:var(--tint);border-color:rgba(0,112,94,.25);color:var(--accent-ink)}
.week-strip span.hh{background:linear-gradient(135deg,var(--tint) 50%,var(--surface) 50%);border-color:rgba(0,112,94,.25);color:var(--accent-ink)}
.week-strip span.bh{background:#FBE6E3;border-color:rgba(156,43,31,.2);color:#9C2B1F}

/* A white card inside a dark band keeps light-ground text colours: the
   .dark rules for spec labels and muted text would otherwise turn them pale on
   white (2.15:1, found in the blog headers). */
.dark .mini,.dark .post-art,.dark .on-light{color:var(--ink)}
.dark .mini .spec,.dark .mini .muted,.dark .post-art .spec,.dark .post-art .muted,.dark .on-light .spec,.dark .on-light .muted{color:var(--muted)}
.pricing-card{--dim:#C3CFDA}
.pricing-card .aurora{opacity:.35!important}
.pricing-card .lead,.pricing-card .ticks li{color:#C3CFDA}
.pricing-card .badge{color:#7DEBD7}

/* ---------- Feature rows (text beside a picture) ---------- */
.feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,6vw,88px);align-items:center}
.feature-row.flip>:first-child{order:2}
.feature-row+.feature-row{margin-top:clamp(80px,10vw,140px)}
.feature-row .figure{position:relative}
.ticks{list-style:none;display:grid;gap:14px;margin-top:26px}
.ticks li{position:relative;padding-left:34px;color:var(--muted)}
.ticks li strong{color:var(--ink)}
.dark .ticks li{color:var(--dim)}
.dark .ticks li strong{color:var(--on-dark)}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:22px;height:22px;border-radius:7px;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300705E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.dark .ticks li::before{background-color:rgba(46,207,180,.14);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ECFB4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.ticks.cross li::before{background:#FBE6E3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C2B1F' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/13px no-repeat}

/* Annotated figure: callouts with leader lines, like a dimensioned drawing. */
.note-tag{position:absolute;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:6px 10px;border-radius:9px;box-shadow:var(--shadow-sm);white-space:nowrap;z-index:3}
.note-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,169,143,.2)}

/* ---------- The week, flowing (numbered steps) ---------- */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:flow}
.flow::before{content:"";position:absolute;top:27px;left:6%;right:6%;height:2px;background:var(--line-dark-2)}
.flow::after{content:"";position:absolute;top:27px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-bright),var(--steel-bright));transform-origin:0 50%;transform:scaleX(var(--flow,1));transition:transform 1.8s var(--ease)}
.flow.armed::after{--flow:0}
.flow-step{position:relative;text-align:center;counter-increment:flow;padding:0 4px}
.flow-step .n{position:relative;z-index:1;width:56px;height:56px;margin:0 auto 20px;border-radius:18px;display:grid;place-items:center;background:var(--ink-raised);border:1px solid rgba(46,207,180,.35);color:var(--accent-bright);box-shadow:0 0 0 6px var(--ink),0 14px 30px -10px rgba(0,169,143,.5)}
.flow-step .n .ico{width:24px;height:24px}
.flow-step .spec{display:block;margin-bottom:6px}
.flow-step h3{font-size:1.06rem}
.flow-step p{font-size:.92rem;color:var(--dim);margin:0 auto}

/* ---------- Showcase tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-bottom:26px}
.tabs.center{justify-content:center}
.tab{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--dim);background:transparent;border:1px solid var(--line-dark-2);border-radius:999px;padding:10px 18px;cursor:pointer;transition:color .2s ease,border-color .2s ease,background-color .2s ease}
.tab .ico{width:17px;height:17px}
.tab:hover{color:var(--on-dark);border-color:rgba(241,245,247,.35)}
.tab[aria-selected="true"]{background:var(--accent-ink);border-color:var(--accent);color:#fff}
.light-tabs .tab{color:var(--muted);border-color:var(--line-strong);background:var(--surface)}
.light-tabs .tab:hover{color:var(--ink);border-color:var(--ink)}
.light-tabs .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.panel[hidden]{display:none}
.panel{animation:panelIn .45s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}}
.panel-note{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-top:26px;max-width:84ch}
.panel-note p{color:var(--dim)}
.panel-note strong{color:var(--on-dark)}

/* ---------- Phone story (sticky phone, steps scroll past) ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:start}
.story-phone{position:sticky;top:calc(var(--nav-h) + 40px);display:flex;justify-content:center}
.story-phone .phone{max-width:320px}
.story-steps{display:grid;gap:14px}
.story-step{display:block;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:22px 24px;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.story-step:hover{background:rgba(255,255,255,.55)}
.story-step[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow)}
.story-step .spec{display:block;margin-bottom:8px}
.story-step h3{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.story-step p{color:var(--muted);font-size:.98rem}
.story-step .bar{height:3px;border-radius:3px;background:var(--line);margin-top:16px;overflow:hidden}
.story-step .bar i{display:block;height:100%;width:0;background:var(--accent)}
.story-step[aria-selected="true"] .bar i{width:100%;transition:width var(--dwell,6s) linear}

/* ---------- Pay engine (interactive) ---------- */
.pe{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lift);overflow:hidden;color:var(--ink)}
.pe-in{padding:clamp(22px,2.8vw,34px);border-right:1px solid var(--line)}
.pe-out{padding:clamp(22px,2.8vw,34px);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.pe h3{font-size:1.06rem;display:flex;align-items:center;gap:10px;margin-bottom:4px}
.pe .spec{display:block;margin-bottom:16px}
.pe-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chipbtn{font-size:.84rem;font-weight:600;padding:7px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.chipbtn:hover{border-color:var(--ink)}
.chipbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pe-days{display:grid;gap:6px}
.pe-day{display:grid;grid-template-columns:58px minmax(0,1fr) 62px;align-items:center;gap:14px;padding:6px 10px;border-radius:12px;transition:background-color .2s ease}
.pe-day:hover{background:var(--surface-2)}
.pe-day label{font-weight:650;font-size:.92rem}
.pe-day label small{display:block;font-weight:500;font-size:.7rem;color:var(--muted);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.pe-day output{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--fill:0%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--fill),var(--line) var(--fill))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--line)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-8px;background:#fff;border:2px solid var(--accent-ink);box-shadow:0 2px 8px rgba(16,38,58,.25);transition:transform .15s ease}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--accent-ink);box-shadow:0 2px 8px rgba(16,38,58,.25)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,112,94,.35)}
.pe-rules{display:grid;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.pe-rule{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:.92rem}
.pe-rule span small{display:block;color:var(--muted);font-size:.8rem}
.switch{position:relative;display:inline-flex;flex:0 0 auto;width:46px;height:26px}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.switch i{position:absolute;inset:0;border-radius:999px;background:#C9D1DA;transition:background-color .2s ease}
.switch i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(16,38,58,.3);transition:transform .25s var(--ease)}
.switch input:checked+i{background:var(--accent-ink)}
.switch input:checked+i::after{transform:translateX(20px)}
.switch input:focus-visible+i{outline:3px solid var(--accent-ink);outline-offset:2px}
.select{appearance:none;-webkit-appearance:none;font-weight:650;font-size:.9rem;padding:7px 32px 7px 12px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310263A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 9px center/14px no-repeat;color:var(--ink);cursor:pointer}
.money-in{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);overflow:hidden}
.money-in span{padding:7px 0 7px 12px;font-weight:650;color:var(--muted)}
.money-in input{width:72px;border:0;padding:7px 10px 7px 3px;font-weight:650;background:transparent;font-variant-numeric:tabular-nums}
.money-in input:focus{outline:none}
.money-in:focus-within{border-color:var(--accent-ink);box-shadow:0 0 0 3px rgba(0,112,94,.18)}
.pe-total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.pe-total .big{font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;font-stretch:108%}
.pe-total .big small{font-size:.38em;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:6px}
.pe-total .hrs{text-align:right}
.pe-total .hrs b{display:block;font-size:1.4rem;font-variant-numeric:tabular-nums}
.pe-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:150px;margin:6px 0 8px;padding:0 2px}
.pe-col{display:flex;flex-direction:column-reverse;height:100%;gap:2px}
.pe-col i{display:block;border-radius:4px;transition:height .45s var(--ease);min-height:0}
.pe-col i:last-child{border-radius:6px 6px 4px 4px}
.pe-week-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center;font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.04em;margin-bottom:18px}
.pe-thresh{position:relative}
.pe-thresh::after{content:attr(data-label);position:absolute;left:0;top:var(--t,20%);transform:translateY(-100%);font-family:var(--mono);font-size:.66rem;color:var(--muted);background:var(--surface-2);padding:0 4px}
.pe-thresh::before{content:"";position:absolute;left:0;right:0;top:var(--t,20%);border-top:1.5px dashed rgba(16,38,58,.3);z-index:1;pointer-events:none}
.pe-table{width:100%;border-collapse:collapse;font-size:.92rem}
.pe-table th{text-align:left;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 0 8px;border-bottom:1px solid var(--line)}
.pe-table th:not(:first-child),.pe-table td:not(:first-child){text-align:right}
.pe-table td{padding:9px 0;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
.pe-table td:first-child{display:flex;align-items:center;gap:9px;font-weight:600}
.pe-table td:first-child::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.pe-table tr.zero td{color:var(--muted)}
.pe-table tr.zero td:first-child::before{opacity:.45}
.pe-why{margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--tint);border:1px solid rgba(0,112,94,.15);font-size:.9rem;color:#0B3F36;min-height:3.2em}
.pe-why strong{color:#063229}
.pe-foot{font-size:.82rem;color:var(--muted);margin-top:14px}

/* ---------- Paper vs Costworks ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface)}
.versus>div{padding:clamp(26px,3.4vw,44px)}
.versus .paper{background:#FBFAF6;background-image:repeating-linear-gradient(transparent 0 31px,rgba(27,94,140,.09) 31px 32px);border-right:1px solid var(--line)}
.versus h3{display:flex;align-items:center;gap:12px;font-size:1.15rem;margin-bottom:22px}
.versus .time{font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.04em;flex:0 0 56px;padding-top:2px}
.versus ol{list-style:none;display:grid;gap:16px}
.versus li{display:flex;gap:14px;font-size:.98rem}
.versus .paper li{color:#4D4A43}
.versus .time{flex-basis:74px}
.versus .paper li span:last-child{position:relative;padding-left:18px}
.versus .paper li span:last-child::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:#C0392B;opacity:.75}
.versus .cw li span:last-child{position:relative;padding-left:18px}
.versus .cw li span:last-child::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.versus .cw li{color:var(--ink)}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line-dark-2);border-radius:22px;overflow:hidden;background:rgba(241,245,247,.02)}
.stat{padding:clamp(22px,3vw,36px);border-right:1px solid var(--line-dark-2)}
.stat:last-child{border-right:0}
.stat .num{display:block;font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--on-dark);margin-bottom:10px;font-stretch:108%}
.stat .num em{font-style:normal;color:var(--accent-bright)}
.stat p{font-size:.92rem;color:var(--dim)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;transition:border-color .2s ease,box-shadow .25s ease}
.faq details[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 22px;cursor:pointer;font-weight:650;font-size:1.04rem;border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 28px;height:28px;border-radius:9px;background:var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310263A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/15px no-repeat;transition:transform .3s var(--ease),background-color .2s ease}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--tint)}
.faq .a{padding:0 22px 22px;color:var(--muted)}
.faq .a p+p{margin-top:10px}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .35s var(--ease),content-visibility .35s allow-discrete}
  .faq details[open]::details-content{height:auto}
}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-radius:32px;background:radial-gradient(90% 120% at 0% 0%,#14506F 0%,transparent 55%),radial-gradient(80% 120% at 100% 100%,#0C5E52 0%,transparent 55%),var(--ink);color:var(--on-dark);padding:clamp(48px,7vw,96px) clamp(24px,6vw,80px);isolation:isolate}
.cta .blueprint{-webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 20%,transparent 75%)}
.cta h2{font-size:clamp(2.1rem,4.6vw,3.8rem);font-stretch:112%;max-width:18ch;margin-left:auto;margin-right:auto}
.cta .lead{color:#DCE4EA;margin:0 auto 34px}
.cta .mark{width:58px;height:58px;margin:0 auto 26px}

/* ---------- Sub-page hero ---------- */
.page-hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% -20%,#173653 0%,var(--ink) 45%,var(--ink-2) 100%);color:var(--on-dark);padding:clamp(56px,8vw,104px) 0 clamp(60px,8vw,104px);isolation:isolate}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{max-width:20ch}
.page-hero.center h1{margin-left:auto;margin-right:auto}
.page-hero .lead{margin-top:22px;color:#C3CFDA}
.page-hero .btn-row{margin-top:32px}
.page-hero.has-figure{padding-bottom:0}
.page-hero .hero-figure{position:relative;margin-top:clamp(44px,6vw,72px)}
/* A screenshot in a sub-page hero STRADDLES the hero's edge (29 Oct 2026).
   It used to end exactly on the edge, so the frame's rounded bottom corners
   sat against the next section and read as clipped. Now it runs --overlap
   past the hero into the light section, which makes room for it. The hero
   stays above that section (z-index), and its drifting glows keep their own
   clipping, so letting the hero overflow shows only the frame. */
/* --overlap lives on :root because the NEXT section reads it too (defined on
   the hero alone, the section's padding calc was invalid and fell to 0), and
   the hero is a flow-root so the figure's negative margin shortens the hero
   rather than collapsing through it. */
:root{--overlap:clamp(56px,11vw,150px)}
.page-hero.has-figure{overflow:visible;z-index:2;display:flow-root}
.page-hero.has-figure .hero-figure{margin-bottom:calc(var(--overlap) * -1)}
.page-hero.has-figure + .section{padding-top:calc(var(--overlap) + clamp(56px,8vw,104px))}
/* Sub-page heroes keep the aurora quieter than the home page's: the crumbs
   and eyebrow sit right where its teal bloom is brightest (3.5:1 at full
   strength, 5.6:1 at this). */
.page-hero .aurora{opacity:.55}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;list-style:none;font-size:.86rem;color:#C3CFDA;margin-bottom:26px}
.page-hero.center .crumbs{justify-content:center}
.crumbs a{color:#C3CFDA;text-decoration:none}
.crumbs a:hover{color:var(--on-dark);text-decoration:underline}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.6}
.crumbs [aria-current]{color:var(--on-dark)}

/* ---------- Prose (KB, blog) ---------- */
.prose{font-size:1.06rem;color:#26394A;max-width:72ch}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.85rem);font-stretch:104%;margin-top:2.1em;margin-bottom:.1em;color:var(--ink);scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h3{font-size:1.18rem;margin-top:1.7em;color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--accent-ink);font-weight:700}
.prose strong{color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px}
.prose figure{margin:2em 0}
.prose figcaption{font-size:.9rem;color:var(--muted);margin-top:10px}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem}
.prose th{text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:10px 12px;border-bottom:1.5px solid var(--line-strong)}
.prose td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose blockquote{border-left:3px solid var(--accent);padding:6px 0 6px 20px;color:var(--ink);font-size:1.1rem}
.steps-list{list-style:none;counter-reset:st;padding:0!important}
.steps-list>li{position:relative;counter-increment:st;padding-left:48px;min-height:32px}
.steps-list>li+li{margin-top:16px}
.steps-list>li::before{content:counter(st);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:.88rem;display:grid;place-items:center}
.callout{display:flex;gap:14px;padding:16px 18px;border-radius:14px;background:var(--tint);border:1px solid rgba(0,112,94,.18);color:#0B3F36;font-size:.98rem}
.callout .ico{color:var(--accent-ink);margin-top:2px}
.callout strong{color:#063229}
.callout.warn{background:#FBF0DC;border-color:rgba(122,84,16,.2);color:#5A3E0B}
.callout.warn .ico{color:#7A5410}
.callout.warn strong{color:#4A320A}
.callout.steel{background:var(--tint-steel);border-color:rgba(27,94,140,.18);color:#173E5C}
.callout.steel .ico{color:var(--steel-ink)}

/* KB / docs layout: category nav, the article, and an on-this-page list. */
.doc{display:grid;grid-template-columns:230px minmax(0,1fr) 210px;gap:clamp(24px,4vw,56px);align-items:start}
.doc-nav,.doc-toc{position:sticky;top:calc(var(--nav-h) + 28px);font-size:.92rem;max-height:calc(100vh - var(--nav-h) - 56px);overflow-y:auto}
.doc-nav h4,.doc-toc h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 10px}
.doc-nav ul,.doc-toc ul{list-style:none;display:grid;gap:2px}
.doc-nav ul+h4{margin-top:22px}
.doc-nav a,.doc-toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;line-height:1.35}
.doc-nav a:hover,.doc-toc a:hover{background:var(--surface);color:var(--ink)}
.doc-nav a[aria-current="page"]{background:var(--surface);color:var(--accent-ink);font-weight:650;box-shadow:inset 2px 0 0 var(--accent)}
.doc-toc a.on{color:var(--accent-ink);font-weight:600}
.doc-main{min-width:0}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--muted);margin:14px 0 30px}
.doc-meta span{display:inline-flex;align-items:center;gap:6px}
.doc-meta .ico{width:16px;height:16px}
.doc-foot{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:18px}
.helpful{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-weight:600}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pager a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .2s ease,transform .25s var(--ease)}
.pager a:hover{border-color:var(--ink);transform:translateY(-2px)}
.pager a small{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.pager a.next{text-align:right}

/* ---------- Help centre (folded in from the support pages) ---------- */
.faq-groups{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.faq-index{position:sticky;top:calc(var(--nav-h) + 28px)}
.faq-index h4{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 10px}
.faq-index ul{list-style:none;display:grid;gap:2px}
.faq-index a{display:block;padding:7px 10px;border-radius:8px;color:var(--muted);text-decoration:none}
.faq-index a:hover{background:var(--surface);color:var(--ink)}
.faq-group+.faq-group{margin-top:56px}
.faq-group h2{font-size:clamp(1.5rem,2.6vw,2rem);scroll-margin-top:calc(var(--nav-h) + 24px)}
.faq details{scroll-margin-top:calc(var(--nav-h) + 24px)}
@media (max-width:900px){.faq-groups{grid-template-columns:minmax(0,1fr)}.faq-index{display:none}}
/* Help centre: the search sits in the hero, so its results panel must not be
   clipped by the hero's overflow. */
.support-hero{overflow:visible;z-index:5}
.support-hero .aurora,.support-hero .blueprint,.support-hero .grain{overflow:hidden}
.support-hero .search{margin-top:34px;z-index:30}
.support-hero .hint{margin-top:16px;font-size:.9rem;color:#C3CFDA}
.support-hero .hint a{color:var(--on-dark)}
.group-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.group-head h2{margin:0}
.group-head p{color:var(--muted);max-width:52ch}
/* Help-centre article top: crumbs on the light ground (site.css styles them
   for a dark hero). --muted is 5.6:1 on --ground. */
.kb{padding-top:clamp(36px,5vw,56px)}
.kb .crumbs{color:var(--muted);margin-bottom:18px}
.kb .crumbs a{color:var(--muted)}
.kb .crumbs a:hover{color:var(--ink)}
.kb .crumbs [aria-current]{color:var(--ink)}
.kb .doc-main h1{font-size:clamp(2rem,4vw,3rem)}
.kb .doc-main .lead{margin-top:14px}
.kb figure .phone{max-width:260px;margin:0 auto}
.kb .doc-foot p{color:var(--muted)}

/* ---------- Search ---------- */
.search{position:relative;max-width:640px}
.center .search{margin-left:auto;margin-right:auto}
.search input{width:100%;padding:18px 70px 18px 56px;border-radius:18px;border:1px solid rgba(241,245,247,.18);background:rgba(255,255,255,.96);color:var(--ink);font-size:1.05rem;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.search input::placeholder{color:#6A7581}
.search input:focus{outline:none;box-shadow:0 0 0 4px rgba(46,207,180,.45),0 20px 50px -20px rgba(0,0,0,.5)}
.search>.ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--muted);width:22px;height:22px;pointer-events:none}
.search .kbd{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.results{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lift);padding:8px;z-index:20;max-height:min(60vh,460px);overflow-y:auto;text-align:left}
.results[hidden]{display:none}
.results a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:var(--ink)}
.results a:hover,.results a[aria-selected="true"]{background:var(--ground)}
.results a b{display:block;font-weight:650}
.results a small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.results a .spec{display:block;margin-bottom:3px}
.results mark{background:rgba(46,207,180,.3);color:inherit;border-radius:3px;padding:0 1px}
.results .none{padding:16px;color:var(--muted)}

/* ---------- Forms ---------- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3.4vw,40px);box-shadow:var(--shadow)}
.field{margin-bottom:18px}
.field label,.field .label{display:block;font-size:.9rem;font-weight:650;margin-bottom:7px;color:var(--ink)}
.field label small{font-weight:500;color:var(--muted)}
.field input,.field textarea,.field select{width:100%;font-size:1rem;color:var(--ink);background:var(--surface-2);border:1.5px solid var(--line-strong);border-radius:12px;padding:13px 14px;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.field select{appearance:none;-webkit-appearance:none;background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310263A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;padding-right:40px;cursor:pointer}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#AEB8C3}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent-ink);background-color:#fff;box-shadow:0 0 0 4px rgba(0,112,94,.14)}
.field textarea{resize:vertical;min-height:140px}
.field.err input,.field.err textarea,.field.err select{border-color:#B3261E}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.msg{font-size:.85rem;color:#B3261E;min-height:1.15em;margin-top:5px}
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;font-size:.96rem;font-weight:600;min-height:1.3em}
.form-status.ok{color:#1B6B3A}
.form-status.bad{color:#B3261E}
.noscript-note{margin-top:14px;font-size:.93rem;color:var(--muted)}
.sent{display:none;text-align:center;padding:24px 8px}
.sent .icon-tile{margin:0 auto 18px;width:64px;height:64px;border-radius:20px}
.sent .icon-tile .ico{width:30px;height:30px}
.form-card.done form{display:none}
.form-card.done .sent{display:block;animation:panelIn .5s var(--ease)}
.code-input{display:flex;gap:10px;flex-wrap:wrap}
.code-input input{flex:1 1 220px;font-family:var(--mono);font-size:1.15rem;letter-spacing:.18em;text-transform:uppercase;padding:15px 18px;border-radius:14px;border:1.5px solid var(--line-strong);background:#fff;color:var(--ink)}
.code-input input:focus{outline:none;border-color:var(--accent-ink);box-shadow:0 0 0 4px rgba(0,112,94,.14)}

/* ---------- Misc blocks ---------- */
.limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.limit{padding:26px;border-radius:var(--radius);border:1px dashed var(--line-strong);background:var(--surface)}
.limit h3{display:flex;gap:10px;align-items:center;font-size:1.1rem}
.limit p{color:var(--muted);font-size:.96rem}
.limit .ico{color:var(--accent-ink)}
.quote-card{position:relative;padding:clamp(28px,4vw,48px);border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.pricing-card{position:relative;border-radius:28px;padding:clamp(28px,4vw,48px);background:var(--ink);color:var(--on-dark);overflow:hidden;isolation:isolate;box-shadow:var(--shadow-lift)}
.pricing-card .ticks{grid-template-columns:1fr 1fr;gap:14px 28px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:650;background:var(--tint);color:var(--accent-ink)}
.dark .badge{background:rgba(46,207,180,.12);color:var(--accent-bright)}
.post-card{display:flex;flex-direction:column;height:100%}
.post-card .thumb{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;margin:-8px -8px 22px;background:var(--ink)}
.post-card .meta{margin-top:auto;padding-top:18px;font-size:.86rem;color:var(--muted);display:flex;gap:14px}
.divider{height:1px;background:var(--line);margin:clamp(48px,6vw,80px) 0}
.logo-tile{display:grid;place-items:center;aspect-ratio:1;border-radius:22px;background:var(--ink-2);padding:22%}

/* ---------- Footer ---------- */
.site-foot{position:relative;overflow:hidden;background:var(--ink-3);color:var(--dim);padding:clamp(64px,8vw,96px) 0 0;isolation:isolate}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:36px}
.foot-brand img{width:150px;margin-bottom:18px}
.foot-brand p{font-size:.94rem;max-width:34ch}
.foot-brand .btn-row{margin-top:22px}
.site-foot h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark);font-weight:500;margin-bottom:16px}
.site-foot ul{list-style:none;display:grid;gap:10px}
.site-foot a:not(.btn){color:var(--dim);text-decoration:none;font-size:.95rem}
.site-foot a:not(.btn):hover{color:var(--on-dark);text-decoration:underline}
.foot-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;margin-top:56px;padding:26px 0 30px;border-top:1px solid var(--line-dark);font-size:.88rem;color:var(--dim)}
.foot-note p{max-width:none}
/* The wordmark, huge and faint, sitting on the floor of the page. It is the
   brand's own outlined artwork, not Archivo set beside the mark, so the
   lockup rule in brand/README.md is kept. Decorative: alt="" and under the
   text. */
.foot-mark{display:block;width:100%;max-width:1400px;margin:0 auto;padding:0 var(--gutter);opacity:.06;transform:translateY(18%);pointer-events:none;user-select:none}

/* ---------- Reveal on scroll ----------
   NOTHING HERE HIDES ANYTHING on its own. `armed` is added by site.js, one
   element at a time, only once an IntersectionObserver is watching it - so no
   script, an observer that never fires, or a broken class all leave the page
   readable and cost only the animation. (Built the other way round, the old
   page lost a third of itself in a headless pane.) */
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.reveal.armed{opacity:0;transform:translateY(22px);filter:blur(4px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal.armed{opacity:1;transform:none;filter:none}
  .btn:hover,a.card:hover{transform:none}
  .marquee-track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee-track [aria-hidden]{display:none}
  .typed{width:auto!important;border-right:0}
  .grad,.grad-light{animation:none!important}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

/* ---------- Narrow ---------- */
@media (max-width:1100px){
  .doc{grid-template-columns:220px minmax(0,1fr)}
  .doc-toc{display:none}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
/* The drawer arrives before the bar runs out of room - the bar's content
   (lockup, five items, Sign in, Get started) measures ~1000px. */
@media (max-width:1040px){
  .nav-links,.nav-signin{display:none}
  .ham{display:flex}
  .nav-actions{margin-left:auto}
  .bento .s2,.bento .s3,.bento .s4{grid-column:span 3}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:44px}
  .flow::before,.flow::after{display:none}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line-dark-2)}
}
@media (max-width:900px){
  .g3,.g4,.limits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-row,.feature-row.flip,.story,.sec-head.split,.versus,.pe{grid-template-columns:minmax(0,1fr)}
  .feature-row.flip>:first-child{order:0}
  .story-phone{position:relative;top:0}
  .story-phone .phone{max-width:260px}
  .pe-in{border-right:0;border-bottom:1px solid var(--line)}
  .versus .paper{border-right:0;border-bottom:1px solid var(--line)}
  .doc{grid-template-columns:minmax(0,1fr)}
  .doc-nav{position:relative;top:0;max-height:none;display:none}
  .stage .phone{width:30%;left:-1%}
  .chip.c1{right:-2%;top:6%}
  .chip.c3{display:none}
  .pricing-card .ticks{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:1rem}
  .g2,.g3,.g4,.limits,.field-row,.pager{grid-template-columns:minmax(0,1fr)}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .s2,.bento .s3,.bento .s4,.bento .s6{grid-column:auto}
  .bento>.card{min-height:0}
  .flow{grid-template-columns:minmax(0,1fr)}
  .flow-step{text-align:left;display:grid;grid-template-columns:56px 1fr;gap:0 18px}
  .flow-step .n{margin:0;grid-row:span 3}
  .flow-step p{margin:0}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0;border-bottom:1px solid var(--line-dark-2)}
  .stat:last-child{border-bottom:0}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage .phone{width:34%}
  .chip{padding:9px 12px;font-size:.78rem;gap:9px}
  .chip .dot{width:28px;height:28px;flex-basis:28px}
  .chip b{font-size:.82rem}
  .chip.c2{display:none}
  .chip.c1{top:auto;bottom:-6%;right:0}
  .pe-day{grid-template-columns:48px minmax(0,1fr) 54px;gap:10px;padding:4px 4px}
  .pe-week{height:120px;gap:5px}
  .hero-facts{gap:8px 18px;font-size:.84rem}
  .frame-bar .url{max-width:72%}
  .brand img{width:136px}
  .nav-actions .btn{padding:9px 15px;font-size:.86rem}
  .story-step{padding:18px}
  .cta{border-radius:24px}
}
@media (max-width:380px){
  .nav-actions .btn{display:none}
}