/* =========================================================================
   CA PRO Toolkit - caprotoolkit.in, stylesheet v33 (2026-10-04)
   v33 is v32 with the features page's GSTR downloader scene (ledger task DS7) at the bottom of
   the sheet: a client's tray drawn in CSS 3D, the months dropping in once and in order, and
   September held above its empty place as Needs you. No WebGL and no library; a still image
   stands in on phones and under reduced motion.

   CA PRO Toolkit - caprotoolkit.in, stylesheet v32 (2026-10-03)
   v32 is v31 with DS4 carried to every page: on a touch screen every button and the features
   page's category chips are at least 44px tall (the sweep after v31 found 40px buttons and 36px
   chips on features.html and download.html), and the download page's Windows download gives way
   to Send me the link on a phone, as the install buttons already did.

   CA PRO Toolkit - caprotoolkit.in, stylesheet v31 (2026-10-03)
   v31 is v30 with the phone fixes of ledger task DS4, each made at the rule that caused it:
     - the proof strip's icons no longer sit on their own figures on phones (and on narrower
       desktops): the icon has its own grid column instead of a padding the divider rule overrode;
     - the standards chip stack steps up by more than one chip's height, so no label is hidden;
     - on a touch phone, where a Chrome extension and a Windows installer cannot be installed,
       the install buttons give way to "Send me the link" (and site-v23.js wires it);
     - header and footer controls are at least 44px tall.
   (v30's header follows; v30 is v29 plus the site-wide lift at the bottom of the sheet.)

   CA PRO Toolkit - caprotoolkit.in, stylesheet v30 (2026-09-28)
   (v29's header follows; v30 is v29 plus the site-wide lift at the bottom of the sheet.)

   v22-v28 are the redesign: one header everywhere, content on the page rather than in boxes,
   one typeface, brand teal and green used for meaning, and (v28) 3D objects drawn in CSS from
   the product. v29 (this sheet) answers the owner's next ask: the animation should be the
   first thing a visitor sees, and it should explain the product.

     - the hero is now a looping 3D story, pure CSS, no library: a bank statement is read row
       by row under a scan line, every running balance gets its proof mark, the verdict turns
       green, and Excel and Tally-voucher cards fly out - then it resets and loops. The scene
       tilts a few degrees with the pointer (JS sets two custom properties, nothing else);
     - sections reveal on scroll with a small stagger, but only when JavaScript has confirmed
       motion is wanted (html.motion-ok): without JavaScript, under prefers-reduced-motion and
       in print, everything is simply visible;
     - everything from v28 stands: the orbit, the cubes, the shield, the installer box, the
       deck, the proof strip.

   Token names are kept from v21 so the Workspace layer at the end carries over unchanged.
   ========================================================================= */

:root {
  --bg: #fbfaf7;
  --band: #f4f1e8;
  --cream: #f4eedb;
  --cream-soft: #faf7ee;
  --cream-strong: #e9dfbf;
  --surface: #ffffff;
  --paper: #ffffff;
  --surface-2: #f8f6ef;
  --row-hover: #f2efe4;

  --teal: #177184;
  --teal-dark: #0f5260;
  --teal-deep: #0a3f4b;
  --teal-soft: #e4f0f2;
  --green: #119d75;
  --green-dark: #0b7155;
  --green-soft: #e1f3eb;

  --ink: #13262c;
  --ink-2: #2f4b53;
  --muted: #56696f;
  --line: #e0dbcd;
  --line-soft: #ebe7dc;
  --line-strong: #cdc6b3;

  --on-dark: #eef6f6;
  --on-dark-muted: #b3cbcf;
  --on-dark-line: rgba(238,246,246,0.16);

  --grad: linear-gradient(90deg, var(--teal) 0%, var(--green) 100%);

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(19,38,44,0.06);
  --sh-md: 0 1px 2px rgba(19,38,44,0.05), 0 8px 24px -6px rgba(19,38,44,0.14);
  --sh-lg: 0 1px 2px rgba(19,38,44,0.05), 0 18px 48px -12px rgba(19,38,44,0.22);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 140ms;
  --base: 220ms;

  --maxw: 1240px;
  --gutter: 32px;
  --nav-h: 64px;
  --section: 88px;
  --section-tight: 64px;
  --font: "IBM Plex Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  /* Semantic status tokens: one palette, defined once. The workspace's banners, chips, rows and
     marks use these, never a hard-coded colour. Text pairs meet 4.5:1 on their soft backgrounds. */
  --ok: #0b7155;
  --ok-strong: #119d75;
  --ok-soft: #dff2ea;
  --ok-line: #a8dcc7;
  --warn: #7c5200;
  --warn-strong: #c98a00;
  --warn-soft: #fff4d6;
  --warn-line: #efd28c;
  --bad: #a8322a;
  --bad-strong: #c0392b;
  --bad-soft: #fdecea;
  --bad-line: #f3c1bb;
  --bad-wash: #fff9f8;
  --info: #0f5260;
  --info-soft: #deedf0;
  --info-line: #bcd9df;
}

@media (max-width: 1024px) { :root { --gutter: 24px; --section: 64px; --section-tight: 48px; } }
@media (max-width: 480px) { :root { --gutter: 16px; --section: 48px; --section-tight: 36px; --nav-h: 58px; } }

/* ---------- Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.6; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
button, input, select, textarea { font: inherit; }
code { font-family: var(--mono); font-size: 0.92em; }
::selection { background: rgba(23,113,132,0.18); color: var(--teal-deep); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.1rem, 1.55rem + 2.4vw, 3.4rem); line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); line-height: 1.14; }
h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.01em; }
h4 { font-size: 1rem; line-height: 1.4; letter-spacing: 0; }
p { margin: 0; }
.lead { font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.6; color: var(--muted); margin-top: 16px; max-width: 64ch; }
.eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; color: var(--teal-dark); margin: 0 0 10px; }
.kicker { font-size: 0.875rem; font-weight: 600; color: var(--teal-dark); margin: 0 0 10px; }
.num { font-variant-numeric: tabular-nums; }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--teal-dark); color: #fff; padding: 10px 16px; border-radius: var(--r-md); font-weight: 600; transition: top var(--fast) var(--ease); }
.skip-link:focus { top: 12px; color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Layout ---------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section-tight { padding-block: var(--section-tight); }
.band { background: var(--band); border-block: 1px solid var(--line-soft); }
.band-dark { background: var(--teal-deep); color: var(--on-dark); }
.band-dark h2, .band-dark h3, .band-dark h4 { color: #fff; }
.band-dark .lead, .band-dark p { color: var(--on-dark-muted); }
.band-dark .eyebrow, .band-dark .kicker { color: #8fd8c6; }
.band-dark a:not(.btn) { color: #bfe9de; }
.section + .section:not(.band):not(.band-dark):not(.cta-band) { border-top: 1px solid var(--line-soft); }

.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h1 + .lead, .section-head h2 + .lead { margin-top: 14px; }
.section-head:last-child { margin-bottom: 0; }
.section-head h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lead { margin-inline: auto; }
.more-link { margin-top: 32px; font-weight: 600; }
.more-link a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.more-link a:hover { text-decoration: underline; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--top { align-items: start; }
.split-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
@media (min-width: 1025px) { .split-head > :first-child { position: sticky; top: calc(var(--nav-h) + 32px); } }

/* ---------- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: var(--r-md); font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn i { font-size: 1.1em; }
.btn-lg { min-height: 48px; padding: 12px 22px; font-size: 1rem; }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 0.875rem; gap: 6px; }
.btn-primary { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-primary:active { background: var(--teal-deep); }
.btn-secondary, .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--teal); color: var(--teal-dark); }
.btn-on-dark { background: #fff; color: var(--teal-deep); }
.btn-on-dark:hover { background: var(--teal-soft); color: var(--teal-deep); }
.btn-outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-outline-dark:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; }
.btn[disabled], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.hide-sm { display: inline; }

/* ---------- Header ---------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 100; height: var(--nav-h); border-bottom: 1px solid var(--line); }
/* The blur sits on a layer behind the header, not on the header: a backdrop-filter on the header itself
   would become the containing block of the fixed phone menu and squeeze it into the header's 64px. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(251,250,247,0.94);
  -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px);
}
.site-header.is-scrolled { box-shadow: 0 6px 18px -12px rgba(19,38,44,0.35); }
.site-header .container { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; min-height: 44px; color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav-links > a:hover { color: var(--teal-dark); background: var(--row-hover); }
.nav-links > a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links > a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: calc((var(--nav-h) - 44px) / -2 - 1px); height: 2px; background: var(--teal); }
.nav-mobile-cta { display: none; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 1.35rem; cursor: pointer; }
.nav-toggle:hover { border-color: var(--teal); color: var(--teal-dark); }

/* ---------- Access Workspace: the same menu as the Windows app and the extension ---------- */
.ws-tools-menu { position: relative; }
.ws-tools-menu > summary { list-style: none; }
.ws-tools-menu > summary::-webkit-details-marker { display: none; }
.ws-tools-button .ws-caret { font-size: 0.85em; transition: transform var(--fast) var(--ease); }
.ws-tools-menu[open] > .ws-tools-button { border-color: var(--teal); color: var(--teal-dark); background: var(--teal-soft); }
.ws-tools-menu[open] > .ws-tools-button .ws-caret { transform: rotate(180deg); }
.ws-tools-panel {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 120; width: min(400px, calc(100vw - 2 * var(--gutter)));
  padding: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
}
.ws-tools-heading { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
.ws-tools-note { margin: 4px 0 12px; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.ws-tools-list { display: grid; gap: 6px; }
.ws-tool { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.ws-tool:hover { border-color: var(--teal); background: var(--teal-soft); color: var(--ink); }
.ws-tool[aria-current="page"] { border-color: var(--teal); }
.ws-tool-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; font-size: 0.9375rem; color: var(--teal-deep); }
.ws-tool-title::after { content: "\2192"; color: var(--teal); font-weight: 500; }
.ws-tool[aria-current="page"] .ws-tool-title::after { content: "Open"; font-size: 0.75rem; font-weight: 600; color: var(--teal-dark); background: var(--teal-soft); border-radius: var(--r-pill); padding: 1px 8px; }
.ws-tool-text { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }

/* ---------- Home: hero ------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 88px) clamp(48px, 6vw, 96px); }
/* Ledger paper under the hero: a faint grid and one soft wash of teal, deepest behind the
   product screen and gone before the first section. Static, decorative, cheaper than a canvas. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 46% at 74% 32%, rgba(23,113,132,0.08), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(19,38,44,0.03) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(19,38,44,0.03) 31px 32px);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 12fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { min-width: 0; }
.hero-kicker { font-size: 0.9375rem; font-weight: 600; color: var(--teal-dark); margin-bottom: 16px; }
.hero h1 { max-width: 16ch; }
/* One accented word: the product's whole promise - everything is checked - in the brand gradient. */
.hero h1 .hl { font-style: normal; background: linear-gradient(90deg, var(--teal-dark), var(--green-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 52ch; margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); font-size: 0.9375rem; }
.hero-facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero-facts i { color: var(--green-dark); font-size: 1.05rem; }
.hero-note { margin-top: 12px; font-size: 0.875rem; color: var(--muted); }
.hero-visual { margin: 0; min-width: 0; }
.visual-caption { margin-top: 10px; font-size: 0.8125rem; color: var(--muted); text-align: right; }
.band-dark .visual-caption { color: var(--on-dark-muted); }

/* ---------- Product windows: drawn in HTML, with sample figures ----------------- */
.app-window { min-width: 0; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; font-size: 0.875rem; }
.aw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: #f7f5ef; }
.aw-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; font-size: 0.875rem; color: var(--ink); }
.aw-title i { color: var(--teal); font-size: 1.1rem; }
.aw-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-sub { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.aw-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.aw-tab { padding: 9px 10px 8px; border-bottom: 2px solid transparent; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.aw-tab.is-on { color: var(--teal-dark); border-bottom-color: var(--teal); font-weight: 600; }
.aw-scroll { overflow-x: auto; }
.aw-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.aw-table th { padding: 8px 14px; background: #fbfaf6; border-bottom: 1px solid var(--line-soft); color: var(--muted); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-align: left; white-space: nowrap; }
.aw-table td { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); font-size: 0.8125rem; white-space: nowrap; }
.aw-table tr:last-child td { border-bottom: 0; }
.aw-table .n { text-align: right; }
.aw-table .dim { color: var(--muted); }
.aw-name { font-weight: 500; color: var(--ink); }
.aw-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 600; }
.aw-status--ok { color: var(--ok); background: var(--ok-soft); }
.aw-status--warn { color: var(--warn); background: var(--warn-soft); }
.aw-status--bad { color: var(--bad); background: var(--bad-soft); }
.aw-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 10px 16px; border-top: 1px solid var(--line-soft); background: #fbfaf6; font-size: 0.75rem; color: var(--muted); }
.aw-foot strong { color: var(--ink-2); font-weight: 600; }
.aw-result { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--ok-line); background: var(--ok-soft); color: var(--ok); font-size: 0.8125rem; font-weight: 600; }
.aw-result i { font-size: 1.15rem; }
.aw-topic { padding: 16px; border-bottom: 1px solid var(--line-soft); }
.aw-topic b { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.aw-topic span { font-size: 0.75rem; color: var(--muted); }
.aw-sa { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); background: var(--teal-soft); color: var(--teal-dark); font-size: 0.72rem; font-weight: 600; }
.aw-sa--g { background: var(--green-soft); color: var(--green-dark); }

/* ---------- Home: the plain-language answer ----------------------------------- */
.answer-block { font-size: 1.0625rem; color: var(--ink-2); }
.answer-block > p { max-width: 70ch; }
.answer-block dl { margin: 28px 0 0; display: grid; }
.answer-block dl > div { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
.answer-block dt { font-weight: 600; color: var(--ink); }
.answer-block dd { margin: 0; color: var(--muted); font-size: 1rem; }

/* ---------- Home: the tools, as an index rather than a wall of cards ---------------- */
.tool-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.tool { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: 22px 0 24px; border-top: 1px solid var(--line); }
.tool > i { grid-row: 1 / span 3; font-size: 1.5rem; color: var(--teal); margin-top: 1px; }
.tool h3 { font-size: 1.0625rem; }
.tool p { color: var(--muted); font-size: 0.9375rem; }
.tool-where { font-size: 0.8125rem !important; font-weight: 600; color: var(--teal-dark) !important; margin-top: 4px; }
.tool { transition: border-color var(--base) var(--ease); }
.tool:hover { border-top-color: var(--teal); }
.tool > i { transition: transform var(--base) var(--ease); }
.tool:hover > i { transform: translateY(-2px); }
.formats-line { margin-top: 28px; color: var(--muted); font-size: 0.9375rem; }
.formats-line strong { color: var(--ink-2); font-weight: 600; }

/* ---------- Check lists ---------------------------------------------------- */
.check-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink-2); }
.check-list i { color: var(--green-dark); font-size: 1.15rem; margin-top: 2px; }
.band-dark .check-list li { color: var(--on-dark); }
.band-dark .check-list i { color: #8fd8c6; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Home: the audit engine on the dark band ---------------------------- */
.engine-steps { list-style: none; counter-reset: step; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.engine-steps li { counter-increment: step; padding: 20px 0 24px; border-top: 1px solid var(--on-dark-line); }
.engine-steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 8px; font-size: 0.8125rem; font-weight: 600; color: #8fd8c6; font-variant-numeric: tabular-nums; }
.engine-steps b { display: block; color: #fff; font-weight: 600; margin-bottom: 4px; }
.engine-steps span { color: var(--on-dark-muted); font-size: 0.9375rem; }

/* ---------- Steps (home: how to start; download: the SmartScreen walk-through) ------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.step { padding: 22px 0 8px; border-top: 2px solid var(--ink); }
.step-n { display: block; font-size: 0.875rem; font-weight: 600; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 6px; }
.step p { margin-top: 6px; color: var(--muted); }
.step-shot { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); background: var(--surface); }

/* ---------- Home: the firm ------------------------------------------------- */
.role-list { list-style: none; margin: 28px 0 0; padding: 0; }
.role-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.role-list li > i { grid-row: 1 / span 2; font-size: 1.4rem; color: var(--teal); margin-top: 2px; }
.role-list h3 { font-size: 1.0625rem; }
.role-list p { color: var(--muted); font-size: 0.9375rem; }
.firm-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md); overflow: hidden; }
.firm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.firm-row .av { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--teal-soft); color: var(--teal-dark); font-weight: 600; }
.firm-row .meta b { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.firm-row .meta span { display: block; font-size: 0.8125rem; color: var(--muted); }
.firm-row .role { font-size: 0.75rem; font-weight: 600; color: var(--teal-dark); background: var(--teal-soft); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.code-chip { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #fbfaf6; font-size: 0.875rem; color: var(--muted); }
.code-chip code { font-weight: 600; letter-spacing: 0.18em; color: var(--ink); font-size: 0.9375rem; }

/* ---------- Home: trust ---------------------------------------------------- */
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.trust-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 14px; padding: 20px 0; border-top: 1px solid var(--line); }
.trust-item > i { grid-row: 1 / span 2; font-size: 1.4rem; color: var(--teal); margin-top: 2px; }
.trust-item p { color: var(--muted); font-size: 0.9375rem; }

/* ---------- FAQ -------------------------------------------------------------- */
.faq { max-width: 860px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--teal-dark); }
.faq .chev { flex: 0 0 auto; color: var(--teal); transition: transform var(--fast) var(--ease); }
.faq details[open] .chev { transform: rotate(180deg); }
.faq .answer { padding: 0 40px 20px 0; color: var(--muted); max-width: 72ch; }

/* ---------- Closing call to action -------------------------------------------- */
.cta-band { background: var(--teal-deep); color: var(--on-dark); }
.cta-band .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-dark-muted); margin-top: 10px; max-width: 56ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-inner { padding-top: 28px; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.cta-inner .lead { margin-top: 10px; }

/* ---------- Home: the proof strip, under the hero ------------------------------ */
.proof-strip { background: var(--surface); border-block: 1px solid var(--line-soft); }
.proof-strip__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proof { padding: 22px 0 24px; border-top: 2px solid var(--ink); }
.proof + .proof { margin-left: clamp(24px, 4vw, 56px); padding-left: clamp(24px, 4vw, 56px); border-left: 1px solid var(--line-soft); }
.proof-num { display: block; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; color: var(--teal-dark); font-variant-numeric: tabular-nums; line-height: 1.15; }
.proof-text { display: block; margin-top: 7px; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; max-width: 46ch; }
@media (max-width: 760px) {
  .proof-strip__grid { grid-template-columns: minmax(0, 1fr); }
  .proof + .proof { margin-left: 0; padding-left: 0; border-left: 0; }
}

/* =========================================================================
   The 3D objects (v28). One rule set for all of them, so they age together:
   a scene is .scene3d, it never carries meaning (aria-hidden in the markup),
   it animates only on a slow float, and every scene is drawn static by the
   global prefers-reduced-motion block and dropped by the print block below.
   ========================================================================= */
.scene3d { position: relative; }

/* The floating chips: a real result hovering above the glass. Off by default; the
   wide-screen block turns each one on where its scene has room for it. */
.chip3d {
  display: none; position: absolute; z-index: 3; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--sh-md); font-size: 0.8125rem; font-weight: 700; white-space: nowrap;
}
.chip3d i { font-size: 1.15rem; }
.chip3d--pass { color: var(--ok); border-color: var(--ok-line); }
.chip3d--pass i { color: var(--ok-strong); }
.chip3d--tally i, .chip3d--paisa i { color: var(--teal); }

@keyframes float3d { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* The hero story (v29): one 14-second CSS loop that shows what the product does - a statement
   is read row by row under a scan line, every running balance gets its proof mark, the verdict
   turns green, and the Excel and Tally cards fly out. No library, no JavaScript to run it; the
   pointer only tilts the whole scene by a few degrees (site-motion-v1.js sets --mx/--my).
   Without motion (reduced-motion, no JS) the finished state is drawn statically below. */
.scene3d--story { perspective: 1400px; overflow: clip; padding: 26px 4px 30px; }
.story3d {
  position: relative; width: min(460px, 100%); margin-inline: auto; transform-style: preserve-3d;
  transform: rotateX(calc(8deg + var(--my, 0deg))) rotateY(calc(-9deg + var(--mx, 0deg)));
}
.story-paper {
  position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; font-size: 0.8125rem;
  transform-style: preserve-3d; animation: paper-sway 7s var(--ease) infinite alternate;
}
@keyframes paper-sway { from { transform: translateZ(0) rotateZ(-0.35deg); } to { transform: translateZ(26px) rotateZ(0.5deg); } }
.story-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: #f7f5ef; font-weight: 600; color: var(--ink); }
.story-head i { color: var(--teal); font-size: 1.1rem; }
.story-head span { margin-left: auto; font-weight: 500; font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.story-row {
  position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto 1.3rem; gap: 10px;
  align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.story-row .story-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-row .story-amt { font-weight: 600; color: var(--ink); }
.story-ck { color: var(--ok-strong); font-size: 1.05rem; transform: scale(0); opacity: 0; }
.story-verdict { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 700; color: var(--muted); }
.story-verdict i { font-size: 1.15rem; }
.story-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 32%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(to bottom, rgba(23,113,132,0), rgba(23,113,132,0.12) 55%, rgba(23,113,132,0.30) 84%, rgba(23,113,132,0));
  border-bottom: 2px solid var(--teal);
}
.story-out {
  position: absolute; left: 50%; top: 50%; z-index: 3; display: grid; gap: 3px; justify-items: center;
  width: 150px; margin: -48px 0 0 -75px; padding: 14px 10px 12px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--sh-lg); color: var(--ink);
  opacity: 0; pointer-events: none;
  transform: translate(0, -6px) translateZ(-40px) scale(0.6);
}
.story-out i { font-size: 1.7rem; color: var(--green-dark); }
.story-out b { font-size: 0.875rem; }
.story-out span { font-size: 0.72rem; font-weight: 600; color: var(--teal-dark); background: var(--teal-soft); border-radius: var(--r-pill); padding: 1px 10px; }
.story-out--tally i { color: var(--teal); }

/* The loop. Every animation shares the 14s duration; the per-row delay (1.715s = one row of the
   scan's travel) is what spaces them, so the whole cast stays in step forever. */
.story-row { animation: story-row-lit 14s linear infinite; animation-delay: calc(var(--i) * 1.715s); }
@keyframes story-row-lit {
  0%, 7% { background: transparent; box-shadow: none; }
  10%, 88% { background: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok-strong); }
  93%, 100% { background: transparent; box-shadow: none; }
}
.story-ck { animation: story-ck-pop 14s linear infinite; animation-delay: calc(var(--i) * 1.715s); }
@keyframes story-ck-pop {
  0%, 7% { transform: scale(0); opacity: 0; }
  10%, 88% { transform: scale(1); opacity: 1; }
  93%, 100% { transform: scale(0); opacity: 0; }
}
.story-scan { animation: story-scan 14s linear infinite; }
@keyframes story-scan {
  0%, 4% { top: 2%; opacity: 0; }
  8% { opacity: 1; }
  56% { top: 74%; opacity: 1; }
  62%, 100% { top: 74%; opacity: 0; }
}
.story-verdict { animation: story-verdict 14s var(--ease) infinite; }
@keyframes story-verdict {
  0%, 58% { opacity: 0; color: var(--muted); transform: translateY(4px); }
  63%, 90% { opacity: 1; color: var(--ok); transform: none; }
  95%, 100% { opacity: 0; color: var(--muted); transform: translateY(4px); }
}
.story-out--xlsx { animation: story-out-x 14s var(--ease) infinite; }
@keyframes story-out-x {
  0%, 55% { opacity: 0; transform: translate(0, -6px) translateZ(-40px) scale(0.6); }
  60% { opacity: 1; transform: translate(min(190px, 22vw), 2px) translateZ(55px) scale(1.05); }
  64%, 86% { opacity: 1; transform: translate(min(168px, 19vw), 8px) translateZ(55px) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, -6px) translateZ(-40px) scale(0.6); }
}
.story-out--tally { animation: story-out-t 14s var(--ease) infinite; }
@keyframes story-out-t {
  0%, 55% { opacity: 0; transform: translate(0, 6px) translateZ(-40px) scale(0.6); }
  60% { opacity: 1; transform: translate(max(-190px, -22vw), 30px) translateZ(55px) scale(1.05); }
  64%, 86% { opacity: 1; transform: translate(max(-168px, -19vw), 28px) translateZ(55px) scale(1); }
  93%, 100% { opacity: 0; transform: translate(0, 6px) translateZ(-40px) scale(0.6); }
}
@media (max-width: 480px) { .story-out { width: 128px; margin-left: -64px; } }

/* Reduced motion: the story drawn finished - every row proved, both outputs out, no scan,
   nothing moving. (The global reduce block below also clamps every duration.) */
@media (prefers-reduced-motion: reduce) {
  .story-scan { display: none; }
  .story-paper, .story-row, .story-ck, .story-verdict, .story-out--xlsx, .story-out--tally, .d3-shield, .d3-box, .scene3d .chip3d { animation: none !important; }
  .story-ck { transform: scale(1); opacity: 1; }
  .story-row { background: var(--ok-soft); box-shadow: inset 3px 0 0 var(--ok-strong); }
  .story-verdict { opacity: 1; color: var(--ok); transform: none; }
  .story-out--xlsx { opacity: 1; transform: translate(min(168px, 19vw), 8px) translateZ(55px) scale(1); }
  .story-out--tally { opacity: 1; transform: translate(max(-168px, -19vw), 28px) translateZ(55px) scale(1); }
}

/* ---------- Scroll reveals (v29) ------------------------------------------------
   Hidden only after JavaScript says motion is wanted (html.motion-ok, set by
   site-motion-v1.js). Without JS, under reduced motion, in forced colors and in
   print, nothing is ever hidden: the attribute alone changes nothing. --------- */
html.motion-ok [data-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  transition-delay: var(--d, 0s);
}
html.motion-ok [data-reveal].is-in { opacity: 1; transform: none; }
/* Staggers for the repeated grids: items in one triggered batch arrive in sequence. */
html.motion-ok .tool-grid li:nth-child(2), html.motion-ok .trust-grid li:nth-child(2), html.motion-ok .proof-strip__grid .proof:nth-child(2) { transition-delay: 0.07s; }
html.motion-ok .tool-grid li:nth-child(3), html.motion-ok .trust-grid li:nth-child(3), html.motion-ok .proof-strip__grid .proof:nth-child(3) { transition-delay: 0.14s; }
html.motion-ok .tool-grid li:nth-child(4), html.motion-ok .tf-grid .tf-card:nth-child(2) { transition-delay: 0.1s; }
html.motion-ok .tool-grid li:nth-child(5), html.motion-ok .tf-grid .tf-card:nth-child(3) { transition-delay: 0.17s; }
html.motion-ok .tool-grid li:nth-child(6), html.motion-ok .tf-grid .tf-card:nth-child(4) { transition-delay: 0.24s; }
html.motion-ok .tool-grid li:nth-child(7), html.motion-ok .tf-grid .tf-card:nth-child(5) { transition-delay: 0.31s; }
html.motion-ok .tool-grid li:nth-child(8), html.motion-ok .tf-grid .tf-card:nth-child(6) { transition-delay: 0.38s; }
html.motion-ok .tool-grid li:nth-child(9) { transition-delay: 0.14s; }
html.motion-ok .tool-grid li:nth-child(10) { transition-delay: 0.21s; }
html.motion-ok .tool-grid li:nth-child(11) { transition-delay: 0.28s; }
html.motion-ok .tool-grid li:nth-child(12) { transition-delay: 0.35s; }
html.motion-ok .engine-steps li:nth-child(2), html.motion-ok .steps li:nth-child(2), html.motion-ok .plat-grid .plat-card:nth-child(2) { transition-delay: 0.1s; }
html.motion-ok .engine-steps li:nth-child(3), html.motion-ok .steps li:nth-child(3), html.motion-ok .plat-grid .plat-card:nth-child(3) { transition-delay: 0.2s; }
html.motion-ok .engine-steps li:nth-child(5) { transition-delay: 0.1s; }
html.motion-ok .engine-steps li:nth-child(6) { transition-delay: 0.2s; }

@media (min-width: 1025px) {
  .scene3d .chip3d { display: inline-flex; animation: float3d 7s var(--ease) infinite; }
  .scene3d--story .chip3d--pass { top: -4px; right: 6px; animation-delay: -1s; }
  .scene3d--story .chip3d--tally { bottom: -2px; left: 6px; animation-delay: -4.5s; }

  /* The converter: two statement sheets fanned out behind the window, one proved chip. */
  .scene3d--stack { padding-top: 12px; }
  .scene3d--stack::before, .scene3d--stack::after {
    content: ""; position: absolute; top: 12px; left: 0; right: 0; bottom: 0; z-index: 0;
    border: 1px solid var(--line); border-radius: var(--r-lg);
  }
  .scene3d--stack::before { background: var(--teal-soft); transform: rotate(-2.4deg) translate(-15px, 11px); }
  .scene3d--stack::after { background: var(--green-soft); transform: rotate(1.9deg) translate(17px, 7px); }
  .scene3d--stack > .app-window { position: relative; z-index: 1; }
  .scene3d--stack .chip3d--paisa { bottom: -14px; left: 14px; animation-delay: -2s; }
}

/* The engine: the standards a review maps to, as chips slowly circling the result window on a
   ring tilted into depth - the mapping, literally, going around the working paper. Chips keep
   themselves upright with a counter-spin in step with the ring. The ring is exactly as wide as
   its circle needs, so it never pushes past the viewport; below the section's split breakpoint
   there is no room around a full-width window, so it is left out rather than shrunk onto the
   glass. Chip angles start off the horizontal extremes so the first frame fits with margin. */
.orbit3d {
  /* Wide enough to clear the window's sides on a desktop, but bounded by half the viewport
     (minus the container and chip width) so a chip can never push past the screen, and by the
     section's own vertical rhythm so no chip lands on the engine steps below. */
  --r: clamp(150px, calc(50vw - 400px), 290px);
  position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: calc(2 * var(--r)); height: calc(2 * var(--r));
  transform: translate(-50%, -50%);
}
.orbit3d__ring {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(18deg);
  animation: orbit3d-spin 44s linear infinite;
}
/* The path itself, so the orbit reads even while a chip is behind the window. */
.orbit3d__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px dashed rgba(238, 246, 246, 0.22);
}
.orbit3d__chip {
  position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -52px;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) rotateX(-18deg);
}
.orbit3d__text {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 5px 13px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.07); border: 1px solid var(--on-dark-line); color: var(--on-dark);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
  animation: orbit3d-counter 44s linear infinite;
}
.scene3d--orbit > .app-window { position: relative; z-index: 1; }
@keyframes orbit3d-spin { to { transform: rotateX(18deg) rotate(360deg); } }
@keyframes orbit3d-counter { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@media (max-width: 1024px) { .orbit3d { display: none; } }

/* The three steps: the number as a small block you could pick up, idly turning. Without CSS
   it is still "01"; under reduced motion it rests at its base angle. */
.cube { --s: 38px; position: relative; display: inline-block; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(34deg); animation: cube-sway 6s var(--ease) infinite alternate; }
@keyframes cube-sway { from { transform: rotateX(-16deg) rotateY(28deg); } to { transform: rotateX(-9deg) rotateY(46deg); } }
.cube-f { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.cube-f--f { background: var(--teal); color: #fff; border: 1px solid var(--teal-dark); transform: translateZ(calc(var(--s) / 2)); }
.cube-f--t { background: #4da3b4; transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube-f--s { background: var(--teal-deep); transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.step-n:has(.cube) { display: block; height: calc(var(--s, 38px) + 6px); }

/* Trust: the shield, with depth - three layers set back to the right and down. */
.d3-shield {
  position: relative; width: 92px; height: 92px; margin-top: 30px;
  filter: drop-shadow(0 12px 14px rgba(10, 63, 75, 0.16));
  animation: float3d 9s var(--ease) infinite;
}
.d3-shield i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 82px; }
.d3-shield .d3-shield__a { color: var(--teal); }
.d3-shield .d3-shield__b { color: var(--teal-dark); opacity: 0.5; transform: translate(8px, 9px) scale(0.985); }
.d3-shield .d3-shield__c { color: #0a3340; opacity: 0.28; transform: translate(15px, 17px) scale(0.965); }

/* The Windows installer, as a box: front, top and side. Wide screens only; the download
   page's narrow column needs the space below that. */
.dl-hero .container { position: relative; }
.d3-box { --bs: 124px; display: none; }
@media (min-width: 1240px) {
  /* The text column is 860px centred; from 1240px there is a real margin to its right, and the
     box sits in that margin - clear of the copy, with room for its own 3D rotation to widen it. */
  .d3-box {
    display: block; position: absolute; top: 96px; right: calc(64px - (100vw - 860px) / 2);
    width: var(--bs); height: var(--bs);
    transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(30deg);
    animation: float3d 8s var(--ease) infinite;
  }
  .d3-box__front {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md);
    font-weight: 700; font-size: 0.9375rem; color: var(--ink);
    transform: translateZ(calc(var(--bs) / 2));
  }
  .d3-box__front img { width: 44px; height: 44px; border-radius: 10px; }
  .d3-box__top { position: absolute; inset: 0; background: var(--teal-soft); border: 1px solid var(--line); border-radius: var(--r-lg); transform: rotateX(90deg) translateZ(calc(var(--bs) / 2)); }
  .d3-box__side { position: absolute; inset: 0; background: var(--teal); border: 1px solid var(--teal-dark); border-radius: var(--r-lg); transform: rotateY(90deg) translateZ(calc(var(--bs) / 2)); }
}

/* The flagship's four GST comparisons, as a deck: the four mock bars lifted one behind the
   other on wide screens, flat where there is no room. */
@media (min-width: 1025px) {
  .mock--deck { transform: perspective(1100px) rotateX(22deg) rotateZ(-2deg); transform-style: preserve-3d; }
  .mock--deck .mock-bar { box-shadow: 0 1px 0 rgba(19,38,44,0.04), 0 10px 18px -12px rgba(19,38,44,0.35); }
  .mock--deck .mock-bar:nth-child(2) { transform: translateZ(16px); }
  .mock--deck .mock-bar:nth-child(3) { transform: translateZ(32px); }
  .mock--deck .mock-bar:nth-child(4) { transform: translateZ(48px); }
}

@media (forced-colors: active) {
  .chip3d, .orbit3d__text, .d3-box__front, .d3-box__top, .d3-box__side, .cube-f, .story-paper, .story-out { border: 1px solid CanvasText; }
  .d3-shield i, .story-ck { color: CanvasText; }
  .orbit3d { display: none; }
  html.motion-ok [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .scene3d .chip3d, .orbit3d, .d3-shield, .d3-box, .hero::before, .story-scan, .story-out { display: none !important; }
  .scene3d--hero > .app-window, .mock--deck, .mock--deck .mock-bar { transform: none !important; }
  html.motion-ok [data-reveal] { opacity: 1 !important; transform: none !important; }
  .story-ck { transform: scale(1); opacity: 1; }
  .story-row { background: var(--ok-soft) !important; box-shadow: inset 3px 0 0 var(--ok-strong) !important; }
}

/* ---------- Features page ------------------------------------------------------ */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.pill i { font-size: 0.95rem; }
.pill-ext { color: #7a4a00; border-color: #efd7a8; background: #fff7e8; }
.pill-app { color: #1d4f91; border-color: #c9dbf3; background: #f1f6fd; }
.pill-both { color: var(--green-dark); border-color: var(--ok-line); background: var(--green-soft); }
.band-dark .pill { background: rgba(255,255,255,0.06); border-color: var(--on-dark-line); color: var(--on-dark); }

.tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
#flagship .tf-grid { grid-template-columns: minmax(0, 1fr); }
.tf-card { position: relative; padding: 28px 0 32px; border-top: 1px solid var(--line); color: var(--ink); }
#flagship .tf-card { border-top: 2px solid var(--ink); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 64px); }
#flagship .tf-card > * { grid-column: 1; }
#flagship .tf-card > .mock { grid-column: 2; grid-row: 1 / span 5; align-self: start; }
.tf-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tf-top h3 { font-size: 1.25rem; line-height: 1.3; }
#flagship .tf-top h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); }
.tf-rank { flex: 0 0 auto; font-size: 0.875rem; font-weight: 600; color: var(--teal-dark); font-variant-numeric: tabular-nums; }
.tf-rank::before { content: "No. "; color: var(--muted); font-weight: 500; }
.tf-lede { margin-top: 12px; color: var(--muted); }
/* Not flex: a <strong> inside the sentence would become its own column. */
.tf-gain { position: relative; margin-top: 16px; padding-left: 28px; font-size: 0.9375rem; color: var(--ink-2); }
.tf-gain i { position: absolute; left: 0; top: 3px; color: var(--green-dark); font-size: 1.1rem; }

.mock { margin-top: 18px; display: grid; gap: 8px; padding: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); }
.mock-bar { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 6px 10px; border-radius: var(--r-sm); background: #faf8f2; color: var(--ink); }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); flex: 0 0 auto; }
.mock-dot.ok { background: var(--ok-strong); }
.mock-dot.warn { background: var(--warn-strong); }
.mock-line { height: 7px; border-radius: 4px; background: var(--line); flex: 0 1 auto; width: 30%; }
.mock-line.w-40 { width: 40%; }
.mock-line.w-60 { width: 60%; }
.mock-line.w-80 { width: 80%; }
.mock-line.solid { flex: 1 1 auto; background: var(--line-strong); }
.mock-tag { margin-left: auto; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-size: 0.72rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mock-tag.done { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }

.flow { margin-top: 8px; }
.flow-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; }
.flow-stage { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 0 8px; border-top: 2px solid var(--line); color: var(--ink); transition: border-color var(--base) var(--ease); }
.flow-stage b { font-weight: 600; }
.flow-stage small { color: var(--muted); font-size: 0.875rem; line-height: 1.5; }
.flow-stage .pill { justify-self: start; margin-top: 6px; }
.flow-node { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--teal); font-size: 1.1rem; transition: background-color var(--base) var(--ease), color var(--base) var(--ease), border-color var(--base) var(--ease); }
.flow-stage.is-done { border-top-color: var(--teal); }
.flow-stage.is-live { border-top-color: var(--green); }
.flow-stage.is-live .flow-node { background: var(--teal); border-color: var(--teal); color: #fff; }
.flow-foot { position: relative; margin-top: 28px; padding-left: 28px; color: var(--ink-2); max-width: 80ch; }
.flow-foot i { position: absolute; left: 0; top: 3px; color: var(--green-dark); font-size: 1.15rem; }

.plat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.plat-card { padding: 22px 0 8px; border-top: 1px solid var(--on-dark-line); }
.plat-card.is-both { border-top-color: #8fd8c6; }
.plat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plat-count { font-size: 2.25rem; font-weight: 600; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.plat-note { margin-top: 12px; font-size: 0.9375rem; }
.plat-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.plat-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; font-size: 0.9375rem; color: var(--on-dark); }
.plat-list i { color: #8fd8c6; margin-top: 3px; }
.plat-list strong { color: #fff; font-weight: 600; }
.band-dark .cta-actions { margin-top: 40px; }

.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.cat-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.cat-link span { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.cat-link:hover { border-color: var(--teal); color: var(--teal-dark); }
.cat-block { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 56px); padding: 36px 0; border-top: 1px solid var(--line); }
.cat-nav + .cat-block { border-top: 0; padding-top: 0; }
.cat-head { align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }
.cat-head h3 { font-size: 1.375rem; }
.cat-head p { margin-top: 8px; color: var(--muted); font-size: 0.9375rem; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); }
.feat-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 0 20px; border-top: 1px solid var(--line-soft); color: var(--ink); }
.feat-card h4 { font-size: 1rem; font-weight: 600; }
.feat-card p { color: var(--muted); font-size: 0.9375rem; }
.feat-card .feat-gain { color: var(--ink-2); font-size: 0.875rem; font-weight: 500; }
.feat-gain::before { content: "\2192\00a0"; color: var(--teal); }
.feat-foot { margin-top: 4px; }

/* ---------- Download page -------------------------------------------------------- */
.dl-hero { padding-block: clamp(40px, 5vw, 72px) var(--section-tight); }
.dl-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--teal-dark); }
.dl-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.dl-title { margin-top: 12px; font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.dl-lead { margin-top: 18px; color: var(--muted); font-size: 1.0625rem; max-width: 72ch; }
.dl-cta { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 28px; padding: 12px 26px; border-radius: var(--r-md); background: var(--teal); color: #fff; font-size: 1.0625rem; font-weight: 600; text-decoration: none; }
.dl-cta:hover { background: var(--teal-dark); color: #fff; }
.dl-cta i { font-size: 1.25rem; }
.dl-note { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }
.dl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 32px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dl-fact { padding: 14px 16px 14px 0; }
.dl-fact + .dl-fact { padding-left: 16px; border-left: 1px solid var(--line-soft); }
.dl-fact dt { font-size: 0.8125rem; color: var(--muted); }
.dl-fact dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dl-verify { margin-top: 32px; }
.dl-verify h2 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; }
.dl-verify h2 i { color: var(--green-dark); }
.dl-sha-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.dl-sha { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.dl-sha-label { font-size: 0.8125rem; font-weight: 600; color: var(--teal-dark); }
.dl-sha-code { font-size: 0.8125rem; word-break: break-all; color: var(--ink); }
.dl-specs { padding-bottom: var(--section); }
.dl-specs h2 { font-size: 1.5rem; margin: 48px 0 14px; }
.dl-specs h2:first-child { margin-top: 0; }
.dl-specs > p { margin-top: 14px; color: var(--ink-2); max-width: 78ch; }
.dl-req-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.dl-visual-steps { margin: 28px 0 8px; }

/* ---------- Legal pages ------------------------------------------------------------ */
.legal-hero { padding-block: clamp(40px, 5vw, 64px) 12px; }
.legal-wrap { max-width: 860px; }
.legal-title { margin-top: 6px; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); }
.legal-meta { margin-top: 14px; color: var(--muted); font-size: 0.9375rem; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 24px; padding: 14px 0; border-block: 1px solid var(--line); font-size: 0.9375rem; }
.legal-toc a { text-decoration: none; font-weight: 500; }
.legal-toc a:hover { text-decoration: underline; }
.legal-body { padding: 24px 0 var(--section); color: var(--ink-2); }
.legal-body h2 { margin: 40px 0 12px; font-size: 1.375rem; }
.legal-body h3 { margin: 24px 0 8px; }
.legal-body p, .legal-body ul, .legal-body ol { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-table { width: 100%; margin: 12px 0 20px; border-collapse: collapse; font-size: 0.9375rem; }
.legal-table th, .legal-table td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { background: var(--band); color: var(--ink); font-weight: 600; }

/* ---------- Footer --------------------------------------------------------------- */
.site-footer { background: #0b2f37; color: var(--on-dark-muted); padding-block: 56px 28px; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.site-footer .brand { color: #fff; }
.site-footer .brand img { background: #fff; }
.footer-about { margin-top: 14px; max-width: 42ch; }
/* Each footer link is a 44px target (DS4); the gap that spaced 24px links is no longer needed. */
.footer-col { display: flex; flex-direction: column; gap: 0; }
.footer-col h4 { color: #fff; font-size: 0.875rem; font-weight: 600; margin-bottom: 4px; }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); text-decoration: none; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--on-dark-line); font-size: 0.8125rem; }
.disclaimer { max-width: 70ch; }

/* ---------- Workspace page frame (the converter's own layer is at the end) ---------------- */
.ws-facts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.ws-fact { padding: 20px 0 8px; border-top: 2px solid var(--ink); color: var(--ink); }
.ws-fact h3 { display: flex; align-items: center; gap: 8px; }
.ws-fact h3 i { color: var(--teal); font-size: 1.25rem; }
.ws-fact ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 0.9375rem; }

/* ---------- Responsive --------------------------------------------------------------- */
@media (max-width: 1120px) {
  .nav-links > a { padding-inline: 9px; }
  .site-header .container { gap: 18px; }
}

@media (max-width: 1024px) {
  .hero-grid, .split, .split-head { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 20ch; }
  .tool-grid, .engine-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .plat-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-block { grid-template-columns: minmax(0, 1fr); }
  .cat-head { position: static; }
  #flagship .tf-card { grid-template-columns: minmax(0, 1fr); }
  #flagship .tf-card > .mock { grid-column: 1; grid-row: auto; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-about-col { grid-column: 1 / -1; }
}

/* The navigation folds into a menu below 960px. The menu is a sheet under the header, with the
   same links, and the two install actions the header no longer has room for. */
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn-primary { display: none; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; z-index: 99;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--bg); overflow-y: auto; border-top: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line-soft); font-size: 1.0625rem; }
  .nav-links > a:hover { background: none; }
  .nav-links > a[aria-current="page"]::after { display: none; }
  .nav-links > a[aria-current="page"] { color: var(--teal-dark); }
  .nav-mobile-cta { display: grid; gap: 10px; margin-top: 20px; }
  .nav-mobile-cta .btn { border-bottom: 1px solid transparent; padding: 12px 18px; font-size: 1rem; }
  .nav-mobile-cta .btn-secondary { border-color: var(--line-strong); }
  html.menu-is-open { overflow: hidden; }
}

@media (max-width: 760px) {
  .tool-grid, .engine-steps, .steps, .trust-grid, .tf-grid, .feat-grid, .ws-facts-list { grid-template-columns: minmax(0, 1fr); }
  .answer-block dl > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .dl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .dl-fact:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  .flow-track { grid-template-columns: minmax(0, 1fr); }
  .flow-stage { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .flow-stage .flow-node { grid-row: 1 / span 3; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .aw-hide-sm { display: none; }
}

@media (max-width: 560px) {
  .hide-sm { display: none; }
  .brand { font-size: 1rem; }
  .ws-tools-button { padding-inline: 10px; }
  .ws-tools-panel { position: fixed; left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 8px); width: auto; }
  .hero-actions .btn, .actions .btn, .cta-actions .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aw-table th, .aw-table td { padding-inline: 10px; }
  .faq .answer { padding-right: 0; }
}

/* The smallest phones: the header keeps the logo, the Workspace menu and the menu button on one line. */
@media (max-width: 420px) {
  .site-header .container { gap: 10px; }
  .nav-cta { gap: 6px; }
  .ws-tools-button .ws-caret { display: none; }
  .pill { white-space: normal; }
  /* Any button, not only a large one: a long label wraps rather than pushing past a 320px screen. */
  .btn { white-space: normal; text-align: center; }
  .legal-table { display: block; overflow-x: auto; }
  .legal-body, .legal-meta, .legal-toc { overflow-wrap: anywhere; }
}
@media (max-width: 360px) {
  .brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .btn, .nav-toggle, .ws-tool, .pill, .cat-link, .app-window, .firm-card, .mock { border: 1px solid CanvasText; }
  .nav-links > a[aria-current="page"]::after { background: Highlight; }
}

@media print {
  .site-header, .skip-link, .nav-toggle, .ws-tools-menu, .cta-band, .hero-actions, .actions { display: none !important; }
  body { background: #fff; }
  .band, .band-dark, .site-footer { background: #fff !important; color: #000 !important; }
  .band-dark h2, .band-dark h3, .band-dark p, .band-dark .lead, .engine-steps b, .engine-steps span, .plat-list li, .plat-count { color: #000 !important; }
  .section { padding-block: 24px; }
}

/* =========================================================================
   v30 additions: the site-wide lift. The hero story (v29) set the bar; this
   brings the rest of every page up to it. Same rules as ever: CSS only, no
   library, decoration never hides content, reduced motion and print fall
   back to the finished, static state.
   ========================================================================= */

/* ---------- Brand chrome: a gradient hairline on the header, dashes on the
   eyebrows, and a primary button with depth -------------------------------- */
.site-header::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }
.eyebrow::before, .kicker::before {
  content: ""; display: inline-block; width: 20px; height: 3px; border-radius: 2px;
  background: var(--grad); margin-right: 9px; vertical-align: 4px;
}
.btn { transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease); }
.btn-primary { background-image: linear-gradient(135deg, var(--teal) 0%, #146e83 55%, var(--green-dark) 160%); box-shadow: 0 8px 18px -10px rgba(15, 82, 96, 0.55); }
.btn-primary:hover { background-image: none; transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(15, 82, 96, 0.6); }
.btn-primary:active { transform: translateY(0); }
.dl-cta { box-shadow: 0 10px 22px -12px rgba(15, 82, 96, 0.55); transition: transform var(--fast) var(--ease), box-shadow var(--base) var(--ease), background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.dl-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(15, 82, 96, 0.6); }

/* ---------- Icon tiles: every list icon becomes a small 3D-feeling tile ---- */
.tool > i, .trust-item > i, .role-list li > i, .ws-fact h3 i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; margin-top: 0;
  background: linear-gradient(135deg, var(--teal-soft), var(--green-soft));
  color: var(--teal-dark); border: 1px solid rgba(23, 113, 132, 0.16);
  box-shadow: 0 1px 2px rgba(19, 38, 44, 0.06), 0 8px 16px -10px rgba(23, 113, 132, 0.4);
  transition: transform var(--base) var(--ease), background-color var(--base) var(--ease), color var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.tool:hover > i, .trust-item:hover > i, .role-list li:hover > i, .ws-fact:hover h3 i {
  background: var(--teal); color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 22px -12px rgba(15, 82, 96, 0.55);
}

/* ---------- The proof strip: tiles and gradient figures -------------------- */
/* The icon has its own grid column (DS4). It used to be absolutely positioned over a 60px left
   padding, and the .proof + .proof divider rule above replaced that padding (24-56px on desktop,
   0 on phones) - so the second and third icons sat on their own figures. The divider rule can
   now do what it likes with padding: the icon's room is a column, not a padding. */
.proof { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.proof-num, .proof-text { grid-column: 2; }
.proof i {
  grid-column: 1; grid-row: 1 / span 2; margin-top: 2px; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; font-size: 1.3rem;
  background: linear-gradient(135deg, var(--teal-soft), var(--green-soft));
  color: var(--teal-dark); border: 1px solid rgba(23, 113, 132, 0.16);
  box-shadow: 0 1px 2px rgba(19, 38, 44, 0.06), 0 8px 16px -10px rgba(23, 113, 132, 0.4);
}
.proof-num {
  background: linear-gradient(90deg, var(--teal-dark), var(--green-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- The plain-language section: the standards stack ---------------- */
.answer-block dt::before {
  content: ""; display: inline-block; width: 18px; height: 3px; border-radius: 2px;
  background: var(--grad); margin-right: 9px; vertical-align: 4px;
}
/* Each card steps up by more than its own height plus the float's 7px, so no card ever covers
   another's label (DS4: at 23px steps "Ind AS 115" and "SA 330" sat half hidden). */
.stack3d { position: relative; height: 176px; margin-top: 26px; max-width: 340px; }
.stack3d__card {
  position: absolute; display: inline-flex; align-items: center; padding: 10px 18px;
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-md); font-weight: 700; font-size: 0.875rem; color: var(--teal-dark); white-space: nowrap;
}
.stack3d__card:nth-of-type(1) { top: 100px; left: 0; transform: rotate(-2deg); animation: float3d 7s var(--ease) infinite; }
.stack3d__card:nth-of-type(2) { top: 50px; left: 46px; transform: rotate(1.2deg); background: var(--teal-soft); border-color: var(--info-line); animation: float3d 7s var(--ease) infinite; animation-delay: -2.3s; }
.stack3d__card:nth-of-type(3) { top: 0; left: 92px; transform: rotate(-1deg); background: var(--green-soft); border-color: var(--ok-line); color: var(--green-dark); animation: float3d 7s var(--ease) infinite; animation-delay: -4.6s; }
.stack3d__label { position: absolute; left: 4px; bottom: 0; font-size: 0.8125rem; color: var(--muted); }
@media (max-width: 480px) {
  .stack3d__card { font-size: 0.78rem; padding: 8px 12px; }
  .stack3d__card:nth-of-type(2) { left: 24px; }
  .stack3d__card:nth-of-type(3) { left: 48px; }
}

/* ---------- The converter scene: a third chip, the months covered ---------- */
.chip3d--months { gap: 7px; }
.chip3d--months .bs-cov { min-width: 11px; height: 13px; padding: 0; font-size: 0; border-radius: 3px; }
.scene3d--stack { perspective: 1400px; }
.scene3d--stack > .app-window { transform: rotateY(5deg) rotateX(1.5deg); }
.scene3d--stack .chip3d--months { top: -18px; right: 12px; animation-delay: -5.2s; }

/* The same months strip, as a pill on the Features page's converter section. */
.cov-demo { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; margin-top: 18px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-sm); width: max-content; max-width: 100%; }
.cov-demo__cells { display: inline-flex; gap: 2px; }
.cov-demo .bs-cov { min-width: 14px; height: 16px; padding: 0; font-size: 0; border-radius: 3px; }
.cov-demo__label { font-size: 0.78rem; font-weight: 700; color: var(--teal-dark); }

/* ---------- The firm card, presented in 3D --------------------------------- */
.firm-card { position: relative; transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); animation: float3d 9s var(--ease) infinite; }
.firm-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad); z-index: 1; }
.firm-row:nth-child(2) .av { background: var(--teal); color: #fff; }
.firm-row:nth-child(3) .av { background: var(--green-soft); color: var(--green-dark); }
.firm-row:nth-child(4) .av { background: var(--cream-strong); color: var(--ink-2); }

/* ---------- The closing band: a glow and two floating results -------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(56% 90% at 82% 0%, rgba(17, 157, 117, 0.20), transparent 62%),
    radial-gradient(42% 70% at 10% 100%, rgba(23, 113, 132, 0.20), transparent 60%);
}
.cta-band .container { position: relative; z-index: 1; }
@media (min-width: 1025px) {
  .cta-band .chip3d { display: inline-flex; animation: float3d 8s var(--ease) infinite; }
  .cta-band .chip3d--cta1 { top: -16px; right: 2%; }
  .cta-band .chip3d--cta2 { bottom: -10px; left: 4%; animation-delay: -4s; }
}

/* ---------- Features page: lift on hover everywhere ------------------------ */
.tf-card { transition: transform var(--base) var(--ease); }
.tf-card:hover { transform: translateY(-3px); }
.tf-card .mock { transition: transform var(--base) var(--ease); }
.tf-card:hover .mock { transform: perspective(900px) rotateX(9deg); }
.tf-rank { background: linear-gradient(135deg, var(--teal-soft), var(--green-soft)); padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid rgba(23, 113, 132, 0.16); }
.plat-count { background: linear-gradient(180deg, #ffffff, #8fd8c6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plat-card { transition: transform var(--base) var(--ease); }
.plat-card:hover { transform: translateY(-3px); }
.feat-card { transition: border-color var(--base) var(--ease), transform var(--base) var(--ease); }
.feat-card:hover { border-top-color: var(--teal); transform: translateY(-2px); }
.feat-card:hover h4 { color: var(--teal-dark); }

/* ---------- Download page: the hero grid, stickers on the box, step lift ---- */
.dl-hero { position: relative; }
.dl-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 42% at 78% 24%, rgba(23, 113, 132, 0.07), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(19, 38, 44, 0.028) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(19, 38, 44, 0.028) 31px 32px);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}
.box-sticker {
  position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-sm); font-size: 0.68rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.box-sticker--bl { left: -18px; bottom: 12px; transform: rotate(-7deg); color: var(--green-dark); }
.box-sticker--tr { right: -16px; top: 12px; transform: rotate(6deg); color: var(--teal-dark); }
.step .step-shot { transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease); }
.step:hover .step-shot { transform: translateY(-3px); box-shadow: var(--sh-md); }

/* ---------- Legal pages: the TOC as pills, dashes on headings --------------- */
.legal-toc a { display: inline-flex; align-items: center; padding: 5px 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.legal-toc a:hover { border-color: var(--teal); color: var(--teal-dark); }
.legal-body h2::before {
  content: ""; display: inline-block; width: 22px; height: 3px; border-radius: 2px;
  background: var(--grad); margin-right: 11px; vertical-align: 7px;
}

/* ---------- Guards for the new pieces --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stack3d__card, .firm-card, .cta-band .chip3d, .scene3d--stack .chip3d--months { animation: none !important; }
  .firm-card { transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); }
}
@media (forced-colors: active) {
  .proof i, .tool > i, .trust-item > i, .role-list li > i, .ws-fact h3 i, .stack3d__card, .cov-demo, .box-sticker, .chip3d--months .bs-cov { border: 1px solid CanvasText; }
  .proof-num, .plat-count { background: none; color: CanvasText; -webkit-background-clip: initial; background-clip: initial; }
  .cta-band::before, .dl-hero::before { display: none; }
}
@media print {
  .site-header::after, .stack3d, .cta-band .chip3d, .scene3d--stack .chip3d--months, .cov-demo { display: none !important; }
  .proof i, .tool > i, .trust-item > i, .role-list li > i { background: none; border: 0; box-shadow: none; }
  .proof-num, .plat-count { background: none; color: #000; -webkit-background-clip: initial; background-clip: initial; }
  .firm-card { transform: none; animation: none; }
}

/* =========================================================================
   Workspace: the bank statement converter (workspace.html)
   UX release (UX-IMPROVEMENT-PLAN.md): the site's own tokens and components,
   semantic status tokens instead of a second palette, tables built for
   financial data, a client -> account -> file organiser, WCAG 2.2 targets.
   ========================================================================= */

.bs-linkbtn { appearance: none; background: none; border: 0; padding: 4px 2px; min-height: 24px; font: inherit; font-weight: 700; color: var(--teal-dark); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; text-decoration: underline; text-decoration-color: rgba(15,82,96,0.35); text-underline-offset: 3px; }
.bs-linkbtn:hover { color: var(--teal-deep); text-decoration-color: currentColor; }
.bs-linkbtn[hidden] { display: none; }

.ws-main { padding-block: clamp(28px, 4vw, 48px) 72px; min-height: 70vh; }
.ws-intro { max-width: 820px; margin-bottom: 28px; }
.ws-intro h1 { font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem); line-height: 1.08; margin: 0 0 14px; color: var(--ink); }
.ws-lead { font-size: clamp(1rem, 1.35vw, 1.1rem); color: var(--muted); margin: 0 0 16px; }
.ws-private { display: inline-flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-md); background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: 0.92rem; margin: 0; border: 1px solid var(--ok-line); }
.ws-private i { font-size: 1.15rem; margin-top: 1px; }

.bs-app { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: clamp(16px, 3vw, 28px); }
.bs-small { color: var(--muted); font-size: 0.86rem; margin: 6px 0 0; }
.bs-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bs-nowrap { white-space: nowrap; }
.bs-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---------- Intake: whose statements, then the files -------------------- */
.bs-intake { display: grid; gap: 14px; }
.bs-client-field { display: grid; gap: 6px; max-width: 620px; }
.bs-client-field label { font-weight: 700; color: var(--ink); }
.bs-optional { font-weight: 500; color: var(--muted); }
.bs-client-field input, .bs-inline-form input, .bs-org-find input, #bs-tally-bank { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.bs-client-field input:focus-visible, .bs-inline-form input:focus-visible, .bs-org-find input:focus-visible, #bs-tally-bank:focus-visible, #bs-ledger-rows input[type="text"]:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,113,132,0.22); }
.bs-client-field .bs-small { margin: 0; }

.bs-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; min-height: 190px; padding: 24px; border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--cream-soft); cursor: pointer; transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.bs-drop:hover { border-color: var(--teal); background: rgba(23,113,132,0.04); }
.bs-drop:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-color: var(--teal); }
.bs-drop.is-over { border-style: solid; border-color: var(--teal); background: var(--teal-soft); transform: scale(1.005); }
.bs-drop[aria-disabled="true"] { opacity: 0.72; cursor: progress; }
.bs-drop-icon { font-size: 2.4rem; color: var(--teal); }
.bs-drop.is-over .bs-drop-icon { color: var(--teal-deep); }
.bs-drop-title { font-weight: 800; font-size: 1.1rem; color: var(--ink); }
.bs-drop-hint { color: var(--muted); font-size: 0.9rem; max-width: 60ch; }
.bs-drop-private { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: var(--r-pill); padding: 4px 10px; }
.bs-busy-note { margin: 0; font-weight: 600; color: var(--teal-dark); }
.bs-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 2px 4px; }
.bs-samples-lead { font-weight: 700; color: var(--ink); font-size: 0.92rem; }
.bs-samples-note { flex-basis: 100%; margin: 0; }

/* After the first conversion the intake becomes a strip that adds to the session. */
.bs-intake--compact { grid-template-columns: minmax(220px, 340px) 1fr; align-items: stretch; gap: 16px; padding: 14px; border-radius: var(--r-lg); background: var(--cream-soft); border: 1px solid var(--line-soft); }
.bs-intake--compact .bs-client-field { max-width: none; align-content: start; }
.bs-intake--compact .bs-client-field .bs-small { display: none; }
.bs-intake--compact .bs-drop { min-height: 0; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; text-align: left; padding: 12px 16px; gap: 4px 12px; background: var(--surface); }
.bs-intake--compact .bs-drop-icon { font-size: 1.6rem; }
.bs-intake--compact .bs-drop-title { font-size: 0.98rem; }
.bs-intake--compact .bs-drop-hint { flex-basis: 100%; font-size: 0.84rem; }
.bs-intake--compact .bs-drop-private { display: none; }
.bs-intake--compact .bs-busy-note { grid-column: 1 / -1; }

/* ---------- Panels: progress, password, error --------------------------- */
.bs-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; margin-top: 16px; border-radius: var(--r-lg); background: var(--cream-soft); border: 1px solid var(--line-soft); }
.bs-panel p { margin: 0; flex-basis: 100%; }
.bs-progress { display: grid; gap: 10px; }
.bs-progress-head { display: flex; align-items: center; gap: 12px; }
.bs-progress-title { font-weight: 700; color: var(--ink); flex: 1; }
.bs-spinner { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--teal-soft); border-top-color: var(--teal); animation: bs-spin 0.8s linear infinite; }
@keyframes bs-spin { to { transform: rotate(360deg); } }
.bs-bar { height: 8px; border-radius: var(--r-pill); background: var(--teal-soft); overflow: hidden; }
.bs-bar > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width var(--base) var(--ease); }
.bs-password { flex-direction: column; align-items: stretch; }
.bs-password input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); font: inherit; }
.bs-password input[aria-invalid="true"] { border-color: var(--bad-strong); box-shadow: 0 0 0 3px rgba(192,57,43,0.16); }
.bs-help summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 24px; }
.bs-help p { margin: 8px 0 0; color: var(--muted); font-size: 0.9rem; max-width: 70ch; }
.bs-error { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }

/* ---------- Chips, marks and quiet acknowledgements --------------------- */
.bs-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 750; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.bs-chip i { font-size: 1rem; }
.bs-chip--ok { color: var(--ok); background: var(--ok-soft); border-color: var(--ok-line); }
.bs-chip--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.bs-chip--bad { color: var(--bad); background: var(--bad-soft); border-color: var(--bad-line); }
.bs-chip--muted { color: var(--muted); background: var(--cream-soft); border-color: var(--line-soft); }
.bs-chip--info { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.bs-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: bs-blink 1.2s ease-in-out infinite; }
@keyframes bs-blink { 50% { opacity: 0.25; } }
.bs-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal-dark); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; }
.bs-ack { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-size: 0.88rem; font-weight: 600; }
.bs-ack i { font-size: 1.1rem; margin-top: 1px; flex: 0 0 auto; }
.bs-ack--ok { color: var(--ok); }
.bs-ack--info { color: var(--info); }
.bs-ack--bad { color: var(--bad); }
.bs-ack .bs-linkbtn { padding-block: 0; }
.bs-withheld { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad); font-size: 0.9rem; font-weight: 600; }
.bs-withheld i { font-size: 1.1rem; }
.bs-code, .bs-ref { color: var(--muted); font-size: 0.82em; font-weight: 500; }
.bs-ref { margin: 0 0 10px; }

/* ---------- The result: breadcrumb, status banner, confirmation --------- */
.bs-result { margin-top: 18px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.bs-result:focus { outline: none; }
.bs-result:focus-visible { outline: 3px solid var(--teal); outline-offset: 6px; border-radius: var(--r-lg); }
.bs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; font-size: 0.9rem; }
.bs-crumb-back { appearance: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--cream-soft); color: var(--teal-dark); font: inherit; font-weight: 700; cursor: pointer; }
.bs-crumb-back:hover { border-color: var(--teal); }
.bs-crumb-trail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
.bs-crumb-trail [aria-current] { color: var(--ink); font-weight: 700; }
.bs-crumb-sep { color: var(--line); }

.bs-status { position: relative; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); border-left-width: 6px; background: var(--cream-soft); }
.bs-status h2 { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; font-size: clamp(1.35rem, 2.4vw, 1.7rem); color: var(--ink); }
.bs-status h2 i { font-size: 1.6rem; flex: 0 0 auto; }
.bs-status p { margin: 0 0 12px; max-width: 90ch; }
.bs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 0.86rem; color: var(--muted); margin-bottom: 4px !important; }
.bs-meta-client { display: inline-flex; align-items: center; gap: 6px; }
.bs-meta-client strong { color: var(--ink); }
.bs-meta-client:empty { display: none; }
.bs-status .bs-file { word-break: break-all; }
.bs-status--passed { border-left-color: var(--ok-strong); background: var(--ok-soft); }
.bs-status--passed h2 i { color: var(--ok-strong); }
.bs-status--warnings { border-left-color: var(--warn-strong); background: var(--warn-soft); }
.bs-status--warnings h2 i { color: var(--warn-strong); }
.bs-status--failed { border-left-color: var(--bad-strong); background: var(--bad-soft); }
.bs-status--failed h2 i { color: var(--bad-strong); }
.bs-status--rejected { border-left-color: var(--muted); background: var(--cream-soft); }
.bs-status--rejected h2 i { color: var(--muted); }
.bs-actions { margin-top: 4px; }
.bs-client-edit { margin: 0 0 12px; }
.bs-confirm { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--warn-soft); border: 1px solid var(--warn-line); color: var(--warn); font-weight: 650; }
.bs-confirm p { margin: 0 0 10px; }

/* ---------- Inline forms (name, rename, move) --------------------------- */
.bs-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; padding: 12px; border-radius: var(--r-md); background: var(--surface); border: 1px dashed var(--line); }
.bs-inline-form[hidden] { display: none; }
.bs-inline-form label { font-weight: 700; color: var(--ink); font-size: 0.9rem; }
.bs-inline-form input { flex: 1 1 220px; width: auto; min-height: 40px; }
.bs-inline-form .bs-small { flex-basis: 100%; margin: 0; }

/* ---------- Overview: clients -> accounts -> files (R4-2) ---------------- */
.bs-org { margin-top: 22px; }
.bs-org-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.bs-org-title { margin: 0; font-size: 1.2rem; color: var(--teal-deep); flex: 1 1 auto; }
.bs-org-find { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 360px; }
.bs-org-find label { color: var(--muted); font-size: 1.1rem; }
.bs-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--cream-soft); border: 1px solid var(--line); }
.bs-seg-btn { appearance: none; border: 0; background: none; min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill); font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.bs-seg-btn:hover { color: var(--teal-dark); }
.bs-seg-btn[aria-pressed="true"] { background: var(--surface); color: var(--teal-deep); box-shadow: var(--sh-sm); }
.bs-clients { display: grid; gap: 16px; }
.bs-client { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-sm); overflow: hidden; }
.bs-client::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--line); }
.bs-client--ok::before { background: var(--grad); }
.bs-client--warn::before { background: var(--warn-strong); }
.bs-client--bad::before { background: var(--bad-strong); }
.bs-client--unnamed { border-style: dashed; }
.bs-client-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 18px 18px 12px; }
.bs-client-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bs-client-title h4 { margin: 0; font-size: 1.12rem; color: var(--teal-deep); overflow-wrap: anywhere; }
.bs-client-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: var(--teal-dark); background: var(--teal-soft); }
.bs-client--unnamed .bs-client-avatar { background: var(--cream-soft); color: var(--muted); }
.bs-client-counts { margin: 2px 0 0; color: var(--muted); font-size: 0.84rem; }
.bs-client-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-client > .bs-inline-form { margin: 0 18px 12px; }
.bs-accounts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.bs-account { padding: 14px 18px 16px; border-bottom: 1px solid var(--line-soft); display: grid; gap: 8px; }
.bs-account:last-child { border-bottom: 0; }
.bs-account:hover { background: var(--surface-2); }
.bs-account-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.bs-account-id { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.bs-account-bank { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: var(--ink); }
.bs-account-bank i { color: var(--teal); }
.bs-account-number { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.bs-account-facts { margin: 0; color: var(--muted); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.bs-account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-shared { display: flex; align-items: flex-start; gap: 6px; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: 0.86rem; font-weight: 650; }
.bs-account-files summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); font-size: 0.88rem; min-height: 24px; }
.bs-account-files[open] summary { margin-bottom: 8px; }
.bs-refused { margin: 0; padding: 12px 18px 16px; border-top: 1px solid var(--line-soft); background: var(--bad-wash); }
.bs-refused-title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 800; color: var(--bad); font-size: 0.9rem; }

.bs-filelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bs-fileitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 12px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--cream-soft); border: 1px solid var(--line-soft); font-size: 0.88rem; }
.bs-fileitem-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.bs-fileitem-detail { color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-fileitem--refused { background: var(--surface); }
.bs-fileitem--refused .bs-fileitem-detail { grid-column: 2 / 4; }
.bs-fileitem--reading { border-color: var(--info-line); background: var(--info-soft); }
.bs-remove { font-weight: 650; color: var(--muted); }
.bs-remove:hover { color: var(--bad); }
.bs-filelist--compact .bs-fileitem { background: transparent; border-style: dashed; }
.bs-join { display: flex; align-items: flex-start; gap: 8px; margin-left: 18px; padding: 4px 10px; font-size: 0.82rem; border-left: 2px solid var(--line); }
.bs-join i { font-size: 1rem; margin-top: 1px; flex: 0 0 auto; }
.bs-join--ok { color: var(--ok); border-left-color: var(--ok-line); }
.bs-join--warn { color: var(--warn); border-left-color: var(--warn-strong); }
.bs-join--bad { color: var(--bad); border-left-color: var(--bad-strong); font-weight: 650; }
.bs-files-block { margin: 18px 0 4px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-soft); background: var(--cream-soft); }
.bs-result .bs-files-block h3 { margin: 0 0 10px; font-size: 1rem; color: var(--ink); }
.bs-files-block .bs-fileitem { background: var(--surface); }

/* ---------- Tabs ---------------------------------------------------------- */
.bs-tabs-wrap { position: relative; margin: 22px 0 0; }
.bs-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.bs-tabs::-webkit-scrollbar { display: none; }
.bs-tab { appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: 0.55rem 0.95rem; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 10px 10px 0 0; transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.bs-tab:hover { color: var(--teal-dark); background: rgba(23,113,132,0.06); }
.bs-tab[aria-selected="true"] { color: var(--teal-deep); border-bottom-color: var(--teal); }
.bs-tab:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }
.bs-panel-body { padding-top: 1rem; }
.bs-result h3 { margin: 26px 0 10px; font-size: 1.08rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }

/* ---------- Summary tiles, issues --------------------------------------- */
.bs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 0; }
.bs-tile { padding: 12px 14px; border-radius: var(--r-md); background: var(--cream-soft); border: 1px solid var(--line-soft); }
.bs-tile dt { font-size: 0.8rem; color: var(--muted); }
.bs-tile dd { margin: 4px 0 0; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; word-break: break-word; }
.bs-issues h3 i { font-size: 1.2rem; }
.bs-issues--bad h3 i { color: var(--bad-strong); }
.bs-issues--warn h3 i { color: var(--warn-strong); }
.bs-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.bs-issues .bs-list { list-style: none; padding-left: 0; }
.bs-exception { line-height: 1.5; }
.bs-issues .bs-exception { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line-soft); border-left: 4px solid var(--line); }
.bs-issues .bs-exception--error { border-left-color: var(--bad-strong); }
.bs-issues .bs-exception--warning { border-left-color: var(--warn-strong); }
.bs-exception--error strong { color: var(--bad); }
.bs-exception--warning strong { color: var(--warn); }
.bs-msg { color: var(--ink); font-weight: 600; }
.bs-detail, .bs-raw, .bs-where { color: var(--muted); }
.bs-where { font-weight: 700; }
.bs-raw { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.86em; word-break: break-all; }
.bs-answer { color: var(--ok); font-weight: 600; }
.bs-jump { appearance: none; display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px; margin-right: 2px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--cream-soft); color: var(--teal-dark); font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; }
.bs-jump:hover { border-color: var(--teal); background: var(--teal-soft); }
.bs-notes { margin-top: 16px; }
.bs-notes summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 24px; }

/* ---------- Tables built for financial data (R1-4, R3-2) ----------------- */
.bs-scroll { position: relative; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface); }
.bs-scroll--tall { max-height: 70vh; overflow-y: auto; }
.bs-scroll[data-overflow="x"][data-at-end="0"] { -webkit-mask-image: linear-gradient(to right, black calc(100% - 56px), rgba(0,0,0,0.25)); mask-image: linear-gradient(to right, black calc(100% - 56px), rgba(0,0,0,0.25)); }
.bs-scroll-hint { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal-dark); font-size: 0.76rem; font-weight: 750; }
.bs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.bs-table--rows { min-width: 880px; }
.bs-table--checks { min-width: 720px; }
.bs-table--months { min-width: 1040px; }
.bs-table--ledger { min-width: 760px; }
.bs-table--compact { min-width: 420px; }
.bs-table th, .bs-table td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
.bs-table tbody tr { --row-bg: var(--surface); }
.bs-table tbody td { background: var(--row-bg); transition: background-color var(--fast) var(--ease); }
.bs-table--rows tbody tr:nth-child(even) { --row-bg: var(--surface-2); }
.bs-table tbody tr:hover { --row-bg: var(--row-hover); }
.bs-table thead th { position: sticky; top: 0; z-index: 2; background: var(--cream-soft); color: var(--ink); font-weight: 800; font-size: 0.84rem; white-space: nowrap; box-shadow: inset 0 -2px 0 var(--line), 0 6px 10px -10px rgba(16,50,58,0.45); }
.bs-table .bs-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-num--strong { font-weight: 800; color: var(--ink); }
.bs-narration { min-width: 260px; overflow-wrap: anywhere; }
.bs-table--rows td:nth-child(4) { overflow-wrap: anywhere; min-width: 8.4rem; }
.bs-idx { width: 3.6rem; min-width: 3.6rem; padding-left: 10px !important; padding-right: 8px !important; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-table--pin1 th:first-child, .bs-table--pin1 td:first-child,
.bs-table--pin2 th:first-child, .bs-table--pin2 td:first-child { position: sticky; left: 0; z-index: 1; }
.bs-table--pin2 th:nth-child(2), .bs-table--pin2 td:nth-child(2) { position: sticky; left: var(--pin1-w, 3.6rem); z-index: 1; }
.bs-table--pin1 thead th:first-child, .bs-table--pin2 thead th:first-child, .bs-table--pin2 thead th:nth-child(2) { z-index: 3; }
.bs-table--pin2 td:nth-child(2), .bs-table--pin2 th:nth-child(2) { min-width: 7.2rem; }
.bs-scroll[data-at-start="0"] .bs-table--pin1 td:first-child, .bs-scroll[data-at-start="0"] .bs-table--pin1 th:first-child,
.bs-scroll[data-at-start="0"] .bs-table--pin2 td:nth-child(2), .bs-scroll[data-at-start="0"] .bs-table--pin2 th:nth-child(2) { box-shadow: 8px 0 10px -8px rgba(16,50,58,0.35); }
.bs-row--error { --row-bg: var(--bad-soft) !important; }
.bs-row--warning { --row-bg: var(--warn-soft) !important; }
.bs-row--error td:first-child { box-shadow: inset 4px 0 0 var(--bad-strong); }
.bs-row--warning td:first-child { box-shadow: inset 4px 0 0 var(--warn-strong); }
.bs-sev { appearance: none; display: inline-flex; align-items: center; gap: 4px; min-width: 24px; min-height: 26px; padding: 2px 8px 2px 5px; border-radius: var(--r-pill); border: 1px solid transparent; font: inherit; font-weight: 800; font-size: 0.84rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.bs-sev i { font-size: 1rem; }
.bs-sev--bad { color: var(--bad); background: var(--paper); border-color: var(--bad-line); }
.bs-sev--warn { color: var(--warn); background: var(--paper); border-color: var(--warn-line); }
.bs-sev[aria-expanded="true"] { box-shadow: 0 0 0 2px currentColor; }
span.bs-sev { cursor: default; padding: 1px 4px; }
.bs-rowinfo td { background: var(--paper) !important; border-left: 4px solid var(--line); padding: 10px 16px 12px 22px; font-size: 0.88rem; }
.bs-rowinfo .bs-list { padding-left: 16px; }
.bs-rowinfo td { position: static !important; }
.bs-rowinfo td > * { position: sticky; left: 16px; max-width: min(760px, 82vw); }
.bs-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 10px 0 0; font-size: 0.84rem; color: var(--muted); }
.bs-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.bs-table tbody tr.is-pulse { animation: bs-pulse 1.2s ease-in-out 2; }
.bs-table tbody tr.is-pulse td { --row-bg: var(--teal-soft); }
@keyframes bs-pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: inset 0 0 0 2px var(--teal); } }
.bs-result-mark { display: inline-flex; align-items: center; gap: 5px; font-weight: 750; white-space: nowrap; }
.bs-result-mark i { font-size: 1.05rem; }
.bs-result-mark--pass { color: var(--ok); }
.bs-result-mark--fail { color: var(--bad); }
.bs-result-mark--na { color: var(--muted); }
.bs-two-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }

/* ---------- Ledger: one cell for the box and its suggestion (F5) --------- */
.bs-th-note { font-weight: 500; color: var(--muted); font-size: 0.8rem; }
.bs-table--ledger td { vertical-align: middle; }
.bs-ledger-cell { min-width: 15rem; width: 32%; }
#bs-ledger-rows input[type="text"] { width: 100%; min-width: 10rem; min-height: 38px; padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); font: inherit; color: var(--ink); }
.bs-suggest { display: grid; gap: 2px; margin-top: 6px; }
.bs-suggest:empty { display: none; }
.bs-suggest-pick { display: inline-flex; align-items: center; gap: 7px; width: max-content; max-width: 100%; min-height: 30px; padding: 3px 12px 3px 8px; border-radius: var(--r-pill); background: var(--teal-soft); color: var(--teal-deep); font-weight: 750; font-size: 0.86rem; cursor: pointer; }
.bs-suggest-pick input { width: 18px; height: 18px; accent-color: var(--teal); margin: 0; }
.bs-suggest-pick i { color: var(--teal); }
.bs-suggest-why { color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.bs-accepted { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); font-size: 0.82rem; font-weight: 700; }
.bs-ledger-actions { margin-top: 12px; }
.bs-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 10px; }
.bs-pager[hidden] { display: none; }
.bs-pager-text { font-weight: 700; color: var(--ink); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
/* A1: the months an account's statements cover, one cell a month; the words beside it say the same. */
.bs-coverage { display: grid; gap: 5px; }
.bs-cov-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.bs-cov { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 4px; border-radius: 4px; border: 1px solid transparent; font-size: 0.7rem; font-weight: 700; }
.bs-cov--full { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.bs-cov--part { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.bs-cov--none { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.bs-cov--judged { border-style: dashed; }
.bs-cov-year { margin: 0 3px 0 8px; font-size: 0.72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.bs-cov-year:first-child { margin-left: 0; }
.bs-cov-note { margin: 0; font-size: 0.84rem; color: var(--muted); }
.bs-cov-note--gaps { color: var(--warn); font-weight: 600; }
@media (forced-colors: active) { .bs-cov { border: 1px solid CanvasText; } .bs-cov--none { border-style: double; border-width: 3px; } }
/* P3: paste a table to have it checked like a file. */
.bs-paste { padding: 2px 4px; }
.bs-paste summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 24px; font-size: 0.92rem; }
.bs-paste[open] summary { margin-bottom: 6px; }
.bs-paste .bs-small { margin: 0 0 8px; max-width: 80ch; }
.bs-paste textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font-family: var(--mono); font-size: 0.84rem; line-height: 1.5; resize: vertical; }
.bs-paste textarea:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,113,132,0.22); }
.bs-paste .bs-row { margin-top: 8px; }
.bs-intake--compact .bs-paste { grid-column: 1 / -1; }

/* A5: the questions as a message the CA copies and sends. */
.bs-query-message { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.bs-query-message summary { cursor: pointer; font-weight: 700; color: var(--teal-dark); min-height: 24px; }
.bs-query-message[open] summary { margin-bottom: 8px; }
.bs-query-message textarea { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9rem; line-height: 1.5; resize: vertical; }
.bs-query-message textarea:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(23,113,132,0.22); }
.bs-query-message .bs-row { margin-top: 8px; }

/* A2: the client's ledger list, above the ledger table. */
.bs-ledgers { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: var(--cream-soft); }
.bs-ledgers .bs-small, .bs-ledgers .bs-ack { margin: 0; }
#bs-tally-block label { display: block; font-weight: 700; margin: 8px 0 6px; }
#bs-tally-bank { max-width: 420px; }
#bs-tally-block .bs-row, #bs-rules-block .bs-row, #bs-panel-queries .bs-row { margin-top: 12px; }

/* ---------- What it does, and what it does not --------------------------- */
.ws-facts { margin-top: 64px; }
.ws-facts h2 { margin: 0 0 24px; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .bs-spinner, .bs-dot { animation: none; }
  .bs-bar > span { transition: none; }
  .bs-drop, .bs-drop.is-over { transition: none; transform: none; }
  .bs-table tbody tr.is-pulse { animation: none; }
  .bs-table tbody tr.is-pulse td { box-shadow: inset 0 0 0 2px var(--teal); }
}

@media (max-width: 760px) {
  .bs-intake--compact { grid-template-columns: 1fr; }
  .bs-org-find { max-width: none; }
  .bs-client-head { padding: 16px 14px 10px; }
  .bs-account { padding: 12px 14px 14px; }
  .bs-fileitem { grid-template-columns: auto minmax(0, 1fr); }
  .bs-fileitem-detail { grid-column: 1 / -1; }
  .bs-fileitem .bs-remove { grid-column: 1 / -1; justify-self: start; }
  .bs-fileitem--refused .bs-fileitem-detail { grid-column: 1 / -1; }
}

/* R3-4: phones reconcile too - tables stay tables, with the first column pinned and a visible edge. */
@media (max-width: 640px) {
  .bs-app { padding: 14px; border-radius: var(--r-lg); }
  .bs-drop { min-height: 160px; padding: 18px 14px; }
  .bs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-tab { padding: 0.5rem 0.7rem; font-size: 0.9rem; }
  .bs-tabs-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 2px; width: 28px; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0), var(--surface)); }
  .bs-narration { min-width: 180px; }
  .bs-table--ledger { min-width: 0; }
  .bs-table--ledger thead { display: none; }
  .bs-table--ledger, .bs-table--ledger tbody, .bs-table--ledger tr, .bs-table--ledger td { display: block; width: auto; }
  .bs-table--ledger tbody tr { padding: 10px 12px 12px; border-bottom: 1px solid var(--line-soft); background: var(--row-bg); }
  .bs-table--ledger tbody td { position: static !important; padding: 2px 0 !important; border: 0; background: none; box-shadow: none !important; }
  .bs-table--ledger td.bs-idx { display: block; width: auto; min-width: 0; font-size: 0.78rem; font-weight: 800; }
  .bs-table--ledger td.bs-idx::before { content: "Row "; }
  .bs-table--ledger td.bs-narration { min-width: 0; font-weight: 600; color: var(--ink); }
  .bs-table--ledger td:nth-child(3), .bs-table--ledger td:nth-child(4) { display: inline-block; margin: 4px 12px 0 0; font-size: 0.82rem; color: var(--muted); }
  .bs-table--ledger td:nth-child(3):not(:empty)::before { content: "Channel: "; }
  .bs-table--ledger td:nth-child(4):not(:empty)::before { content: "Counterparty: "; }
  .bs-table--ledger .bs-ledger-cell { width: auto; min-width: 0; margin-top: 8px; }
  .bs-table th, .bs-table td { padding: 8px 9px; }
  .bs-client-title { flex-wrap: wrap; }
  .bs-client-title > div { flex: 1 1 150px; min-width: 0; }
  .bs-client-actions { width: 100%; }
  .bs-account-head .bs-chip { order: -1; }
  .bs-status { padding: 14px 14px 14px 16px; }
  .bs-actions .btn { flex: 1 1 auto; }
  .bs-seg { width: 100%; }
  .bs-seg-btn { flex: 1; }
}

@media (forced-colors: active) {
  .bs-chip, .bs-sev, .bs-jump, .bs-tag, .bs-suggest-pick, .bs-drop-private, .bs-crumb-back, .bs-seg, .bs-status, .bs-client, .bs-fileitem, .bs-tile, .bs-withheld, .bs-confirm, .bs-inline-form { border: 1px solid CanvasText; }
  .bs-status { border-left-width: 6px; }
  .bs-seg-btn[aria-pressed="true"] { outline: 2px solid Highlight; }
  .bs-tab[aria-selected="true"] { border-bottom-color: Highlight; }
  .bs-row--error td:first-child, .bs-row--warning td:first-child { box-shadow: none; border-left: 4px solid CanvasText; }
  .bs-bar { border: 1px solid CanvasText; }
  .bs-bar > span { background: Highlight; }
  .bs-scroll[data-overflow="x"] { -webkit-mask-image: none; mask-image: none; }
  .bs-client::before { background: CanvasText; }
}

@media print {
  .bs-intake, .bs-crumbs, .bs-tabs-wrap, .bs-actions, .bs-confirm, .bs-ack, .bs-account-actions, .bs-client-actions, .bs-inline-form, .bs-remove, .bs-pager, .bs-ledger-actions, .bs-org-toolbar .bs-seg, .bs-org-find, #bs-tally-block, #bs-rules-block, #bs-cma-download, .bs-legend, .bs-scroll-hint { display: none !important; }
  .bs-app { box-shadow: none; border: 0; padding: 0; }
  .bs-scroll, .bs-scroll--tall { overflow: visible; max-height: none; border: 0; -webkit-mask-image: none; mask-image: none; }
  .bs-table { min-width: 0 !important; font-size: 0.78rem; }
  .bs-table thead { display: table-header-group; }
  .bs-table thead th, .bs-table td { position: static !important; box-shadow: none !important; }
  .bs-table tr { break-inside: avoid; }
  .bs-status, .bs-client, .bs-account, .bs-tile { break-inside: avoid; }
  .bs-account-files > *:not(summary) { display: block !important; }
  .ws-facts { display: none; }
}


/* ---------- Phones: install buttons give way to "Send me the link" (DS4) -------------------
   A Chrome extension cannot be installed on a phone and a Windows installer cannot run on one,
   so on a touch phone those buttons led nowhere. There they are hidden and "Send me the link"
   takes their place - shown only once site-v23.js has wired it (data-ready), so it is never a
   dead control - with a line that says why, for a phone without JavaScript too. */
.send-link,
.phone-note,
.send-link-status { display: none; }
@media (max-width: 640px) and (pointer: coarse) {
  .install-only { display: none !important; }
  .send-link[data-ready] { display: inline-flex; }
  .phone-note { display: block; margin: 0; color: var(--muted); font-size: 0.9375rem; }
  .send-link-status { display: block; min-height: 1.4em; font-size: 0.875rem; color: var(--teal-dark); }
  .cta-band .phone-note,
  .cta-band .send-link-status { color: var(--on-dark-muted); }
}
/* In a row of buttons, the phone note and the status line each take a whole line. */
.phone-note,
.send-link-status { flex-basis: 100%; width: 100%; }

/* ---------- Touch targets on every page (DS4, v32) ----------------------------------------
   On a touch screen every button, the category chips, the legal pages' contents chips and the
   converter's sample links are at least 44px tall; a mouse keeps the denser sizes. */
@media (pointer: coarse) {
  .btn,
  .cat-link,
  .legal-toc a,
  .bs-linkbtn { min-height: 44px; }
}

/* =========================================================================
   DS7 - the GSTR downloader, as a CSS 3D scene (no WebGL, no library).

   A client's tray seen from above at an angle. The months drop into it in order, April to March.
   September never lands: it stops above its own empty place, flagged "Needs you" - the
   downloader's word for a month it could not get (its status reads "Failed - needs you"). No card
   carries a filed or verified mark: the downloader downloads, it does not file, and a file
   arriving is not a return being checked.

   One pass and then still. It moves only when the site's motion module has confirmed motion is
   wanted (html.motion-ok) and the scene has scrolled into view (.is-in); without JavaScript the
   finished picture is simply there. On a phone and for anyone who asked for reduced motion, a
   still image of the same picture stands in for it. The data is made up: the GSTIN is spelled
   with X's so it cannot be mistaken for a real one.
   ========================================================================= */

.dl-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
}

.dl-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.dl-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--ink-2);
}

.dl-points i {
  color: var(--teal);
  font-size: 1.1rem;
  margin-top: 2px;
}

.dl-scene {
  margin: 0;
}

.dl-stage {
  position: relative;
  height: 380px;
  perspective: 1200px;
  perspective-origin: 50% 30%;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
  border: 1px solid var(--line-soft);
}

.dl-world {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 420px;
  height: 300px;
  margin: -150px 0 0 -210px;
  transform-style: preserve-3d;
  transform: rotateX(56deg) rotateZ(-32deg);
}

.dl-tray {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px rgba(19, 38, 44, 0.16);
  transform-style: preserve-3d;
}

/* The tray's raised rim, so it reads as a container rather than a sheet. */
.dl-tray::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  border: 10px solid var(--teal-soft);
  transform: translateZ(1px);
}

.dl-path {
  position: absolute;
  left: 18px;
  top: -34px;
  padding: 6px 10px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--teal);
  color: var(--on-dark);
  font: 600 12px/1 var(--mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.dl-cards {
  position: absolute;
  inset: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  transform-style: preserve-3d;
}

.dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 9px;
  border-radius: var(--r-md);
  background: var(--cream-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font: 600 12px/1.2 var(--font);
  font-variant-numeric: tabular-nums;
  transform: translateZ(3px);
  transform-style: preserve-3d;
}

.dl-card small {
  font: 600 12px/1 var(--mono);
  color: var(--teal-dark);
}

/* September's place in the tray, left empty: a dashed outline where the file would be. */
.dl-slot {
  border-radius: var(--r-md);
  border: 2px dashed var(--warn-line);
  transform: translateZ(2px);
}

/* The month the portal could not give: held above its own place and labelled, in the warning
   colour - set aside for a person, never counted as done. It sits in the slot's grid cell, so it
   hovers over the place it never reached. */
.dl-card--needs {
  position: absolute;
  inset: 0;
  /* Both lines, start and end: an absolutely positioned grid item reads a missing end line as the
     grid's own edge, and would stretch across the rest of the tray. */
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background: var(--warn-soft);
  border-color: var(--warn-line);
  color: var(--warn);
  transform: translate3d(-14px, 26px, 40px) rotateZ(6deg);
  box-shadow: 0 18px 30px rgba(124, 82, 0, 0.18);
}

.dl-card--needs small {
  color: var(--warn);
}

.dl-flag {
  position: absolute;
  right: -10px;
  top: -14px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--warn-strong);
  color: var(--ink);
  font: 700 12px/1 var(--font);
  white-space: nowrap;
}

/* One pass, then still: each month drops in, in order; September stops short. The pass waits for
   the scene to scroll into view - the figure is a [data-reveal], which site-motion-v1.js marks
   .is-in - so a visitor sees it rather than arriving after it ended. */
html.motion-ok .dl-scene.is-in .dl-card {
  animation: dl-drop 700ms var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1)) both;
  animation-delay: calc(var(--i) * 110ms);
  animation-iteration-count: 1;
}

html.motion-ok .dl-scene.is-in .dl-card--needs {
  animation-name: dl-hold;
  animation-duration: 900ms;
}

html.motion-ok .dl-scene.is-in .dl-slot {
  animation: dl-slot 600ms ease both;
  animation-delay: calc(var(--i) * 110ms + 300ms);
  animation-iteration-count: 1;
}

@keyframes dl-drop {
  from {
    opacity: 0;
    transform: translateZ(220px);
  }

  to {
    opacity: 1;
    transform: translateZ(3px);
  }
}

@keyframes dl-hold {
  from {
    opacity: 0;
    transform: translateZ(220px);
  }

  to {
    opacity: 1;
    transform: translate3d(-14px, 26px, 40px) rotateZ(6deg);
  }
}

@keyframes dl-slot {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.dl-fallback {
  display: none;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
}

.dl-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}

/* A phone, or a visitor who asked for less motion: the still image, never the moving scene. */
@media (max-width: 760px), (prefers-reduced-motion: reduce) {
  .dl-stage {
    display: none;
  }

  .dl-fallback {
    display: block;
  }
}

@media (max-width: 1024px) {
  .dl-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media print {
  .dl-stage {
    display: none;
  }

  .dl-fallback {
    display: block;
  }
}
/*
 * The Access Workspace page styles that only the GST Return Downloader page needs (v34).
 *
 * This file carries ONLY the additions on top of styles-v30.css, which it is loaded after: the CDN
 * caches by URL, so a published stylesheet is never edited in place - a new versioned file is added
 * instead and pages link both. Existing pages do not link v31; they are unchanged.
 */

/* ── The downloader's year board ─────────────────────────────────────────── */

.gdb-session {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 1.25rem 0 0;
}

.gdb-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0.5rem 0 0;
}

.gdb-board {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.gdb-board table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 0.85rem;
}

.gdb-board th,
.gdb-board td {
  border: 1px solid var(--line);
  padding: 0.4rem 0.5rem;
  text-align: left;
  vertical-align: top;
}

.gdb-board th {
  background: var(--line-soft);
  font-weight: 600;
  white-space: nowrap;
}

.gdb-board td[data-tone="success"] { color: var(--green); font-weight: 600; }
.gdb-board td[data-tone="critical"] { color: var(--bad); font-weight: 600; }
.gdb-board td[data-tone="muted"] { color: var(--muted); }
.gdb-board td[data-tone="accent"] { color: var(--ink); font-weight: 600; }

.gdb-gstin { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; }

.gdb-status { font-size: 1rem; margin: 0.75rem 0 0; }

.gdb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ws-fy-select {
  font: inherit;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}