/* Layout: one well-paced scroll. Hero (copy left, the live app in a laptop right), the stack you
   retire, eight tiles that open a light in-depth view, Xero/XPM, bring-your-own AI, proof, the
   five-line price box, and the close. A floating switch flips dark and light for the review. */
:root {
  --bg: #F5F6F8;
  --bg-2: #EAEDF2;
  --surface: #FFFFFF;
  --surface-2: #F1F3F6;
  --ink: #0E1726;
  --sub: #4B5568;
  --faint: #7D8799;
  --line: #DFE3EA;
  --brand: #D4622B;
  --brand-ink: #FFFFFF;
  --brand-soft: #FBEADF;
  --glow: rgba(212, 98, 43, 0.10);
  --good: #15803D;
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow: 0 30px 60px -30px rgba(14, 23, 38, 0.35);
}
:root[data-theme="dark"] {
  --bg: #111B2C;
  --bg-2: #16223A;
  --surface: #1A2740;
  --surface-2: #203050;
  --ink: #F2F4F8;
  --sub: #A9B3C4;
  --faint: #7B879B;
  --line: #2C3D5C;
  --brand: #F0702F;
  --brand-ink: #FFFFFF;
  --brand-soft: #3A2014;
  --glow: rgba(240, 112, 47, 0.16);
  --good: #4ADE80;
  --shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.gut { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.inner { max-width: 1200px; margin: 0 auto; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: inherit; font-weight: 700; font-size: 16px; border-radius: 12px; padding: 15px 22px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .15s, background .15s, border-color .15s; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--sub); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: -0.025em; }
section { padding-block: 96px; }
.sec-head { max-width: 720px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; font-weight: 800; }
.sec-head p { margin: 14px 0 0; font-size: 19px; color: var(--sub); }

/* ── nav ── */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--bg); }
.nav .inner { display: flex; align-items: center; gap: 36px; height: 72px; }
.mark { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.mark i { font-style: normal; color: var(--brand); }
.nav nav { display: flex; gap: 28px; flex: 1; }
.nav nav a { text-decoration: none; color: var(--sub); font-weight: 500; font-size: 17px; }
.nav nav a:hover { color: var(--ink); }
.nav .right { display: flex; align-items: center; gap: 18px; }
.nav .login { text-decoration: none; font-weight: 600; font-size: 17px; color: var(--sub); }
/* Live demo, beside Log in on every page — boxed in the brand orange */
.nav-demo { font: inherit; font-weight: 700; font-size: 17px; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: color-mix(in srgb, var(--brand) 8%, transparent); border: 1.5px solid var(--brand); border-radius: 10px; padding: 7px 14px 7px 8px; transition: background .2s, box-shadow .3s; }
.nav-demo:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); box-shadow: 0 10px 22px -14px var(--brand); }
.nav-demo:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav-demo .ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); }
.nav .btn { padding: 12px 18px; font-size: 17px; border-radius: 10px; }

/* ── hero ── */
.hero { position: relative; overflow: hidden; padding-block: 72px 40px; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto 40%; height: 900px; background: radial-gradient(closest-side, var(--glow), transparent 70%); pointer-events: none; }
.hero .inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); gap: 44px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.0; font-weight: 800; margin-top: 20px; }
.hero h1 em { font-style: normal; color: var(--brand); display: block; }
.hero .lede { font-size: clamp(20px, 1.9vw, 27px); color: var(--sub); margin: 26px 0 0; line-height: 1.35; max-width: 22em; text-wrap: balance; }
.hero .lede-sub { font-size: clamp(15px, 1.15vw, 17px); color: var(--faint); margin: 12px 0 0; }
.hero .ctas { margin-top: 30px; }

.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero .trial { margin-top: 18px; font-size: 14px; color: var(--faint); }

/* ── laptop + the app inside it (the app is always its own light UI) ── */
.laptop { position: relative; width: 108%; max-width: 860px; justify-self: start; }
.lid { background: #1b1f27; border-radius: 22px 22px 0 0; padding: 12px 12px 16px; box-shadow: var(--shadow), 0 0 0 1.5px rgba(148, 163, 184, 0.55); }
.screen { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: #F4F6F9; }
.shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.lap-base { height: 16px; margin: 0 -5%; background: linear-gradient(#cfd4dc, #8f96a3); border-radius: 0 0 16px 16px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); position: relative; }
.lap-base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 6px; background: #7c838f; border-radius: 0 0 8px 8px; }
.try { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 7%; background: linear-gradient(to top, rgba(10,17,29,.42), rgba(10,17,29,0) 45%); }
.try button { font: inherit; font-size: clamp(14px, 1.6vw, 18px); font-weight: 700; color: #fff; background: #F0702F; border: 0; border-radius: 999px; padding: .9em 1.5em;
  display: inline-flex; align-items: center; gap: .6em; cursor: pointer; box-shadow: 0 12px 30px -8px rgba(240,112,47,.7); }
@media (prefers-reduced-motion: no-preference) {
  .try button { animation: nudge 2.6s ease-in-out infinite; }
  @keyframes nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
}

/* The zoom: the screen grows to the whole browser, then the live demo takes over. */
.zoomer { position: fixed; z-index: 50; overflow: hidden; border-radius: 8px; background: #F4F6F9;
  transition: top .7s cubic-bezier(.7,0,.2,1), left .7s cubic-bezier(.7,0,.2,1), width .7s cubic-bezier(.7,0,.2,1), height .7s cubic-bezier(.7,0,.2,1), border-radius .7s; }
.zoomer .shot { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.handover { position: fixed; inset: 0; z-index: 51; display: grid; place-items: center; background: rgba(10,17,29,.72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s; }
.handover.show { opacity: 1; }
.handover .box { background: #fff; color: #0F172A; border-radius: 18px; padding: 30px 32px; max-width: 460px; margin: 20px; text-align: center; }
.handover .box h3 { font-size: 26px; font-weight: 800; }
.handover .box p { color: #4B5568; margin: 10px 0 22px; }
.handover .box .row2 { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.handover .box .btn-ghost { color: #0F172A; border-color: #DFE3EA; }

/* ── the stack ── */
.stack { background: var(--bg-2); }
.stack-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.tools { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tool { display: grid; grid-template-columns: 26px minmax(0, 1fr) 132px; gap: 14px; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tool:last-child { border-bottom: 0; }
.tool input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); }
.tool label { font-weight: 600; }
.tool label small { display: block; font-weight: 400; color: var(--faint); font-size: 13px; }
.money { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); }
.money span { color: var(--faint); }
.money input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--ink); text-align: right; }
.money input:disabled { opacity: .4; }
.tally { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 96px; }
.tally .line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tally .line b { font-size: 28px; font-weight: 800; }
.tally .line.one b { color: var(--brand); }
.tally .bar { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.tally .bar i { display: block; height: 100%; background: var(--faint); border-radius: 6px; transition: width .3s; }
.tally .bar.one i { background: var(--brand); }
.tally .note { font-size: 14px; color: var(--faint); margin: 0; }
.tally .mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tally .mini label { font-size: 13px; color: var(--sub); display: flex; flex-direction: column; gap: 4px; }
.tally .mini input { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface-2); color: var(--ink); }
.verdict { font-size: 18px; font-weight: 700; }

/* ── tiles ── */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tile { text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px 22px; cursor: pointer;
  display: flex; flex-direction: column; gap: 12px; transition: transform .2s, border-color .2s, box-shadow .2s; min-height: 210px; }
.tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); box-shadow: 0 20px 40px -24px var(--tc); }
.tile .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 14%, transparent); color: var(--tc); }
.tile h3 { font-size: 21px; font-weight: 800; }
.tile p { margin: 0; color: var(--sub); font-size: 15px; }
.tile .go { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--tc); }

/* the in-depth view a tile opens */
.sheet-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(5,10,18,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(620px, 100%); background: var(--surface); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overflow-y: auto;
  padding: calc(28px + env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) 40px 28px; }
.open .sheet-scrim { opacity: 1; pointer-events: auto; }
.open .sheet { transform: none; }
.sheet .close { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); font: inherit; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; width: 40px; height: 40px; cursor: pointer; font-size: 20px; }
.sheet .kicker { color: var(--tc); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.sheet h3 { font-size: 34px; font-weight: 800; margin-top: 8px; line-height: 1.1; }
.sheet .lede { color: var(--sub); font-size: 18px; margin: 12px 0 22px; }
.still { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 30%, #0E1726), #0E1726);
  display: grid; place-items: center; border: 1px solid var(--line); }
.still .frame { position: absolute; inset: 9% 7% 0; background: #F4F6F9; border-radius: 10px 10px 0 0; opacity: .9; display: grid; grid-template-columns: 10% 1fr; overflow: hidden; }
.still .frame::before { content: ""; background: #0F172A; }
.still .frame::after { content: ""; margin: 6% 6%; border-radius: 6px; background: repeating-linear-gradient(#fff 0 18%, transparent 18% 25%); }
.still .playbtn { position: relative; width: 74px; height: 74px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.still .playbtn::after { content: ""; border-left: 22px solid #0E1726; border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 6px; }
.still .cap { position: absolute; left: 14px; bottom: 12px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 999px; }
.sheet ul { list-style: none; padding: 0; margin: 24px 0; display: flex; flex-direction: column; gap: 14px; }
.sheet li { display: flex; gap: 12px; font-size: 17px; }
.sheet li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); margin-top: 9px; flex-shrink: 0; }

/* ── xero / ai / proof ── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 36px; }
.panel h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.1; }
.panel p { color: var(--sub); font-size: 17px; margin: 14px 0 0; }
.logos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.logos span { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; background: var(--surface-2); }
.chat { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 15px; }
.bubble.q { align-self: flex-end; background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 4px; }
.bubble.a { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: stretch; }   /* the Built panel runs full width; the quote sits under it (3 Nov 2026) */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.stat b { display: block; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; }
.stat span { color: var(--faint); font-size: 14px; }
.quote { position: relative; }
.quote blockquote { margin: 0; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.quote .who { margin-top: 20px; color: var(--sub); }
.placeholder { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); border: 1px dashed var(--brand); border-radius: 6px; padding: 3px 8px; }

/* ── pricing ── */
.price-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pricebox { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.pricebox .pl { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 28px; border-bottom: 1px solid var(--line); }
.pricebox .pl:last-of-type { border-bottom: 0; }
.pricebox .pl span { font-size: 17px; color: var(--sub); }
.pricebox .pl b { font-size: 26px; font-weight: 800; white-space: nowrap; }
.pricebox .pl b small { font-size: 15px; font-weight: 600; color: var(--faint); }
.pricebox .pl.base b { color: var(--brand); font-size: 34px; }
.pricebox .foot { padding: 14px 28px; background: var(--surface-2); font-size: 14px; color: var(--faint); }
.paths { display: flex; flex-direction: column; gap: 14px; }
.path { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.path h3 { font-size: 20px; font-weight: 800; display: flex; justify-content: space-between; gap: 12px; }
.path p { margin: 8px 0 0; color: var(--sub); }
.example { font-size: 15px; color: var(--sub); }
.example b { color: var(--ink); }
.offer { border: 1px dashed var(--brand); border-radius: 14px; padding: 14px 18px; color: var(--sub); font-size: 15px; }

/* ── close + footer ── */
.close-sec { text-align: center; }
.close-sec h2 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; line-height: 1.05; }
.close-sec h2 em { font-style: normal; color: var(--brand); }
.close-sec .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.close-sec .trial { margin-top: 16px; color: var(--faint); font-size: 14px; }
footer { border-top: 1px solid var(--line); padding-block: 36px calc(36px + env(safe-area-inset-bottom, 0px)); color: var(--faint); font-size: 14px; }
footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer a { text-decoration: none; }

@media (max-width: 980px) {
  .hero .inner, .stack-grid, .split, .proof, .price-wrap { grid-template-columns: minmax(0, 1fr); }
  .laptop { justify-self: center; width: 100%; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav nav { display: none; }
  .tally { position: static; }
}
@media (max-width: 560px) {
  section { padding-block: 64px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; }
  .nav .login { display: none; }
  .nav-demo { font-size: 14px; padding: 6px 10px 6px 6px; }
  .tool { grid-template-columns: 22px minmax(0, 1fr); }
  .tool .money { grid-column: 2; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat b { font-size: 28px; }
  .panel { padding: 26px; }
  .pricebox .pl { padding: 18px 20px; }
}

/* ── multi-page additions (25 Oct 2026) ── */
.nav nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.page-head { padding-block: 64px 8px; }
.page-head h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.04; }
.page-head p { margin: 14px 0 0; font-size: 19px; color: var(--sub); max-width: 60ch; }

/* landing: the eight things, one quiet row under the laptop */
.does-row { padding-block: 34px 72px; }
.does-row .inner { display: flex; flex-direction: column; gap: 18px; }
.does-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.does-label a { font-size: 14px; font-weight: 600; color: var(--brand); text-decoration: none; }
.icons8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.icon8 { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 6px 14px; border-radius: 14px; text-decoration: none; color: var(--ink);
  border: 1px solid transparent; transition: background .15s, border-color .15s, transform .15s; }
.icon8:hover { background: var(--surface); border-color: var(--line); transform: translateY(-2px); }
.icon8 .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 15%, transparent); color: var(--tc); }
.icon8 span { font-size: 14px; font-weight: 700; text-align: center; }

/* what it does: the grid, then one item's own page */
.feat-stage { position: relative; padding-block: 28px 40px; min-height: 520px; }
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feat { text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px; cursor: pointer;
  display: flex; flex-direction: column; gap: 10px; min-height: 186px; transition: opacity .3s, transform .3s, background .3s, border-color .3s, box-shadow .2s; }
.feat:hover { border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); box-shadow: 0 20px 40px -24px var(--tc); transform: translateY(-3px); }
.feat .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 15%, transparent); color: var(--tc); }
.feat h3 { font-size: 22px; font-weight: 800; }
.feat p { margin: 0; color: var(--sub); font-size: 15px; }
.feat-grid.leaving .feat { transform: none; background: transparent; border-color: transparent; box-shadow: none; pointer-events: none; }
.feat-grid.leaving .feat p { opacity: 0; }

.soon { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; border: 1px dashed var(--line); border-radius: 18px; padding: 18px 22px; background: var(--bg-2); }
.soon .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--faint) 18%, transparent); color: var(--sub); }
.soon b { font-size: 18px; }
.soon span:not(.ic) { color: var(--sub); flex: 1; min-width: 220px; }
.soon em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 4px 10px; }
.feat-stage.detail-on .soon { display: none; }

.detail { display: none; }
.feat-stage.detail-on .feat-grid { display: none; }
.feat-stage.detail-on .detail { display: block; }
.detail-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.back { font: inherit; font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 9px 16px 9px 12px; cursor: pointer; }
.back:hover { border-color: var(--sub); }
.badge { display: flex; align-items: center; gap: 14px; }
.badge .ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 15%, transparent); color: var(--tc); }
.badge b { font-size: 30px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; }
.detail-body { display: flex; flex-direction: column; margin-top: 34px; opacity: 0; transform: translateY(10px); transition: opacity .35s .15s, transform .35s .15s; }
.feat-stage.shown .detail-body { opacity: 1; transform: none; }
.detail-body h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.08; }
.detail-body .lede { color: var(--sub); font-size: 19px; margin: 16px 0 0; }
.detail-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 30px; }
.detail-body li { display: flex; gap: 12px; font-size: 19px; }
.detail-body li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tc); margin-top: .75em; flex-shrink: 0; }
.detail-body li > div { display: flex; flex-direction: column; gap: 8px; }
.detail-body li b { font-weight: 800; font-size: 1.4em; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.detail-body li span { color: var(--sub); font-size: .95em; line-height: 1.5; }
.flyer { position: fixed; z-index: 45; pointer-events: none; transition: transform .9s cubic-bezier(.45,.05,.2,1); transform-origin: top left; margin: 0; }
.flyer.ttl { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.flyer.ic { display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--tc) 15%, transparent); color: var(--tc); }
@media (prefers-reduced-motion: reduce) { .flyer, .feat, .detail-body { transition: none !important; } }

@media (max-width: 980px) {
  .icons8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .feat { min-height: 0; }
  .detail-top { flex-direction: column-reverse; }
}

/* pricing tweaks (25 Oct 2026) */
.pricebox .pl span small { display: block; font-size: 13px; color: var(--faint); margin-top: 2px; }
.pricebox .pl b.incl { color: var(--good); font-size: 22px; }
.tool-head { padding-top: 12px; padding-bottom: 12px; background: var(--surface-2); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.tool-head span:last-child { text-align: center; }
.soon-chip { display: inline-block; vertical-align: 2px; margin-left: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); border: 1px solid var(--brand); border-radius: 999px; padding: 1px 8px; }
@media (max-width: 560px) { .tool-head span:last-child { display: none; } }

/* Xero & XPM / One MCP panels (25 Oct 2026) — brand marks are colour stand-ins until real logo files go in */
.panel-h { margin-top: 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; }
.panel-h em { font-style: normal; color: var(--brand); }
.intg { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 10px; margin-top: 28px; }
@media (max-width: 1240px) { .intg { grid-template-columns: repeat(2, auto); } }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 8px 8px; background: var(--surface-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.mk { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 12px; color: #fff; flex-shrink: 0; }
/* real brand marks (Simple Icons, CC0 SVGs) sit on the chip with no tile of their own */
.mk-logo { background: transparent; }
/* products named in text only (Microsoft 365, OneDrive, 3CX, Acuity): a plain line icon, no brand colour or shape */
.mk-neutral { background: transparent; color: var(--sub); }
.mcp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.ai-tiles { display: flex; gap: 12px; }
.ai { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ai-mk { width: 64px; height: 64px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; }
.ai-gpt { color: var(--sub); }
.ai-claude { color: #D97757; }
.mcp .mcp-lede { font-size: 19px; color: var(--ink); opacity: .9; margin-top: 18px; }
.mcp .mcp-body { font-size: 16px; margin-top: 8px; }
.mcp-btn { margin-top: 22px; }
.example { display: flex; gap: 14px; align-items: flex-start; margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; background: var(--surface-2); }
.spark { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, #A78BFA 18%, transparent); color: #A78BFA; flex-shrink: 0; }
.ex-label { font-size: 13px; color: var(--faint); }
.ex-q { font-size: 16px; font-weight: 500; margin-top: 2px; }
.ex-a { margin-top: 10px; color: var(--sub); font-size: 15px; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 560px) { .mcp-top { flex-direction: column; } }

/* the landing page runs tighter between sections (25 Oct 2026) */
.landing section { padding-block: 52px; }
.landing .hero { padding-block: 56px 20px; }
.landing .does-row { padding-block: 20px 28px; }
@media (max-width: 560px) { .landing section { padding-block: 40px; } }

/* built by accountants (25 Oct 2026) */
.built p { font-size: 18px; }
.built .every-day { color: var(--brand); font-weight: 600; margin-top: 6px; }
.bstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.bstat { display: flex; align-items: flex-start; gap: 12px; padding: 0 14px; border-left: 1px solid var(--line); min-width: 0; }
.bstat:first-child { padding-left: 0; border-left: 0; }
.bstat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.bstat span:not(.bic) { display: block; font-size: 13px; color: var(--sub); margin-top: 8px; white-space: nowrap; }
.bic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.bic-staff { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.bic-xero { background: color-mix(in srgb, #13B5EA 18%, transparent); }
.bic-one { background: color-mix(in srgb, #34D399 18%, transparent); color: #34D399; }
@media (max-width: 1240px) { .bstats { grid-template-columns: minmax(0, 1fr); gap: 16px; } .bstat { padding: 0; border-left: 0; } }

/* the back button waits with the page text until the heading has landed */
.bar-row .back { opacity: 0; transition: opacity .35s .15s; }
.feat-stage.shown .bar-row .back { opacity: 1; }

/* the four landing panels zig-zag: Xero small / AI large, then built-by large / quote small */
.split.stagger { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.stagger .intg { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
@media (max-width: 980px) { .split.stagger { grid-template-columns: minmax(0, 1fr); } }

/* What it does: the eight as a menu bar once one is open (25 Oct 2026) */
.bar-row { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.feat-bar { flex: 0 1 50%; min-width: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.fb-item { font: inherit; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 8px 2px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; transition: background .2s, border-color .3s, box-shadow .3s; }
.fb-item:hover { background: var(--surface); }
.fb-item .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 15%, transparent); color: var(--tc); }
.fb-l { font-size: 11px; font-weight: 700; white-space: nowrap; }
.fb-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bar-lit .fb-item.on { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: color-mix(in srgb, var(--tc) 55%, transparent); box-shadow: 0 14px 26px -14px var(--tc); }
.flyer.ttl { font-size: 22px; }
@media (max-width: 900px) {
  .feat-bar { flex: 1 1 auto; display: flex; overflow-x: auto; scrollbar-width: none; }
  .fb-item { flex: 0 0 64px; }
}

.page-head h1 em { font-style: normal; color: var(--brand); }

/* the page as alternating rows: text | picture, then picture | text */
.drow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.drow + .drow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.drow.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.drow .zoom { justify-self: center; width: 100%; max-width: 620px; }
.drow.flip > .zoom { order: -1; }
.drow { padding-block: 64px; }
.drow:first-child { padding-top: 0; }
.drow + .drow { border-top: 1px solid var(--line); }
.dtext { min-width: 0; }
.still.plain { box-shadow: 0 30px 60px -34px rgba(0,0,0,.6); border: 1px solid var(--line); }
.still.plain::after { display: none; }
@media (max-width: 980px) {
  .drow, .drow.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .drow.flip > .zoom { order: 0; }
}
.zoom { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.zoom img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; border-radius: 12px; background: #fff;
  border: 1px solid var(--line); box-shadow: 0 22px 40px -26px rgba(0,0,0,.55), 0 0 0 4px color-mix(in srgb, var(--tc) 10%, transparent); transition: transform .35s ease; }
.zoom:hover img { transform: translateY(-3px); }
.zoom figcaption { font-size: 13px; font-weight: 700; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.zoom figcaption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tc); flex-shrink: 0; }
@media (max-width: 560px) { .zoom figcaption { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .zoom img { transition: none; } }
/* the walkthrough still is a real screenshot of that page, with the play button over it */
.still { aspect-ratio: 16 / 10; }
.still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.still .playbtn { box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.still::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,17,29,.35), transparent 50%); pointer-events: none; }
.still .cap { z-index: 1; }

/* ── pricing, v2: offer band joined to the price box; calculator + setup on the right ── */
.pr-top { padding-top: 40px; }
.pr-head { margin-bottom: 34px; }
.pr-head h1 { font-size: clamp(40px, 5.4vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; max-width: 12ch; text-wrap: balance; }
.pr-sub { margin: 16px 0 4px; font-size: 21px; color: var(--sub); }
.pr-gst { margin: 0; font-size: 15px; color: var(--faint); }
.price-wrap { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; }
.offerband { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 22px 22px 0 0; color: #fff; text-decoration: none;
  background: linear-gradient(100deg, #C2531E, #E0692C); position: relative; z-index: 1; }
.offerband .ob-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.offerband .ob-tx { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.offerband .ob-tx b { font-size: 18px; font-weight: 700; }
.offerband .ob-tx span { font-size: 15px; opacity: .92; }
.offerband .ob-go { flex: none; opacity: .85; transition: transform .2s; }
.offerband:hover .ob-go, .setup:hover .su-go { transform: translateX(3px); }
.offerband:focus-visible, .setup:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pricebox.joined { border-radius: 0 0 22px 22px; border-top: 0; box-shadow: none; }
.pr-side { display: flex; flex-direction: column; gap: 18px; }
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; }
.pcard h2 { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.pc-sub { margin: 6px 0 0; color: var(--sub); font-size: 16px; }
.steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 20px; }
.stepper { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--sub); }
.step-box { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 0 6px 0 14px; height: 46px; }
.step-box input { flex: 1; min-width: 0; font: inherit; font-size: 17px; color: var(--ink); background: none; border: 0; outline: 0; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.step-box input::-webkit-inner-spin-button, .step-box input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.step-box:focus-within { border-color: var(--brand); }
.step-box button { width: 36px; height: 32px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 20px; cursor: pointer; border-radius: 8px; }
.step-box button + button { border-left: 1px solid var(--line); border-radius: 0 8px 8px 0; }
.step-box button:hover { background: var(--glow); }
.results { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.results > div { display: flex; flex-direction: column; gap: 4px; padding: 0 18px; }
.results > div:first-child { padding-left: 0; }
.results > div + div { border-left: 1px solid var(--line); }
.results span { font-size: 14px; color: var(--sub); }
.results b { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.results b small { font-size: 15px; font-weight: 500; color: var(--sub); }
.results b.brand { color: var(--brand); }
.results em { font-style: normal; font-size: 14px; color: var(--sub); }
.setups { margin-top: 14px; display: flex; flex-direction: column; }
.setup { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.su-ic { flex: none; width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }
.su-ic.brand { background: var(--brand-soft); color: var(--brand); }
.su-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.su-tx b { font-size: 18px; font-weight: 600; }
.su-tx span { font-size: 14px; color: var(--sub); }
.su-p { font-size: 19px; font-weight: 700; }
.su-go { flex: none; color: var(--sub); transition: transform .2s; }
@media (max-width: 980px) {
  .results { grid-template-columns: 1fr; gap: 14px; }
  .results > div { padding: 0; }
  .results > div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
}
@media (max-width: 560px) { .steppers { grid-template-columns: 1fr; gap: 14px; } .offerband { padding: 16px; } }
.pr-top .inner { max-width: 1280px; }
.pr-side .pcard:last-child { flex: 1; }
.offerband .ob-tx b { font-size: 17px; }
.offerband .ob-tx span { font-size: 14px; }

/* setup rows: both on the same blue tile, told apart by the icon's colour */
.su-ic.su-yellow { background: var(--surface-2); color: #FBBF24; }
.su-ic.su-pink { background: var(--surface-2); color: #F472B6; }
:root:not([data-theme="dark"]) .su-ic.su-yellow { color: #B7791F; }
:root:not([data-theme="dark"]) .su-ic.su-pink { color: #DB2777; }
/* the price card always runs to the bottom of the right-hand column; rows share the extra height */
.price-wrap > div:first-child { display: flex; flex-direction: column; }
.pricebox.joined { flex: 1; display: flex; flex-direction: column; }
.pricebox.joined .pl { flex: 1; align-items: center; }

/* ── Support (25 Oct): sticky topic sidebar whose open topic carries its own sections ── */
.sup { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 56px; align-items: start; padding: 28px 0 80px; }
.sup-side { position: sticky; top: 72px; align-self: start; }
.sup-side-in { max-height: calc(100vh - 72px); overflow-y: auto; padding: 14px 6px 40px 0; overscroll-behavior: contain; scrollbar-width: thin; }
.sup-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; padding: 0 12px; height: 42px; margin-bottom: 14px; color: var(--faint); }
.sup-search:focus-within { border-color: var(--brand); }
.sup-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.sup-search input::placeholder { color: var(--faint); }
.sg { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 22px 0 6px 12px; }
.sl { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: 10px; color: var(--sub); text-decoration: none; font-size: 15px; font-weight: 500; }
.sl .ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; flex: none; color: var(--tc, var(--sub)); background: color-mix(in srgb, var(--tc, var(--faint)) 13%, transparent); }
.sl .lbl { flex: 1; min-width: 0; }
.sl:hover { color: var(--ink); background: var(--surface); }
.sl:focus-visible, .sub a:focus-visible, .sup-card:focus-visible, .sup-hits a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sl-home.on, .sw.open > .sl { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sbadge { font-size: 11px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 99px; }
/* a topic's sections fold open beneath it — this replaces the old "On this page" column */
.sw .sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.sw.open .sub { grid-template-rows: 1fr; }
.sw .sub nav { overflow: hidden; display: flex; flex-direction: column; margin-left: 25px; padding-left: 14px; border-left: 1px solid var(--line); }
.sw.open .sub nav { padding-block: 6px 8px; }
.sub a { position: relative; padding: 6px 10px; font-size: 14px; color: var(--faint); text-decoration: none; border-radius: 8px; }
.sub a:hover { color: var(--ink); }
.sub a.on { color: var(--ink); font-weight: 600; }
.sub a.on::before { content: ""; position: absolute; left: -15px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--tc); }

.sup-main { max-width: 780px; min-width: 0; padding-top: 14px; }
.sup-main h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; line-height: 1.05; margin-top: 8px; }
.sup-main .lede { font-size: 19px; color: var(--sub); margin: 14px 0 0; max-width: 40em; }
.sup-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.sup-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); background: var(--surface); border-radius: 18px; text-decoration: none; color: var(--ink); transition: transform .2s, border-color .2s; }
.sup-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); }
.sup-card .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); margin-bottom: 6px; }
.sup-card b { font-size: 18px; font-weight: 700; }
.sup-card span { color: var(--sub); font-size: 15px; }
.sup-card em { font-style: normal; color: var(--faint); font-size: 13px; margin-top: auto; padding-top: 6px; }
.sup-h2 { font-size: 24px; font-weight: 700; margin: 48px 0 10px; }

.crumb { display: flex; gap: 10px; font-size: 14px; color: var(--faint); }
.crumb a { color: var(--sub); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.sup-ah { display: flex; gap: 18px; align-items: flex-start; margin: 18px 0 8px; }
.sup-ah .ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); margin-top: 6px; }
.sup-ah h1 { margin-top: 0; }

/* article body, restyled from the live pages' markup */
.sup-sec { scroll-margin-top: 96px; padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--line); color: var(--sub); font-size: 16.5px; line-height: 1.65; }
.sup-sec h2 { font-size: 27px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.sup-sec h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.sup-sec h4 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.sup-sec p { margin: 0 0 14px; }
.sup-sec strong { color: var(--ink); font-weight: 600; }
.sup-sec a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sup-sec ul, .sup-sec ol { margin: 0 0 16px; padding-left: 22px; }
.sup-sec li { margin-bottom: 6px; }
.sup-sec li::marker { color: var(--tc); }
.sup-sec code { font: inherit; font-size: .92em; color: var(--ink); background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.sup-sec .small { font-size: 12px; opacity: .75; }
.steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.step { display: flex; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; }
.step-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--tc); background: color-mix(in srgb, var(--tc) 15%, transparent); font-variant-numeric: tabular-nums; }
.step-content p { margin: 0; font-size: 15.5px; }
.callout { display: flex; gap: 12px; padding: 14px 18px; margin: 18px 0; border-radius: 14px; border: 1px solid color-mix(in srgb, #38BDF8 35%, var(--line)); background: color-mix(in srgb, #38BDF8 8%, var(--surface)); font-size: 15.5px; }
.callout::before { content: "i"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #38BDF8; border: 1.5px solid currentColor; margin-top: 1px; }
.callout.warning { border-color: color-mix(in srgb, #FBBF24 40%, var(--line)); background: color-mix(in srgb, #FBBF24 9%, var(--surface)); }
.callout.warning::before { content: "!"; color: #F59E0B; }
.data-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; display: block; overflow-x: auto; }
.data-table th { text-align: left; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.status-flow, .data-flow { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 18px 20px; margin: 18px 0; }
.status-flow-title, .data-flow-title { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 12px; }
.status-flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.status-pill { font-size: 13.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; color: var(--ink); background: var(--surface-2); }
.status-pill.caution { color: #D97706; background: color-mix(in srgb, #FBBF24 18%, transparent); }
.status-pill.complete { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.status-arrow { color: var(--faint); }
.flow-row { display: flex; align-items: center; gap: 16px; }
.flow-box { flex: 1; text-align: center; padding: 14px; border-radius: 12px; font-weight: 700; color: var(--ink); background: var(--surface-2); line-height: 1.35; }
.flow-box.xero { box-shadow: inset 0 0 0 1px #13B5EA; }
.flow-box.onehq { box-shadow: inset 0 0 0 1px var(--brand); }
.flow-arrow { text-align: center; color: var(--faint); font-size: 13px; }
.screenshot { margin: 20px 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.screenshot img { display: block; width: 100%; height: auto; }
.screenshot-caption { padding: 10px 16px; font-size: 14px; color: var(--faint); }
details.faq { border-top: 1px solid var(--line); }
details.faq:last-of-type { border-bottom: 1px solid var(--line); }
details.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 15px 2px; font-weight: 600; color: var(--ink); font-size: 16.5px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: 22px; line-height: 1; color: var(--faint); transition: transform .2s; }
details.faq[open] summary::after { transform: rotate(45deg); color: var(--tc, var(--brand)); }
details.faq summary:hover { color: var(--tc, var(--brand)); }
.faq-a { padding: 0 2px 16px; color: var(--sub); }
.faq-a p:last-child { margin-bottom: 0; }
.sup-pop { color: var(--sub); }
.sup-pop .faq-a a { color: var(--brand); }
.sup-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.sup-pn a { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; font-weight: 600; color: var(--ink); }
.sup-pn a.next { text-align: right; }
.sup-pn a:hover { border-color: var(--brand); }
.sup-pn small { font-weight: 500; color: var(--faint); font-size: 13px; }
.sup-cta { margin-top: 56px; padding: 26px 28px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sup-cta p { margin: 0; font-size: 19px; font-weight: 600; }
.sup-hits { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.sup-hits a { display: flex; flex-direction: column; gap: 3px; padding: 14px 18px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; text-decoration: none; color: var(--sub); font-size: 15px; }
.sup-hits a:hover { border-color: var(--brand); }
.sup-hits small { color: var(--faint); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.sup-hits b { color: var(--ink); font-size: 17px; }
.sup-hits mark { background: var(--brand-soft); color: var(--ink); border-radius: 3px; padding: 0 2px; }
@media (max-width: 900px) {
  .sup { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sup-side { position: static; }
  .sup-side-in { max-height: none; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .sup-cards, .sup-pn { grid-template-columns: minmax(0, 1fr); }
  .flow-row { flex-direction: column; }
}
.sup section.sup-sec { padding-block: 34px 0; }
.sup section.sup-hub, .sup section.sup-results { padding-block: 0; }
.sup-main { max-width: 820px; }

/* ── Landing first screen fills the window and grows with it (26 Oct) ──
   The landing runs wider than the inner pages (1520 vs 1200) so a big monitor isn't two wide empty
   margins; the hero takes the whole first screen and its type and laptop scale with the window. */
.nav.wide .inner, .landing .inner { max-width: 1520px; }
@media (min-width: 1100px) {
  .landing .hero { min-height: calc(100svh - 72px); display: flex; align-items: center; padding-block: 4vh 6vh; }
  .landing .hero .inner { width: 100%; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr); gap: 4vw; }
  .landing .hero .eyebrow { font-size: clamp(13px, 0.82vw, 16px); }
  .landing .hero h1 { font-size: clamp(56px, 5.3vw, 104px); }
  .landing .hero .lede { font-size: clamp(22px, 1.85vw, 36px); max-width: 20em; }
  .landing .hero .lede-sub { font-size: clamp(16px, 1.1vw, 21px); }
  .landing .hero .ctas { margin-top: clamp(30px, 3.6vh, 48px); }
  .landing .hero .ctas .btn { font-size: clamp(16px, 1.05vw, 20px); padding: clamp(15px, 1.05vw, 20px) clamp(22px, 1.5vw, 30px); }
  /* the laptop fills its column, but never taller than the screen leaves room for */
  .landing .laptop { width: min(100%, calc((100svh - 72px - 12vh) * 1.5)); max-width: none; justify-self: end; }
}
.hero::before { display: none; }   /* no orange glow behind the laptop (26 Oct) */
@media (min-width: 1100px) { .nav.wide, .landing > .gut { padding-left: max(20px, 3vw); padding-right: max(20px, 3vw); } }
/* big monitors: the first screen keeps growing with the window (the sections below stay at 1520) */
@media (min-width: 1100px) {
  .nav.wide .inner, .landing .hero .inner, .landing .does-row .inner { max-width: max(1520px, 86vw); }
  .landing .hero h1 { font-size: clamp(56px, 5.3vw, 160px); }
  .landing .hero .lede { font-size: clamp(22px, 1.85vw, 52px); }
  .landing .hero .lede-sub { font-size: clamp(16px, 1.1vw, 30px); }
  .landing .hero .eyebrow { font-size: clamp(13px, 0.82vw, 22px); }
  .landing .hero .ctas .btn { font-size: clamp(16px, 1.05vw, 28px); padding: clamp(15px, 1.05vw, 28px) clamp(22px, 1.5vw, 40px); border-radius: clamp(12px, .8vw, 18px); }
}
@media (min-width: 2000px) {
  .nav.wide .inner { height: 88px; }
  .nav.wide .mark { font-size: 34px; }
  .nav.wide nav a, .nav.wide .login { font-size: 20px; }
  .landing .hero { min-height: calc(100svh - 88px); }
  .icon8 .ic { width: 60px; height: 60px; border-radius: 16px; }
  .icon8 span { font-size: 17px; }
}

/* ── What it does scales with the window like the landing's first screen (26 Oct) ── */
body > main { min-height: calc(100svh - 72px); }    /* a short page keeps its footer at the bottom of the window */
@media (min-width: 1100px) {
  .scaled .inner { max-width: max(1520px, 86vw); }
  .nav.wide, .scaled > .gut { padding-left: max(20px, 3vw); padding-right: max(20px, 3vw); }
  .scaled .page-head { padding-block: clamp(64px, 6vh, 120px) 8px; }
  .scaled .page-head h1 { font-size: clamp(36px, 4.2vw, 128px); }
  .scaled .page-head p { font-size: clamp(19px, 1.3vw, 34px); }
  .scaled .feat-grid { gap: clamp(18px, 1.2vw, 32px); }
  .scaled .feat { padding: clamp(22px, 1.4vw, 40px) clamp(22px, 1.5vw, 40px); gap: clamp(10px, .8vw, 22px); min-height: 0; }
  .scaled .feat .ic { width: clamp(52px, 3.2vw, 88px); height: clamp(52px, 3.2vw, 88px); border-radius: clamp(14px, .9vw, 22px); }
  .scaled .feat h3, .flyer.ttl { font-size: clamp(22px, 1.45vw, 40px); }
  .scaled .feat p { font-size: clamp(15px, 1vw, 27px); }
  .scaled .soon { padding: clamp(18px, 1.2vw, 32px) clamp(22px, 1.5vw, 40px); }
  .scaled .soon b { font-size: clamp(18px, 1.2vw, 32px); }
  .scaled .soon span:not(.ic) { font-size: clamp(16px, 1.05vw, 28px); }
  .scaled .fb-item .ic { width: clamp(34px, 2.16vw, 61px); height: clamp(34px, 2.16vw, 61px); border-radius: clamp(10px, .64vw, 16px); }
  .scaled .fb-l { font-size: clamp(11px, .72vw, 19px); }
  .scaled .zoom figcaption { font-size: clamp(13px, .8vw, 21px); }
  .scaled .back { font-size: clamp(15px, .95vw, 26px); }
  .scaled .detail-body { margin-top: clamp(34px, 3vh, 72px); }
  .scaled .drow { gap: clamp(56px, 4vw, 120px); }
  .scaled .drow { padding-block: clamp(64px, 4.5vw, 140px); }
  .scaled .drow:first-child { padding-top: 0; }
  .scaled .detail-body h2 { font-size: clamp(30px, 3.1vw, 92px); }
  .scaled .detail-body .lede { font-size: clamp(19px, 1.3vw, 36px); }
  .scaled .detail-body li { font-size: clamp(19px, 1.25vw, 34px); gap: clamp(12px, .8vw, 22px); }
  .scaled .detail-body li::before { width: clamp(10px, .6vw, 16px); height: clamp(10px, .6vw, 16px); margin-top: .75em; }
  .scaled .drow .zoom { max-width: clamp(620px, 38vw, 1100px); }
  .scaled .detail-body ul { gap: clamp(30px, 2vw, 56px); margin: 0; }
  .scaled .detail-body .btn { font-size: clamp(16px, 1.05vw, 28px); padding: clamp(15px, 1.05vw, 28px) clamp(22px, 1.5vw, 40px); border-radius: clamp(12px, .8vw, 18px); }
  .scaled .still .playbtn { width: clamp(74px, 4.6vw, 130px); height: clamp(74px, 4.6vw, 130px); }
  .scaled .still .cap { font-size: clamp(13px, .85vw, 22px); }
}
/* icons follow their tile's size (the svg carries a fixed size attribute) */
.scaled .feat .ic svg, .scaled .fb-item .ic svg, .flyer.ic svg { width: 50%; height: 50%; }
@media (min-width: 1100px) { .scaled .soon em { font-size: clamp(12px, .75vw, 20px); padding: .35em .9em; } .scaled .soon .ic { width: clamp(46px, 2.9vw, 80px); height: clamp(46px, 2.9vw, 80px); } .scaled .soon .ic svg { width: 50%; height: 50%; } }
/* landing hero ~8% smaller (26 Oct) */
@media (min-width: 1100px) {
  .landing .hero .eyebrow { font-size: clamp(12px, 0.75vw, 20px); }
  .landing .hero h1 { font-size: clamp(52px, 4.9vw, 148px); }
  .landing .hero .lede { font-size: clamp(20px, 1.7vw, 48px); }
  .landing .hero .lede-sub { font-size: clamp(15px, 1.01vw, 28px); }
  .landing .hero .ctas .btn { font-size: clamp(15px, 0.97vw, 26px); padding: clamp(14px, 0.97vw, 26px) clamp(20px, 1.38vw, 37px); }
  .landing .laptop { width: min(92%, calc((100svh - 72px - 12vh) * 1.38)); }
}
/* the hero leaves the top of the eight showing, so the page reads as more than one screen (26 Oct) */
@media (min-width: 1100px) {
  .landing .hero { min-height: calc(88svh - 72px); padding-block: 3vh 2vh; }
  .landing .does-row { padding-top: 0; }
}
@media (min-width: 2000px) { .landing .hero { min-height: calc(88svh - 88px); } }
/* tall screens: leave room for the whole "What it does" row under the hero; shorter ones keep a peek (26 Oct) */
@media (min-width: 1100px) and (min-height: 1000px) {
  .landing .hero { min-height: calc(100svh - 72px - 200px); }
}
@media (min-width: 2000px) and (min-height: 1000px) {
  .landing .hero { min-height: calc(100svh - 88px - 230px); }
}

/* the feature list under the eight (3 Nov 2026): four groups, a tick on every line */
.flist { padding-block: 72px 8px; border-top: 1px solid var(--line); margin-top: 56px; }
.flist-head { margin-bottom: 32px; }
.flist-head h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; line-height: 1.1; margin-top: 10px; }
.fl-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 32px; }
.fl-col h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.fl-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fl-col li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--sub); }
.fl-col li svg { flex-shrink: 0; margin-top: 2px; color: var(--good); }
.feat-stage.detail-on .flist { display: none; }
@media (min-width: 1100px) {
  .scaled .flist-head h2 { font-size: clamp(28px, 2.4vw, 64px); }
  .scaled .fl-col h3 { font-size: clamp(17px, 1.1vw, 28px); }
  .scaled .fl-col li { font-size: clamp(15px, .95vw, 25px); }
  .scaled .fl-col li svg { width: 1.05em; height: 1.05em; margin-top: .2em; }
}
@media (max-width: 980px) { .fl-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fl-cols { grid-template-columns: minmax(0, 1fr); } .flist { padding-top: 48px; margin-top: 40px; } }

/* WHY WE BUILT IT — three short reasons under the story, each with its tinted tile (3 Nov 2026, replaced the
   staff / Xero / practice counts). */
.bic-day { background: color-mix(in srgb, #38BDF8 18%, transparent); color: #38BDF8; }
.bfeats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.bfeat { display: flex; align-items: flex-start; gap: 18px; padding: 0 32px; border-left: 1px solid var(--line); min-width: 0; }
.bfeat:first-child { padding-left: 0; border-left: 0; }
.bfeat:last-child { padding-right: 0; }
.bfeat .bic { width: 48px; height: 48px; border-radius: 13px; }
.bfeat b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.bfeat span:not(.bic) { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sub); }
@media (max-width: 980px) { .bfeats { grid-template-columns: minmax(0, 1fr); gap: 22px; } .bfeat { padding: 0; border-left: 0; } }

/* THE SCREEN IS THE DEMO (3 Nov 2026) — clicking the laptop's screen opens the live demo, like the
   buttons; on hover it dims a touch and says so. The zoomed clone never shows the label. */
.screen[data-try] { cursor: pointer; }
.screen[data-try]::after { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, 0); transition: background .2s; pointer-events: none; }
.screen[data-try]:hover::after, .screen[data-try]:focus-visible::after { background: rgba(15, 23, 42, 0.32); }
.screen[data-try]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.screen-cta { position: absolute; left: 50%; top: 50%; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 14px; border-radius: 999px;
  background: #fff; color: #0F172A; font-weight: 700; font-size: 16px; box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.6);
  opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .2s, transform .2s; pointer-events: none; white-space: nowrap; }
.screen-cta .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); }
.screen[data-try]:hover .screen-cta, .screen[data-try]:focus-visible .screen-cta { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zoom-lap .screen-cta, .zoom-lap .screen[data-try]::after { display: none; }
@media (prefers-reduced-motion: reduce) { .screen[data-try]::after, .screen-cta { transition: none; } }

/* The pricing headline is two lines, always (3 Nov 2026): the first line never breaks on a desktop. */
.pr-head h1 { max-width: none; font-size: clamp(36px, 4.4vw, 60px); }
.pr-head h1 .ln { white-space: nowrap; }
@media (max-width: 640px) { .pr-head h1 .ln { white-space: normal; } }

/* ── PRICING, REBUILT — the offer as a full-width band; an itemised Pricing card on
   the left; on the right the live price, the offer against it, then the two steppers. ── */
.pv-band { border-radius: 22px; margin-bottom: 24px; gap: 18px; padding: 16px 26px 16px 18px; }
.pv-band > b { font-size: 18px; font-weight: 700; flex: none; }
.pv-sep { flex: none; width: 1px; align-self: stretch; margin: 6px 4px; background: rgba(255, 255, 255, 0.35); }
.pv-band-sub { font-size: 15px; opacity: .95; }
.pv-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.pv-list { display: flex; flex-direction: column; padding: 30px 32px 26px; }
.pv-list h2 { font-size: 30px; }
.pv-rows { margin-top: 18px; display: flex; flex-direction: column; flex: 1; }
.pv-row { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pv-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-what b { font-size: 19px; font-weight: 700; }
.pv-what span { font-size: 15px; color: var(--sub); }
.pv-amt { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pv-amt b { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
.pv-amt small { font-size: 16px; font-weight: 600; color: var(--sub); }
.pv-incl { flex: none; padding: 6px 12px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.pv-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; padding: 14px 18px; border-radius: 14px; background: var(--surface-2); color: var(--sub); font-size: 14px; line-height: 1.5; }
.pv-note svg { flex: none; margin-top: 1px; }
.pv-calc { padding: 28px 32px; }
.pv-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sub); }
.pv-big { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.pv-big b { font-size: clamp(44px, 4.6vw, 64px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.pv-big span { font-size: 22px; color: var(--sub); }
.pv-who { margin-top: 10px; font-size: 17px; color: var(--sub); }
/* What connected Xero files will add once they are billed — beside today's price, never inside it. */
.pv-later { margin-top: 6px; font-size: 15px; color: var(--brand); font-weight: 600; }
.pv-offer { display: flex; align-items: center; gap: 16px; margin-top: 20px; padding: 14px 18px; border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); }
.pv-tag { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 30%, transparent); color: var(--brand); }
.pv-offer > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pv-offer b { font-size: 18px; font-weight: 700; color: var(--brand); }
.pv-offer span { font-size: 15px; color: var(--ink); opacity: .85; }
.pv-adjust { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 700; }
.pv-calc .steppers { margin-top: 12px; }
@media (max-width: 980px) { .pv-band { flex-wrap: wrap; } .pv-sep { display: none; } .pv-band > b { flex: 1 1 100%; } }
@media (max-width: 560px) { .pv-list, .pv-calc { padding: 22px 20px; } .pv-amt b { font-size: 24px; } }

/* The offer callout in the price card is filled like the old top band — the band itself is gone. */
.pv-offer { background: linear-gradient(100deg, #C2531E, #E0692C); border: 0; color: #fff; }
.pv-offer b { color: #fff; }
.pv-offer span { color: #fff; opacity: .92; }
.pv-tag { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* EVERYTHING IN ONE, as four cards in two columns — each card a tinted icon tile, its
   name and one line, then its eight points. Lighter than four dense columns. */
.fl2-rule { display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--brand); margin-bottom: 18px; }
.fl2-sub { margin: 10px 0 0; font-size: 19px; color: var(--sub); }
.fl2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.fl2-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px 24px; --tone: var(--brand); }
.fl2-or { --tone: #F97316; } .fl2-bl { --tone: #38BDF8; } .fl2-pu { --tone: #A78BFA; } .fl2-gr { --tone: #34D399; }
:root:not([data-theme="dark"]) .fl2-or { --tone: #C2410C; }
:root:not([data-theme="dark"]) .fl2-bl { --tone: #0369A1; }
:root:not([data-theme="dark"]) .fl2-pu { --tone: #6D28D9; }
:root:not([data-theme="dark"]) .fl2-gr { --tone: #047857; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fl2-or { --tone: #F97316; } :root:not([data-theme="light"]) .fl2-bl { --tone: #38BDF8; } :root:not([data-theme="light"]) .fl2-pu { --tone: #A78BFA; } :root:not([data-theme="light"]) .fl2-gr { --tone: #34D399; } }
.fl2-top { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.fl2-ic { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--tone); background: color-mix(in srgb, var(--tone) 18%, transparent); }
.fl2-top h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.fl2-top p { margin: 4px 0 0; font-size: 15px; color: var(--sub); }
.fl2-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fl2-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.fl2-card li svg { flex: none; margin-top: 2px; color: var(--tone); }
@media (min-width: 1100px) {
  .scaled .fl2-top h3 { font-size: clamp(22px, 1.4vw, 34px); }
  .scaled .fl2-top p, .scaled .fl2-card li { font-size: clamp(15px, .95vw, 24px); }
  .scaled .fl2-sub { font-size: clamp(19px, 1.2vw, 28px); }
  .scaled .fl2-ic { width: clamp(52px, 3.2vw, 80px); height: clamp(52px, 3.2vw, 80px); }
}
@media (max-width: 860px) { .fl2-grid { grid-template-columns: minmax(0, 1fr); } .fl2-card { padding: 22px 20px; } }
/* the points read too tight: bigger type, more air between them, set in from the left */
.fl2-card ul { gap: 14px; padding-left: 12px; }
.fl2-card li { font-size: 17px; gap: 12px; }
.fl2-card li svg { width: 18px; height: 18px; margin-top: 3px; }
@media (min-width: 1100px) { .scaled .fl2-card li { font-size: clamp(17px, 1.05vw, 26px); } .scaled .fl2-card ul { gap: clamp(14px, .9vw, 22px); } }
@media (max-width: 560px) { .fl2-card ul { padding-left: 4px; } .fl2-card li { font-size: 16px; } }

/* Back to all: the page headline fades in as the icons land, rather than appearing under them. */
.page-head { transition: opacity .35s ease; }
.page-head.returning { opacity: 0; transition: none; }

/* ══ FEATURE PAGES — drawn by feature-pages.js. Every page mixes the same parts in
   its own order: a hero with a soft scene behind it, spotlights beside a small grab or a drawn
   picture, a workflow, "Did you know?", a card trio and "And there's more". --tc is the tile colour. ══ */
.detail-body { gap: 0; --u: 1px; }
.detail-body > section { padding: 0; }
.detail-body > .fp-gems { padding: calc(28 * var(--u)) calc(30 * var(--u)); }
.detail-body > .fp-cta { padding: calc(26 * var(--u)) calc(30 * var(--u)); }
.detail-body .fp-hero ~ section { margin-top: calc(104 * var(--u)); }
.detail-body ul li::before, .detail-body ol li::before { content: none; }
.detail-body ul, .detail-body ol { gap: calc(10 * var(--u)); }
.detail-body li { font-size: inherit; }
.fp-tint { background: color-mix(in srgb, var(--tc) 14%, transparent); }

/* hero + its scene */
.fp-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; min-height: calc(260 * var(--u)); padding: calc(18 * var(--u)) 0 calc(6 * var(--u)); }
.fp-hero-tx { position: relative; z-index: 1; }
.fp-hero h2 { text-wrap: balance; }
.fp-hero .lede { max-width: 58ch; }
.fp-early { display: inline-flex; margin-top: calc(16 * var(--u)); padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 600; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.fp-amb { position: relative; height: calc(240 * var(--u)); grid-column: 2; grid-row: 1; color: var(--tc); opacity: .55; pointer-events: none; }

/* spotlight rows */
.fp-spot { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: calc(56 * var(--u)); align-items: center; }
.fp-spot.flip > .fp-tx { order: 2; }
.fp-tag { display: inline-block; margin-bottom: calc(12 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 700; letter-spacing: .02em; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.fp-tx h3 { font-size: clamp(calc(26 * var(--u)), 2.6vw, calc(36 * var(--u))); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
.fp-tx > p { margin: calc(14 * var(--u)) 0 0; font-size: calc(20 * var(--u)); line-height: 1.6; color: var(--sub); max-width: 54ch; }
.detail-body .fp-tx ul { margin-top: calc(18 * var(--u)); gap: calc(10 * var(--u)); }
.detail-body .fp-tx li { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; font-size: calc(18 * var(--u)); line-height: 1.5; color: var(--ink); }
.fp-tx li svg { flex: none; margin-top: calc(3 * var(--u)); color: var(--tc); }
.fp-tx > p.fp-note, .fp-note { margin: calc(16 * var(--u)) 0 0; font-size: calc(15.5 * var(--u)); color: var(--faint); }
.fp-shot { margin: 0; border-radius: calc(18 * var(--u)); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); transform: translateY(calc(14 * var(--u))); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.fp-shot.in { transform: none; opacity: 1; }
.fp-shot img { display: block; width: 100%; height: auto; }
.fp-shot figcaption { padding: calc(10 * var(--u)) calc(16 * var(--u)); font-size: calc(15 * var(--u)); color: #4B5568; background: #F5F6F8; border-top: 1px solid #E6E9EF; }
.fp-ig { display: flex; justify-content: center; }

/* "Did you know?" */
.fp-gems { padding: calc(28 * var(--u)) calc(30 * var(--u)); border-radius: calc(22 * var(--u)); background: color-mix(in srgb, var(--tc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 30%, var(--line)); }
.fp-gems-h { display: flex; align-items: center; gap: calc(10 * var(--u)); color: var(--tc); font-size: calc(16 * var(--u)); letter-spacing: .06em; text-transform: uppercase; }
.fp-gems-h b { font-weight: 800; }
.fp-gems-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(26 * var(--u)); margin-top: calc(16 * var(--u)); }
.fp-gems-g p { margin: 0; font-size: calc(19 * var(--u)); line-height: 1.55; color: var(--ink); }

/* workflow */
.fp-flow h3 { font-size: calc(16 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: var(--sub); font-weight: 700; }
.detail-body .fp-flow ol { list-style: none; margin: calc(18 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; }
.fp-flow ol::before { content: ""; position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(21 * var(--u)); height: 2px; background: var(--line); }
.fp-flow ol::after { content: ""; position: absolute; left: calc(22 * var(--u)); top: calc(21 * var(--u)); height: 2px; width: 0; background: var(--tc); transition: width 2.2s cubic-bezier(.4,0,.2,1) .2s; }
.fp-flow.in ol::after { width: calc(100% - calc(44 * var(--u))); }
.detail-body .fp-flow li { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding-right: calc(18 * var(--u)); position: relative; opacity: .35; transition: opacity .4s calc(var(--d) * .42s + .2s); }
.fp-flow.in li { opacity: 1; }
.fp-n { width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: calc(18 * var(--u)); color: var(--tc); background: var(--surface); border: 2px solid color-mix(in srgb, var(--tc) 60%, var(--line)); position: relative; z-index: 1; margin-bottom: calc(8 * var(--u)); }
.fp-flow li b { font-size: calc(20 * var(--u)); font-weight: 700; color: var(--ink); }
.fp-flow li > span:last-child { font-size: calc(17.5 * var(--u)); line-height: 1.5; color: var(--sub); }

/* card trio */
.fp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
.fp-cards > div { padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.fp-cards b { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; }
.fp-cards b::before { content: ""; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--tc); flex: none; }
.fp-cards p { margin: calc(8 * var(--u)) 0 0; font-size: calc(17.5 * var(--u)); line-height: 1.55; color: var(--sub); }

/* and there's more */
.fp-more h3 { font-size: calc(26 * var(--u)); font-weight: 800; }
.detail-body .fp-more ul { margin-top: calc(16 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12 * var(--u)) calc(40 * var(--u)); }
.detail-body .fp-more li { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; font-size: calc(18 * var(--u)); line-height: 1.5; color: var(--ink); }
.fp-more li svg { flex: none; margin-top: calc(3 * var(--u)); color: var(--tc); }

.fp-cta { display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); padding: calc(26 * var(--u)) calc(30 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--surface); border: 1px solid var(--line); }
.fp-cta p { margin: 0; font-size: calc(20 * var(--u)); color: var(--sub); }

/* ── the drawn pictures ── */
.ig { width: min(100%, calc(520 * var(--u))); padding: calc(22 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); font-size: calc(15.5 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.detail-body .ig li { font-size: calc(15.5 * var(--u)); gap: calc(10 * var(--u)); }
.detail-body .ig li span { font-size: inherit; color: inherit; }
.ig p { margin: 0; font-size: calc(15 * var(--u)); color: var(--sub); }
.ig b { font-weight: 700; }
.ig .l { display: block; height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--line); }
.ig .w9 { width: 92%; } .ig .w8 { width: 80%; } .ig .w7 { width: 70%; } .ig .w6 { width: 60%; } .ig .w5 { width: 48%; }
.fp-ig .ig { transform: translateY(calc(14 * var(--u))); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s; }
.fp-ig.in .ig { transform: none; opacity: 1; }

/* arrive: the reminder flips green, the reception pill steps through */
.ig-arrive { position: relative; }
.iga-toast { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); border: 1px solid var(--line); background: var(--surface-2); }
.iga-toast div { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.iga-toast span { font-size: calc(13 * var(--u)); color: var(--sub); }
.iga-toast em { font-style: normal; font-weight: 700; color: #D97706; font-variant-numeric: tabular-nums; }
.iga-ic { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u)); display: grid; place-items: center; flex: none; background: color-mix(in srgb, #D97706 18%, transparent); color: #D97706; }
.iga-toast.is-b { position: absolute; left: calc(22 * var(--u)); right: calc(22 * var(--u)); top: calc(22 * var(--u)); border-color: color-mix(in srgb, #16A34A 55%, transparent); background: color-mix(in srgb, #16A34A 14%, var(--surface)); flex-wrap: wrap; opacity: 0; }
.iga-toast.is-b .iga-ic { background: color-mix(in srgb, #16A34A 22%, transparent); color: #16A34A; }
.iga-btns { display: flex; gap: calc(8 * var(--u)); flex: 1 1 100%; padding-left: calc(46 * var(--u)); }
.iga-btns i { font-style: normal; font-size: calc(13 * var(--u)); font-weight: 700; padding: calc(6 * var(--u)) calc(12 * var(--u)); border-radius: calc(9 * var(--u)); background: #16A34A; color: #fff; }
.iga-btns i + i { background: transparent; color: #16A34A; border: 1px solid color-mix(in srgb, #16A34A 55%, transparent); }
.iga-row { display: grid; grid-template-columns: calc(70 * var(--u)) 1fr auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(6 * var(--u)) 2px; margin-top: calc(34 * var(--u)); border-top: 1px solid var(--line); font-size: calc(14 * var(--u)); }
.iga-row span:first-child { color: var(--sub); font-variant-numeric: tabular-nums; }
.iga-pill { position: relative; width: calc(104 * var(--u)); height: calc(26 * var(--u)); }
.iga-pill i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(999 * var(--u)); font-style: normal; font-size: calc(12.5 * var(--u)); font-weight: 700; opacity: 0; }
.iga-pill .p1 { background: color-mix(in srgb, #2563EB 16%, transparent); color: #3B82F6; }
.iga-pill .p2 { background: color-mix(in srgb, #D97706 18%, transparent); color: #D97706; }
.iga-pill .p3 { background: color-mix(in srgb, #16A34A 18%, transparent); color: #16A34A; }
.fp-ig.in .iga-toast.is-b { animation: igaB 8s infinite; }
.fp-ig.in .iga-toast.is-a { animation: igaA 8s infinite; }
.fp-ig.in .iga-pill .p1 { animation: igaP1 8s infinite; }
.fp-ig.in .iga-pill .p2 { animation: igaP2 8s infinite; }
.fp-ig.in .iga-pill .p3 { animation: igaP3 8s infinite; }
@keyframes igaA { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes igaB { 0%, 30% { opacity: 0; transform: scale(.97); } 36%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes igaP1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes igaP2 { 0%, 32% { opacity: 0; } 36%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
@keyframes igaP3 { 0%, 66% { opacity: 0; } 70%, 94% { opacity: 1; } 100% { opacity: 0; } }

/* settle: one tick strikes the rest through */
.igs-task { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface-2); border: 1px solid var(--line); }
.igs-task em { margin-left: auto; font-style: normal; font-size: calc(12.5 * var(--u)); color: var(--sub); }
.igs-box { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(6 * var(--u)); border: 2px solid var(--line); display: grid; place-items: center; color: transparent; }
.ig-settle ul { list-style: none; margin: 0; padding: 0 calc(6 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.ig-settle li { display: flex; align-items: center; gap: calc(10 * var(--u)); color: var(--sub); }
.ig-settle li span { position: relative; }
.ig-settle li span::after { content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 0; background: currentColor; }
.igs-done { color: #16A34A !important; font-weight: 700; opacity: 0; }
.fp-ig.in .igs-box { animation: igsBox 7s infinite; }
.fp-ig.in .ig-settle li span::after { animation: igsStrike 7s infinite; animation-delay: calc(var(--d) * .25s); }
.fp-ig.in .ig-settle li { animation: igsFade 7s infinite; animation-delay: calc(var(--d) * .25s); }
.fp-ig.in .igs-done { animation: igsDone 7s infinite; }
@keyframes igsBox { 0%, 18% { background: transparent; border-color: var(--line); color: transparent; } 24%, 92% { background: #16A34A; border-color: #16A34A; color: #fff; } 100% { background: transparent; color: transparent; } }
@keyframes igsStrike { 0%, 26% { width: 0; } 36%, 92% { width: 100%; } 100% { width: 0; } }
@keyframes igsFade { 0%, 26% { opacity: 1; } 40%, 92% { opacity: .45; } 100% { opacity: 1; } }
@keyframes igsDone { 0%, 44% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* privacy: suggestions tick in */
.igp-head { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--tc); }
.igp-head b { color: var(--ink); }
.igp-row { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); opacity: .2; transform: translateX(-8px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--d) * .35s + .3s); }
.fp-ig.in .igp-row { opacity: 1; transform: none; }
.igp-tick { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; background: var(--tc); color: #fff; flex: none; }
.igp-chip { margin-left: auto; font-size: calc(12 * var(--u)); font-weight: 600; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: calc(999 * var(--u)); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); white-space: nowrap; }

/* split: one call branches to three notes */
.igx-call { display: flex; align-items: center; gap: calc(10 * var(--u)); align-self: center; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); background: color-mix(in srgb, #16A34A 16%, transparent); color: #16A34A; }
.igx-call b { color: var(--ink); } .igx-call span { color: var(--sub); font-size: calc(13 * var(--u)); }
.igx-lines { position: relative; height: calc(34 * var(--u)); }
.igx-lines i { position: absolute; top: 0; left: 50%; width: 2px; height: calc(34 * var(--u)); background: var(--tc); transform-origin: top center; transform: scaleY(0); transition: transform .5s .3s; }
.igx-lines i:nth-child(1) { rotate: 52deg; } .igx-lines i:nth-child(3) { rotate: -52deg; }
.fp-ig.in .igx-lines i { transform: scaleY(1.35); }
.fp-ig.in .igx-lines i:nth-child(2) { transform: scaleY(1); }
.igx-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.igx-notes div { padding: calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(4 * var(--u)); opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity .4s, transform .4s; transition-delay: calc(var(--d) * .2s + .8s); }
.fp-ig.in .igx-notes div { opacity: 1; transform: none; }
.igx-notes span { font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--tc); text-transform: uppercase; letter-spacing: .05em; }
.igx-notes b { font-size: calc(13 * var(--u)); line-height: 1.3; }

/* cycle: the year's BAS and IAS */
.igc-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: calc(5 * var(--u)); }
.igc-m { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); }
.igc-m span { font-size: calc(11 * var(--u)); color: var(--sub); }
.igc-m i { width: 100%; height: calc(46 * var(--u)); border-radius: calc(7 * var(--u)); display: grid; place-items: end center; padding-bottom: calc(5 * var(--u)); font-style: normal; font-size: calc(9.5 * var(--u)); font-weight: 800; color: #fff; transform: scaleY(0); transform-origin: bottom; transition: transform .35s; transition-delay: calc(var(--d) * .09s + .2s); }
.fp-ig.in .igc-m i { transform: none; }
.igc-m i.bas, .igc-key i.bas { background: var(--tc); }
.igc-m i.ias, .igc-key i.ias { background: color-mix(in srgb, var(--tc) 45%, var(--surface-2)); }
.igc-m i.ias { height: calc(30 * var(--u)); }
.igc-key { display: flex; gap: calc(18 * var(--u)); flex-wrap: wrap; font-size: calc(13 * var(--u)); color: var(--sub); }
.igc-key span { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
.igc-key i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(4 * var(--u)); }

/* compare to ATO */
.igcm-drop { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); border: 1.5px dashed color-mix(in srgb, var(--tc) 60%, var(--line)); color: var(--tc); }
.igcm-drop span { color: var(--ink); font-weight: 600; }
.igcm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); }
.igcm-cols div { padding: calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.igcm-cols b { font-size: calc(28 * var(--u)); font-weight: 800; color: var(--tc); line-height: 1; }
.igcm-cols span { font-size: calc(12.5 * var(--u)); color: var(--sub); line-height: 1.35; }
.igcm-act { align-self: flex-start; display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #16A34A; color: #fff; font-weight: 700; font-size: calc(13.5 * var(--u)); }
.fp-ig.in .igcm-act { animation: igPulse 2.4s ease-in-out 1.2s 3; }
@keyframes igPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 50% { box-shadow: 0 0 0 calc(8 * var(--u)) rgba(22,163,74,0); } }

/* payroll split */
.igpy-slip, .igr-to, .igb-letter, .ign-from, .ign-to { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); }
.igpy-slip span { margin-left: auto; font-size: calc(12.5 * var(--u)); color: var(--sub); }
.igpy-parts { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.igpy-parts i { font-style: normal; font-size: calc(13 * var(--u)); font-weight: 600; padding: calc(7 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); opacity: 0; transform: translateY(-8px); transition: opacity .35s, transform .35s; transition-delay: calc(var(--d) * .15s + .3s); }
.fp-ig.in .igpy-parts i { opacity: 1; transform: none; }
.igpy-sum { display: flex; align-items: center; gap: calc(8 * var(--u)); color: #16A34A; font-weight: 700; }

/* rename: the folder renames, the link holds */
.igr-win { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--sub); }
.igr-dots { display: flex; gap: calc(5 * var(--u)); } .igr-dots i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--line); }
.igr-row { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); color: #F59E0B; }
.igr-name { position: relative; height: calc(20 * var(--u)); flex: 1; color: var(--ink); font-weight: 600; }
.igr-name i { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; }
.igr-name .n2 { opacity: 0; }
.fp-ig.in .igr-name .n1 { animation: igrN1 6s infinite; }
.fp-ig.in .igr-name .n2 { animation: igrN2 6s infinite; }
@keyframes igrN1 { 0%, 35% { opacity: 1; } 42%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes igrN2 { 0%, 38% { opacity: 0; } 45%, 92% { opacity: 1; } 100% { opacity: 0; } }
.igr-link { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--tc); font-weight: 600; }
.igr-link span { color: var(--ink); }

/* years: FY labels tick over */
.igy-root { display: flex; align-items: center; gap: calc(10 * var(--u)); color: #F59E0B; }
.igy-root b { color: var(--ink); }
.ig-years ul { list-style: none; margin: 0; padding: 0 0 0 calc(24 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); border-left: 1.5px solid var(--line); margin-left: calc(8 * var(--u)); }
.ig-years li { display: flex; align-items: center; gap: calc(10 * var(--u)); color: #F59E0B; padding-left: calc(10 * var(--u)); }
.ig-years li > span { color: var(--ink); }
.ig-years li em { margin-left: auto; font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 700; color: var(--tc); padding: 2px calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.igy-fy { position: relative; width: calc(72 * var(--u)); height: calc(20 * var(--u)); flex: none; }
.igy-fy i { position: absolute; left: 0; top: 0; font-style: normal; white-space: nowrap; }
.igy-fy .y2 { opacity: 0; transform: translateY(calc(8 * var(--u))); }
.fp-ig.in .igy-fy .y1 { animation: igyOut 6s infinite; }
.fp-ig.in .igy-fy .y2 { animation: igyIn 6s infinite; }
@keyframes igyOut { 0%, 40% { opacity: 1; transform: none; } 48%, 92% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes igyIn { 0%, 42% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* name: the ugly name comes out clean */
.ign-from { color: var(--sub); }
.ign-from span { font-family: ui-monospace, Menlo, monospace; font-size: calc(12.5 * var(--u)); word-break: break-all; }
.ign-arrow { align-self: center; font-weight: 800; color: var(--tc); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.ign-to { color: var(--tc); flex-wrap: wrap; border: 1px solid color-mix(in srgb, var(--tc) 45%, var(--line)); }
.ign-to span { color: var(--ink); font-weight: 700; }
.ign-to em { flex: 1 1 100%; font-style: normal; font-size: calc(12.5 * var(--u)); color: var(--sub); padding-left: calc(25 * var(--u)); }

/* search examples */
.igq { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); color: var(--sub); opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity .4s, transform .4s; transition-delay: calc(var(--d) * .3s + .2s); }
.fp-ig.in .igq { opacity: 1; transform: none; }
.igq code { font-family: ui-monospace, Menlo, monospace; font-size: calc(13.5 * var(--u)); color: var(--ink); padding: 2px calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--surface); border: 1px solid var(--line); }
.igq span { margin-left: auto; font-size: calc(13 * var(--u)); text-align: right; }

/* detect: boxes snap onto the declaration */
.igd-page { position: relative; display: flex; flex-direction: column; gap: calc(9 * var(--u)); padding: calc(20 * var(--u)) calc(22 * var(--u)); border-radius: calc(6 * var(--u)); background: #fff; border: 1px solid #E2E6EC; color: #0E1726; }
.igd-page .l { background: #E6E9EF; }
.igd-page > b { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--u)); }
.igd-line { position: relative; display: flex; align-items: flex-end; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
.igd-line .u { flex: 1; height: 1.5px; background: #0E1726; opacity: .6; margin-bottom: calc(4 * var(--u)); }
.igd-line .u.short { flex: 0 0 calc(120 * var(--u)); }
.igd-box { position: absolute; bottom: calc(4 * var(--u)); height: calc(30 * var(--u)); display: grid; place-items: center; border-radius: calc(6 * var(--u)); font-style: normal; font-size: calc(12 * var(--u)); font-weight: 700; opacity: 0; transform: scale(1.25); transition: opacity .35s, transform .35s cubic-bezier(.2,.9,.3,1.3); }
.igd-box.s { left: calc(72 * var(--u)); right: 0; color: #DB2777; background: rgba(219,39,119,.12); border: 1.5px dashed #DB2777; transition-delay: .6s; }
.igd-box.d { left: calc(48 * var(--u)); width: calc(120 * var(--u)); color: #DB2777; background: rgba(219,39,119,.08); border: 1.5px dashed #DB2777; transition-delay: 1s; }
.fp-ig.in .igd-box { opacity: 1; transform: none; }
.igd-match { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 600; color: var(--tc); }

/* pack: merge, one signature, split back */
.ig-pack { gap: calc(14 * var(--u)); }
.igk-in, .igk-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.igk-in span, .igk-out span { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(9 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--surface-2); font-size: calc(12.5 * var(--u)); font-weight: 600; transition: transform .5s, opacity .5s; transition-delay: calc(var(--d) * .12s); }
.igk-in span { color: var(--ink); }
.igk-out span { color: var(--ink); opacity: 0; transform: translateY(-10px); transition-delay: calc(var(--d) * .15s + 1.1s); }
.igk-out span svg { color: #F59E0B; }
.fp-ig.in .igk-out span { opacity: 1; transform: none; }
.fp-ig.in .igk-in span:nth-child(1) { transform: translateX(calc(8 * var(--u))); } .fp-ig.in .igk-in span:nth-child(3) { transform: translateX(-8px); }
.igk-mid { display: flex; justify-content: center; }
.igk-mid span { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); font-weight: 700; font-size: calc(13 * var(--u)); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }

/* reminders: a daytime band and the six emails */
.igm-band { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(12 * var(--u)); color: var(--sub); }
.igm-band i { flex: 1; height: calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: linear-gradient(90deg, color-mix(in srgb, #F59E0B 30%, transparent), color-mix(in srgb, #F59E0B 70%, transparent), color-mix(in srgb, #F59E0B 30%, transparent)); }
.igm-days { display: grid; grid-template-columns: repeat(6, 1fr); gap: calc(8 * var(--u)); }
.igm-days div { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); opacity: .25; transition: opacity .3s; transition-delay: calc(var(--d) * .3s + .2s); }
.fp-ig.in .igm-days div { opacity: 1; }
.igm-days i { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(12 * var(--u)); display: grid; place-items: center; color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.igm-days .last i { background: var(--tc); color: #fff; }
.igm-days span { font-size: calc(12 * var(--u)); color: var(--sub); }

/* pad: the iPad code fills in */
.ig-pad { flex-direction: row; align-items: center; gap: calc(18 * var(--u)); }
.igpd-ipad { flex: 1; display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); padding: calc(18 * var(--u)) calc(14 * var(--u)); border-radius: calc(22 * var(--u)); border: calc(8 * var(--u)) solid #1b1f27; background: #fff; color: #0E1726; }
.igpd-ipad > span { font-size: calc(13 * var(--u)); color: #4B5568; }
.igpd-code { display: flex; gap: calc(5 * var(--u)); }
.igpd-code i { width: calc(28 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(8 * var(--u)); display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: calc(17 * var(--u)); background: #F1F3F6; color: transparent; transition: color .2s; transition-delay: calc(var(--d) * .3s + .4s); }
.fp-ig.in .igpd-code i { color: #0E1726; }
.igpd-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(5 * var(--u)); }
.igpd-keys i { width: calc(28 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; font-style: normal; font-size: calc(11 * var(--u)); font-weight: 700; background: #EEF1F5; color: #4B5568; }
.igpd-or { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--u)); width: calc(120 * var(--u)); text-align: center; }
.igpd-or > span { font-size: calc(12 * var(--u)); color: var(--sub); }
.igpd-qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; width: calc(84 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(10 * var(--u)); background: #fff; }
.igpd-qr i { aspect-ratio: 1; background: transparent; }
.igpd-qr i.on { background: #0E1726; }

/* burn: digits become a black bar, then the proof */
.igb-letter { flex-direction: column; align-items: stretch; gap: calc(10 * var(--u)); padding: calc(18 * var(--u)); background: #fff; color: #0E1726; border: 1px solid #E2E6EC; }
.igb-letter .l { background: #E6E9EF; }
.igb-row { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); font-size: calc(13 * var(--u)); padding: calc(8 * var(--u)) 0; border-bottom: 1px solid #EEF1F5; }
.igb-tfn { position: relative; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: .04em; }
.igb-tfn .bar { position: absolute; left: -4px; right: -4px; top: -2px; bottom: -2px; background: #0E1726; border-radius: calc(3 * var(--u)); transform: scaleX(0); transform-origin: left; }
.fp-ig.in .igb-tfn .bar { animation: igbBar 6s infinite; }
@keyframes igbBar { 0%, 15% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.igb-proof { display: flex; align-items: center; gap: calc(8 * var(--u)); color: #16A34A; font-weight: 700; opacity: 0; }
.fp-ig.in .igb-proof { animation: igbProof 6s infinite; }
@keyframes igbProof { 0%, 34% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ladder: number match vs name suggestion */
.igl { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); font-size: calc(13.5 * var(--u)); }
.igl b { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
.igl.on b { color: #16A34A; }
.igl.soft { opacity: .7; } .igl.soft b { color: var(--sub); font-weight: 600; }
.igl.stop { background: color-mix(in srgb, #DC2626 12%, var(--surface)); } .igl.stop b { color: #DC2626; }

/* link vs attachment */
.ig-link { flex-direction: row; gap: calc(12 * var(--u)); }
.igk-col { flex: 1; display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface-2); }
.igk-col b { font-size: calc(15 * var(--u)); }
.igk-col span { font-size: calc(13 * var(--u)); color: var(--sub); line-height: 1.4; }
.igk-col.bad { opacity: .75; } .igk-col.bad svg { color: var(--faint); }
.igk-col.good { border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 10%, var(--surface)); } .igk-col.good svg { color: var(--tc); }

/* once: one person, three clients */
.igo-person { display: flex; align-items: center; gap: calc(10 * var(--u)); align-self: center; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface-2); color: var(--tc); }
.igo-person b { color: var(--ink); }
.igo-ok { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 700; color: #16A34A; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: color-mix(in srgb, #16A34A 15%, transparent); }
.igo-lines { position: relative; height: calc(30 * var(--u)); }
.igo-lines i { position: absolute; top: 0; left: 50%; width: 2px; height: calc(30 * var(--u)); background: var(--tc); transform-origin: top center; transform: scaleY(0); transition: transform .5s .3s; }
.igo-lines i:nth-child(1) { rotate: 55deg; } .igo-lines i:nth-child(3) { rotate: -55deg; }
.fp-ig.in .igo-lines i { transform: scaleY(1.4); } .fp-ig.in .igo-lines i:nth-child(2) { transform: scaleY(1); }
.igo-clients { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.igo-clients span { padding: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); border: 1px solid var(--line); font-size: calc(12.5 * var(--u)); font-weight: 600; text-align: center; opacity: 0; transition: opacity .4s; transition-delay: calc(var(--d) * .2s + .8s); }
.fp-ig.in .igo-clients span { opacity: 1; }

/* digits: only the last three */
.igg-card { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(18 * var(--u)); border-radius: calc(14 * var(--u)); background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 22%, var(--surface)), var(--surface-2)); border: 1px solid var(--line); }
.igg-k { font-size: calc(12.5 * var(--u)); color: var(--sub); }
.igg-n { font-size: calc(26 * var(--u)); font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.igg-n b { color: var(--tc); }
.igg-meta { font-size: calc(12.5 * var(--u)); color: var(--sub); }
.ig-digits ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ig-digits li { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13.5 * var(--u)); }
.ig-digits li svg { color: var(--tc); }

/* diary: what falls due */
.igy-r { display: grid; grid-template-columns: calc(130 * var(--u)) 1fr auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); font-size: calc(13 * var(--u)); opacity: 0; transform: translateX(calc(10 * var(--u))); transition: opacity .35s, transform .35s; transition-delay: calc(var(--d) * .18s + .2s); }
.fp-ig.in .igy-r { opacity: 1; transform: none; }
.igy-r span { font-size: calc(11.5 * var(--u)); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tc); }
.igy-r.firm span { color: var(--brand); }
.igy-r em { font-style: normal; color: var(--sub); font-variant-numeric: tabular-nums; }

/* count: the audience narrows */
.igu-pre, .igu-filters { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.igu-pre i, .igu-filters i { font-style: normal; font-size: calc(12.5 * var(--u)); font-weight: 600; padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--surface-2); color: var(--sub); }
.igu-pre i.on { background: var(--tc); color: #fff; }
.igu-filters i { color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }
.igu-send { display: flex; align-items: baseline; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--surface-2); }
.igu-send span { color: var(--sub); }
.igu-num { position: relative; width: calc(68 * var(--u)); height: calc(36 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 800; line-height: 1; color: var(--tc); font-variant-numeric: tabular-nums; }
.igu-num i { position: absolute; left: 0; bottom: 0; font-style: normal; opacity: 0; }
.fp-ig.in .igu-num i:nth-child(1) { animation: iguN1 7s infinite; }
.fp-ig.in .igu-num i:nth-child(2) { animation: iguN2 7s infinite; }
.fp-ig.in .igu-num i:nth-child(3) { animation: iguN3 7s infinite; }
@keyframes iguN1 { 0%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes iguN2 { 0%, 28% { opacity: 0; } 32%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes iguN3 { 0%, 58% { opacity: 0; } 62%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* greet */
.igr-to span { color: var(--sub); font-size: calc(13 * var(--u)); }
.igr-body { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid var(--line); }
.igr-body b { font-size: calc(16 * var(--u)); color: var(--tc); }
.igr-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); font-weight: 600; padding: calc(6 * var(--u)) calc(11 * var(--u)); border-radius: calc(999 * var(--u)); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); }

/* curve: opens and clicks across the day */
.igv-bars { display: flex; align-items: flex-end; gap: calc(8 * var(--u)); height: calc(140 * var(--u)); }
.igv-bars i { position: relative; flex: 1; height: 0; border-radius: calc(6 * var(--u)) calc(6 * var(--u)) 2px 2px; background: color-mix(in srgb, var(--tc) 35%, var(--surface-2)); transition: height .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d) * .08s + .2s); }
.fp-ig.in .igv-bars i { height: var(--h); }
.igv-bars em { position: absolute; left: 0; right: 0; bottom: 0; height: var(--c); border-radius: 0 0 2px 2px; background: var(--tc); }
.igv-axis { display: flex; justify-content: space-between; font-size: calc(12 * var(--u)); color: var(--sub); }
.igv-key { display: flex; gap: calc(16 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--sub); }
.igv-key span { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); }
.igv-key i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: calc(3 * var(--u)); }
.igv-key i.o { background: color-mix(in srgb, var(--tc) 35%, var(--surface-2)); } .igv-key i.c { background: var(--tc); }

/* sms bubble */
.igm-bub { align-self: flex-end; max-width: 90%; padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) calc(4 * var(--u)) calc(18 * var(--u)); background: #2563EB; color: #fff; font-size: calc(14 * var(--u)); line-height: 1.5; }
.igm-meta { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--sub); }

/* ── the soft hero scenes ── */
.amb-hq { position: absolute; inset: 0; overflow: hidden; }
.amb-hq .row { position: absolute; left: 6%; right: 6%; height: calc(30 * var(--u)); border-radius: calc(10 * var(--u)); background: color-mix(in srgb, currentColor 22%, transparent); display: flex; align-items: center; gap: calc(10 * var(--u)); padding: 0 calc(12 * var(--u)); animation: ambRow 12s linear infinite; animation-delay: calc(var(--d) * -2.4s); }
.amb-hq .row b { width: calc(38 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: currentColor; opacity: .5; }
.amb-hq .row em { flex: 1; height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: currentColor; opacity: .25; }
.amb-hq .row:nth-child(3) { animation-name: ambRowLit; }
.amb-hq .pulse { position: absolute; right: 8%; top: 8%; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ambPulse 3s infinite; }
@keyframes ambRow { from { top: 105%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { top: -15%; opacity: 0; } }
@keyframes ambRowLit { from { top: 105%; opacity: 0; } 15% { opacity: 1; } 45% { background: rgba(34,197,94,.35); } 85% { opacity: 1; } to { top: -15%; opacity: 0; } }
@keyframes ambPulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); } 70% { box-shadow: 0 0 0 calc(16 * var(--u)) rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }
.amb-ring { position: absolute; inset: 0; display: grid; place-items: center; }
.amb-ring .handset { position: relative; z-index: 1; width: calc(86 * var(--u)); height: calc(86 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, currentColor 18%, transparent); animation: ambShake 3.2s infinite; }
.amb-ring > i { position: absolute; width: calc(86 * var(--u)); height: calc(86 * var(--u)); border-radius: 50%; border: 2px solid currentColor; opacity: 0; animation: ambWave 3.2s infinite; }
.amb-ring > i:nth-of-type(2) { animation-delay: .5s; } .amb-ring > i:nth-of-type(3) { animation-delay: 1s; }
@keyframes ambWave { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(2.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes ambShake { 0%, 40%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-12deg); } 10%, 20%, 30% { transform: rotate(12deg); } }
.amb-tiles { position: absolute; inset: calc(10 * var(--u)) 4%; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(12 * var(--u)); }
.amb-tiles i { border-radius: calc(10 * var(--u)); background: color-mix(in srgb, var(--faint) 25%, transparent); animation: ambTile 9s infinite; animation-delay: calc(var(--d) * -.6s); }
@keyframes ambTile { 0%, 20% { background: color-mix(in srgb, var(--faint) 25%, transparent); } 35%, 55% { background: rgba(59,130,246,.35); } 70%, 90% { background: rgba(34,197,94,.4); } 100% { background: color-mix(in srgb, var(--faint) 25%, transparent); } }
.amb-folders { position: absolute; inset: 0; }
.amb-folders span { position: absolute; left: 50%; top: 0; color: #F59E0B; animation: ambFold 10s infinite; animation-delay: calc(var(--d) * -2s); }
@keyframes ambFold { 0% { transform: translate(calc(-50% + calc(120 * var(--u))), -10px) rotate(18deg); opacity: 0; } 20% { opacity: .9; } 60% { transform: translate(-50%, calc(150 * var(--u))) rotate(0); opacity: .9; } 80%, 100% { transform: translate(-50%, calc(190 * var(--u))) rotate(0); opacity: 0; } }
.amb-sig { position: absolute; inset: calc(20 * var(--u)) 0; width: 100%; height: calc(100% - calc(40 * var(--u))); }
.amb-sig path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ambSig 7s ease-in-out infinite; }
@keyframes ambSig { 0% { stroke-dashoffset: 100; opacity: 1; } 55% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.amb-env { position: absolute; inset: 0; overflow: hidden; }
.amb-env .env { position: absolute; top: 50%; left: 0; transform: translate(-60px, -50%); animation: ambEnv 7s linear infinite; }
.amb-env .scan { position: absolute; top: 15%; bottom: 15%; left: 55%; width: 2px; background: currentColor; box-shadow: 0 0 calc(18 * var(--u)) currentColor; }
.amb-env .bar { position: absolute; top: calc(50% + 2px); left: 55%; height: calc(9 * var(--u)); width: 0; background: var(--ink); border-radius: 2px; animation: ambBar 7s linear infinite; }
@keyframes ambEnv { from { transform: translate(-60px, -50%); } to { transform: translate(calc(520 * var(--u)), -50%); } }
@keyframes ambBar { 0%, 45% { width: 0; opacity: 0; } 55% { width: calc(34 * var(--u)); opacity: .8; } 80% { width: calc(34 * var(--u)); opacity: 0; } 100% { width: 0; opacity: 0; } }
.amb-shields { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; }
.amb-shields span { opacity: .35; animation: ambShield 6s infinite; animation-delay: calc(var(--d) * .9s); }
@keyframes ambShield { 0%, 30% { opacity: .3; color: var(--faint); transform: scale(1); } 40%, 70% { opacity: 1; color: currentColor; transform: scale(1.12); } 80%, 100% { opacity: .3; color: var(--faint); transform: scale(1); } }
.amb-fan { position: absolute; inset: 0; display: grid; place-items: center; }
.amb-fan > b { position: relative; z-index: 1; width: calc(66 * var(--u)); height: calc(66 * var(--u)); border-radius: calc(18 * var(--u)); display: grid; place-items: center; background: color-mix(in srgb, currentColor 20%, transparent); }
.amb-fan span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); opacity: 0; animation: ambFan 5s ease-out infinite; animation-delay: calc(var(--d) * .7s); }
@keyframes ambFan { 0% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-120px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fp-amb *, .fp-ig *, .fp-flow *, .fp-flow ol::after { animation: none !important; transition: none !important; }
  .fp-ig .ig, .fp-shot { opacity: 1; transform: none; }
  .iga-toast.is-b, .igs-done, .igb-proof { opacity: 0; }
}
@media (max-width: 980px) {
  .fp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fp-amb { display: none; }
  .fp-spot { grid-template-columns: minmax(0, 1fr); gap: calc(26 * var(--u)); }
  .fp-spot.flip > .fp-tx { order: 0; }
  .fp-gems-g, .fp-cards { grid-template-columns: minmax(0, 1fr); }
  .detail-body .fp-flow ol { grid-template-columns: minmax(0, 1fr); gap: calc(18 * var(--u)); }
  .fp-flow ol::before, .fp-flow ol::after { display: none; }
  .detail-body .fp-more ul { grid-template-columns: minmax(0, 1fr); }
  .fp-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) { .ig { padding: calc(16 * var(--u)); } .ig-link, .ig-pad { flex-direction: column; } .igy-r { grid-template-columns: 1fr auto; } .igy-r span { grid-column: 1 / -1; } }

/* the feature pages grow with the window exactly like the headline above them: 1 unit = 1px at 1440 wide */
@media (min-width: 1100px) { .scaled .detail-body { --u: clamp(1px, .0694vw, 2.4px); } }

/* a wide table grab gets the full row under its words, not half a column */
.fp-spot.wide { grid-template-columns: minmax(0, 1fr); gap: calc(28 * var(--u)); }
.fp-spot.wide > .fp-tx { order: 0; max-width: calc(760 * var(--u)); }
.scaled .detail-body .ig ul { gap: calc(10 * var(--u)); }
.scaled .detail-body .fp-tx ul, .scaled .detail-body .fp-more ul { gap: calc(10 * var(--u)) calc(40 * var(--u)); }
/* icons follow the text they sit in, so a big screen doesn't shrink them to dots */
.fp-tx li svg, .fp-more li svg { width: 1em; height: 1em; }
.fp-gems-h svg, .fp-tag svg { width: 1.25em; height: 1.25em; }
.ig svg { width: 1.15em; height: 1.15em; flex: none; }

/* transfer: a client checklist, each item settling in turn (Files → Secure Transfers) */
.igt-head { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); color: #CA8A04; }
.igt-head > div { display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.igt-head b { color: var(--ink); }
.igt-head span { font-size: .9em; color: var(--sub); }
.detail-body .ig-transfer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.detail-body .ig-transfer li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--surface-2); }
.ig-transfer li > span:nth-child(2) { color: var(--ink); }
.igt-i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; }
.ig-transfer li.ok .igt-i { background: #16A34A; color: #fff; }
.ig-transfer li.rej .igt-i { background: color-mix(in srgb, #D97706 22%, transparent); color: #D97706; }
.ig-transfer li.wait .igt-i { background: transparent; border: 1.5px dashed var(--line); color: var(--faint); }
.ig-transfer li em { font-style: normal; font-size: .86em; font-weight: 600; padding: calc(3 * var(--u)) calc(9 * var(--u)); border-radius: 999px; white-space: nowrap; opacity: 0; transform: translateX(calc(6 * var(--u))); transition: opacity .35s, transform .35s; transition-delay: calc(var(--d) * .45s + .4s); }
.fp-ig.in .ig-transfer li em { opacity: 1; transform: none; }
.ig-transfer li.ok em { color: #16A34A; background: color-mix(in srgb, #16A34A 15%, transparent); }
.ig-transfer li.rej em { color: #D97706; background: color-mix(in srgb, #D97706 16%, transparent); }
.ig-transfer li.wait em { color: var(--sub); background: color-mix(in srgb, var(--faint) 18%, transparent); }
.fp-ig.in .ig-transfer li.wait em { animation: igtWait 2.4s ease-in-out 2.4s infinite; }
@keyframes igtWait { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.igt-foot { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: .92em; color: var(--sub); }
.igt-foot svg { color: #F59E0B; }
.igt-foot b { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .detail-body .ig-transfer li { grid-template-columns: auto minmax(0, 1fr); } .ig-transfer li em { grid-column: 2; justify-self: start; } }

footer .fine { margin: 6px 0 0; font-size: 13px; color: var(--faint); }
.talk-first { margin: 18px 0 0; font-size: 16px; color: var(--sub); }
.talk-first a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }

/* ── phones and small tablets: the pricing cards stack, the header buttons stay on one line ── */
.nav-demo, .nav .btn { white-space: nowrap; }
@media (max-width: 980px) { .pv-wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .nav .inner { gap: 12px; height: 64px; justify-content: space-between; }
  .nav .right { gap: 10px; }
  .nav .btn { padding: 9px 14px; font-size: 14px; }
}

/* ── Support runs as wide as the header, so its sidebar sits under the logo ── */
.inner.sup { max-width: 1520px; }
.sup-page { --tc: var(--brand); }
@media (min-width: 1100px) {
  .sup-page { padding-left: max(20px, 3vw); padding-right: max(20px, 3vw); }
  .inner.sup { max-width: max(1520px, 86vw); }
}
@media (min-width: 2000px) {
  .sup-side { top: 88px; }
  .sup-side-in { max-height: calc(100vh - 88px); }
}
/* a phone gets the search; the topics are the cards on the Support home, and the pager below an article */
@media (max-width: 900px) { .sup-nav { display: none; } }
.sup-search svg { flex: none; }
.sup-search input::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.sup-results[hidden], .sup-hub[hidden], .sup-none[hidden] { display: none; }
.sup-none { margin-top: 24px; color: var(--sub); }
.sup-none a { color: var(--brand); }
.sup-cta-direct { flex-basis: 100%; font-size: 15px; font-weight: 400; color: var(--sub); }
.sup-cta p.sup-cta-direct { font-size: 15px; font-weight: 400; }
.sup-cta-direct a { color: var(--ink); }
.sup-fine { margin: 32px 0 0; font-size: 13px; color: var(--faint); }
.sup-pn span:empty { display: block; }

/* ── Contact: one narrow column, close to the footer ── */
.ct-page { padding-block: 64px 48px; }
body > main.ct-page { min-height: 0; }
.ct-in { max-width: 560px; margin: 0 auto; }
.ct-in h1 { font-size: clamp(34px, 4vw, 48px); font-weight: 800; line-height: 1.05; }
.ct-lede { margin: 14px 0 0; font-size: 19px; color: var(--sub); }
.ct-form { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.ct-form[hidden], .ct-sent[hidden] { display: none; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ct-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ct-f label { font-size: 14px; font-weight: 600; color: var(--sub); }
.ct-f input, .ct-f textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; width: 100%; }
.ct-f textarea { resize: vertical; min-height: 140px; }
.ct-f input::placeholder, .ct-f textarea::placeholder { color: var(--faint); }
.ct-f input:focus, .ct-f textarea:focus { outline: none; border-color: var(--brand); }
.ct-form .btn { align-self: flex-start; }
.ct-sent { margin-top: 32px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.ct-sent h2 { font-size: 24px; font-weight: 700; }
.ct-sent p { margin: 10px 0 0; color: var(--sub); }
.ct-sent a, .ct-alt a { color: var(--brand); }
.ct-alt { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--sub); }
.ct-alt p { margin: 0 0 6px; }
.ct-alt p:last-child { margin-bottom: 0; }
@media (max-width: 560px) { .ct-row { grid-template-columns: minmax(0, 1fr); } }
/* the gap above the footer on the support pages */
.sup { padding-bottom: 48px; }
.sup-h2 { color: var(--ink); }
@media (max-width: 560px) { .sup-ah { flex-direction: column; gap: 12px; } .sup-ah .ic { margin-top: 0; } }

footer .foot-more { flex-basis: 100%; gap: 6px 18px; font-size: 13px; }
footer .foot-more a:hover, footer nav a:hover { color: var(--ink); }

/* ── Product pages: one reading column, the site's cards and type ── */
.lp .wrap { max-width: 880px; margin: 0 auto; }
.lp a.inline, .lp .faq-a a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lp .hero { padding-block: 64px 48px; display: block; min-height: 0; }
.lp .eyebrow { display: block; margin-bottom: 18px; }
.lp .eyebrow svg { display: none; }
.lp .hero h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; line-height: 1.05; }
.lp .hero h1 em { display: inline; font-style: normal; color: var(--brand); }
.lp .hero .lede { font-size: 20px; line-height: 1.5; color: var(--sub); margin: 20px 0 0; max-width: none; }
.lp .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.lp .btn svg { width: 16px; height: 16px; flex: none; }
.lp-note { font-size: 14px; color: var(--faint); margin-top: 14px; }
.lp section.block p.lp-note { font-size: 14px; color: var(--faint); margin-top: 14px; }
.lp-note.is-center, .lp section.block p.lp-note.is-center { text-align: center; }
.lp section.block { padding-block: 56px; border-top: 1px solid var(--line); scroll-margin-top: 72px; color: var(--sub); }
.lp section.block h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.12; color: var(--ink); margin-bottom: 16px; }
.lp section.block h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 28px 0 8px; }
.lp section.block p { font-size: 17px; line-height: 1.65; color: var(--sub); margin: 0 0 14px; }
.lp section.block strong { color: var(--ink); font-weight: 600; }
.lp .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.lp .card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.lp .card .ic { width: 26px; height: 26px; color: var(--brand); margin-bottom: 12px; }
.lp .card h4 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.lp section.block .card p { font-size: 15px; line-height: 1.55; margin: 0; }
.lp .steps { margin: 26px 0 8px; }
.lp .step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--brand); background: var(--brand-soft); font-variant-numeric: tabular-nums; }
.lp .step-b h4 { font-size: 16.5px; font-weight: 700; color: var(--ink); margin: 3px 0 4px; }
.lp section.block .step-b p { font-size: 15.5px; line-height: 1.55; margin: 0; }
.lp ul.ticks { list-style: none; margin: 16px 0 20px; padding: 0; }
.lp ul.ticks li { position: relative; padding-left: 30px; margin-bottom: 12px; font-size: 16px; line-height: 1.55; color: var(--sub); }
.lp ul.ticks li svg { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; color: var(--brand); }
.lp .callout { color: var(--sub); line-height: 1.6; }
.lp details.faq summary { font-size: 17px; }
.lp .faq-a { font-size: 16px; line-height: 1.6; }
.lp .closing { text-align: center; padding-block: 64px 48px; border-top: 1px solid var(--line); }
.lp .closing h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.1; }
.lp .closing p { font-size: 18px; color: var(--sub); margin: 12px 0 26px; }
.lp .closing p.fine-print, .lp .fine-print { font-size: 13px; color: var(--faint); margin: 26px 0 0; }
/* the mock-ups */
.lp .chat { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin: 40px 0 8px; }
.lp .chat .bubble { max-width: none; padding: 0; border-radius: 0; margin-bottom: 16px; background: none; }
.lp .chat .bubble:last-child { margin-bottom: 0; }
.lp .chat .who { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.lp .chat .you .msg { color: var(--ink); font-size: 16px; }
.lp .chat .ai { display: block; font-weight: 400; }
.lp .chat .ai .msg { color: var(--sub); font-size: 16px; line-height: 1.6; background: var(--surface-2); border-left: 2px solid var(--brand); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.lp .chat .ai .msg strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp .chat .tool { display: flex; grid-template-columns: none; align-items: center; gap: 6px; padding: 0; border: 0; font-size: 13px; color: var(--faint); margin-top: 8px; }
.lp .chat .tool svg { width: 14px; height: 14px; color: var(--brand); flex: none; }
.lp .vs, .lp .swap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.lp .vs-col { border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; background: var(--surface); }
.lp .vs-col.good { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.lp .vs-h { font-size: 14px; font-weight: 700; margin-bottom: 14px; color: var(--ink); }
.lp .vs-col.good .vs-h { color: var(--brand); }
.lp .vs-col ul, .lp .swap-col ul { list-style: none; margin: 0; padding: 0; }
.lp .vs-col li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: var(--sub); margin-bottom: 11px; }
.lp .vs-col li:last-child { margin-bottom: 0; }
.lp .vs-col li svg { position: absolute; left: 0; top: 3px; width: 15px; height: 15px; color: var(--faint); }
.lp .vs-col.good li svg { color: var(--brand); }
.lp .deadline, .lp .band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 40px 0 8px; }
.lp .deadline .cell, .lp .band .cell { background: var(--surface); padding: 22px 20px; }
.lp .deadline .date { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp .deadline .what { font-size: 14px; color: var(--sub); margin-top: 6px; line-height: 1.45; }
.lp .band .cell { text-align: center; }
.lp .band .big { font-size: 34px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.lp .band .cap { font-size: 14px; color: var(--sub); margin-top: 6px; line-height: 1.4; }
.lp .tl, .lp .scene { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px; margin: 40px 0 8px; }
.lp .scene { margin: 24px 0; }
.lp .tl-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.lp .tl-avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.lp .tl-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.lp .tl-sub, .lp .tl-when { font-size: 13px; color: var(--faint); }
.lp .tl-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp .tl-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; }
.lp .tl-item:not(:last-child) { border-bottom: 1px solid var(--line); }
.lp .tl-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.lp .tl-ic svg { width: 13px; height: 13px; }
.lp .tl-ic.call { color: #60A5FA; background: color-mix(in srgb, #60A5FA 16%, transparent); }
.lp .tl-ic.mail { color: var(--brand); background: var(--brand-soft); }
.lp .tl-ic.sms { color: #34D399; background: color-mix(in srgb, #34D399 16%, transparent); }
.lp .tl-ic.sign { color: #F472B6; background: color-mix(in srgb, #F472B6 16%, transparent); }
.lp .tl-ic.ato { color: #FBBF24; background: color-mix(in srgb, #FBBF24 16%, transparent); }
.lp .tl-txt { font-size: 15px; color: var(--sub); line-height: 1.5; }
.lp .tl-txt strong { color: var(--ink); font-weight: 600; }
.lp section.block .scene p { margin: 0; }
.lp .scene .qm, .lp .scene .quote-mark { display: block; font-size: 40px; color: var(--brand); line-height: .5; margin-bottom: 6px; }
.lp .sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 22px 0; }
.lp .src { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; color: var(--sub); }
.lp .src svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.lp .src b { color: var(--ink); font-weight: 600; }
.lp .segs { display: flex; flex-wrap: wrap; gap: 10px; margin: 36px 0 8px; }
.lp .seg { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: 15px; color: var(--sub); }
.lp .seg b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.lp .seg .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.lp .shot { display: block; width: 100%; height: auto; margin: 28px 0 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.lp .shot img { display: block; width: 100%; height: auto; }
.lp .shot figcaption { padding: 10px 16px; font-size: 14px; color: var(--faint); }
.lp .wipm { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 40px 0 8px; }
.lp .wipm-head, .lp .wipm-row { display: grid; grid-template-columns: 1.6fr 1fr .7fr 120px; gap: 12px; padding: 12px 18px; align-items: center; }
.lp .wipm-head { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--line); }
.lp .wipm-row { border-bottom: 1px solid var(--line); font-size: 15px; }
.lp .wipm-row:last-child { border-bottom: 0; }
.lp .wipm-c { color: var(--ink); font-weight: 500; }
.lp .wipm-s, .lp .wipm-d { color: var(--sub); font-size: 14px; }
.lp .wipm-d { font-variant-numeric: tabular-nums; }
.lp .pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 99px; white-space: nowrap; justify-self: end; }
.lp .pill.review { color: var(--brand); background: var(--brand-soft); }
.lp .pill.q { color: #FBBF24; background: color-mix(in srgb, #FBBF24 15%, transparent); }
.lp .pill.sign { color: #F472B6; background: color-mix(in srgb, #F472B6 15%, transparent); }
.lp .pill.done { color: var(--good); background: color-mix(in srgb, var(--good) 15%, transparent); }
.lp .swap { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; align-items: stretch; margin: 40px 0 8px; }
.lp .swap-col { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px 24px; }
.lp .swap-col.in { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); }
.lp .swap-label { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.lp .swap-col.in .swap-label { color: var(--brand); }
.lp .swap-col li { display: flex; align-items: center; gap: 9px; font-size: 15px; padding: 7px 0; color: var(--sub); }
.lp .swap-col.out li { color: var(--faint); text-decoration: line-through; }
.lp .swap-col li svg { width: 14px; height: 14px; flex: none; color: var(--faint); }
.lp .swap-col.in li svg { color: var(--brand); }
.lp .swap-arrow { display: flex; align-items: center; justify-content: center; color: var(--faint); }
.lp .swap-arrow svg { width: 28px; height: 28px; }
.lp .flowline { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 28px 0 8px; }
.lp .flowbox { padding: 14px 22px; border-radius: 12px; font-size: 15px; font-weight: 600; text-align: center; background: var(--surface); }
.lp .flowbox.xero { color: #13B5EA; box-shadow: inset 0 0 0 1px #13B5EA; }
.lp .flowbox.ohq { color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.lp .flowarrow { color: var(--faint); font-size: 13px; text-align: center; line-height: 1.3; }
.lp .flowarrow .big { font-size: 18px; letter-spacing: 2px; }
.lp .aml-note { margin-top: 10px; text-align: center; font-size: 13px; color: var(--faint); }
@media (max-width: 700px) {
  .lp .hero { padding-block: 44px 36px; }
  .lp .hero .lede { font-size: 18px; }
  .lp .cards, .lp .vs, .lp .deadline, .lp .band, .lp .sources, .lp .swap { grid-template-columns: minmax(0, 1fr); }
  .lp .swap-arrow { transform: rotate(90deg); padding: 4px 0; }
  .lp .wipm-head { display: none; }
  .lp .wipm-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .lp .wipm-s, .lp .wipm-d { grid-column: 1; }
  .lp .tl-item { grid-template-columns: 24px minmax(0, 1fr); }
  .lp .tl-when { grid-column: 2; }
  .lp .tl, .lp .scene { padding: 20px; }
}

/* ── Privacy and Terms ── */
.legal { padding-block: 64px 48px; }
.legal-in { max-width: 780px; margin: 0 auto; }
.legal h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; line-height: 1.05; }
.legal .effective-date { margin: 14px 0 0; font-size: 15px; color: var(--faint); }
.legal-header { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-body { color: var(--sub); font-size: 16.5px; line-height: 1.65; }
.legal-body h2 { font-size: 26px; font-weight: 700; color: var(--ink); margin: 44px 0 12px; }
.legal-body h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 26px 0 8px; }
.legal-body p { margin: 0 0 14px; }
.legal-body ul { margin: 0 0 16px; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body li::marker { color: var(--brand); }
.legal-body strong { color: var(--ink); font-weight: 600; }
.legal-body a { color: var(--brand); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body .section-num { color: var(--brand); margin-right: 4px; }

/* ── The 404 ── */
.err { padding-block: 72px; display: flex; align-items: center; }
.err-in { max-width: 620px; margin: 0 auto; width: 100%; text-align: center; }
.err-code { font-size: clamp(96px, 16vw, 168px); font-weight: 800; line-height: .95; color: var(--brand); font-variant-numeric: tabular-nums; }
.err-sub { margin: 14px 0 0; font-size: 24px; font-weight: 700; color: var(--ink); }
.err-box { margin-top: 32px; padding: 22px 24px; min-height: 124px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.err-label { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.err-text { font-size: 17px; line-height: 1.5; color: var(--ink); }
.err-prompt { color: var(--brand); }
.err-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--brand); animation: err-blink 1s steps(1) infinite; }
@keyframes err-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .err-caret { animation: none; } }
.err-cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 28px; }