@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/776f6dcaf0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/a79fdb52d4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/776f6dcaf0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/a79fdb52d4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/776f6dcaf0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/a79fdb52d4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/f626b95c1e.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/891951df5e.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/f626b95c1e.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/891951df5e.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/6bc0f226a5.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/08949f728d.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/6bb06407c9.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/01d2854474.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/32057cf50d.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/0d1f0b8d07.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/34b9c504ca.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/3100e775e8.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/34b9c504ca.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/3100e775e8.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/34b9c504ca.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/3100e775e8.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/34b9c504ca.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/3100e775e8.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Metric-matched stand-ins, so text does not jump when a web font arrives (measured against the self-hosted files). */
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:107.7%;ascent-override:90.06%;descent-override:22.28%;line-gap-override:0%}
@font-face{font-family:'Bricolage Fallback';src:local('Arial Bold'),local('Arial'),local('Helvetica'),local('Liberation Sans');font-weight:600 800;size-adjust:80.14%;ascent-override:116.04%;descent-override:33.69%;line-gap-override:0%}
@font-face{font-family:'Plex Fallback';src:local('Courier New'),local('Liberation Mono');size-adjust:99.98%;ascent-override:103.02%;descent-override:28%;line-gap-override:0%}
/* ==========================================================================
   Tuskit website — one stylesheet for every page (home, trades, pricing,
   Tuskit Link, agent, signup, walkthrough, legal, 404). The hero's own
   stage styles are in hero.css, scoped under .hx.
   Colour: warm canvas, navy ink, one orange. Orange fills carry white text.
   Type: Bricolage Grotesque for headings, Inter for text, IBM Plex Mono for
   numbers and labels.
   ========================================================================== */

:root {
  --canvas:#f8fafc; --canvas-top:#fff1eb; --surface:#ffffff; --sunk:#f1f5f9;
  --ink:#0f172a; --ink-2:#475569; --ink-3:#5b6b7f; --line:#e2e8f0; --line-2:#cbd5e1;
  --orange:#ff5e00; --orange-text:#d94f00; --orange-ink:#b84300; --fill:#ff5e00; --fill-hover:#e65500; --on-fill:#0f172a;
  --hl-1:#ffd9c4; --hl-2:#fbe6a3; --hl-3:#f6d3e2; --hl-4:#cdeedb; --hl-5:#d5e2f8;
  --accent-soft:#fff0eb; --good:#1f6b4c; --good-fill:#157a52; --good-soft:#dff0e6; --bad:#b42318; --bad-soft:#fbe4e1;
  --band:#0f172a; --band-ink:#f8fafc; --band-ink-2:#b8c4d3; --band-line:#22304a;
  --btn-ink-bg:#0f172a; --btn-ink-fg:#ffffff;
  --glow:rgba(255,94,0,.11);
  --frame-a:#243044; --frame-b:#0b1220; --frame-ring:rgba(255,255,255,.07); --px-ring:rgba(255,255,255,.12);
  --shadow-sm:0 1px 1px rgba(15,23,41,.06);
  --shadow-md:0 8px 20px -8px rgba(15,23,41,.22);
  --shadow-lg:0 26px 50px -20px rgba(15,23,41,.30);
  --focus:#d94f00;
  --sans:'Inter','Inter Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque','Bricolage Fallback','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Plex Fallback',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glide:cubic-bezier(.65,.05,.25,1);
  --pop:cubic-bezier(.2,1.4,.4,1);
  --gut:clamp(16px,3.6vw,56px);
  --nav-h:56px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:#121417; --canvas-top:#15181c; --surface:#1b1e23; --sunk:#23272d;
    --ink:#f1f5f9; --ink-2:#c3cad3; --ink-3:#9aa3ae; --line:#2b3037; --line-2:#3a4048;
    --orange-text:#ff7a2e; --orange-ink:#ff7a2e; --accent-soft:#33200f; --hl-1:#5c2e12; --hl-2:#5a4816; --hl-3:#5a2a40; --hl-4:#1d4a34; --hl-5:#243c60; --good:#4fd49a; --good-soft:#15291f; --bad:#f87171; --bad-soft:#331414;
    --band:#0b0d10; --band-ink:#f1f5f9; --band-ink-2:#c3cad3; --band-line:#2b3037;
    --btn-ink-bg:#f1f5f9; --btn-ink-fg:#121417; --glow:rgba(255,122,46,.10);
    --frame-a:#474c55; --frame-b:#22262c; --frame-ring:rgba(148,163,184,.42); --px-ring:rgba(148,163,184,.5);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 22px -8px rgba(0,0,0,.6); --shadow-lg:0 28px 56px -18px rgba(0,0,0,.8);
    --focus:#ff7a2e; color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --canvas:#121417; --canvas-top:#15181c; --surface:#1b1e23; --sunk:#23272d;
  --ink:#f1f5f9; --ink-2:#c3cad3; --ink-3:#9aa3ae; --line:#2b3037; --line-2:#3a4048;
  --orange-text:#ff7a2e; --orange-ink:#ff7a2e; --accent-soft:#33200f; --hl-1:#5c2e12; --hl-2:#5a4816; --hl-3:#5a2a40; --hl-4:#1d4a34; --hl-5:#243c60; --good:#4fd49a; --good-soft:#15291f; --bad:#f87171; --bad-soft:#331414;
  --band:#0b0d10; --band-ink:#f1f5f9; --band-ink-2:#c3cad3; --band-line:#2b3037;
  --btn-ink-bg:#f1f5f9; --btn-ink-fg:#121417; --glow:rgba(255,122,46,.10);
  --frame-a:#474c55; --frame-b:#22262c; --frame-ring:rgba(148,163,184,.42); --px-ring:rgba(148,163,184,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 8px 22px -8px rgba(0,0,0,.6); --shadow-lg:0 28px 56px -18px rgba(0,0,0,.8);
  --focus:#ff7a2e; color-scheme:dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }
body { margin:0; background:var(--canvas) linear-gradient(180deg, var(--canvas-top) 0, var(--canvas) 720px) no-repeat; color:var(--ink); font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
img, svg { max-width:100%; }
a { color:inherit; }
p { margin:0; }
h1, h2, h3, h4 { margin:0; font-family:var(--display); text-wrap:balance; }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1360px; margin-inline:auto; width:100%; padding-inline:var(--gut); }
.wrap--narrow { max-width:880px; }
.vh { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--canvas); padding:10px 14px; border-radius:10px; font-weight:600; text-decoration:none; }
.skip:focus { top:12px; }
.hl { color:var(--orange-text); }
.eyebrow { font:700 12px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.lede { font-size:clamp(16.5px,1.35vw,19px); line-height:1.55; color:var(--ink-2); max-width:58ch; }
.quiet { font-size:13.5px; color:var(--ink-3); }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
.chiplinks a .tag-soon, .foot a .tag-soon { margin-left:6px; vertical-align:1px; }
.soonnote { margin:0; padding:12px 16px; max-width:52ch; text-wrap:pretty; border-radius:14px; border:1px solid var(--line); background:var(--accent-soft); color:var(--ink); font-size:15px; line-height:1.45; }
.eyebrow--soon { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.tag-soon { display:inline-flex; align-items:center; gap:5px; font:700 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:5px 8px; border-radius:999px; background:var(--accent-soft); color:var(--orange-ink); white-space:nowrap; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 20px; border-radius:999px; border:1.5px solid transparent; font:600 15px/1 var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, opacity .2s; }
.btn--primary { background:var(--fill); color:var(--on-fill); box-shadow:0 10px 24px -12px rgba(255,94,0,.6); }
.btn--primary:hover { background:var(--fill-hover); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { background:var(--surface); border-color:var(--ink-3); }
.btn--ink { background:var(--btn-ink-bg); color:var(--btn-ink-fg); }
.btn--ink:hover { opacity:.88; }
.btn--light { background:#fff; color:#0f172a; }
.btn--light:hover { background:#f1f5f9; }
.btn--line-light { background:transparent; color:var(--band-ink); border-color:rgba(248,250,252,.35); }
.btn--line-light:hover { border-color:rgba(248,250,252,.7); }
.btn--lg { min-height:56px; padding:0 26px; font:700 18px/1 var(--sans); }
.btn--sm { min-height:40px; padding:0 16px; font-size:14px; }
.tri { width:0; height:0; border-left:8px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; transition:transform .2s var(--ease); }
.btn:hover .tri { transform:translateX(3px); }
.textlink { color:var(--orange-ink); font-weight:600; text-decoration:none; }
.textlink:hover { text-decoration:underline; text-underline-offset:3px; }

/* ---------- header (every page) ---------- */
.site-nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:transparent; border-bottom:1px solid transparent; transition:background-color .25s, border-color .25s; }
.site-nav.is-stuck { background:color-mix(in srgb, var(--canvas) 93%, transparent); border-bottom-color:var(--line); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); }
.sq { display:inline-flex; align-items:center; }
.sq::before { content:''; width:9px; height:9px; border-radius:2.5px; background:var(--sq); margin-right:9px; flex:none; }
.site-nav__signin { padding:9px 12px; border-radius:8px; font:500 15px/1 var(--sans); color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.site-nav__signin:hover { color:var(--ink); background:var(--surface); }
.site-nav__in { height:var(--nav-h); display:flex; align-items:center; gap:10px; }
.brand { display:inline-flex; align-items:center; color:var(--ink); text-decoration:none; flex:none; }
.brand svg { height:28px; width:auto; display:block; }
.site-nav__links { display:flex; align-items:center; gap:2px; margin-left:22px; }
.site-nav__links a { padding:9px 12px; border-radius:8px; font:500 14.5px/1 var(--sans); color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color:var(--ink); background:var(--surface); }
.site-nav__sp { flex:1; }
.iconBtn { width:40px; height:40px; display:grid; place-items:center; border:0; background:transparent; color:var(--ink-2); border-radius:999px; cursor:pointer; flex:none; }
.iconBtn:hover { background:var(--sunk); color:var(--ink); }
.menu { position:relative; display:none; }
.menu > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line-2); font:600 14px/1 var(--sans); color:var(--ink); }
.menu > summary::-webkit-details-marker { display:none; }
.menu > summary .bars { width:14px; height:10px; position:relative; border-top:2px solid currentColor; border-bottom:2px solid currentColor; }
.menu > summary .bars::after { content:''; position:absolute; left:0; right:0; top:2px; border-top:2px solid currentColor; }
.menu[open] > summary { background:var(--sunk); }
.menu__panel { position:absolute; right:0; top:calc(100% + 8px); width:min(280px, calc(100vw - 32px)); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:8px; display:grid; }
.menu__panel a { padding:12px 14px; border-radius:10px; font:500 15.5px/1.2 var(--sans); color:var(--ink); text-decoration:none; }
.menu__panel a:hover { background:var(--sunk); }
.menu__panel .btn { margin-top:6px; color:var(--on-fill); }
@media (max-width: 999px) { /* the five links need about 1000px beside the logo, the theme button and the sign-up button */
  .site-nav__links { display:none; }
  .menu { display:block; }
  .site-nav__start { min-height:38px; padding:0 14px; }
}
@media (max-width: 479px) {
  .site-nav__in { gap:6px; }
  .menu__word { display:none; }
  .menu > summary { width:40px; padding:0; justify-content:center; }
  .site-nav .iconBtn { width:36px; }
}

/* ---------- sections ---------- */
.sec { padding-block:clamp(56px,min(7vw,13vh),104px); }
.sec + .sec { border-top:1px solid var(--line); }
.sec__head { display:grid; gap:14px; max-width:780px; margin-bottom:clamp(28px,4vw,48px); }
.sec__head--center { margin-inline:auto; text-align:center; justify-items:center; }
.sec h2 { font:800 clamp(30px,3.7vw,50px)/1.04 var(--display); letter-spacing:-.035em; font-variation-settings:'opsz' 72; }
.sec h3 { font:700 20px/1.25 var(--display); letter-spacing:-.015em; }

/* ---------- why: where orders slip, and what changes ---------- */
.why { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.why__col { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,2.4vw,30px); display:grid; gap:18px; align-content:start; }
.why__col h3 { display:flex; align-items:center; gap:10px; }
.why__col h3 .dot { width:10px; height:10px; border-radius:50%; background:var(--bad); flex:none; }
.why__col--after h3 .dot { background:var(--good-fill); }
.why__list { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.why__list li { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start; }
.why__ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--bad-soft); color:var(--bad); }
.why__col--after .why__ic { background:var(--good-soft); color:var(--good); }
.why__ic svg { width:18px; height:18px; }
.why__list b { display:block; font:600 16px/1.35 var(--sans); }
.why__list span { display:block; font-size:14.5px; line-height:1.5; color:var(--ink-2); margin-top:2px; }
@media (max-width: 759px) { .why { grid-template-columns:1fr; } }

/* ---------- how you start ---------- */
.start3 { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; counter-reset:st; }
.start3 > li { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px 22px 24px; display:grid; gap:10px; align-content:start; counter-increment:st; }
.start3 > li::before { content:counter(st); width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--canvas); display:grid; place-items:center; font:700 15px/1 var(--mono); }
.start3 p { color:var(--ink-2); font-size:15px; line-height:1.55; }
.mini { margin-top:8px; background:var(--canvas); border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; gap:8px; }
.mini__field { display:grid; gap:3px; }
.mini__field small { font:500 11px/1 var(--sans); color:var(--ink-3); }
.mini__field span { height:30px; border-radius:8px; border:1px solid var(--line-2); background:var(--surface); display:flex; align-items:center; padding:0 10px; font:500 13px/1 var(--sans); }
.mini__chips { display:flex; flex-wrap:wrap; gap:6px; }
.mini__chips span { font:600 12px/1 var(--sans); padding:7px 10px; border-radius:999px; background:var(--surface); border:1px solid var(--line-2); }
.mini__chips span.on { background:var(--ink); border-color:var(--ink); color:var(--canvas); }
.mini__row { display:grid; grid-template-columns:3px minmax(0,1fr) auto; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 10px 8px 0; overflow:hidden; }
.mini__row i { align-self:stretch; background:var(--fill); }
.mini__row b { display:block; font:600 13px/1.2 var(--sans); }
.mini__row small { font:500 11.5px/1.2 var(--sans); color:var(--ink-3); }
.mini__row em { font:700 9.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; font-style:normal; padding:5px 7px; border-radius:999px; background:var(--accent-soft); color:var(--orange-ink); }
.start__cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:28px; }
@media (max-width: 899px) { .start3 { grid-template-columns:1fr; } }

/* ---------- business picker and Today lists (home + trade pages) ---------- */
.tp__tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
.tp__tab { all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:10px; align-items:center; padding:12px 14px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface); }
.tp__tab { grid-template-rows:auto auto auto; align-content:center; }
.tp__soon { display:flex; align-items:center; gap:10px; margin:0; font-size:14px; color:var(--ink-2); }
.tp__soon[hidden] { display:none; }
.tp__tab svg { grid-row:1 / span 3; width:22px; height:22px; color:var(--ink-2); }
.tp__tab .tag-soon { grid-column:2; justify-self:start; margin-top:7px; }
.tp__tab b { font:600 14.5px/1.2 var(--sans); }
.tp__tab small { font:500 12px/1.2 var(--sans); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tp__tab[aria-selected="true"] { border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.tp__tab[aria-selected="true"] svg { color:var(--orange-text); }
.tp__tab:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.tp__panel { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(18px,3vw,40px); align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(16px,2.4vw,28px); }
.tp__side { display:grid; gap:18px; }
.tp__art { min-height:120px; display:grid; place-items:center start; }
.tp__core { display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink-2); }
.tp__core svg { width:20px; height:20px; flex:none; color:var(--ink); }
.tp__more { font-size:14.5px; }
@media (max-width: 1040px) { .tp__tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 759px) {
  .tp__tabs { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--gut)); padding-inline:var(--gut); scrollbar-width:none; }
  .tp__tabs::-webkit-scrollbar { display:none; }
  .tp__tab { flex:none; width:200px; scroll-snap-align:start; }
  .tp__panel { grid-template-columns:1fr; }
}

.tlist { background:var(--canvas); border:1px solid var(--line); border-radius:18px; padding:14px; display:grid; gap:10px; }
.tlist__head { display:flex; align-items:center; gap:10px; padding:2px 4px 4px; }
.list__mark { width:22px; height:22px; color:var(--ink); flex:none; }
.list__t { font:700 17px/1.2 var(--display); display:flex; align-items:baseline; gap:8px; }
.list__t small { font:500 13px/1 var(--sans); color:var(--ink-3); }
.list__n { margin-left:auto; font:500 12.5px/1 var(--mono); color:var(--ink-3); }
.tlist__rows { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.trow { display:grid; grid-template-columns:4px minmax(0,1fr) auto auto; gap:12px; align-items:center; min-height:56px; padding-right:14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.trow > i { align-self:stretch; background:var(--fill); }
.trow b { display:block; font:600 14.5px/1.25 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow small { display:block; font:500 12px/1.3 var(--sans); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trow > div { min-width:0; padding-block:8px; }
.card__amt { font:600 13.5px/1 var(--mono); font-variant-numeric:tabular-nums; }
.pill { font:700 10.5px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:6px 8px; border-radius:999px; white-space:nowrap; }
.pill--wait { background:var(--sunk); color:var(--ink-2); }
.pill--work { background:var(--accent-soft); color:var(--orange-ink); }
.pill--ready { background:var(--good-soft); color:var(--good); }
.tlist__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-radius:12px; background:var(--sunk); font-size:13.5px; color:var(--ink-2); }
.tlist__foot b { font:600 14.5px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width: 480px) { .trow { grid-template-columns:4px minmax(0,1fr) auto; gap:10px; } .trow .card__amt { display:none; } .trow b, .trow small { white-space:normal; } }

.tsteps { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tsteps li { position:relative; font:600 12.5px/1 var(--sans); padding:8px 12px; border-radius:999px; background:var(--sunk); color:var(--ink-2); }
.tsteps li.told { background:var(--accent-soft); color:var(--orange-ink); }
.tsteps li.done { background:var(--good-soft); color:var(--good); }

/* the shop's paper, drawn (always light, like real paper) */
.wa, .tag, .nb, .wo { color:#0f172a; box-shadow:0 1px 1px rgba(15,23,41,.06), 0 16px 32px -14px rgba(51,42,27,.38); }
.wa { background:#fff; border-radius:14px; padding:12px 14px; max-width:100%; }
.wa__top { display:flex; align-items:center; gap:8px; font-size:13.5px; }
.wa__av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 10px/1 var(--sans); background:#e2e8f0; color:#334155; }
.wa__who { font-weight:600; }
.wa__time { margin-left:auto; font:500 11px/1 var(--mono); color:#475569; }
.wa__bubble { margin-top:9px; background:#d9fdd3; border-radius:10px 10px 10px 3px; padding:9px 11px; font-size:14px; line-height:1.4; }
.wa__img { display:block; margin-top:7px; background:rgba(15,23,42,.06); border-radius:7px; padding:6px 8px; font:500 11.5px/1 var(--mono); }
.tag { position:relative; background:#fff; border-radius:8px; padding:14px 16px 14px 26px; width:220px; font-size:13.5px; line-height:1.4; transform:rotate(-2deg); }
.tag::before { content:''; position:absolute; left:9px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--canvas); box-shadow:inset 0 0 0 1.5px #94a3b8; }
.tag b { display:block; font:700 15px/1.2 var(--mono); }
.tag small { display:block; color:#475569; }
.tag .bar { margin-top:8px; height:22px; background:repeating-linear-gradient(90deg,#0f172a 0 2px,transparent 2px 4px,#0f172a 4px 5px,transparent 5px 8px); opacity:.85; }
.nb { position:relative; background:repeating-linear-gradient(180deg, transparent 0 25px, #c7d7f1 25px 26px), #fff; border-radius:4px; padding:10px 14px 10px 34px; }
.nb::before { content:''; position:absolute; left:24px; top:0; bottom:0; width:1.5px; background:#f3a3a3; }
.nb p { margin:0; font:600 22px/26px var(--hand); color:#1e3a8a; }
.nb__hole { display:none; }
.wo { background:#fff; border-radius:12px; padding:14px 16px; width:240px; display:grid; gap:4px; }
.wo small { font:600 10.5px/1 var(--mono); letter-spacing:.08em; color:#64748b; }
.wo b { font:700 15px/1.25 var(--sans); }
.wo p { margin:0; font-size:13px; color:#475569; }
.wo .prog { height:6px; border-radius:6px; background:#e2e8f0; overflow:hidden; margin-top:6px; }
.wo .prog i { display:block; width:62%; height:100%; background:#e65500; }
.wo em { font:600 12px/1.2 var(--mono); font-style:normal; color:#9a3900; }

/* ---------- phone frame (Tuskit Link, agent, how-it-works) ---------- */
.pf { --s:.62; position:relative; width:calc(300px * var(--s)); height:calc(650px * var(--s)); flex:none; }
/* the phone's shadow is a gradient, not a blurred box-shadow: large blurs are what a mid-range phone's GPU struggles with */
.pf::before { content:''; position:absolute; left:4%; right:4%; bottom:-2.5%; height:8%; border-radius:50%; background:radial-gradient(closest-side, rgba(15,23,42,.42), rgba(15,23,42,.16) 60%, transparent); pointer-events:none; }
.pf__in { position:absolute; left:0; top:0; width:300px; height:650px; transform:scale(var(--s)); transform-origin:0 0; }
.pf__frame { position:absolute; inset:0; border-radius:46px; background:linear-gradient(150deg,var(--frame-a),var(--frame-b) 60%); box-shadow:inset 0 0 0 1.5px var(--frame-ring); }
.pf__screen { position:absolute; inset:9px; border-radius:37px; overflow:hidden; background:#f8fafc; color:#0f172a; font-family:var(--sans); }
.pf__cam { position:absolute; left:50%; top:10px; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:#020617; box-shadow:0 0 0 2px #1e293b; z-index:20; }
.pf__sbar { position:absolute; left:0; right:0; top:0; height:30px; display:flex; align-items:center; justify-content:space-between; padding:4px 22px 0 24px; font:600 11.5px/1 var(--sans); color:#0f172a; z-index:19; }
.pf__sbar span:last-child { display:inline-flex; gap:4px; align-items:center; }
.pf__gest { position:absolute; left:50%; bottom:7px; width:96px; height:4px; margin-left:-48px; border-radius:2px; background:#0f172a; opacity:.4; z-index:20; }
.pf__body { position:absolute; left:0; right:0; top:30px; bottom:0; }
.ps { position:absolute; inset:0; padding:10px 18px 16px; display:flex; flex-direction:column; gap:12px; background:#fff; }
.ps > .end { margin-top:auto; }
.ps .endgrp { display:grid; gap:10px; }
.ps .who { display:grid; justify-items:center; gap:6px; }
.ps .who i { width:44px; height:44px; border-radius:50%; background:#0f172a; color:#fff; display:grid; place-items:center; font:700 13px/1 var(--sans); font-style:normal; }
.ps .who small { font:600 12px/1 var(--sans); color:#475569; }
.ps--chat { padding:0; gap:0; background:#efeae2; }
.ps .url { align-self:center; display:flex; align-items:center; gap:6px; font:500 11.5px/1 var(--mono); color:#475569; background:#f1f5f9; border-radius:999px; padding:7px 12px; }
.ps .url svg { width:11px; height:11px; }
.ps h3 { font:700 23px/1.15 var(--display); letter-spacing:-.02em; text-align:center; margin-top:14px; }
.ps .sub { text-align:center; font:500 13px/1.4 var(--sans); color:#64748b; }
.ps .otp { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:6px; }
.ps .otp span { height:44px; border-radius:10px; border:1.5px solid #157a52; display:grid; place-items:center; font:700 19px/1 var(--mono); }
.ps .ok { text-align:center; font:700 15px/1 var(--sans); color:#157a52; }
.ps .shop { display:flex; align-items:center; gap:10px; margin-top:4px; }
.ps .shop i { width:38px; height:38px; border-radius:50%; background:#0f172a; color:#fff; display:grid; place-items:center; font:700 12px/1 var(--sans); font-style:normal; }
.ps .shop b { display:block; font:700 17px/1.15 var(--display); }
.ps .shop small { font:500 11.5px/1.2 var(--sans); color:#64748b; }
.ps .steps { list-style:none; margin:0; padding:12px 14px; display:grid; gap:10px; background:#f8fafc; border-radius:14px; }
.ps .steps li { display:flex; align-items:center; gap:10px; font:500 13.5px/1.2 var(--sans); }
.ps .steps li::before { content:''; width:10px; height:10px; border-radius:50%; background:#157a52; flex:none; }
.ps .steps li.here { font-weight:700; }
.ps .steps li.here::before { background:#e65500; box-shadow:0 0 0 4px #ffe1d1; }
.ps .topay { display:flex; justify-content:space-between; align-items:baseline; }
.ps .topay span { font:500 13px/1 var(--sans); color:#64748b; }
.ps .topay b { font:700 21px/1 var(--mono); }
.ps .pbtn { display:block; height:46px; border-radius:23px; background:#cc4b00; color:#fff; font:700 14.5px/46px var(--sans); text-align:center; }
.ps .pbtn--ghost { background:#fff; color:#0f172a; box-shadow:inset 0 0 0 1.5px #cbd5e1; }
.ps .note { text-align:center; font:500 12px/1.35 var(--sans); color:#64748b; }
.ps .proof { background:#e7f4ed; border-left:4px solid #157a52; border-radius:10px; padding:30px 12px; color:#15583d; display:grid; gap:6px; }
.ps .proof small { font:600 10px/1 var(--mono); letter-spacing:.08em; }
.ps .proof b { font:800 24px/1 var(--display); letter-spacing:-.02em; }
.ps .proof strong { font:600 13px/1 var(--mono); }
.ps .hist { display:grid; gap:6px; background:#f1f5f9; border-radius:10px; padding:10px 12px; font:500 12px/1.35 var(--sans); color:#475569; }
.ps .hist b { color:#0f172a; font-weight:600; }
.ps .cap2 { margin-top:-4px; font:500 11.5px/1.3 var(--sans); color:#64748b; }
.ps .bill { display:grid; gap:7px; padding:12px 14px; border:1px solid #e2e8f0; border-radius:14px; font:500 12.5px/1.2 var(--sans); color:#475569; }
.ps .bill div { display:flex; justify-content:space-between; gap:8px; }
.ps .bill b { font:600 12.5px/1.2 var(--mono); color:#0f172a; }
.ps .bill .tot { padding-top:7px; border-top:1px dashed #e2e8f0; color:#0f172a; font-weight:600; }
.ps .row2 { display:flex; justify-content:space-between; align-items:center; }
.ps .row2 b { font:700 17px/1.25 var(--sans); }
.ps .row2 span { font:600 12px/1 var(--mono); border:1px solid #d8dfe6; border-radius:6px; padding:4px 6px; }
.ch-h { display:flex; align-items:center; gap:10px; padding:6px 14px 10px; background:#fff; border-bottom:1px solid #e2e8f0; }
.ch-h .chev { width:9px; height:9px; border-left:2px solid #0f172a; border-bottom:2px solid #0f172a; transform:rotate(45deg); }
.ch-h i { width:34px; height:34px; border-radius:50%; background:#0f172a; color:#fff; display:grid; place-items:center; font:700 11px/1 var(--sans); font-style:normal; }
.ch-h b { display:block; font:700 14.5px/1.2 var(--sans); }
.ch-h small { font:500 11.5px/1 var(--sans); color:#15803d; }
.ch-b { flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:8px; }
.ch-b .day { align-self:center; font:600 10.5px/1 var(--sans); color:#64748b; background:#fff; border-radius:7px; padding:5px 9px; }
.msg { max-width:86%; padding:8px 10px 6px; border-radius:12px; font:400 13.5px/1.35 var(--sans); box-shadow:0 1px 1px rgba(15,23,42,.08); }
.msg small { display:block; text-align:right; margin-top:3px; font:500 10px/1 var(--sans); color:#475569; }
.msg--out { align-self:flex-end; background:#d9fdd3; border-bottom-right-radius:3px; }
.msg--in { align-self:flex-start; background:#fff; border-bottom-left-radius:3px; }
.lcard { margin-top:8px; display:grid; grid-template-columns:auto 1fr; gap:3px 9px; align-items:center; padding:10px 11px; border-radius:10px; background:#fff4ed; border:1px solid #ffd2b8; }
.lcard .tile { width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid #ffd2b8; display:grid; place-items:center; grid-row:span 2; }
.lcard .tile svg { width:18px; height:18px; color:#0f172a; }
.lcard b { font:700 13px/1.1 var(--sans); }
.lcard span { font:500 11px/1.1 var(--mono); color:#c2410c; }
.lcard em { grid-column:1 / -1; margin-top:6px; font:700 13px/1 var(--sans); font-style:normal; color:#0f172a; }
.ch-in { display:flex; align-items:center; gap:8px; padding:8px 10px 24px; }
.ch-in span { flex:1; background:#fff; border-radius:999px; padding:11px 14px; font:400 13.5px/1 var(--sans); color:#64748b; }
.ch-in i { width:40px; height:40px; border-radius:50%; background:#16a34a; flex:none; }

.pf--pixel .pf__frame { border-radius:50px; background:linear-gradient(150deg,#3b4048,#15181d 55%,#262a31); box-shadow:inset 0 0 0 1.5px var(--px-ring); }
.pf--pixel .pf__screen { inset:10px; border-radius:40px; }
.pf--pixel .pf__cam { width:12px; height:12px; margin-left:-6px; top:11px; }
.pf--galaxy .pf__frame { border-radius:38px; background:linear-gradient(150deg,#eef1f5,#c3cbd4 50%,#a3adb9); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7), inset 0 0 0 3px rgba(15,23,42,.10); }
.pf--galaxy .pf__screen { inset:7px; border-radius:31px; }
.pf--galaxy .pf__cam { width:9px; height:9px; margin-left:-4.5px; top:9px; }
.pf--galaxy .pf__body { bottom:40px; }
.pf--galaxy .ch-in { padding-bottom:10px; }
.pf__sbar .pct { font:600 11px/1 var(--sans); margin:0 1px 0 2px; }
.pf .nav3 { position:absolute; left:0; right:0; bottom:0; height:40px; display:flex; justify-content:space-around; align-items:center; padding:0 36px; background:#f8fafc; border-top:1px solid #eef2f6; z-index:19; }
.pf .nav3 i { display:block; color:#475569; }
.pf .nav3 .n-rec { width:15px; height:13px; border-left:2px solid currentColor; border-right:2px solid currentColor; position:relative; }
.pf .nav3 .n-rec::after { content:''; position:absolute; left:50%; top:0; bottom:0; margin-left:-1px; border-left:2px solid currentColor; }
.pf .nav3 .n-home { width:14px; height:14px; border:2px solid currentColor; border-radius:5px; }
.pf .nav3 .n-back { width:10px; height:10px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:4px; }

/* ---------- Tuskit Link ---------- */
.lk { --lkgap:clamp(44px,5.4vw,92px); display:grid; gap:clamp(40px,6vw,72px); list-style:none; margin:0; padding:0; counter-reset:lk; }
.lk > li { display:grid; grid-template-columns:auto auto; grid-template-areas:"shop cust" "cap cap"; justify-content:center; align-items:start; column-gap:var(--lkgap); row-gap:18px; counter-increment:lk; }
.lk .pf { --s:.66; height:calc(560px * var(--s)); }
.lk .pf__in { height:560px; } /* a shorter phone than the others, so the screen can be drawn larger */
.lk__ph { display:block; }
.lk__ph--shop { grid-area:shop; position:relative; }
.lk__ph--cust { grid-area:cust; }
.lk__ph .th__lbl { margin:0 0 12px; justify-content:center; }
.lk__ph .pf { margin-inline:auto; }
.lk__cap { grid-area:cap; justify-self:center; max-width:52ch; text-align:center; display:grid; gap:8px; }
.lk__cap h3 { font:700 20px/1.25 var(--display); display:flex; gap:9px; justify-content:center; align-items:baseline; }
.lk__cap h3::before { content:counter(lk); font:700 13px/1 var(--mono); color:var(--orange-ink); }
.lk__cap h3[data-n]::before { content:attr(data-n); }
.lk__cap p { font-size:15px; line-height:1.5; color:var(--ink-2); max-width:none; }
.lk__cap p b { display:block; margin-bottom:2px; font:600 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.lk__sw { display:none; }
.lk__chips { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.lk__chips li { display:inline-flex; align-items:center; gap:7px; font:600 13px/1 var(--sans); padding:9px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
.lk__chips svg { width:14px; height:14px; color:var(--good); }
@media (max-width: 1100px) { .lk .pf { --s:.56; } }
@media (max-width: 899px) {
  .lk > li { grid-template-columns:1fr; grid-template-areas:"shop" "cust" "cap"; row-gap:28px; }
  .lk .pf { --s:.7; }
}

/* ---------- money and GST ---------- */
.bk { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,56px); align-items:start; }
.ticklist { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ticklist li { display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px; align-items:start; font-size:15.5px; line-height:1.5; }
.ticklist svg { width:18px; height:18px; margin-top:2px; color:var(--good); }
.ticklist--no svg { color:var(--bad); }
.book-example { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; display:grid; gap:14px; }
.book-example .demo-heading { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.book-example .demo-heading b { font:700 18px/1.2 var(--display); }
.book-example .demo-heading span { font:500 12px/1 var(--sans); color:var(--ink-3); }
.book-source, .book-entry { background:var(--canvas); border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; gap:8px; }
.book-source small, .book-entry small { font:600 11px/1.2 var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.book-source h3 { font:700 20px/1.2 var(--display); }
.book-source div, .book-entry div { display:flex; justify-content:space-between; gap:10px; font-size:14.5px; color:var(--ink-2); }
.book-source div b, .book-entry div b { font:600 14.5px/1.2 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
.book-entry { border-color:var(--good-fill); background:var(--good-soft); }
.book-entry p { color:var(--good); font-weight:600; font-size:14px; }
.book-example .sample-label { font-size:12.5px; color:var(--ink-3); }
.book-example .btn { justify-self:start; }
.gst { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:clamp(28px,4vw,44px); }
.gst > div { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 22px; display:grid; gap:14px; align-content:start; }
.bk__lede { text-wrap:balance; max-width:34ch; }
.bk__quiet { font-size:15px; line-height:1.55; color:var(--ink-2); max-width:46ch; text-wrap:pretty; }
#books.sec { padding-block:clamp(48px,min(6vw,11vh),88px); }
#books .bk .sec__head { gap:12px; }
#books .bk__quiet { margin-top:4px; }
.bk-gst { margin-top:clamp(22px,2.4vw,30px); padding:clamp(16px,1.8vw,20px) 0 clamp(14px,1.6vw,18px); border-block:1px solid var(--line); display:grid; gap:12px; }
.bk-gst h3 { font:700 15px/1.3 var(--display); letter-spacing:.01em; }
.bk-gst .ticklist { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px clamp(18px,3vw,40px); }
.bk-gst .ticklist li { font-size:14.5px; line-height:1.5; }
.bk-gst .ticklist span { text-wrap:balance; }
.bk-gst > p { font-size:13.5px; line-height:1.5; color:var(--ink-3); max-width:none; }
.nowrap { white-space:nowrap; }
details.tb { margin-top:8px; }
details.tb > summary { display:inline-block; cursor:pointer; list-style:none; padding:6px 0; font:600 15px/1.3 var(--sans); color:var(--orange-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
details.tb > summary::-webkit-details-marker { display:none; }
details.tb > summary::after { content:'↓'; display:inline-block; margin-left:6px; text-decoration:none; }
details.tb[open] > summary::after { content:'↑'; }
details.tb > summary:hover { color:var(--ink); }
.tb__body { margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:6px 18px 16px; }
.tb__hint { display:none; }
.tableScroll { overflow-x:auto; margin-top:12px; }
.tableScroll table { width:100%; min-width:520px; border-collapse:collapse; font-size:14px; }
.tableScroll th, .tableScroll td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
.tableScroll .num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tableScroll tr.total td { font-weight:700; border-top:2px solid var(--ink); }
.ledger__head { display:flex; justify-content:space-between; gap:10px; margin-top:10px; }
.ledger__head h3 { font:700 17px/1.2 var(--display); }
.ledger__head span, .ledger__foot { font:500 12.5px/1.4 var(--sans); color:var(--ink-3); }
.ledger__foot { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; }
.ledger__foot .ok { display:inline-flex; gap:6px; align-items:center; color:var(--good); font-weight:600; }
@media (max-width: 899px) {
  .bk, .gst { grid-template-columns:1fr; }
  .bk-gst { border:1px solid var(--line); border-radius:14px; padding:16px; gap:12px; }
  .bk-gst .ticklist { grid-template-columns:1fr; }
  .tb__hint { display:block; margin-top:8px; font:500 12px/1.3 var(--sans); color:var(--ink-3); }
  .tb__hint + .tableScroll { margin-top:6px; }
  .tb .tableScroll { -webkit-overflow-scrolling:touch; border-radius:10px; background:
    linear-gradient(to right, var(--surface), var(--surface)) left center/24px 100% no-repeat local,
    linear-gradient(to left, var(--surface), var(--surface)) right center/24px 100% no-repeat local,
    linear-gradient(to right, rgba(0,0,0,.16), transparent) left center/14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(0,0,0,.16), transparent) right center/14px 100% no-repeat scroll; }
}

/* ---------- pricing ---------- */
.plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.plan { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:26px 24px 24px; display:flex; flex-direction:column; gap:10px; }
.plan--hero { border:2px solid var(--ink); }
.plan__flag { position:absolute; top:-13px; left:24px; font:700 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; padding:7px 10px; border-radius:999px; background:var(--ink); color:var(--canvas); }
.plan__name { font:700 20px/1.2 var(--display); }
.plan__price { display:flex; align-items:baseline; gap:6px; }
.plan__price b { font:800 44px/1 var(--display); letter-spacing:-.03em; }
.plan__price span { font-size:15px; color:var(--ink-3); }
.plan__yr { font-size:13.5px; color:var(--ink-2); }
.plan__cap { font:600 14px/1.3 var(--sans); padding:8px 12px; border-radius:10px; background:var(--sunk); justify-self:start; align-self:flex-start; }
.plan ul { list-style:none; margin:6px 0 10px; padding:0; display:grid; gap:10px; }
.plan li { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; font-size:15px; line-height:1.45; }
.plan li svg { width:16px; height:16px; margin-top:3px; color:var(--good); }
.plan li .tag-soon { margin-left:6px; vertical-align:1px; }
.plan .btn { margin-top:auto; }
.priceNote { margin-top:22px; font-size:14.5px; line-height:1.6; color:var(--ink-2); max-width:78ch; }
.agentNote { margin-top:16px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 18px; border-radius:16px; border:1px dashed var(--line-2); font-size:14.5px; color:var(--ink-2); }
.agentNote svg { width:24px; height:24px; color:var(--ink); flex:none; }
@media (max-width: 899px) { .plans { grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq { display:grid; max-width:880px; border-bottom:1px solid var(--line); }
.faq details { border-top:1px solid var(--line); padding:0 2px; }
.faq summary { cursor:pointer; list-style:none; padding:18px 0; font:600 16.5px/1.35 var(--sans); display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font:500 22px/1 var(--sans); color:var(--ink-3); flex:none; }
.faq details[open] summary::after { content:'−'; }
.faq p { padding:0 0 18px; color:var(--ink-2); line-height:1.6; max-width:70ch; }

/* ---------- closing band ---------- */
/* the old site's closing band: centred, a slow field of stars behind, the mantra on three lines */
.final { position:relative; overflow:hidden; background:linear-gradient(135deg,#120c14,#0b1120); color:#f8fafc; }
.final__field { position:absolute; inset:0; pointer-events:none; opacity:.9; }
.final__field canvas { display:block; width:100%; height:100%; }
.final__in { position:relative; z-index:1; padding-block:clamp(84px,10vw,132px); display:grid; justify-items:center; text-align:center; }
.final h2 { font:800 clamp(38px,5.2vw,72px)/1 var(--display); letter-spacing:-.04em; font-variation-settings:'opsz' 96; color:#f8fafc; }
.final h2 .hl { color:#ff7a2e; }
.final__line { margin-top:22px; color:#b8c4d3; font-size:clamp(16px,1.4vw,19px); line-height:1.55; max-width:44ch; }
.final__cta { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }
.final__quiet { margin-top:20px; font-size:13.5px; color:#b8c4d3; }
.final__lang { position:relative; margin-top:30px; min-height:5.6em; width:100%; max-width:560px; font:500 16px/1.6 var(--sans); color:#b8c4d3; }
.final__lang span { position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease); }
.final__lang span[data-on="1"] { opacity:1; transition-delay:.45s; }
.final__lang [lang="ta"] { font-family:'Noto Sans Tamil',var(--sans); }
.final__lang [lang="hi"] { font-family:'Noto Sans Devanagari',var(--sans); }
.final__lang [lang="te"] { font-family:'Noto Sans Telugu',var(--sans); line-height:1.7; }
.final__lang [lang="ml"] { font-family:'Noto Sans Malayalam',var(--sans); line-height:1.7; }
.final__contact { margin-top:18px; font-size:14.5px; color:#b8c4d3; }
.final__contact a { color:#f8fafc; }
@media (prefers-reduced-motion: reduce) { .final__lang { min-height:0; } .final__lang span { position:static; display:block; opacity:1; } .final__lang span + span { margin-top:8px; } }

/* ---------- footer (every page) ---------- */
.foot { border-top:1px solid var(--line); padding-block:48px 28px; background:var(--canvas); }
.foot__grid { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:28px; }
.foot__brand svg { height:28px; width:auto; color:var(--ink); }
.foot__brand p { margin-top:12px; font-size:14px; color:var(--ink-2); max-width:30ch; }
.foot h3 { font:700 12px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.foot ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot a { font-size:14.5px; color:var(--ink-2); text-decoration:none; }
.foot a.btn--primary, .foot a.btn--primary:hover { color:var(--on-fill); text-decoration:none; } /* the footer link colour must not win over the button's own text colour (it did: 1.85:1) */
.foot a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.foot__base { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; margin-top:36px; padding-top:18px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3); }
@media (max-width: 899px) { .foot__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .foot__brand { grid-column:1 / -1; } }

/* ---------- inner pages ---------- */
.page-hero { padding-block:clamp(40px,6vw,80px) clamp(20px,3vw,32px); display:grid; gap:14px; }
.page-hero h1 { font:800 clamp(34px,5vw,60px)/1.02 var(--display); letter-spacing:-.04em; max-width:18ch; }
.page-hero--center { justify-items:center; text-align:center; }
.page-hero--center h1 { max-width:20ch; }
.page-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px; }
.page-body { padding-bottom:clamp(56px,7vw,96px); display:grid; gap:clamp(28px,4vw,48px); }
.sub__grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(20px,3vw,40px); align-items:start; }
.sub__side { display:grid; gap:18px; }
.sub__side h2 { font:700 20px/1.25 var(--display); }
.sub__day { counter-reset:d; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.sub__day li { position:relative; padding-left:44px; font-size:15px; line-height:1.5; color:var(--ink-2); min-height:30px; }
.sub__day li::before { counter-increment:d; content:counter(d); position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--canvas); font:600 13px/30px var(--mono); text-align:center; }
.sub__facts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.sub__facts li { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; display:grid; gap:6px; }
.sub__facts b { font:700 16.5px/1.3 var(--display); }
.sub__facts p { font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.trade-proof { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(18px,2.4vw,28px); }
.trade-proof h2 { font:700 clamp(22px,2.4vw,28px)/1.15 var(--display); letter-spacing:-.02em; margin:6px 0 8px; }
.trade-proof > div > p { color:var(--ink-2); }
.trade-proof__sample { background:var(--canvas); border:1px solid var(--line); border-radius:14px; padding:16px; display:grid; gap:10px; }
.trade-proof__sample small { font:600 11px/1.2 var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.trade-proof__sample b { font:600 16px/1.3 var(--sans); }
.trade-proof__sample p { font-size:14.5px; color:var(--ink-2); }
.text-action { all:unset; cursor:pointer; justify-self:start; color:var(--orange-ink); font:600 14.5px/1.3 var(--sans); }
.text-action:focus-visible { outline:3px solid var(--focus); outline-offset:3px; border-radius:4px; }
.more { padding-top:24px; border-top:1px solid var(--line); display:grid; gap:12px; }
.more h2 { font:700 18px/1.3 var(--display); }
.chiplinks { display:flex; flex-wrap:wrap; gap:8px; }
.chiplinks a { font:600 14px/1 var(--sans); padding:10px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--ink); }
.chiplinks a:hover { border-color:var(--ink-3); }
@media (max-width: 899px) { .sub__grid, .trade-proof { grid-template-columns:1fr; } }
@media (max-width: 640px) { .sub__facts { grid-template-columns:1fr; } }

/* agent (coming soon) */
.soonbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 18px; border-radius:16px; background:var(--accent-soft); color:var(--ink); font-size:15px; line-height:1.5; }
.soonbar b { font-weight:700; }
.cards3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.cards3 > div { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; display:grid; gap:10px; align-content:start; }
.cards3 .eyebrow { color:var(--orange-ink); }
.cards3 p { color:var(--ink-2); font-size:15px; line-height:1.55; }
.qa { display:grid; gap:8px; margin-top:6px; }
.qa span { font-size:14px; line-height:1.45; padding:10px 12px; border-radius:12px; }
.qa .q { background:var(--sunk); justify-self:end; max-width:90%; }
.qa .a { background:var(--canvas); border:1px solid var(--line); }
.qa small { display:block; margin-top:4px; font:500 11.5px/1.3 var(--mono); color:var(--ink-3); }
@media (max-width: 899px) { .cards3 { grid-template-columns:1fr; } }

/* legal */
.legal { max-width:780px; padding-block:clamp(36px,5vw,64px) clamp(56px,7vw,96px); }
.legal h1 { font:800 clamp(30px,4vw,46px)/1.08 var(--display); letter-spacing:-.03em; margin:0 0 8px; }
.legal h2 { font:700 20px/1.3 var(--display); margin:32px 0 10px; }
.legal p, .legal li { font-size:15.5px; line-height:1.7; color:var(--ink-2); }
.legal ul { padding-left:20px; }
.legal .updated { font-size:13px; color:var(--ink-3); margin-bottom:26px; }
.legal .draft, .legal .summary { padding:12px 16px; border-left:3px solid var(--fill); background:var(--accent-soft); color:var(--ink); font-size:14.5px; margin:0 0 26px; border-radius:0 10px 10px 0; }
.legal .summary { line-height:1.65; }
.legal h2 { scroll-margin-top:84px; }
.legal p { margin:0 0 12px; }
.legal .summary, .legal .updated { margin-bottom:26px; }
.legal ul { margin:8px 0 14px; }
.legal li { margin:0 0 8px; }
.legal li b, .legal p b { color:var(--ink); font-weight:650; }
.legal a { color:var(--orange-ink); text-decoration:underline; text-underline-offset:2px; }
.legal .contact { padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }

/* ---------- forms: signup dialog, /signup/, walkthrough ---------- */
.form-card { max-width:520px; background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-md); }
.form-card--center { margin-inline:auto; }
.lead { display:grid; gap:16px; }
.lead__top { display:flex; align-items:flex-start; gap:12px; }
.lead__top h2, .lead__top .lead__h { font:800 26px/1.1 var(--display); letter-spacing:-.02em; text-wrap:balance; }
.lead__top p { margin-top:6px; color:var(--ink-2); font-size:15px; }
.lead__top .iconBtn { margin-left:auto; }
.f { display:grid; gap:6px; }
.f label { font:600 14px/1.2 var(--sans); }
.f label small { font-weight:500; color:var(--ink-3); }
.f input, .f select, .f textarea { width:100%; min-height:48px; padding:0 14px; border-radius:12px; border:1.5px solid var(--line-2); background:var(--canvas); color:var(--ink); font:500 16px/1.3 var(--sans); }
.f textarea { padding:12px 14px; min-height:96px; resize:vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline:none; border-color:var(--fill); box-shadow:0 0 0 3px color-mix(in srgb, var(--fill) 25%, transparent); }
.f .ph { display:grid; grid-template-columns:auto minmax(0,1fr); }
.f .ph span { display:grid; place-items:center; padding:0 12px; border:1.5px solid var(--line-2); border-right:0; border-radius:12px 0 0 12px; background:var(--sunk); font:600 15px/1 var(--mono); color:var(--ink-2); }
.f .ph input { border-radius:0 12px 12px 0; }
.f .err { font:500 13px/1.3 var(--sans); color:var(--bad); min-height:0; }
.f.bad input, .f.bad select, .f.bad textarea { border-color:var(--bad); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.lead .btn--primary { width:100%; min-height:54px; font-size:17px; }
.lead .btn[disabled] { opacity:.65; cursor:progress; }
.lead__fine { font-size:12.5px; line-height:1.5; color:var(--ink-3); }
.lead__fine a { color:var(--ink-2); }
.lead__fail { font:500 14px/1.45 var(--sans); color:var(--bad); background:var(--bad-soft); border-radius:12px; padding:10px 12px; }
.lead__done { display:grid; gap:12px; }
.lead__done h2, .lead__done .lead__h { font:800 26px/1.15 var(--display); letter-spacing:-.02em; text-wrap:balance; }
.lead__done p { color:var(--ink-2); }
.lead__done .btn { justify-self:start; }
dialog.su { border:0; padding:0; width:min(480px, calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; border-radius:22px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg); }
dialog.su::backdrop { background:rgba(2,6,23,.55); }
dialog.su .form-card { border:0; box-shadow:none; max-width:none; }

/* consent */
.consent { position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:90; max-width:560px; margin:0 auto; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:16px 18px; display:none; gap:12px; align-items:center; flex-wrap:wrap; font:400 13.5px/1.5 var(--sans); }
.consent.on { display:flex; }
.consent p { margin:0; flex:1 1 280px; color:var(--ink-2); }
.consent .btn { min-height:40px; padding:0 16px; font-size:13.5px; }

/* the hero, inside the site */
.hx .cta .btn--lg { box-shadow:0 10px 24px -12px rgba(230,85,0,.75); }
.hx .sample { font:500 12px/1.3 var(--sans); color:var(--ink-3); }
@media (max-width: 759px) {
  .hx .cta .btn { width:100%; }
}


/* ---------- small shared pieces ---------- */
.sec h1.h1like { font:800 clamp(34px,5vw,60px)/1.02 var(--display); letter-spacing:-.04em; }
.h3like { font:700 20px/1.25 var(--display); letter-spacing:-.015em; }
.soonbar svg, .agentNote svg { width:24px; height:24px; flex:none; color:var(--ink); }
.agentMark { color:var(--ink); }
.page-body > .quiet { margin-top:-18px; }

/* ---------- trade pages: product first, like the home page ---------- */
.th { background:transparent; }
.th__in { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"copy stage" "cta stage"; grid-template-rows:auto auto; column-gap:clamp(28px,4vw,64px); row-gap:22px; align-items:center; align-content:center; padding-block:clamp(24px,3.5vw,52px) clamp(40px,5vw,72px); }
.th__copy { grid-area:copy; display:grid; gap:14px; align-self:end; }
.th__cta { grid-area:cta; display:grid; gap:12px; align-self:start; }
.th__cta .page-cta { margin-top:0; }
.th__stage { grid-area:stage; }
.th__copy h1 { font:800 clamp(34px,4.6vw,60px)/1.02 var(--display); letter-spacing:-.04em; max-width:15ch; text-wrap:balance; }
.th__copy .lede { max-width:46ch; }
.th__stage { --so:.8; --sc:.8; display:flex; align-items:flex-end; }
.th__own .pf { --s:var(--so); }
.th__stage { gap:clamp(12px,1.6vw,22px); }
.th__cust { position:relative; }
.th__cust .pf { --s:var(--sc); }
.th__lbl { display:flex; align-items:center; gap:7px; font:600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px 8px; white-space:nowrap; }
.th__lbl i { width:7px; height:7px; border-radius:50%; background:var(--orange); flex:none; }
/* both phones are drawn at the same size: a customer's phone is a real phone too */
@media (min-width: 900px){
:where(html.vh-le-820) .th__stage{ --so:.7; --sc:.7; }
 }

@media (min-width: 900px){
:where(html.vh-le-660) .th__stage{ --so:.62; --sc:.62; }
 }
@media (max-width: 1180px) and (min-width: 900px){ .th__stage { --so:.62; --sc:.62; } }

@media (max-width: 899px) {
  .th__in { grid-template-columns:1fr; grid-template-areas:"copy" "stage" "cta"; row-gap:26px; }
  /* on a phone: the owner's phone large, the customer's link over its empty lower corner */
  .th__stage { --so:.72; --sc:.72; position:relative; display:block; width:min(100%, 340px); margin-inline:auto; padding-bottom:calc(650px * var(--sc) - 195px * var(--so)); }
  .th__stage--one { padding-bottom:0; width:auto; display:flex; }
  .th__cust { position:absolute; right:0; top:calc(22px + 455px * var(--so)); }
  .th__cust .th__lbl { display:none; }
}
@media (max-width: 400px) { .th__stage { --so:.66; --sc:.66; } }

/* the owner's Today screen inside a phone (literal colours: a phone screen stays light in dark mode) */
.os { position:absolute; inset:0; padding:8px 14px 16px; display:flex; flex-direction:column; gap:10px; background:#f8fafc; color:#0f172a; }
.os__bar { display:flex; align-items:center; gap:10px; padding:4px 2px; }
.os__bar svg { width:26px; height:26px; flex:none; color:#0f172a; }
.os__bar b { display:block; font:700 19px/1.1 var(--display); letter-spacing:-.01em; }
.os__bar small { font:500 11.5px/1.2 var(--sans); color:#64748b; }
.os__av { margin-left:auto; width:34px; height:34px; border-radius:50%; background:#0f172a; color:#fff; display:grid; place-items:center; font:700 12px/1 var(--sans); flex:none; }
.os__lbl { display:flex; justify-content:space-between; font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#64748b; padding:4px 2px 0; }
.os__lbl b { color:#0f172a; font-weight:600; }
.os__rows { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.os__rows li { display:grid; grid-template-columns:4px minmax(0,1fr) auto; gap:10px; align-items:center; background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:10px 11px 10px 0; overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.os__rows li > i { align-self:stretch; background:#e65500; border-radius:0 3px 3px 0; }
.os__rows b { display:block; font:600 13px/1.25 var(--sans); }
.os__rows small { display:block; font:500 10.5px/1.3 var(--sans); color:#64748b; margin-top:2px; }
.os__r { display:grid; justify-items:end; gap:5px; }
.os__r b { font:600 12.5px/1 var(--mono); }
.oc { font:700 9px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; font-style:normal; padding:5px 7px; border-radius:999px; white-space:nowrap; }
.oc--wait { background:#f1f5f9; color:#475569; }
.oc--work { background:#ffe9dc; color:#b84300; }
.oc--ready { background:#dcfce7; color:#166534; }
.os__more { font:600 12px/1 var(--sans); color:#64748b; text-align:center; padding:4px 0; }
.os__foot { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:11px 12px; border-radius:12px; background:#eef2f6; font:500 11.5px/1.25 var(--sans); color:#475569; }
.os__foot b { font:600 12.5px/1 var(--mono); color:#0f172a; white-space:nowrap; }
.os__fab { margin-top:auto; align-self:flex-end; background:#0f172a; color:#fff; font:700 13px/1 var(--sans); padding:13px 17px; border-radius:15px; box-shadow:0 8px 18px -8px rgba(15,23,42,.5); }
.oo__back { width:9px; height:9px; margin:0 6px 0 4px; flex:none; border-left:2px solid #0f172a; border-bottom:2px solid #0f172a; transform:rotate(45deg); }
.oo .os__bar { gap:8px; }
.oo .os__bar > div { flex:1; min-width:0; }
.oo .os__bar b { font-size:17px; }
.oo__item { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:10px 12px; box-shadow:0 1px 2px rgba(15,23,42,.05); }
.oo__item b { display:block; font:600 14px/1.25 var(--sans); }
.oo__item small { display:block; margin-top:2px; font:500 11px/1.3 var(--sans); color:#64748b; }
.oo__card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; background:#fff4ed; border:1px solid #ffd2b8; }
.oo__tile { width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid #ffd2b8; display:grid; place-items:center; }
.oo__tile svg { width:18px; height:18px; color:#0f172a; }
.oo__card b { display:block; font:700 13px/1.1 var(--sans); }
.oo__card small { font:500 11px/1.2 var(--mono); color:#c2410c; }
.oo__st { font:700 9px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; font-style:normal; color:#9a3900; background:#ffe9dc; padding:5px 7px; border-radius:999px; white-space:nowrap; }
.oo__feed { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.oo__feed li { display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; font:500 13.5px/1.25 var(--sans); color:#0f172a; }
.oo__feed li::before { content:''; width:8px; height:8px; border-radius:50%; background:#157a52; }
.oo__feed small { font:500 10.5px/1 var(--mono); color:#64748b; }
.oo__act { margin-top:auto; display:grid; gap:8px; }
.oo__btn { display:block; height:44px; padding:0 10px; border-radius:14px; background:#0f172a; color:#fff; font:700 13.5px/44px var(--sans); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.oo__btn--wa { background:#15803d; }
.oo__btn--ok { background:#157a52; }
.oo__btn--off { background:#e2e8f0; color:#475569; font-weight:600; }
.ps .pbtn--ok { background:#157a52; color:#fff; }
.lk .oc, .lk .oo__st { font-size:10px; }
.lk .os__lbl, .lk .oo__feed small, .lk .msg small { font-size:11px; }
.lk .oo__item small, .lk .oo__card small, .lk .ps .cap2 { font-size:11.5px; }
.lk .ps .hist, .lk .ps .note { font-size:12.5px; }
.lk .ps .proof { padding-block:22px; }
.ps .steps li.todo::before { background:#cbd5e1; box-shadow:none; }
.ps .steps li.todo { color:#64748b; }
.ps .steps--big { gap:16px; padding:18px 16px; }
.ps .steps--big li { font-size:15px; }
.ps .steps--big li::before { width:12px; height:12px; }

/* one order, start to finish: four stops on one line */
.track { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.track li:not(:last-child)::after { content:''; position:absolute; left:44px; right:-4px; top:16px; border-top:2px dashed var(--line-2); }
.track li { position:relative; display:grid; gap:14px; align-content:start; }
.track__n { width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--canvas); display:grid; place-items:center; font:700 13px/1 var(--mono); box-shadow:0 0 0 6px var(--canvas); position:relative; }
.track__c { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:16px 16px 18px; display:grid; gap:10px; align-content:start; height:100%; }
.track__st { justify-self:start; font:700 11px/1 var(--mono); letter-spacing:.05em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:var(--sunk); color:var(--ink-2); }
.track li.told .track__st { background:var(--accent-soft); color:var(--orange-ink); }
.track li.done .track__st { background:var(--good-soft); color:var(--good); }
.track p { font-size:15px; line-height:1.5; color:var(--ink-2); }
@media (max-width: 899px) {
  .track { grid-template-columns:1fr; gap:12px; }
  .track li:not(:last-child)::after { left:15px; right:auto; top:44px; bottom:-8px; border-top:0; border-left:2px dashed var(--line-2); }
  .track li { grid-template-columns:32px minmax(0,1fr); gap:14px; }
}

/* what Tuskit keeps: each feature shows a piece of the app */
.feat { list-style:none; margin:0 0 clamp(24px,3.5vw,40px); padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.feat > li { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 16px 20px; display:grid; gap:8px; align-content:start; }
.feat h3 { font:700 18px/1.25 var(--display); letter-spacing:-.01em; margin:8px 4px 0; }
.feat p { font-size:15px; line-height:1.55; color:var(--ink-2); max-width:54ch; margin:0 4px; }
.ui { background:var(--canvas); border:1px solid var(--line); border-radius:14px; padding:4px 14px; display:grid; }
.ui > * { border-top:1px solid var(--line); }
.ui > :first-child { border-top:0; }
.ui__h { font:600 10.5px/1.2 var(--mono); letter-spacing:.08em; color:var(--ink-3); padding:10px 0 8px; }
.ui__kv { display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink-2); padding:10px 0; }
.ui__kv b { font:500 13.5px/1.3 var(--mono); color:var(--ink); text-align:right; }
.ui .mini__row { background:none; border-width:1px 0 0; border-radius:0; padding:10px 0; box-shadow:none; }
.ui > .mini__row:first-child { border-top:0; }
.feat + .trade-proof + .more { margin-top:clamp(24px,3.5vw,40px); }
@media (max-width: 720px) { .feat { grid-template-columns:1fr; } }

/* signup and walkthrough: the form beside what happens next */
.join { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,480px); grid-template-areas:"head form" "steps form"; grid-template-rows:auto 1fr; gap:22px clamp(28px,5vw,72px); align-items:start; padding-block:clamp(28px,4.5vw,64px) clamp(48px,6vw,88px); }
.join__head { grid-area:head; display:grid; gap:14px; padding-top:6px; }
.join__head h1 { font:800 clamp(34px,4.4vw,56px)/1.02 var(--display); letter-spacing:-.04em; max-width:15ch; text-wrap:balance; }
.join__form { grid-area:form; }
.join__steps { grid-area:steps; display:grid; gap:12px; align-content:start; }
.next { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.next li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:start; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.next li > svg { width:40px; height:40px; padding:10px; border-radius:12px; background:var(--accent-soft); color:var(--orange-ink); }
.next b { display:block; font:700 16px/1.3 var(--display); margin-top:2px; }
.next span { display:block; font-size:14.5px; color:var(--ink-2); line-height:1.5; margin-top:2px; }
@media (max-width: 899px) { .join { grid-template-columns:1fr; grid-template-areas:"head" "form" "steps"; grid-template-rows:auto; } .join__form { max-width:none; } }

/* agent preview: the morning brief on a phone */
.brief { display:grid; gap:8px; }
.brief p { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:12px 13px; font:500 13px/1.45 var(--sans); color:#334155; }
.brief b { color:#0f172a; font-weight:700; }
.brief__src { font:500 10.5px/1.4 var(--mono); color:#64748b; padding:0 4px; }
.th__stage--one { justify-content:center; }
.ps .bal { display:grid; gap:7px; padding:12px 14px; border:1px solid #e2e8f0; border-radius:14px; font:500 12.5px/1.2 var(--sans); color:#475569; }
.ps .bal small { font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.ps .bal div { display:flex; justify-content:space-between; }
.ps .bal b { font:600 12.5px/1.2 var(--mono); color:#0f172a; }
.ps .bal .due { padding-top:7px; border-top:1px dashed #e2e8f0; color:#0f172a; font-weight:600; }

/* what Tuskit does: one order, five steps, joined by one line */
.flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(14px,2vw,28px); }
.flow li { position:relative; display:grid; gap:12px; align-content:start; }
.flow li:not(:last-child)::after { content:''; position:absolute; top:23px; left:58px; right:calc(10px - clamp(14px,2vw,28px)); border-top:2px dashed var(--line-2); }
.flow__ic { width:46px; height:46px; border-radius:13px; background:var(--ink); color:var(--canvas); display:grid; place-items:center; }
.flow__ic svg { width:22px; height:22px; }
.flow__w { justify-self:start; font:800 clamp(20px,1.7vw,24px)/1.1 var(--display); letter-spacing:-.03em; padding:0 6px; margin-left:-6px; border-radius:4px; background:linear-gradient(transparent 42%, var(--hl) 42%); }
.flow li:nth-child(1) { --hl:var(--hl-1); } .flow li:nth-child(2) { --hl:var(--hl-2); } .flow li:nth-child(3) { --hl:var(--hl-3); } .flow li:nth-child(4) { --hl:var(--hl-2); } .flow li:nth-child(5) { --hl:var(--hl-4); } .flow li:nth-child(6) { --hl:var(--hl-5); }
.flow p { font-size:15px; line-height:1.5; color:var(--ink-2); max-width:24ch; }
@media (max-width: 899px) {
  .flow { grid-template-columns:1fr; gap:22px; }
  .flow li { grid-template-columns:46px minmax(0,1fr); column-gap:16px; row-gap:4px; }
  .flow__ic { grid-row:span 2; }
  .flow li:not(:last-child)::after { top:54px; bottom:-18px; left:22px; right:auto; border-top:0; border-left:2px dashed var(--line-2); }
  .flow p { max-width:none; }
}

/* Tuskit Agent on the home page (coming soon): the tabs switch the phone screen */
.ag { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.ag__copy { display:grid; gap:16px; align-content:center; }
.ag__eyebrow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.ag__eyebrow svg { width:22px; height:22px; color:var(--ink); }
.ag__tabs { display:grid; gap:8px; margin-top:4px; max-width:540px; }
.ag__tabs button { all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:3px; padding:14px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); }
.ag__tabs button b { font:700 16px/1.25 var(--display); }
.ag__tabs button span { font-size:14px; line-height:1.45; color:var(--ink-2); }
.ag__tabs button[aria-selected="true"] { border-color:var(--fill); box-shadow:inset 3px 0 0 var(--fill); }
.ag__tabs button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.ag__note { max-width:62ch; }
.ag__stage { display:grid; justify-items:center; }
.ag__ask { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-radius:999px; background:#fff; border:1px solid #cbd5e1; font:500 13px/1 var(--sans); color:#475569; }
.ag__ask i { width:28px; height:28px; border-radius:50%; background:#0f172a; flex:none; }
.ag__screen .ag__v:not([hidden]) { flex:1; }
.ag__stage .pf { --s:.8; }
@media (min-width: 900px){
:where(html.vh-le-820) .ag__stage .pf{ --s:.72; }
 }

.ag__v { display:flex; flex-direction:column; gap:10px; }
.ag__hi { font:700 15px/1.3 var(--display); color:#0f172a; padding:2px 4px 0; }
.ag__q { align-self:flex-end; max-width:82%; background:#0f172a; color:#fff; padding:10px 12px; border-radius:14px 14px 4px 14px; font:500 13px/1.4 var(--sans); }
.ag__a { display:grid; gap:5px; max-width:92%; background:#fff; border:1px solid #e2e8f0; border-radius:14px 14px 14px 4px; padding:12px 13px; font:500 12.5px/1.45 var(--sans); color:#334155; }
.ag__a b { color:#0f172a; font-weight:700; }
.ag__a small { font:500 10.5px/1.4 var(--mono); color:#475569; margin-top:4px; }
.ag__d { background:#fff; border:1px dashed #94a3b8; border-radius:14px; padding:12px 13px; font:500 13px/1.5 var(--sans); color:#0f172a; }
.ag__btns { display:flex; gap:8px; justify-content:flex-end; }
.ag__b { background:#15803d; color:#fff; font:700 12.5px/1 var(--sans); padding:10px 13px; border-radius:12px; }
.ag__b--ghost { background:#fff; color:#0f172a; box-shadow:inset 0 0 0 1.5px #cbd5e1; }
@media (max-width: 899px) { .ag { grid-template-columns:1fr; } .ag__stage { justify-items:center; } .ag__stage .pf { --s:.74; } }

/* the mantra is always three lines: Every order / in one place. / Nothing slips. */
.mantra > span { display:block; }

/* "Nothing slips.": the letters slip and are caught, then the orange dot lands */
.sdot { position:relative; color:transparent; }
.sdot::before { content:''; position:absolute; left:.03em; bottom:.15em; width:.17em; height:.17em; border-radius:50%; background:var(--orange); }
[data-slip] .ch { display:inline-block; transform-origin:50% 90%; }
[data-slip].is-slipping .ch { animation:slipcatch 1.15s cubic-bezier(.34,1.56,.64,1) both; animation-delay:calc(var(--i) * 45ms); }
[data-slip].is-slipping .sdot::before { animation:dotcatch .8s .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes slipcatch { 0% { transform:none; } 32% { transform:translateY(.16em) rotate(var(--r)); } 100% { transform:none; } }
@keyframes dotcatch { 0% { transform:translateY(-.7em) scale(.4); opacity:0; } 60% { transform:translateY(.04em) scale(1.25); opacity:1; } 100% { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { [data-slip].is-slipping .ch, [data-slip].is-slipping .sdot::before { animation:none; } }

/* Tuskit Agent avatar (Figma page 36): ring spark on a soft ground, a status dot; only the spark moves */
.agav { position:relative; width:36px; height:36px; border-radius:50%; background:#fff1eb; display:grid; place-items:center; flex:none; transition:background-color .3s; }
.os__bar .agav svg { width:24px; height:24px; color:#0f172a; }
.agav i { position:absolute; right:-1px; bottom:-1px; width:10px; height:10px; border-radius:50%; background:#94a3b8; box-shadow:0 0 0 2px #f8fafc; transition:background-color .3s; }
.agav[data-state="thinking"] i, .agav[data-state="speaking"] i { background:#ff5e00; }
.agav[data-state="done"] { background:#e7f7f1; }
.agav[data-state="done"] i { background:#10b981; }
.agav[data-state="thinking"] svg, .agav[data-state="speaking"] svg { --agentSpark:agentThink 1.2s ease-in-out infinite; }
.agav[data-state="done"] svg { --agentSpark:agentDone .42s cubic-bezier(.65,0,.35,1) 1; }
[data-agent-sim] .w { opacity:1; transition:opacity .22s ease; }
[data-agent-sim].is-live .w { opacity:0; }
[data-agent-sim].is-live .w.on { opacity:1; }
[data-agent-sim] :is(.brief p, .ag__q, .ag__a, .ag__d, .ag__b) { transition:opacity .25s ease; }
[data-agent-sim].is-live :is(.brief p, .ag__q, .ag__a, .ag__d, .ag__b):not(:has(.w.on)) { opacity:0; }

/* the Tuskit Link wordmark, as on the old site: loop mark, "Tuskit" in ink, "Link" in orange, a pulsing dot */
.lklock { display:inline-flex; align-items:center; gap:10px; font:700 clamp(26px,2.6vw,32px)/1 var(--display); letter-spacing:-.02em; color:var(--ink); }
.lklock svg { width:30px; height:30px; color:var(--ink); flex:none; }
.lklock b { position:relative; color:var(--orange-text); font-weight:700; padding-right:.32em; }
.lklock b i { position:absolute; right:0; bottom:.06em; width:.24em; height:.24em; border-radius:50%; background:var(--orange); }
.lklock b i::after { content:''; position:absolute; inset:0; border-radius:50%; background:var(--orange); animation:lkbeat 1.8s ease-out infinite; }
@keyframes lkbeat { 0% { opacity:.55; transform:scale(1); } 100% { opacity:0; transform:scale(3.4); } }
@media (prefers-reduced-motion: reduce) { .lklock b i::after { animation:none; opacity:0; } }

/* trade page hero: the customer's link follows one order to paid (motion is added by site.js; the static state above is the reduced-motion and no-JavaScript view) */
.ps[data-flow] .steps li[hidden] { display:none; }
.ps[data-flow] .steps li { transition:color .35s; }
.ps[data-flow] .steps li::before { transition:background .35s, box-shadow .35s; }
.ps[data-flow] .steps li.wait { color:#94a3b8; }
.ps[data-flow] .steps li.wait::before { background:#cbd5e1; }
.ps[data-flow] .steps li.fresh { animation:flowin .4s cubic-bezier(.22,.61,.36,1); }
.ps[data-flow] .pbtn { transition:background .35s, opacity .35s; }
.ps[data-flow] .pbtn.is-wait { opacity:.4; }
.ps[data-flow] .pbtn.is-paid { background:#157a52; }
.ps[data-flow] .bal .due b, .ps[data-flow] .bal div b, .ps[data-flow] .topay b { transition:color .3s; }
@keyframes flowin { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .ps[data-flow] .steps li.fresh { animation:none; } }
.os__rows li[data-flow-row] .oc { transition:background .35s, color .35s; }

/* one section per scroll: a gentle snap so each section (and each animation) lands whole, on phones and desktops */
html { scroll-snap-type:y proximity; }
/* the footer is not a snap point: on a short page (the 404) it pulled the page down on load and hid the heading under the header */
.hx, .sec, .th, .final { scroll-snap-align:start; }
/* trade pages on a phone or tablet held upright: headline and buttons, then the customer's phone, which peeks in and snaps whole */
@media (max-width: 899px){
:where(html.vh-ge-560) .th__in{ grid-template-areas:"copy" "cta" "stage"; row-gap:18px; }
:where(html.vh-ge-560) .th__stage{ width:auto; padding-bottom:0; display:flex; flex-direction:column; align-items:center; scroll-snap-align:start; }
:where(html.vh-ge-560) .th__own{ display:none; }
:where(html.vh-ge-560) .th__cust{ position:static; }
:where(html.vh-ge-560) .th__cust .th__lbl{ display:flex; justify-content:center; margin:0 0 12px; }

}


/* the logo's orange dot lands in its corner, once per visit (header.html adds .brand--land on the first page view; reduced motion and later pages see the still logo) */
.brand--land svg path[fill="#FF5E00"] { transform-box:fill-box; transform-origin:50% 100%; animation:dotland .75s cubic-bezier(.3,.7,.4,1) .3s both; }
@keyframes dotland { 0% { transform:translateY(-18px) scale(.8); opacity:0; } 50% { transform:none; opacity:1; } 68% { transform:translateY(-3px); } 82% { transform:none; } 100% { transform:none; opacity:1; } }

/* ---------- Tuskit Link plays one order on both phones (site.js adds .lk--play; without JavaScript it stays the plain list above, every step finished) ---------- */
/* before / after states: x = the phone that acts, r = the phone that reacts, c = the confirmation. A finished step shows the "after" markup; the one that plays starts at "before". */
.lk:not(.lk--play) .x-b, .lk--play > li:not(.is-live) .x-b, .lk--play > li.is-tap .x-b,
.lk:not(.lk--play) .r-b, .lk--play > li:not(.is-live) .r-b, .lk--play > li.is-done .r-b,
.lk:not(.lk--play) .c-b, .lk--play > li:not(.is-live) .c-b, .lk--play > li.is-conf .c-b,
.lk--play > li.is-live:not(.is-tap) .x-a, .lk--play > li.is-live:not(.is-done) .r-a, .lk--play > li.is-live:not(.is-conf) .c-a { display:none; }
.lk--play > li.is-live.is-tap .x-a, .lk--play > li.is-live.is-conf .c-a { animation:lkpop .4s both; }
.lk--play > li.is-live.is-done .r-a { animation:lkup .5s both; }
.lk--play > li.is-press:not(.is-tap) .x-b { transform:scale(.96); filter:brightness(.92); transition:transform .15s, filter .15s; }
.lk--play > li.is-live .ps .ok { animation:lkup .4s 2.7s both; }
.lk--play > li.is-live .otp span { animation:lkdig .4s both; }
.lk--play > li.is-live .otp span:nth-child(1) { animation-delay:.5s; }
.lk--play > li.is-live .otp span:nth-child(2) { animation-delay:.85s; }
.lk--play > li.is-live .otp span:nth-child(3) { animation-delay:1.2s; }
.lk--play > li.is-live .otp span:nth-child(4) { animation-delay:1.55s; }
.lk--play > li.is-live .otp span:nth-child(5) { animation-delay:1.9s; }
.lk--play > li.is-live .otp span:nth-child(6) { animation-delay:2.25s; }
.lk--play > li.is-live .proof { animation:lkup .5s .3s both; }
.lk--play > li.is-live .hist { animation:lkup .5s .8s both; }
.lk--play > li.is-live .lcard em { animation:lkglow 1.3s 1.5s 2; }
@keyframes lkup { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes lkpop { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:none; } }
@keyframes lkdig { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:none; } }
@keyframes lkglow { 50% { color:#c2410c; } }
/* the link travelling between the two phones */
.lk__ph--shop::before, .lk__ph--shop::after { content:''; position:absolute; left:100%; top:calc(50% + 11px); pointer-events:none; }
.lk__ph--shop::after { width:var(--lkgap); border-top:2px dashed var(--line-2); transform:translateY(-1px); }
.lk__ph--shop::before { z-index:2; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,94,0,.2); opacity:0; }
.lk--play > li.is-tap .lk__ph--shop::before { animation:lkflow .9s ease-in-out both; }
.lk--play > li[data-dir="shop"].is-tap .lk__ph--shop::before { animation-name:lkflowr; }
@keyframes lkflow { 0% { opacity:0; transform:translateX(0); } 12% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; transform:translateX(calc(var(--lkgap) - 10px)); } }
@keyframes lkflowr { 0% { opacity:0; transform:translateX(calc(var(--lkgap) - 10px)); } 12% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; transform:translateX(0); } }

/* the controls: a list of steps beside the phones on a screen, five bars under one phone on a phone */
.lk__ctl { display:flex; align-items:flex-start; justify-content:center; gap:10px; margin:22px auto 0; max-width:520px; }
.lk__tk { flex:1; min-width:0; background:none; border:0; padding:4px 0 0; cursor:pointer; text-align:left; font:600 12px/1.2 var(--sans); color:var(--ink-3); }
.lk__tk i { display:block; height:3px; border-radius:2px; background:var(--line); margin-bottom:7px; overflow:hidden; }
.lk__tk i b { display:block; height:100%; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:0 50%; } /* the progress bar fills with a transform, not a width: no layout every frame */
.lk__tk.past i b { transform:scaleX(1); }
.lk__tk.cur { color:var(--ink); }
.lk__tk.cur i b { transform:scaleX(1); transition:transform var(--d,4s) linear; }
.lk__tk.cur.rest i b { transform:scaleX(0); transition:none; }
.lk__tt, .lk__td { display:none; }
.lk__pause { flex:none; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; }
@media (min-width: 900px) {
  .lkv--play { display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); gap:clamp(28px,4.5vw,72px); align-items:center; }
  .lkv--play .lk { grid-column:2; grid-row:1; gap:0; }
  .lk--play > li { grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .45s, visibility .45s; }
  .lk--play > li.is-on { opacity:1; visibility:visible; }
  .lk--play .lk__cap { display:none; }
  .lk--play > li.is-live .pf::before { background:radial-gradient(closest-side, rgba(255,94,0,.34), rgba(15,23,42,.14) 62%, transparent); }
  .lkv--play { align-items:start; }
  .lkv--play .lk__ctl { grid-column:1; grid-row:1; display:grid; justify-content:stretch; align-items:start; gap:2px; max-width:none; margin:0; padding-top:clamp(24px,9vh,96px); }
  .lkv--play .lk { align-self:start; }
  .lkv--play .lk__tk { display:grid; grid-template-columns:3px 1fr; column-gap:18px; padding:12px 0; font:600 12px/1.3 var(--sans); }
  .lkv--play .lk__tk i { grid-row:1 / span 3; height:auto; margin:0; align-self:stretch; }
  .lkv--play .lk__tk i b { transform:scaleY(0); transform-origin:50% 0; }
  .lkv--play .lk__tk.past i b { transform:scaleY(1); }
  .lkv--play .lk__tk.cur i b { transform:scaleY(1); transition:transform var(--d,4s) linear; }
  .lkv--play .lk__tk.cur.rest i b { transform:scaleY(0); transition:none; }
  .lkv--play .lk__tn { display:none; }
  .lkv--play .lk__tt { display:block; font:700 18px/1.25 var(--display); letter-spacing:-.01em; color:var(--ink-3); transition:color .3s; }
  .lkv--play .lk__tk:hover .lk__tt { color:var(--ink-2); }
  .lkv--play .lk__tk.cur .lk__tt { color:var(--ink); }
  .lkv--play .lk__td { display:grid; gap:10px; max-height:0; overflow:hidden; opacity:0; transition:max-height .5s ease, opacity .4s, margin .4s; font:400 15px/1.5 var(--sans); color:var(--ink-2); }
  .lkv--play .lk__tk.cur .lk__td { max-height:220px; opacity:1; margin-top:8px; }
  .lkv--play .lk__td b { display:block; margin-bottom:2px; font:600 10.5px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
  .lkv--play .lk__td p { margin:0; }
  .lkv--play .lk__pause { margin:14px 0 0 21px; }
}
@media (max-width: 899px) {
  #link .sec__head .lede { display:none; } /* the two phones and the step captions say it */
  /* every step sits in one cell and only the current one shows, so the section is as tall as the tallest step and nothing moves when the step or the side changes */
  .lk--play { display:grid; gap:0; }
  .lk--play > li { grid-area:1 / 1; align-self:start; visibility:hidden; grid-template-columns:1fr; grid-template-areas:"sw" "ph" "cap"; row-gap:12px; justify-items:center; }
  .lk--play > li.is-on { visibility:visible; animation:lkup .4s both; }
  .lk--play .lk__sw { grid-area:sw; display:inline-grid; grid-auto-flow:column; padding:3px; border-radius:999px; background:var(--surface); border:1px solid var(--line); }
  .lk__sw button { border:0; background:none; padding:9px 16px; min-height:40px; border-radius:999px; font:600 13px/1 var(--sans); color:var(--ink-2); cursor:pointer; }
  .lk__sw button[aria-pressed="true"] { background:var(--ink); color:var(--canvas); }
  .lk--play .lk__ph { grid-area:ph; }
  .lk--play > li[data-side="shop"] .lk__ph--cust, .lk--play > li[data-side="cust"] .lk__ph--shop { display:none; }
  .lk--play .lk__cap p { grid-area:2 / 1; }
  .lk--play > li[data-side="shop"] .lk__them, .lk--play > li[data-side="cust"] .lk__you { visibility:hidden; }
  .lk--play .lk__ph .th__lbl { display:none; }
  .lk--play .lk__ph--shop::before, .lk--play .lk__ph--shop::after { display:none; }
  .lk--play .lk__cap { gap:6px; }
  .lk--play .lk__cap h3 { font-size:17px; }
  .lk--play .lk__cap p { font-size:14.5px; }
  .lk--play .lk__cap p b { display:none; }
  .lk--play .pf { --s:.78; }
}
@media (prefers-reduced-motion: reduce) { .lk--play > li, .lk--play > li * { animation:none !important; } .lk__tk.cur i b { transition:none; } }

/* ---------- Books: the payment records itself once, then resets (site.js drives it; the button still works) ---------- */
.book-example .book-entry:not([hidden]) { animation:lkup .5s both; }
.book-example .book-entry:not([hidden]) > div { animation:lkup .4s both; }
.book-example .book-entry:not([hidden]) > div:nth-child(2) { animation-delay:.2s; }
.book-example .book-entry:not([hidden]) > div:nth-child(3) { animation-delay:.45s; }
.book-example .book-entry:not([hidden]) > div:nth-child(4) { animation-delay:.7s; }
.book-example .book-entry:not([hidden]) > div:nth-child(5) { animation-delay:.95s; }
.book-example .book-entry:not([hidden]) > p { animation:lkup .4s 1.25s both; }
.book-example [data-book-balance] { transition:color .4s; }
.book-example.is-recorded [data-book-balance] { color:var(--good); }
@keyframes lkup { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---------- Tuskit Agent: plays its three scenes in turn; on a phone the picture comes first and the scene list sits under it ---------- */
.ag__pause { margin-top:14px; }
@media (max-width: 899px) {
  .ag { display:flex; flex-direction:column; gap:18px; }
  .ag__copy { display:contents; }
  .ag__eyebrow { order:1; }
  .ag__copy > h2 { order:2; }
  .ag__copy > .lede { order:3; }
  .ag__stage { order:4; }
  .ag__tabs { order:5; max-width:none; margin-top:0; }
  .ag__note { order:6; }
  .ag__tabs button { padding:11px 14px; }
  .ag__tabs button span { display:none; }
  .ag__tabs button[aria-selected="true"] span { display:block; }
}
@media (max-width: 899px) {
  .ag__stage { position:relative; align-self:stretch; }
  .ag__stage .pf { --s:.68; }
  .ag__pause { position:absolute; right:2px; top:-8px; margin:0; }
}

/* touch: larger tap areas for the small controls, without changing how they look */
@media (pointer: coarse) {
  .hx .ticks .tick, .lk__tk, .textlink { position:relative; }
  .hx .ticks .tick::after, .lk__tk::after, .textlink::after { content:''; position:absolute; inset:-11px -3px; }
}

/* legal pages: contents list */
.legal__toc { margin:6px 0 10px; padding:14px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.legal__toc p { margin:0 0 8px; font:600 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.legal__toc ol { margin:0; padding-left:22px; display:grid; gap:4px 28px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.legal__toc li, .legal__toc a { font-size:14.5px; line-height:1.45; }
.legal__toc a { color:var(--ink-2); text-decoration:none; }
.legal__toc a:hover { color:var(--orange-ink); text-decoration:underline; }
@media (max-width: 640px) { .legal__toc ol { grid-template-columns:1fr; } }

/* ---------- Invoices and follow-ups: two example cards that play when they come into view ---------- */
.inv { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2.4vw,28px); }
.inv__card { min-width:0; align-content:start; }
.inv__tot b { font-size:16px; }
.inv__acts { display:flex; flex-wrap:wrap; gap:8px; }
.inv__btn { font:600 13px/1 var(--sans); padding:10px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--canvas); color:var(--ink); }
.inv__btn--wa { background:var(--ink); border-color:var(--ink); color:var(--canvas); }
.inv__chat { background:#efeae2; border-radius:14px; padding:12px; display:grid; }
.inv__chat .msg { justify-self:end; color:#0f172a; }
.inv__file { display:block; margin-top:6px; padding:6px 8px; border-radius:8px; background:rgba(15,23,42,.07); font:500 12px/1.2 var(--mono); }
.inv__owe { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.inv__owe li { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--canvas); }
.inv__owe b { font:600 14px/1.25 var(--sans); }
.inv__owe li > b { font:600 14px/1.2 var(--mono); font-variant-numeric:tabular-nums; }
.inv__owe small { display:block; margin-top:2px; font-size:12.5px; color:var(--ink-3); }
.inv__age { font:700 10px/1 var(--mono); letter-spacing:.04em; padding:5px 7px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.inv__age--hot { background:var(--accent-soft); border-color:transparent; color:var(--orange-ink); }
.inv__owe li.is-pick { border-color:var(--orange); box-shadow:inset 3px 0 0 var(--orange); }
.inv__more .ticklist { grid-template-columns:repeat(2,minmax(0,1fr)); }
.inv__more > p { font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.inv__card.is-live .inv__doc > div { animation:lkup .4s both; }
.inv__card.is-live .inv__doc > div:nth-of-type(1) { animation-delay:.2s; }
.inv__card.is-live .inv__doc > div:nth-of-type(2) { animation-delay:.5s; }
.inv__card.is-live .inv__doc > div:nth-of-type(3) { animation-delay:.8s; }
.inv__card.is-live .inv__owe li { animation:lkup .4s both; }
.inv__card.is-live .inv__owe li:nth-child(2) { animation-delay:.2s; }
.inv__card.is-live .inv__owe li:nth-child(3) { animation-delay:.4s; }
.inv__card.is-live .inv__owe li.is-pick { animation:lkup .4s both, invpick .4s 1.3s both; }
.inv__card.is-live [data-inv-press] { animation:invpress .8s 1.7s both; }
.inv__card.is-live .inv__chat .msg { animation:lkup .5s 2.4s both; }
@keyframes invpress { 0% { box-shadow:0 0 0 0 rgba(255,94,0,.55); } 100% { box-shadow:0 0 0 12px rgba(255,94,0,0); } }
@keyframes invpick { from { border-color:var(--line); box-shadow:none; } to { border-color:var(--orange); box-shadow:inset 3px 0 0 var(--orange); } }
@media (max-width: 899px) { .inv { grid-template-columns:1fr; } .inv__more .ticklist { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .inv__card.is-live * { animation:none !important; } }

/* ---------- invoice preview: a paper document in the shop's own layout, logo and colour ---------- */
.doc { --acc:#e65500; --acc-on:#0f172a; --acc-ink:color-mix(in srgb, var(--acc) 80%, #000); /* the fill stays the brand orange; text on it is dark (4.8:1), text in the accent on white is the accent darkened 20% (5.4:1) */ background:#fff; color:#0f172a; border-radius:12px; padding:16px 16px 14px; box-shadow:0 1px 0 rgba(15,23,42,.06), 0 12px 30px -18px rgba(15,23,42,.35); display:grid; gap:12px; font-family:var(--sans); transition:padding .35s var(--ease); }
.doc small { font:500 10.5px/1.3 var(--mono); color:#64748b; letter-spacing:.02em; }
.doc__head { display:flex; align-items:center; gap:12px; padding-bottom:12px; border-bottom:2px solid var(--acc); transition:background-color .35s, color .35s, padding .35s, border-color .35s; }
.doc__logo { width:40px; height:40px; border-radius:10px; background:var(--acc); color:var(--acc-on); display:grid; place-items:center; font:800 15px/1 var(--display); flex:none; transition:background-color .35s; }
.doc__who { display:grid; gap:2px; min-width:0; }
.doc__who b { font:700 15px/1.2 var(--display); }
.doc__title { margin-left:auto; text-align:right; display:grid; gap:2px; }
.doc__title b { font:800 15px/1.1 var(--display); letter-spacing:.02em; color:var(--acc-ink); transition:color .35s; }
.doc__bill { display:grid; gap:2px; }
.doc__bill b { font:600 14px/1.2 var(--sans); }
.doc__tbl { display:grid; border-top:1px solid #e2e8f0; }
.doc__r { display:grid; grid-template-columns:minmax(0,1fr) 44px 84px; gap:8px; padding:7px 0; border-bottom:1px solid #eef2f6; font-size:13px; transition:padding .35s; }
.doc__r span:nth-child(2) { text-align:right; color:#64748b; }
.doc__r span:last-child { text-align:right; font:500 13px/1.3 var(--mono); font-variant-numeric:tabular-nums; }
.doc__r--h { font:600 10.5px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#64748b; }
.doc__r--t { font-weight:700; border-bottom:0; }
.doc__r--t span:last-child { font-weight:700; color:var(--acc-ink); transition:color .35s; }
.doc__foot { font-size:11.5px; line-height:1.4; color:#64748b; margin:0; }
/* the three layouts */
.doc[data-tpl="compact"] { padding:12px 14px 10px; gap:8px; }
.doc[data-tpl="compact"] .doc__r { padding:3px 0; font-size:12px; }
.doc[data-tpl="compact"] .doc__head { padding-bottom:8px; }
.doc[data-tpl="compact"] .doc__logo { width:32px; height:32px; font-size:13px; }
.doc[data-tpl="bold"] .doc__head { background:var(--acc); color:var(--acc-on); padding:12px; border-radius:9px; border-color:transparent; }
.doc[data-tpl="bold"] .doc__head small { color:var(--acc-on); }
.doc[data-tpl="bold"] .doc__title b { color:var(--acc-on); }
.doc[data-tpl="bold"] .doc__logo { background:#fff; color:var(--acc-ink); }
/* the logo's place */
.doc[data-logo="right"] .doc__logo { order:3; }
.doc[data-logo="right"] .doc__title { order:2; margin-left:auto; }
.doc[data-logo="centre"] .doc__head { flex-direction:column; text-align:center; gap:6px; }
.doc[data-logo="centre"] .doc__who { justify-items:center; }
.doc[data-logo="centre"] .doc__title { margin-left:0; text-align:center; }
/* the controls */
.doc__ctl { display:grid; gap:8px; }
.doc__grp { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.doc__grp > span { font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); width:56px; }
.doc__grp button { font:600 12.5px/1 var(--sans); padding:8px 11px; border-radius:999px; border:1px solid var(--line-2); background:var(--canvas); color:var(--ink); cursor:pointer; transition:background-color .25s, color .25s, border-color .25s; }
.doc__grp button[aria-pressed="true"] { background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.doc__grp .sw { width:26px; height:26px; padding:0; background:var(--c); border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--line-2); }
.doc__grp .sw[aria-pressed="true"] { background:var(--c); border-color:var(--surface); box-shadow:0 0 0 2px var(--ink); }
.doc__grp button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
@media (pointer: coarse) { .doc__grp button { padding:10px 12px; } .doc__grp .sw { width:30px; height:30px; } }


.doc__r--h span:last-child { font:600 10.5px/1.2 var(--mono); }

/* ---------- pricing (centred header, billing toggle, three cards, the Business card dark and recommended) ---------- */
#pricing { position:relative; background:radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 72%); }
.sec__head.price__head { max-width:820px; margin-inline:auto; text-align:center; justify-items:center; gap:14px; margin-bottom:clamp(26px,3.5vw,40px); }
.price__head .lede { max-width:56ch; }
.bill { display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--sunk); border:1px solid var(--line); margin-top:6px; }
.bill button { font:600 15px/1 var(--sans); padding:12px 22px; border-radius:999px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:background-color .25s, color .25s; }
.bill button small { font:700 11px/1 var(--mono); letter-spacing:.03em; padding:5px 8px; border-radius:999px; background:var(--accent-soft); color:var(--orange-ink); }
.bill button[aria-pressed="true"] { background:var(--ink); color:var(--canvas); }
.bill button[aria-pressed="true"] small { background:var(--orange); color:#fff; }
.bill button:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.bill__note { margin:0; font-size:14px; color:var(--ink-3); min-height:1.5em; }

.plans { grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); align-items:stretch; padding-top:0; }
.plan { position:relative; display:flex; flex-direction:column; gap:0; padding:30px 28px 28px; border-radius:24px; background:var(--surface); border:1px solid var(--line); overflow:hidden; transition:translate .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.plan::before { display:none; }
.plan:hover { translate:0 -4px; box-shadow:0 22px 44px -28px rgba(15,23,42,.5); }
.plan__top { display:flex; align-items:center; gap:12px; }
.plan__ic { width:42px; height:42px; border-radius:13px; background:var(--ink); color:var(--canvas); display:grid; place-items:center; flex:none; }
.plan__ic svg { width:25px; height:25px; }
.plan__ic .ac { stroke:var(--orange); }
.plan__ic .acf { fill:var(--orange); stroke:var(--orange); }
.plan--pro .plan__ic .ac { stroke:#0f172a; }
.plan--pro .plan__ic .acf { fill:#0f172a; stroke:#0f172a; }
.plan__name { font:800 26px/1.1 var(--display); letter-spacing:-.02em; }
.plan__for { margin:12px 0 0; font-size:15px; line-height:1.5; color:var(--ink-2); min-height:3em; }
.plan__price { display:flex; align-items:baseline; gap:8px; margin-top:20px; }
.plan__price b { font:800 clamp(44px,4vw,56px)/1 var(--display); letter-spacing:-.04em; }
.plan__price span { font-size:16px; color:var(--ink-3); }
.plan__yr { margin:8px 0 0; font-size:14px; line-height:1.45; color:var(--ink-2); min-height:2.9em; }
.plan > .btn { margin-top:16px; width:100%; justify-content:center; }
.plan__cap { margin:14px 0 0; padding:0; background:none; text-align:center; font:600 14px/1.3 var(--sans); color:var(--ink); }
.plan__inc { margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line); font:700 12px/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.plan ul { margin:14px 0 0; gap:13px; }
.plan li { font-size:15px; line-height:1.45; }
.plan li svg { color:var(--good); width:17px; height:17px; margin-top:2px; }
.plan__price.swap b, .plan__price.swap span, .plan__yr.swap { animation:pricein .35s var(--ease); }
@keyframes pricein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* the recommended card: dark in both themes, orange light from the corner, a tab across the top */
.plan--business { border:1px solid rgba(255,94,0,.55); color:#f8fafc; background:radial-gradient(110% 60% at 88% -8%, rgba(255,94,0,.42), transparent 62%), linear-gradient(180deg, #1a2338, #0f172a); box-shadow:0 34px 80px -40px rgba(255,94,0,.6); padding-top:0; }
.plan--business:hover { translate:0 -6px; box-shadow:0 40px 90px -38px rgba(255,94,0,.7); }
.plan__flag { position:static; translate:none; align-self:stretch; margin:0 -28px 26px; padding:11px 12px; text-align:center; border-radius:0; background:var(--orange); color:#fff; font:700 12px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.plan--business .plan__ic { background:var(--orange); color:#fff; }
.plan--business .plan__for, .plan--business .plan__yr { color:rgba(248,250,252,.78); }
.plan--business .plan__price span { color:rgba(248,250,252,.66); }
.plan--business .plan__cap { color:#f8fafc; }
.plan--business .plan__inc { border-color:rgba(255,255,255,.16); color:rgba(248,250,252,.62); }
.plan--business li svg { color:#ff9a5c; }
.plan--business .btn--primary { box-shadow:0 12px 30px -12px rgba(255,94,0,.8); }
.plan--business::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.14) 50%, transparent 62%); transform:translateX(-120%); }
.plans.is-live .plan { animation:lkup .6s both; }
.plans.is-live .plan--business { animation-delay:.12s; }
.plans.is-live .plan--scale { animation-delay:.24s; }
.plans.is-live .plan li svg { animation:chkpop .4s both; }
.plans.is-live .plan li:nth-child(1) svg { animation-delay:.5s; } .plans.is-live .plan li:nth-child(2) svg { animation-delay:.6s; }
.plans.is-live .plan li:nth-child(3) svg { animation-delay:.7s; } .plans.is-live .plan li:nth-child(4) svg { animation-delay:.8s; }
.plans.is-live .plan li:nth-child(5) svg { animation-delay:.9s; } .plans.is-live .plan li:nth-child(6) svg { animation-delay:1s; }
.plans.is-live .plan li:nth-child(7) svg { animation-delay:1.1s; } .plans.is-live .plan li:nth-child(8) svg { animation-delay:1.2s; }
.plans.is-live .plan li:nth-child(9) svg { animation-delay:1.3s; }
@keyframes chkpop { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:none; } }

.found { margin-top:clamp(18px,2.4vw,28px); display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:20px; border:1px solid var(--line); background:var(--surface); box-shadow:inset 4px 0 0 var(--orange); }
.found__ic { width:44px; height:44px; border-radius:13px; background:var(--accent-soft); color:var(--orange-ink); display:grid; place-items:center; flex:none; }
.found__ic svg { width:22px; height:22px; }
.found > div { display:grid; gap:4px; flex:1; min-width:0; }
.found b { font:700 17px/1.3 var(--display); }
.found span { font-size:14.5px; line-height:1.5; color:var(--ink-2); }

.cmp { margin-top:clamp(18px,2.4vw,28px); }
.cmp > summary { list-style:none; cursor:pointer; display:flex; justify-content:center; }
.cmp > summary::-webkit-details-marker { display:none; }
.cmp > summary span { display:inline-flex; align-items:center; gap:10px; font:600 15px/1 var(--sans); padding:13px 22px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); }
.cmp > summary span::after { content:''; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .25s; }
.cmp[open] > summary span::after { transform:rotate(-135deg) translateY(-2px); }
.cmp > summary:focus-visible span { outline:3px solid var(--focus); outline-offset:2px; }
.cmp .tableScroll { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow-x:auto; }
.cmp table { width:100%; min-width:560px; border-collapse:collapse; }
.cmp th, .cmp td { padding:12px 16px; text-align:center; font-size:14.5px; border-bottom:1px solid var(--line); }
.cmp thead th { font:700 14px/1.2 var(--display); background:var(--sunk); }
.cmp tbody th { text-align:left; font-weight:500; color:var(--ink-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom:0; }
.cmp thead th:first-child { text-align:left; }
.cmp .cmp__hero { background:color-mix(in srgb, var(--orange) 8%, transparent); }
.cmp thead .cmp__hero { color:var(--orange-ink); }
.cmp svg { width:17px; height:17px; color:var(--good); vertical-align:middle; }
.cmp .no { color:var(--ink-3); }
.billfacts { list-style:none; margin:clamp(24px,3vw,36px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px); }
.billfacts li { display:grid; gap:6px; padding:16px 18px; border-radius:16px; border:1px solid var(--line); background:var(--surface); }
.billfacts b { font:700 15px/1.2 var(--display); }
.billfacts span { font-size:14.5px; line-height:1.5; color:var(--ink-2); }
@media (max-width: 899px) {
  .plans { grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .plan__for, .plan__yr { min-height:0; }
  .found { flex-direction:column; align-items:flex-start; }
  .found .btn { width:100%; justify-content:center; }
  .billfacts { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .plans.is-live .plan, .plans.is-live .plan li svg, .plans.is-live .plan--business::after, .plan__price.swap b, .plan__price.swap span, .plan__yr.swap { animation:none !important; } .plan, .plan:hover { transition:none; } }
/* the "Recommended" tab sits above the card, so all three cards start on the same line */
.plans { padding-top:36px; }
.plan--business { overflow:visible; border-radius:0 0 24px 24px; padding-top:30px; }
.plan__flag { position:absolute; left:-1px; right:-1px; top:-35px; height:36px; margin:0; padding:0; display:grid; place-items:center; border-radius:24px 24px 0 0; }
.plan--business::after { border-radius:0 0 24px 24px; clip-path:inset(0 round 0 0 24px 24px); }
@media (max-width: 899px) { .plans { padding-top:0; } .plan--business { margin-top:36px; } }
.plan--business::after { transform:none; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%) no-repeat; background-size:250% 100%; background-position:130% 0; }
.plans.is-live .plan--business::after { animation:planshine2 1.5s 1s ease-out 1 both; }
@keyframes planshine2 { from { background-position:130% 0; } to { background-position:-30% 0; } }

/* ---------- pricing on one screen, then the comparison on the next ---------- */
@media (min-width: 900px) {
  #pricing.sec--screen { min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(14px,2.4vh,32px); }
  #pricing .sec__head.price__head { margin-bottom:clamp(14px,2.4vh,26px); gap:clamp(8px,1.3vh,14px); }
  #pricing .price__head h2 { font-size:clamp(34px,min(4.4vw,6.4vh),58px); }
  #pricing .bill button { padding:clamp(9px,1.4vh,12px) 20px; }
  #pricing .plans { padding-top:30px; }
  #pricing .plan { padding:clamp(16px,2.4vh,26px) 26px clamp(16px,2.4vh,24px); }
  #pricing .plan--pro { padding-top:clamp(16px,2.4vh,26px); }
  #pricing .plan__flag { top:-29px; height:30px; font-size:11.5px; }
  #pricing .plan__for { margin-top:clamp(6px,1vh,12px); min-height:0; font-size:14.5px; }
  #pricing .plan__price { margin-top:clamp(10px,1.8vh,20px); }
  #pricing .plan__price b { font-size:clamp(38px,min(3.6vw,6.2vh),54px); }
  #pricing .plan__yr { min-height:0; margin-top:6px; }
  #pricing .plan > .btn { margin-top:clamp(10px,1.8vh,16px); }
  #pricing .plan__cap { margin-top:clamp(8px,1.4vh,14px); }
  #pricing .plan ul { margin-top:clamp(10px,1.8vh,18px); padding-top:clamp(10px,1.8vh,18px); border-top:1px solid var(--line); gap:clamp(8px,1.4vh,12px); }
  #pricing .plan--pro ul { border-color:rgba(255,255,255,.16); }
  #pricing .plan li { font-size:14.5px; }
}
.plan__ic { width:38px; height:38px; border-radius:12px; }
.plan__name { font-size:24px; }
.plan--pro { border:1px solid rgba(255,94,0,.55); color:#f8fafc; background:radial-gradient(110% 60% at 88% -8%, rgba(255,94,0,.42), transparent 62%), linear-gradient(180deg, #1a2338, #0f172a); box-shadow:0 34px 80px -40px rgba(255,94,0,.6); overflow:visible; border-radius:0 0 24px 24px; }
.plan--pro:hover { translate:0 -6px; box-shadow:0 40px 90px -38px rgba(255,94,0,.7); }
.plan--pro .plan__ic { background:var(--orange); color:#fff; }
.plan--pro .plan__for, .plan--pro .plan__yr { color:rgba(248,250,252,.78); }
.plan--pro .plan__price span { color:rgba(248,250,252,.66); }
.plan--pro .plan__cap { color:#f8fafc; }
.plan--pro li svg { color:#ff9a5c; }
.plan--pro .btn--primary { box-shadow:0 12px 30px -12px rgba(255,94,0,.8); }
.plan--pro::after { content:''; position:absolute; inset:0; pointer-events:none; border-radius:0 0 24px 24px; background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%) no-repeat; background-size:250% 100%; background-position:130% 0; }
.plans.is-live .plan--pro { animation-delay:.12s; }
.plans.is-live .plan--max { animation-delay:.24s; }
.plans.is-live .plan--pro::after { animation:planshine2 1.5s 1s ease-out 1 both; }
.price__fine { text-align:center; margin:clamp(12px,2vh,22px) 0 0; font-size:14px; color:var(--ink-3); }
.price__fine .textlink { white-space:nowrap; }

.cmp { margin-top:0; }
.cmp .tableScroll { margin-top:0; }
.cmp th, .cmp td { padding:clamp(8px,1.2vh,12px) 16px; }
.cmp thead th { font-size:15px; padding-block:14px; }
.cmp__grp th { text-align:left; background:var(--sunk); font:700 11.5px/1.2 var(--mono) !important; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding-block:9px; }
.cmp tfoot td { border-bottom:0; padding-block:16px; }
.cmp tfoot .btn { width:100%; justify-content:center; }
.cmp .no { color:var(--ink-3); }
.cmp col, .cmp td:not(:first-child) { min-width:120px; }
@media (min-width: 900px) { #compare.sec--screen { min-height:calc(100svh - var(--nav-h)); } }
.plan--pro .plan__inc { display:none; }
@media (max-width: 899px) { .plan--pro { margin-top:36px; } #pricing .plans { padding-top:0; } }
/* shorter desktop screens (laptops): drop the one-line extras so pricing still fits one screen */
@media (min-width: 900px){
:where(html.vh-le-840) #pricing .plan__for, :where(html.vh-le-840) #pricing .bill__note, :where(html.vh-le-840) #pricing .price__fine{ display:none; }
:where(html.vh-le-840) #pricing .price__head h2{ font-size:clamp(30px,min(3.6vw,5.4vh),46px); }
:where(html.vh-le-840) #pricing .plan__price b{ font-size:clamp(34px,min(3.2vw,5.4vh),44px); }
:where(html.vh-le-840) #pricing .plan__top + .plan__price{ margin-top:10px; }
:where(html.vh-le-840) #pricing .plan li{ font-size:14px; }
:where(html.vh-le-840) #pricing .plan ul{ gap:8px; }

}

@media (min-width: 900px){
:where(html.vh-le-740) #pricing .price__head .lede{ display:none; }
:where(html.vh-le-740) #pricing .plan{ padding-block:14px; }
:where(html.vh-le-740) #pricing .plan__yr{ font-size:13px; }
 }

@media (max-width: 700px) {
  .cmp table { min-width:600px; }
  .cmp tbody th { min-width:200px; position:sticky; left:0; background:var(--surface); z-index:1; }
  .cmp__grp th { position:static; min-width:0; background:var(--sunk); }
  .cmp thead th:first-child { min-width:200px; position:sticky; left:0; background:var(--sunk); z-index:1; }
  .cmp tfoot td:first-child { position:sticky; left:0; background:var(--surface); }
  .cmp td:not(:first-child), .cmp thead th:not(:first-child) { min-width:96px; }
}
@media (max-width: 700px) {
  .cmp table { min-width:0; width:100%; table-layout:fixed; }
  .cmp tbody th, .cmp thead th:first-child { min-width:0; width:41%; position:static; font-size:13px; line-height:1.35; padding:9px 10px; }
  .cmp td, .cmp thead th:not(:first-child) { min-width:0; padding:9px 4px; font-size:13px; }
  .cmp thead th { font-size:13px; }
  .cmp tfoot .btn { padding-inline:6px; font-size:12px; min-height:40px; }
  .cmp svg { width:15px; height:15px; }
}

/* ---------- one screen per section: every section is at least a full screen, its content centred, and tighter spacing so it fits ---------- */
.sec { padding-block:clamp(20px,4vh,56px); min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center; }
.sec > .wrap { width:100%; }
.sec__head { margin-bottom:clamp(16px,3vh,40px); }
#books.sec { padding-block:clamp(20px,4vh,56px); }

/* ---------- screens: the numbering, the fitted phones and the tight modes ---------- */
#link.is-tight .sec__head .lede, #link.is-tight .lk__chips { display:none; }
#agent.is-tight .ag__copy > .lede { display:none; }
#agent.is-tight .ag__note { font-size:0; max-width:none; margin:0; }
#agent.is-tight .ag__note a { font-size:14.5px; }
#link.is-tight .sec__head { margin-bottom:clamp(8px,1.6vh,16px); }
#link.is-tight .lk__ctl { margin-top:clamp(8px,1.6vh,16px); }
@media (min-width: 900px) { #link.is-tight .lkv--play .lk__ctl { padding-top:0; margin-top:0; } #link.is-tight .lkv--play .lk__tk { padding-block:8px; } #link.is-tight .lkv--play .lk__pause { margin-top:8px; } }

@media (max-width: 899px) {
  /* trades: the picker and the stages, without the art and the footnote */
  #trades .sec__head .lede { display:none; }
  #trades .tp__art, #trades .tp__core { display:none; }
  /* books: the example is the screen; the longer notes follow */
  #books .bk__quiet { display:none; }
  .bk-gst, .tb { scroll-snap-align:start; }
  /* pricing and invoices become a row of cards you swipe, so each is a whole screen */
  #pricing .plans { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; max-width:none; margin-inline:calc(-1 * var(--gut)); padding:34px var(--gut) 10px; scroll-padding-inline:var(--gut); scrollbar-width:none; }
  #pricing .plans::-webkit-scrollbar { display:none; }
  #pricing .plan { flex:0 0 min(80vw, 330px); scroll-snap-align:center; }
  #pricing .plan--pro { margin-top:0; }
  #pricing .plan__for, #pricing .bill__note, #pricing .price__fine { display:none; }
  #pricing .plan { padding:18px 20px 18px; }
  #pricing .plan--pro { padding-top:18px; }
  #pricing .plan__price { margin-top:12px; }
  #pricing .plan__price b { font-size:40px; }
  #pricing .plan__yr { margin-top:4px; min-height:0; font-size:13px; }
  #pricing .plan > .btn { margin-top:12px; min-height:46px; }
  #pricing .plan__cap { margin-top:10px; }
  #pricing .plan ul { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); gap:9px; }
  #pricing .plan--pro ul { border-color:rgba(255,255,255,.16); }
  #pricing .plan li { font-size:14px; }
  #pricing .price__head h2 { font-size:clamp(28px,8vw,38px); }
  #pricing .sec__head.price__head { gap:10px; margin-bottom:10px; }
  .inv { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; margin-inline:calc(-1 * var(--gut)); padding:4px var(--gut) 10px; scroll-padding-inline:var(--gut); scrollbar-width:none; }
  .inv::-webkit-scrollbar { display:none; }
  .inv__card { flex:0 0 min(90vw, 420px); scroll-snap-align:center; }
  #invoices .sec__head .lede { display:none; }
  #invoices .sample-label { display:none; }
  #invoices .doc__grp:nth-child(n+2) { display:none; }
  .inv__more { scroll-snap-align:start; }
}
.swipehint { display:none; }
@media (max-width: 899px) { .swipehint { display:block; text-align:center; font:600 12px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 0; } }

/* ---------- tighter screens ---------- */
@media (max-width: 899px) {
  /* what Tuskit does: six steps in two columns */
  .flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 14px; }
  .flow li { grid-template-columns:1fr; column-gap:0; row-gap:8px; }
  .flow__ic { grid-row:auto; width:40px; height:40px; border-radius:12px; }
  .flow li:not(:last-child)::after { display:none; }
  .flow__w { font-size:21px; }
  .flow p { font-size:14px; line-height:1.45; }
  #does .sec__head .lede { display:none; }
  #pricing .price__head .eyebrow { display:none; }
  #trades .tlist__foot { display:none; }
}
:where(html.vh-le-960) #invoices .sec__head .lede, :where(html.vh-le-960) #invoices .sample-label{ display:none; }
:where(html.vh-le-960) .doc{ padding:12px 14px 10px; gap:8px; }
:where(html.vh-le-960) .doc__r{ padding:4px 0; }
:where(html.vh-le-960) .doc__ctl{ display:flex; flex-wrap:wrap; gap:6px 14px; }
:where(html.vh-le-960) .doc__grp > span{ display:none; }
:where(html.vh-le-960) .inv__chat{ padding:8px; }
:where(html.vh-le-960) .inv__card{ gap:10px; padding:16px; }
:where(html.vh-le-960) .inv__owe li{ padding:8px 12px; }


@media (min-width: 900px){
:where(html.vh-le-820) #trades .sec__head .lede, :where(html.vh-le-820) #does .sec__head .lede{ display:none; }
:where(html.vh-le-820) #trades .sec__head{ margin-bottom:14px; }
:where(html.vh-le-820) #trades .tp__core, :where(html.vh-le-820) #trades .tlist__foot{ display:none; }

}

:where(html.vh-le-700) .sec__head .lede{ display:none; }
:where(html.vh-le-700) .sec__head .eyebrow{ display:none; }


@media (max-width: 899px){
:where(html.vh-le-800) #invoices .doc__ctl{ display:none; }
:where(html.vh-le-800) #invoices .doc__foot{ display:none; }
:where(html.vh-le-800) #invoices .inv__card{ padding:14px; }

}

@media (max-width: 899px){
:where(html.vh-le-700) #agent .ag__eyebrow, :where(html.vh-le-700) #agent .ag__tabs span{ display:none; }
:where(html.vh-le-700) #trades .tlist__rows li:nth-child(n+3), :where(html.vh-le-700) #trades .tp__soon, :where(html.vh-le-700) #trades .tsteps{ display:none; }
:where(html.vh-le-700) #pricing .plan li:nth-child(4){ display:none; }
:where(html.vh-le-700) #pricing .plan__cap{ display:none; }
:where(html.vh-le-700) #invoices .inv__acts, :where(html.vh-le-700) #invoices .doc__bill{ display:none; }
:where(html.vh-le-700) #faq .faq details:nth-child(n+6){ display:none; }

}

:where(html.vh-le-700) #link .lklock{ display:none; }
:where(html.vh-le-700) #agent .th__lbl{ display:none; }
:where(html.vh-le-700) #agent .ag__tabs button{ padding-block:8px; }
 
:where(html.vh-le-760) .inv__card{ padding:12px 14px; gap:8px; }
:where(html.vh-le-760) .doc__head{ padding-bottom:8px; }
:where(html.vh-le-760) #invoices .sec__head h2{ font-size:clamp(28px,4.4vh,40px); }
 

/* ---------- footer, redesigned: brand and button on the left, four short lists on the right, one base line ---------- */
.foot { padding-block:clamp(28px,5vh,56px) 22px; }
.foot__top { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2.5fr); gap:clamp(24px,4vw,56px); align-items:start; }
.foot__brand { display:grid; gap:14px; justify-items:start; }
.foot__brand .mantra { margin:0; font:600 15px/1.45 var(--display); color:var(--ink-2); max-width:none; }
.foot__brand .mantra span { display:block; }
.foot__cta { margin-top:4px; }
.foot__cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,36px); }
.foot__cols h3 { margin-bottom:12px; }
.foot__cols ul { gap:4px; }
.foot__cols a { display:inline-block; padding-block:4px; font-size:14px; line-height:1.35; } /* a 27px-high target (WCAG 2.2 2.5.8 asks for 24); the row gap is trimmed to match, so the column is about as tall as before */
.foot__base { align-items:center; margin-top:clamp(20px,4vh,40px); padding-top:16px; gap:8px 22px; }
.foot__base .foot__up { margin-left:auto; padding-block:5px; font-weight:600; color:var(--ink-2); }
@media (max-width: 899px) {
  .foot__top { grid-template-columns:1fr; gap:22px; }
  .foot__brand { grid-template-columns:1fr auto; align-items:center; row-gap:10px; }
  .foot__brand .brand { grid-column:1; }
  .foot__brand .mantra { grid-column:1; grid-row:2; }
  .foot__brand .mantra span { display:inline; }
  .foot__cta { grid-column:2; grid-row:1 / span 2; margin:0; }
  .foot__cols { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px; }
  .foot__base .foot__up { margin-left:0; }
}
@media (max-width: 420px) { .foot__brand { grid-template-columns:1fr; } .foot__cta { grid-column:1; grid-row:auto; width:100%; justify-content:center; } }

/* ---------- Invoices: a document studio, then the numbers and the features ---------- */
#invoices.sec--inv { padding:0; display:block; min-height:0; }
.inv__s1, .inv__s2 { min-height:calc(100svh - var(--nav-h)); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(20px,4vh,56px); scroll-snap-align:start; }
.inv__s1 { }
.inv__s2 { gap:clamp(18px,3vh,32px); border-top:1px solid var(--line); }
.inv { grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); }
.studio__bar { display:flex; align-items:center; gap:10px; }
.studio__tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; padding-bottom:2px; }
.studio__tabs::-webkit-scrollbar { display:none; }
.studio__tabs button { flex:none; font:600 13px/1 var(--sans); padding:9px 14px; border-radius:999px; border:1px solid var(--line-2); background:var(--canvas); color:var(--ink-2); cursor:pointer; transition:background-color .25s, color .25s, border-color .25s; }
.studio__tabs button[aria-selected="true"] { background:var(--ink); color:var(--canvas); border-color:var(--ink); }
.studio__tabs button:focus-visible, .studio__pause:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.studio__pause { width:34px; height:34px; flex:none; }
.studio__paper { background:var(--sunk); border-radius:16px; padding:clamp(12px,2vh,22px); display:grid; }
.studio__paper .doc { width:100%; max-width:600px; margin-inline:auto; position:relative; overflow:hidden; }
.doc.swap { animation:docswap .35s var(--ease); }
@keyframes docswap { from { opacity:.2; transform:translateY(6px); } to { opacity:1; transform:none; } }
.doc__wm { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font:800 78px/1 var(--display); letter-spacing:.08em; color:rgba(21,122,82,.16); transform:rotate(-18deg); }
.doc__r span:nth-child(2) { white-space:nowrap; }
.doc__r--k span:last-child { font-family:var(--sans); }
.studio__act { display:flex; flex-wrap:wrap; gap:10px; }
.studio__act .btn { min-height:44px; }
.inv__s1 .sample-label { margin:0; font-size:12.5px; color:var(--ink-3); }
.stats { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,2vw,24px); }
.stats li { display:grid; gap:6px; padding:clamp(14px,2.4vh,22px) 20px; border-radius:20px; background:var(--surface); border:1px solid var(--line); }
.stats b { font:800 clamp(36px,4.4vw,56px)/1 var(--display); letter-spacing:-.04em; color:var(--orange-ink); }
.stats span { font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.invfeat { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.8vw,22px); }
.invfeat li { display:grid; gap:8px; align-content:start; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--surface); transition:translate .25s var(--ease), box-shadow .25s; }
.invfeat li:hover { translate:0 -3px; box-shadow:0 18px 36px -26px rgba(15,23,42,.45); }
.invfeat .flow__ic { width:40px; height:40px; border-radius:12px; }
.invfeat h3 { font:700 16px/1.25 var(--display); margin:4px 0 0; }
.invfeat p { font-size:14px; line-height:1.5; color:var(--ink-2); margin:0; }
.inv__note { font-size:14px; line-height:1.55; color:var(--ink-2); max-width:78ch; margin:0; }
@media (max-width: 1100px) { .stats, .invfeat { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 899px) {
  #invoices .studio__act .btn { flex:1 1 0; justify-content:center; padding-inline:12px; }
  .invfeat { gap:10px; } .invfeat li { padding:14px; } .invfeat p { font-size:13px; }
  .stats li { padding:12px 14px; } .stats b { font-size:34px; } .stats span { font-size:13px; }
  .inv__s2 { gap:14px; }
}
:where(html.vh-le-800) .invfeat p{ display:none; }
:where(html.vh-le-800) .invfeat li{ gap:4px; padding:12px 14px; }
 
@media (prefers-reduced-motion: reduce) { .doc.swap { animation:none; } }
.inv__owecard { display:flex; flex-direction:column; gap:14px; }
.inv__total { margin-top:auto; display:flex; align-items:baseline; gap:10px; padding:14px 16px; border-radius:14px; background:var(--sunk); }
.inv__total span { font-size:14px; color:var(--ink-2); }
.inv__total b { font:800 26px/1 var(--display); letter-spacing:-.02em; margin-left:auto; }
.inv__total small { font:600 11px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.studio__paper .doc { min-height:clamp(250px, 40vh, 340px); align-content:start; }
@media (max-width: 899px) { .inv__total { padding:10px 14px; } .inv__total b { font-size:22px; } .studio__paper .doc { min-height:clamp(240px, 36vh, 320px); } }
:where(html.vh-le-800) .inv__total{ display:none; }
 
:where(html.vh-le-1100) #invoices .sec__head .lede, :where(html.vh-le-1100) #invoices .inv__s1 .sample-label{ display:none; }
 
:where(html.vh-le-800) #invoices .doc__grp:nth-child(n+2){ display:none; }
:where(html.vh-le-800) .studio__paper .doc{ min-height:236px; }
:where(html.vh-le-800) #invoices .doc__r{ padding:3px 0; font-size:12px; }
:where(html.vh-le-800) #invoices .studio__paper{ padding:10px; }
:where(html.vh-le-800) #invoices .inv__chat{ padding:6px; }
:where(html.vh-le-800) #invoices .inv__chat .msg{ padding:6px 9px 4px; font-size:12.5px; }
:where(html.vh-le-800) #invoices .studio__act .btn{ min-height:40px; }


@media (max-width: 899px) { .studio__paper { padding:10px; } #invoices .inv__s1 .sec__head h2 { font-size:clamp(26px,7.6vw,34px); } }
@media (max-width: 899px){
:where(html.vh-le-700) #invoices .inv__chat, :where(html.vh-le-700) #invoices .doc__foot{ display:none; }
:where(html.vh-le-700) .studio__paper .doc{ min-height:200px; }
 }

@media (min-width: 900px){
:where(html.vh-le-780) #invoices .inv__studio .inv__chat{ display:none; }
:where(html.vh-le-780) #invoices .inv__s1 .sec__head .eyebrow{ display:none; }
:where(html.vh-le-780) #invoices .inv__s1 .sec__head h2{ font-size:clamp(26px,4.4vh,36px); }
 }

.studio__paper { grid-template-columns:minmax(0,1fr); }
.inv__card, .studio__paper .doc, .doc__head > *, .studio__act, .inv__chat { min-width:0; }
.doc__title small, .doc__who small { overflow-wrap:anywhere; }
@media (max-width: 899px) { .doc__title b { font-size:13px; } .doc__who b { font-size:14px; } .doc__r { grid-template-columns:minmax(0,1fr) 36px 78px; } }
.inv__card { grid-template-columns:minmax(0,1fr); }
@media (max-width: 899px) {
  #invoices .studio__act { flex-wrap:nowrap; gap:8px; }
  #invoices .studio__act .btn { flex:1 1 0; min-width:0; padding-inline:8px; font-size:14px; white-space:nowrap; justify-content:center; }
  .doc__who small { white-space:nowrap; font-size:9px; letter-spacing:0; }
  .doc__title small { font-size:9.5px; }
}

/* ---------- fixes from the phone: the compare table's buttons and tag, equal stat cards, no hover lift on touch ---------- */
.stats li { align-content:start; }
.stats b { min-height:1em; }
@media (hover: none) {
  .invfeat li:hover, .plan:hover, .plan--pro:hover { translate:none; box-shadow:none; }
  .plan--pro:hover { box-shadow:0 34px 80px -40px rgba(255,94,0,.6); }
}
@media (max-width: 700px) {
  .cmp tfoot .btn { white-space:normal; line-height:1.15; padding:8px 4px; min-height:46px; font-size:12px; }
  .cmp tfoot td { padding-inline:3px; }
  .cmp .tag-soon { white-space:normal; font-size:9px; line-height:1.15; padding:3px 6px; display:inline-block; text-align:center; }
  .cmp td { overflow-wrap:anywhere; }
}

/* ---------- small phones (320 px), the comparison buttons, and a collapsed width (2026-10-12) ---------- */
@media (max-width: 359px) {
  .site-nav__in { gap:4px; }
  .site-nav__start { padding:0 9px; font-size:12px; }
  .site-nav .iconBtn { width:32px; }
  .menu > summary { width:36px; }
  .brand svg { height:24px; }
  .bill button { padding:12px 13px; font-size:14px; gap:6px; }
}
.bill button small { white-space:nowrap; }
.cmp tfoot .btn { overflow-wrap:normal; word-break:normal; hyphens:none; }
@media (max-width: 700px) { .cmp tfoot .btn { font-size:clamp(10px,2.8vw,12px); padding:8px 2px; min-height:44px; } }
@media (pointer: coarse) { .text-action { position:relative; } .text-action::after { content:''; position:absolute; inset:-9px -3px; } }

/* Follow one payment: the example ledger entry keeps its place as an empty slot, so recording the payment (by itself or by a tap)
   does not push everything below it down the page. The note also keeps room for its longer sentence. */
.book-example .book-entry[hidden] { display:grid !important; background:transparent; border-style:dashed; border-color:var(--line-2); }
.book-entry[hidden] div b, .book-entry[hidden] p { visibility:hidden; }
.book-example .sample-label { line-height:1.4; }
@media (max-width: 560px) { .book-example .sample-label { min-height:2.8em; } }

/* Hindi and Tamil pages: a font stack that has the script, headings included */
.lp[lang="hi"], .lp[lang="hi"] h1, .lp[lang="hi"] h2, .lp[lang="hi"] summary { font-family:'Noto Sans Devanagari','Nirmala UI','Mangal',var(--sans),sans-serif; }
.lp[lang="ta"], .lp[lang="ta"] h1, .lp[lang="ta"] h2, .lp[lang="ta"] summary { font-family:'Noto Sans Tamil','Nirmala UI','Latha',var(--sans),sans-serif; }
.lp h1 { line-height:1.25; }
.legal small { color:var(--ink-3); font-size:13.5px; }
.legal .faq details { margin:0 0 10px; }
.lp .btn { white-space:normal; max-width:100%; text-align:left; }
.legal a.btn { text-decoration:none; }
.legal a.btn--primary { color:#0f172a; }

/* Hero: the owner's phone is the one place. Ported from the tested prototype v5.1
   (E:\Tuskit-Designs\30-WEBSITE\hero-prototype-v5), every rule scoped under .hx. */
.hx {background:transparent; overflow-x:clip;}
.hx .hx__in {--pad:clamp(10px,2.6vh,36px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(20px,3.6vw,64px); align-items:start; min-height:min(calc(100svh - 56px), 800px); padding-block:var(--pad);}
.hx .copy {display:flex; flex-direction:column; gap:clamp(12px,2.4vh,26px); min-width:0; padding-top:var(--copy-top, 0px);}
.hx .h1 {margin:0; font:800 clamp(38px, min(4.9vw, 9.6vh), 90px)/.95 var(--display); letter-spacing:-.045em; font-variation-settings:'opsz' 96;}
.hx .h1 > span {display:block;}
.hx .h1 .slip {color:var(--orange-text);}
.hx .h1 .dot {position:relative; color:transparent;}
.hx .h1 .dot::before {content:''; position:absolute; left:.03em; bottom:.15em; width:.17em; height:.17em; border-radius:50%; background:var(--orange); transform-origin:50% 50%;}
.hx .h1.pulse .dot::before {animation:hx-dotpop 1s var(--pop);}
@keyframes hx-dotpop { 0%{transform:scale(1)} 35%{transform:scale(1.45)} 100%{transform:scale(1)} }
.hx .lede {margin:0; font-size:clamp(15.5px,2.1vh,19px); line-height:1.45; color:var(--ink-2); max-width:32ch;}
.hx .now {display:grid; gap:9px; padding-top:clamp(10px,1.8vh,16px); border-top:1px solid var(--line); max-width:480px;}
.hx .now__top {display:flex; align-items:center; gap:10px;}
.hx .scene {font:600 10.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; padding:6px 9px; border-radius:999px; background:var(--accent-soft); color:var(--orange-text);}
.hx .scene[data-k="chaos"] {background:var(--bad-soft); color:var(--bad);}
.hx .scene[data-k="paid"] {background:var(--good-soft); color:var(--good);}
.hx .cap {margin:0; font:600 clamp(16px,2.2vh,19.5px)/1.3 var(--display); letter-spacing:-.01em; min-height:2.6em;}
.hx .cap.swap {animation:hx-capIn .45s var(--ease);}
@keyframes hx-capIn { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
.hx .ticks {display:flex; align-items:center; gap:6px;}
.hx .tick {all:unset; cursor:pointer; flex:1; display:grid; gap:5px; min-width:0;}
.hx .tick__bar {height:3px; border-radius:3px; background:var(--line); overflow:hidden;}
.hx .tick__bar i {display:block; height:100%; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:0 50%;} /* the step bar fills with a transform, not a width: no layout every frame */
.hx .tick span {font:500 11px/1.2 var(--sans); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hx .tick.cur span {color:var(--ink); font-weight:600;}
.hx .tick:focus-visible {outline:3px solid var(--focus); outline-offset:3px; border-radius:3px;}
.hx .pauseBtn {flex:none; width:30px; height:30px; margin-left:4px; display:grid; place-items:center; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); border-radius:999px; cursor:pointer;}
.hx .pauseBtn:hover {color:var(--ink); background:var(--sunk);}
.hx .cta {display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px;}
.hx .trust {font-size:13.5px; color:var(--ink-3);}
.hx .stagewrap {position:relative; min-width:0; align-self:stretch; min-height:420px; max-height:900px;}
.hx .stage {position:absolute; left:0; top:0; transform-origin:0 0; transition:opacity .45s var(--ease);}
.hx .stage.st-fade {opacity:0;}
.hx .stage.jump *, .hx .stage.jump *::before, .hx .stage.jump *::after {transition:none !important; animation:none !important;}
.hx .glow {position:absolute; left:var(--gx); top:var(--gy); width:var(--gw); height:var(--gw); border-radius:50%; background:radial-gradient(closest-side, var(--glow), transparent); pointer-events:none;}
.hx .it {position:absolute; left:0; top:0; width:var(--w); transform-origin:0 0; transform:translate(var(--rx),var(--ry)) rotate(var(--rr)); transition:transform .8s var(--glide), opacity .2s linear .48s; z-index:6;}
.hx .raw {opacity:0; transform:scale(.72); transform-origin:40% 50%; transition:opacity .3s var(--ease), transform .5s var(--pop);}
.hx .stage.st-in0 [data-k="wa"] .raw, .hx .stage.st-in1 [data-k="nb"] .raw, .hx .stage.st-in2 [data-k="call"] .raw, .hx .stage.st-in3 [data-k="sticky"] .raw, .hx .stage.st-in4 [data-k="voice"] .raw {opacity:1; transform:none;}
.hx .stage.st-f0 [data-k="wa"], .hx .stage.st-f1 [data-k="nb"], .hx .stage.st-f2 [data-k="call"], .hx .stage.st-f3 [data-k="sticky"], .hx .stage.st-f4 [data-k="voice"] {transform:translate(var(--fx),var(--fy)) rotate(0deg) scale(var(--fs)); opacity:0;}
.hx .stage.st-slip [data-k="call"] .raw {opacity:.34; transform:translate(-14px,52px) rotate(-8deg); transition:opacity .9s var(--ease), transform 1s var(--ease);}
.hx .obj {animation:hx-float 5.6s ease-in-out infinite; animation-delay:var(--fd,0s);}
@keyframes hx-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.hx .lost {position:absolute; left:4px; top:calc(100% + 10px); white-space:nowrap; font:600 12px/1 var(--mono); color:#fff; background:#b42318; border-radius:999px; padding:7px 11px; opacity:0; transform:translateY(-4px); transition:opacity .35s var(--ease) .35s, transform .35s var(--ease) .35s;}
.hx .stage.st-slip .lost {opacity:1; transform:translateY(52px);}
.hx .o {background:#fff; color:#0f172a; border-radius:14px; box-shadow:0 1px 1px rgba(15,23,41,.06), 0 16px 32px -14px rgba(51,42,27,.38); padding:12px 14px; font-size:13.5px; line-height:1.35;}
.hx .o__who {display:flex; align-items:center; gap:8px;}
.hx .o__who b {font-weight:600; font-size:13.5px;}
.hx .o__who small {margin-left:auto; font:500 11px/1 var(--mono); color:#475569;}
.hx .av {width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font:700 10px/1 var(--sans); background:#e2e8f0; color:#334155; flex:none; font-style:normal;}
.hx .o--wa .bubble {margin-top:9px; background:#d9fdd3; border-radius:10px 10px 10px 3px; padding:9px 11px; font-size:14.5px;}
.hx .o--wa .file {margin-top:7px; display:flex; align-items:center; gap:7px; background:rgba(15,23,42,.06); border-radius:7px; padding:6px 8px; font:500 11.5px/1 var(--mono);}
.hx .o--nb {background:repeating-linear-gradient(180deg, transparent 0 25px, #c7d7f1 25px 26px), #fff; padding:10px 14px 10px 34px; position:relative; border-radius:4px;}
.hx .o--nb::before {content:''; position:absolute; left:24px; top:0; bottom:0; width:1.5px; background:#f3a3a3;}
.hx .o--nb p {margin:0; font:600 22px/26px var(--hand); color:#1e3a8a;}
.hx .o--call {display:flex; align-items:center; gap:11px;}
.hx .o--call .ic {width:34px; height:34px; border-radius:50%; background:#fee2e2; display:grid; place-items:center; color:#b42318; flex:none;}
.hx .o--call b {display:block; font-size:14px;}
.hx .o--call span {font:500 12px/1.3 var(--mono); color:#b42318;}
.hx .o--sticky {background:#fdf0a1; border-radius:3px; padding:14px 16px 16px; box-shadow:0 16px 28px -12px rgba(120,90,0,.45);}
.hx .o--sticky p {margin:0; font:600 25px/1.05 var(--hand); color:#3f2d00;}
.hx .o--sticky .q {text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; transition:color .3s;}
.hx .stage.st-worry .o--sticky .q {color:#b42318;}
.hx .stage.st-worry [data-k="sticky"] .o {animation:hx-worry .7s ease-in-out 2;}
@keyframes hx-worry { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 75%{transform:rotate(4deg)} }
.hx .o--voice {display:flex; align-items:center; gap:10px;}
.hx .wave {flex:1; display:flex; align-items:center; gap:2px; height:22px;}
.hx .wave i {width:3px; border-radius:2px; background:#16a34a;}
.hx .dev {position:absolute; left:0; top:0; width:300px; height:650px; transform-origin:0 0; transition:transform .8s var(--glide), opacity .5s var(--ease);}
.hx .dev--own {z-index:3; transform:translate(var(--ox),var(--oy)) scale(var(--os));}
.hx .stage.st-cust .dev--own {transform:translate(var(--ox2),var(--oy)) scale(var(--os));}
.hx .stage[data-o="port"].st-cust .dev--own {opacity:0;}
.hx .dev--cust {z-index:4; opacity:0; transform:translate(var(--cxo),var(--oy)) scale(var(--os));}
.hx .stage.st-cust .dev--cust {opacity:1; transform:translate(var(--cx),var(--oy)) scale(var(--os));}
.hx .dev__label {position:absolute; left:-30px; right:-30px; top:-30px; display:flex; justify-content:center; align-items:center; gap:7px; font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.hx .dev__label i {width:7px; height:7px; border-radius:50%; background:var(--orange);}
/* a gradient, not two large blurred box-shadows: the blur is what a mid-range phone's GPU struggles with */
.hx .dev::before {content:''; position:absolute; left:4%; right:4%; bottom:-2.5%; height:8%; border-radius:50%; background:radial-gradient(closest-side, rgba(15,23,42,.42), rgba(15,23,42,.16) 60%, transparent); pointer-events:none;}
.hx .dev__frame {position:absolute; inset:0; border-radius:46px; background:linear-gradient(150deg,var(--frame-a),var(--frame-b) 60%); box-shadow:inset 0 0 0 1.5px var(--frame-ring);}
.hx .dev__screen {position:absolute; inset:9px; border-radius:37px; overflow:hidden; background:#f8fafc; color:#0f172a; font-family:var(--sans);}
.hx .cam {position:absolute; left:50%; top:10px; width:11px; height:11px; margin-left:-5.5px; border-radius:50%; background:#020617; box-shadow:0 0 0 2px #1e293b; z-index:20;}
.hx .sbar {position:absolute; left:0; right:0; top:0; height:30px; display:flex; align-items:center; justify-content:space-between; padding:4px 22px 0 24px; font:600 11.5px/1 var(--sans); color:#0f172a; z-index:19;}
.hx .sbar span:last-child {display:inline-flex; gap:4px; align-items:center;}
.hx .gest {position:absolute; left:50%; bottom:7px; width:96px; height:4px; margin-left:-48px; border-radius:2px; background:#0f172a; opacity:.4; z-index:20;}
.hx .sc {position:absolute; left:0; right:0; top:30px; bottom:0; transition:transform .5s var(--glide), opacity .4s var(--ease), filter .4s;}
.hx .ap-bar {position:absolute; left:14px; right:14px; top:6px; height:44px; display:flex; align-items:center; gap:10px;}
.hx .ap-bar svg {width:24px; height:24px; color:#0f172a;}
.hx .ap-bar b {display:block; font:700 19px/1.1 var(--display); letter-spacing:-.02em;}
.hx .ap-bar small {display:block; font:500 11.5px/1.2 var(--sans); color:#64748b;}
.hx .ap-bar .av {margin-left:auto; width:30px; height:30px; background:#0f172a; color:#fff; font-size:11px;}
.hx .tiles {position:absolute; left:10px; right:10px; top:56px; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.hx .tiles > div {background:#fff; border:1px solid #e7e5e4; border-radius:12px; padding:8px 10px;}
.hx .tiles small {display:block; font:500 11px/1.2 var(--sans); color:#64748b;}
.hx .tiles b {font:700 17px/1.2 var(--mono); font-variant-numeric:tabular-nums;}
.hx .tiles em {font:500 11px/1 var(--sans); font-style:normal; color:#9a3900; margin-left:4px;}
.hx .empty {position:absolute; left:10px; right:10px; top:180px; text-align:center; font:500 12.5px/1.4 var(--sans); color:#64748b; transition:opacity .3s;}
.hx .stage.st-r0 .empty {opacity:0;}
.hx .row {position:absolute; left:10px; width:262px; height:54px; top:var(--top); display:grid; grid-template-columns:3px minmax(0,1fr) auto; gap:10px; align-items:center; padding-right:10px; background:#fff; border:1px solid #e7e5e4; border-radius:12px; box-shadow:0 1px 2px rgba(15,23,42,.05); overflow:hidden; opacity:0; transform:scale(.94); transition:opacity .25s var(--ease), transform .4s var(--pop), box-shadow .3s;}
.hx .row .acc {align-self:stretch; background:#e65500;}
.hx .row .rt {min-width:0; display:grid; gap:2px;}
.hx .row .rt b {font:600 13.5px/1.2 var(--sans); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hx .row .rt span {font:500 11.5px/1.2 var(--sans); color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hx .row .rr {display:grid; justify-items:end; gap:4px;}
.hx .row .rr b {font:600 12.5px/1 var(--mono); font-variant-numeric:tabular-nums;}
.hx .stage.st-r0 .row[data-i="0"], .hx .stage.st-r1 .row[data-i="1"], .hx .stage.st-r2 .row[data-i="2"], .hx .stage.st-r3 .row[data-i="3"], .hx .stage.st-r4 .row[data-i="4"] {opacity:1; transform:none;}
.hx .stage.st-r0 .row[data-i="0"] {animation:hx-land .9s var(--ease);}
.hx .stage.st-r1 .row[data-i="1"] {animation:hx-land .9s var(--ease);}
.hx .stage.st-r2 .row[data-i="2"] {animation:hx-land .9s var(--ease);}
.hx .stage.st-r3 .row[data-i="3"] {animation:hx-land .9s var(--ease);}
.hx .stage.st-r4 .row[data-i="4"] {animation:hx-land .9s var(--ease);}
@keyframes hx-land { 0%{background:#ffedd5} 100%{background:#fff} }
.hx .stage.st-tap .row[data-i="0"] {box-shadow:0 0 0 2px #e65500;}
.hx .stage.st-home .row[data-i="0"] {box-shadow:0 0 0 2px #157a52;}
.hx .chip {font:700 10px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; font-style:normal; padding:4px 6px; border-radius:999px; background:#f1f5f9; color:#475569; white-space:nowrap;}
.hx .chip[data-s="work"], .hx .chip[data-s="call"], .hx .chip[data-s="adv"] {background:#fff0e6; color:#9a3900;}
.hx .chip[data-s="ready"] {background:#cc4b00; color:#fff;}
.hx .chip[data-s="unpaid"] {background:#fde8e6; color:#b42318;}
.hx .chip[data-s="paid"] {background:#dcf2e6; color:#157a52;}
.hx .chip.flip {animation:hx-chipflip .45s var(--pop);}
@keyframes hx-chipflip { 0%{transform:scale(.6)} 100%{transform:scale(1)} }
.hx .ofoot {position:absolute; left:10px; width:262px; top:448px; height:40px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:10px; background:#ecfdf3; color:#157a52; font:600 12px/1 var(--sans); opacity:0; transition:opacity .4s var(--ease);}
.hx .ofoot b {margin-left:auto; font:700 12px/1 var(--mono); white-space:nowrap;}
.hx .stage.st-r4 .ofoot {opacity:1;}
.hx .stage.st-okpulse .ofoot {animation:hx-okp .9s var(--pop);}
@keyframes hx-okp { 0%{transform:scale(1)} 40%{transform:scale(1.04)} 100%{transform:scale(1)} }
.hx .fab {position:absolute; right:14px; bottom:28px; display:flex; align-items:center; gap:6px; height:42px; padding:0 16px; border-radius:14px; background:#0f172a; color:#fff; font:600 13px/1 var(--sans); box-shadow:0 8px 18px -8px rgba(15,23,42,.5);}
.hx .stage.st-detail .sc-today {transform:translateX(-26%); filter:brightness(.92);}
.hx .sc-order {background:#f8fafc; transform:translateX(100%); box-shadow:-12px 0 24px -16px rgba(15,23,42,.35);}
.hx .stage.st-detail .sc-order {transform:none;}
.hx .od {position:absolute; inset:0; padding:4px 14px 0; display:flex; flex-direction:column; gap:10px;}
.hx .od-bar {display:flex; align-items:center; gap:10px; height:40px; font:600 14px/1 var(--sans);}
.hx .od-bar .chev {width:9px; height:9px; border-left:2px solid #0f172a; border-bottom:2px solid #0f172a; transform:rotate(45deg); margin:0 4px 0 2px;}
.hx .od-bar span {margin-left:auto; color:#64748b; letter-spacing:.1em;}
.hx .od-title b {display:block; font:700 20px/1.15 var(--display); letter-spacing:-.02em;}
.hx .od-title span {font:500 12.5px/1.3 var(--sans); color:#64748b;}
.hx .od-art {display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #e7e5e4; border-radius:12px; padding:8px 10px;}
.hx .od-art .thumb {width:44px; height:32px; border-radius:6px; background:linear-gradient(160deg,#e8efe5 55%,#3f6f57 55%); flex:none;}
.hx .od-art b {display:block; font:600 12px/1.2 var(--mono);}
.hx .od-art span {font:500 11px/1.2 var(--sans); color:#64748b;}
.hx .od-steps {display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.hx .od-steps span {text-align:center; padding:7px 0; border-radius:8px; background:#eef2f6; color:#94a3b8; font:600 10.5px/1 var(--sans); transition:background .3s, color .3s;}
.hx .od-steps span.on {background:#dcf2e6; color:#157a52;}
.hx .od-steps span.cur {background:#cc4b00; color:#fff;}
.hx .od-steps span.cur.paid {background:#157a52;}
.hx .od-row {display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid #e7e5e4; border-radius:12px; padding:10px 12px;}
.hx .od-row small {font:500 12px/1 var(--sans); color:#64748b;}
.hx .od-row b {font:600 13px/1 var(--sans); display:flex; align-items:center; gap:7px;}
.hx .od-row .mono {font:700 14px/1 var(--mono); font-variant-numeric:tabular-nums;}
.hx .od-who .ravi {display:none; align-items:center; gap:7px;}
.hx .od-who .ravi .av {width:22px; height:22px; font-size:9px; background:#ffe1d1; color:#9a3900;}
.hx .stage.st-assigned .od-who .ravi {display:flex;}
.hx .stage.st-assigned .od-who .none {display:none;}
.hx .od-who .none {color:#64748b; font-weight:500;}
.hx .pbtn {position:relative; display:block; height:46px; border-radius:23px; background:#cc4b00; color:#fff; font:700 14.5px/46px var(--sans); text-align:center; overflow:hidden; transition:background .3s;}
.hx .pbtn .l2 {position:absolute; inset:0; opacity:0; transition:opacity .25s;}
.hx .pbtn::after {content:''; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px; border-radius:50%; background:rgba(255,255,255,.55); transform:scale(0); opacity:0;}
@keyframes hx-ripple { 0%{transform:scale(0); opacity:.9} 100%{transform:scale(18); opacity:0} }
.hx .od-log {display:grid; gap:3px; padding:9px 12px 10px; background:#fff; border:1px solid #e7e5e4; border-radius:12px;}
.hx .od-log .hh {margin:0 0 3px; font:600 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#64748b;}
.hx .lg {display:flex; gap:8px; align-items:baseline; font:500 11.5px/1.35 var(--sans); color:#334155; opacity:0; transform:translateY(4px); transition:opacity .35s var(--ease), transform .35s var(--ease);}
.hx .lg time {font:500 10.5px/1 var(--mono); color:#64748b; min-width:34px;}
.hx .lg[data-l="0"], .hx .stage.st-assigned .lg[data-l="1"], .hx .stage.st-l2 .lg[data-l="2"], .hx .stage.st-l3 .lg[data-l="3"], .hx .stage.st-l4 .lg[data-l="4"], .hx .stage.st-recorded .lg[data-l="5"] {opacity:1; transform:none;}
.hx .stage.st-l4 .lg[data-l="4"], .hx .stage.st-recorded .lg[data-l="5"] {color:#157a52; font-weight:600;}
.hx .od-act {margin-top:auto; padding-bottom:30px;}
.hx .stage.st-share .od-act .pbtn::after {animation:hx-ripple .55s ease-out;}
.hx .stage.st-shared .od-act .pbtn {background:#eef2f6; color:#157a52;}
.hx .stage.st-shared .od-act .pbtn .l1 {opacity:0;}
.hx .stage.st-shared .od-act .pbtn .l2 {opacity:1;}
.hx .toast {position:absolute; left:10px; right:10px; top:6px; z-index:8; display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background:#fff; box-shadow:0 12px 26px -10px rgba(15,23,42,.4); transform:translateY(-150%); opacity:0; transition:transform .45s var(--pop), opacity .3s;}
.hx .toast .av {width:28px; height:28px; background:#ffe1d1; color:#9a3900; font-size:10px;}
.hx .toast div > b {display:block; font:700 13px/1.25 var(--sans);}
.hx .toast div > span {font:500 11.5px/1.2 var(--sans); color:#64748b;}
.hx .stage.st-toast .toast {transform:none; opacity:1;}
.hx .scrim {position:absolute; inset:0; background:rgba(15,23,42,.35); opacity:0; transition:opacity .3s; pointer-events:none; z-index:6;}
.hx .stage.st-sheet .scrim {opacity:1;}
.hx .sheet {position:absolute; left:0; right:0; bottom:0; z-index:7; background:#fff; border-radius:22px 22px 0 0; padding:10px 14px 34px; transform:translateY(105%); transition:transform .45s var(--glide);}
.hx .stage.st-sheet .sheet {transform:none;}
.hx .sheet .grab {width:36px; height:4px; border-radius:2px; background:#cbd5e1; margin:0 auto 12px;}
.hx .sheet .hh {margin:0 0 8px; font:700 15px/1.2 var(--sans);}
.hx .sheet .who {display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; font:600 13.5px/1.2 var(--sans); transition:background .25s;}
.hx .sheet .who small {display:block; font:500 11.5px/1.2 var(--sans); color:#475569;}
.hx .sheet .who .av {width:30px; height:30px; background:#ffe1d1; color:#9a3900; font-size:11px;}
.hx .sheet .who.m .av {background:#e0e7ff; color:#3730a3;}
.hx .stage.st-pick .sheet .who.r {background:#fff0e6; box-shadow:inset 0 0 0 1.5px #e65500;}
.hx .claim {position:absolute; left:10px; right:10px; bottom:26px; z-index:7; background:#fff; border-radius:18px; padding:14px; box-shadow:0 -6px 30px -12px rgba(15,23,42,.35), 0 0 0 1px #e7e5e4; transform:translateY(130%); transition:transform .5s var(--glide);}
.hx .stage.st-claimcard .claim {transform:none;}
.hx .claim > small {display:block; font:600 10.5px/1 var(--mono); letter-spacing:.08em; color:#64748b; text-transform:uppercase;}
.hx .claim > b {display:block; margin-top:6px; font:700 16px/1.25 var(--sans);}
.hx .claim > span {display:block; font:500 12px/1.35 var(--sans); color:#475569; margin-top:2px;}
.hx .claim .pbtn {margin-top:12px; background:#0f172a;}
.hx .stage.st-record .claim .pbtn::after {animation:hx-ripple .55s ease-out;}
.hx .stage.st-recorded .claim .pbtn {background:#157a52;}
.hx .stage.st-recorded .claim .pbtn .l1 {opacity:0;}
.hx .stage.st-recorded .claim .pbtn .l2 {opacity:1;}
.hx .cs-chat {background:#efeae2; display:flex; flex-direction:column;}
.hx .ch-h {display:flex; align-items:center; gap:10px; padding:6px 14px 10px; background:#fff; border-bottom:1px solid #e2e8f0;}
.hx .ch-h .chev {width:9px; height:9px; border-left:2px solid #0f172a; border-bottom:2px solid #0f172a; transform:rotate(45deg);}
.hx .ch-h .av {width:34px; height:34px; background:#0f172a; color:#fff; font-size:11px;}
.hx .ch-h b {display:block; font:700 14.5px/1.2 var(--sans);}
.hx .ch-h small {font:500 11.5px/1 var(--sans); color:#15803d;}
.hx .ch-b {flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:8px;}
.hx .day {align-self:center; font:600 10.5px/1 var(--sans); color:#64748b; background:#fff; border-radius:7px; padding:5px 9px;}
.hx .msg {max-width:86%; padding:8px 10px 6px; border-radius:12px; font:400 13.5px/1.35 var(--sans); box-shadow:0 1px 1px rgba(15,23,42,.08);}
.hx .msg small {display:block; text-align:right; margin-top:3px; font:500 10px/1 var(--sans); color:#475569;}
.hx .msg--out {align-self:flex-end; background:#d9fdd3; border-bottom-right-radius:3px;}
.hx .msg--in {align-self:flex-start; background:#fff; border-bottom-left-radius:3px; opacity:0; transform:translateY(14px) scale(.96); transform-origin:0 100%; transition:opacity .3s, transform .45s var(--pop);}
.hx .stage.st-msg .msg--in {opacity:1; transform:none;}
.hx .lcard {position:relative; overflow:hidden; margin-top:8px; display:grid; grid-template-columns:auto 1fr; gap:3px 9px; align-items:center; padding:10px 11px; border-radius:10px; background:#fff4ed; border:1px solid #ffd2b8;}
.hx .lcard .tile {width:30px; height:30px; border-radius:8px; background:#fff; border:1px solid #ffd2b8; display:grid; place-items:center; grid-row:span 2;}
.hx .lcard .tile svg {width:18px; height:18px; color:#0f172a;}
.hx .lcard b {font:700 13px/1.1 var(--sans);}
.hx .lcard span {font:500 11px/1.1 var(--mono); color:#c2410c;}
.hx .lcard em {grid-column:1 / -1; margin-top:6px; font:700 13px/1 var(--sans); font-style:normal; color:#0f172a;}
.hx .lcard::after {content:''; position:absolute; left:40%; top:45%; width:16px; height:16px; margin:-8px; border-radius:50%; background:rgba(255,94,0,.45); transform:scale(0); opacity:0;}
.hx .stage.st-taplink .lcard::after {animation:hx-ripple .5s ease-out;}
.hx .ch-in {display:flex; align-items:center; gap:8px; padding:8px 10px 24px;}
.hx .ch-in span {flex:1; background:#fff; border-radius:999px; padding:11px 14px; font:400 13.5px/1 var(--sans); color:#64748b;}
.hx .ch-in i {width:40px; height:40px; border-radius:50%; background:#16a34a; flex:none;}
.hx .cs-code, .hx .cs-order {background:#fff; transform:translateX(100%); padding:10px 18px 0; display:flex; flex-direction:column; gap:12px;}
.hx .stage.st-code .cs-code {transform:none;}
.hx .stage.st-corder .cs-order {transform:none;}
.hx .stage.st-code .cs-chat {transform:translateX(-26%); filter:brightness(.92);}
.hx .url {align-self:center; display:flex; align-items:center; gap:6px; font:500 11.5px/1 var(--mono); color:#475569; background:#f1f5f9; border-radius:999px; padding:7px 12px;}
.hx .url svg {width:11px; height:11px;}
.hx .cs-code .cs-h {margin:18px 0 0; font:700 23px/1.15 var(--display); letter-spacing:-.02em; text-align:center; text-wrap:balance;} /* a div, not an h3: this is a drawn phone screen, and it came before the page's first h2 */
.hx .cs-code p {margin:0; text-align:center; font:500 13px/1.4 var(--sans); color:#64748b;}
.hx .otp {display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin-top:6px;}
.hx .otp span {height:44px; border-radius:10px; border:1.5px solid #e2e8f0; display:grid; place-items:center; font:700 19px/1 var(--mono); transition:border-color .2s;}
.hx .otp span.f {border-color:#e65500;}
.hx .ver {text-align:center; font:700 15px/1 var(--sans); color:#157a52; opacity:0; transition:opacity .3s;}
.hx .stage.st-verified .ver {opacity:1;}
.hx .stage.st-verified .otp span {border-color:#157a52;}
.hx .shop {display:flex; align-items:center; gap:10px; margin-top:4px;}
.hx .shop .av {width:38px; height:38px; background:#0f172a; color:#fff; font-size:12px;}
.hx .shop b {display:block; font:700 17px/1.15 var(--display);}
.hx .shop small {font:500 11.5px/1.2 var(--sans); color:#64748b;}
.hx .csteps {list-style:none; margin:0; padding:12px 14px; display:grid; gap:10px; background:#f8fafc; border-radius:14px;}
.hx .csteps li {display:flex; align-items:center; gap:10px; font:500 13.5px/1.2 var(--sans);}
.hx .csteps li::before {content:''; width:10px; height:10px; border-radius:50%; background:#157a52; flex:none;}
.hx .csteps li.here {font-weight:700;}
.hx .csteps li.here::before {background:#e65500; box-shadow:0 0 0 4px #ffe1d1;}
.hx .csteps li.pd {display:none; font-weight:700;}
.hx .stage.st-claimed .csteps li.pd {display:flex;}
.hx .stage.st-claimed .csteps li.here {font-weight:500;}
.hx .stage.st-claimed .csteps li.here::before {background:#157a52; box-shadow:none;}
.hx .topay {display:flex; justify-content:space-between; align-items:baseline;}
.hx .topay span {font:500 13px/1 var(--sans); color:#64748b;}
.hx .topay b {font:700 21px/1 var(--mono);}
.hx .stage.st-pay .cs-order .pbtn::after {animation:hx-ripple .55s ease-out;}
.hx .stage.st-claimed .cs-order .pbtn {background:#157a52;}
.hx .stage.st-claimed .cs-order .pbtn .l1 {opacity:0;}
.hx .stage.st-claimed .cs-order .pbtn .l2 {opacity:1;}
.hx .cnote {text-align:center; font:500 12px/1.35 var(--sans); color:#64748b;}
@media (max-width: 759px) {
  .hx .hx__in {display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:12px; padding-block:12px 28px;}
  .hx .copy {display:contents;}
  .hx .h1 {order:1; font-size:clamp(32px,9.6vw,44px);}
  .hx .now {order:2; max-width:none; border-top:0; padding-top:0;}
  .hx .stagewrap {order:3; height:auto; min-height:0; max-height:none; margin-inline:calc(-1 * clamp(16px,3.6vw,56px));}
  .hx .now__top {display:none;}
  .hx .cap {font-size:16px; min-height:2.6em;}
  .hx .lede {order:4;}
  .hx .cta {order:5;}
  .hx .cta .btn--cta {width:100%;}
  .hx .trust {width:100%; text-align:center;}
}
@media (min-width:760px) and (max-width:1040px) {
  .hx .hx__in {grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);}
  .hx .h1 {font-size:clamp(36px, min(5.6vw, 9vh), 64px);}
}
@media (prefers-reduced-motion: reduce) {
  .hx .obj, .hx .cap.swap {animation:none;}
}

/* Two different phones: the owner's is Pixel-style (dark frame, round corners, gesture pill),
   the customer's is Galaxy-style (light frame, flatter corners, thin bezels, three-button bar). */
.hx .dev--pixel .dev__frame {border-radius:50px; background:linear-gradient(150deg,#3b4048,#15181d 55%,#262a31); box-shadow:inset 0 0 0 1.5px var(--px-ring);}
.hx .dev--pixel .dev__screen {inset:10px; border-radius:40px;}
.hx .dev--pixel .cam {width:12px; height:12px; margin-left:-6px; top:11px;}
.hx .dev--galaxy .dev__frame {border-radius:38px; background:linear-gradient(150deg,#eef1f5,#c3cbd4 50%,#a3adb9); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7), inset 0 0 0 3px rgba(15,23,42,.10);}
.hx .dev--galaxy .dev__screen {inset:7px; border-radius:31px;}
.hx .dev--galaxy .cam {width:9px; height:9px; margin-left:-4.5px; top:9px;}
.hx .dev--galaxy .sc {bottom:40px;}
.hx .dev--galaxy .ch-in {padding-bottom:10px;}
.hx .sbar .pct {font:600 11px/1 var(--sans); margin:0 1px 0 2px;}
.hx .nav3, .nav3 {position:absolute; left:0; right:0; bottom:0; height:40px; display:flex; justify-content:space-around; align-items:center; padding:0 36px; background:#f8fafc; border-top:1px solid #eef2f6; z-index:19;}
.nav3 i {display:block; color:#475569;}
.nav3 .n-rec {width:15px; height:13px; border-left:2px solid currentColor; border-right:2px solid currentColor; position:relative;}
.nav3 .n-rec::after {content:''; position:absolute; left:50%; top:0; bottom:0; margin-left:-1px; border-left:2px solid currentColor;}
.nav3 .n-home {width:14px; height:14px; border:2px solid currentColor; border-radius:5px;}
.nav3 .n-back {width:10px; height:10px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:4px;}
@media (max-width: 380px) { .hx .ticks {gap:4px;} .hx .tick span {font-size:10.5px; letter-spacing:-.01em;} }