/* SG Works ERP website styles.
   One file, no frameworks. Colours come from the app itself (slate and amber).
   Sections: 1 fonts, 2 tokens, 3 base, 4 layout, 5 header, 6 buttons and chips, 7 home, 8 lists and figures,
   9 FAQ, 10 forms and tools, 11 long text (legal), 12 footer, 13 print and page changes,
   14 icons and illustrations, 15 motion, 16 demo steps, video, back to top. */

/* 1. Fonts (self-hosted, trimmed to the characters the site uses, rupee sign included) */
@font-face {
  font-family: "Anek Latin";
  src: url("../fonts/anek-latin-text.65a1d98456.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Anek Latin Narrow";
  src: url("../fonts/anek-latin-narrow-700.094d3aa216.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Tokens. The plain values are the light theme and also serve browsers without light-dark(). */
:root {
  color-scheme: light dark;
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-2: #F1F5F9;
  --text: #0F172A;
  --body: #334155;
  --muted: #475569;
  --line: #E2E8F0;
  --line-strong: #94A3B8;
  --control: #64748B;
  --accent: #F59E0B;
  --accent-hover: #FBBF24;
  --on-accent: #0F172A;
  --accent-text: #B45309;
  --band: #0F172A;
  --band-2: #1E293B;
  --band-text: #FFFFFF;
  --band-muted: #CBD5E1;
  --ok: #047857;
  --ok-bg: #ECFDF5;
  --soon: #92400E;
  --soon-bg: #FFFBEB;
  --soon-line: #FDE68A;
  --err: #B91C1C;
  --err-bg: #FEF2F2;
  --focus: #0F172A;
  --float-bg: #0F172A;
  --float-text: #FFFFFF;
  --amber: #F59E0B;
  --amber-soft: #FDE7B0;
  --art-bg: #E6ECF4;
  --art-fill: #EEF2F7;
  --rule: rgba(15, 23, 42, .055);
  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 14px 30px -16px rgba(15, 23, 42, .3);
  --radius: .5rem;
  --radius-lg: .75rem;
  --font: "Anek Latin", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --font-head: "Anek Latin Narrow", "Anek Latin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
@supports (color: light-dark(#000, #fff)) {
  :root {
    --bg: light-dark(#F8FAFC, #0F172A);
    --surface: light-dark(#FFFFFF, #1E293B);
    --surface-2: light-dark(#F1F5F9, #172033);
    --text: light-dark(#0F172A, #F8FAFC);
    --body: light-dark(#334155, #CBD5E1);
    --muted: light-dark(#475569, #A3B1C6);
    --line: light-dark(#E2E8F0, #334155);
    --line-strong: light-dark(#94A3B8, #64748B);
    --control: light-dark(#64748B, #94A3B8);
    --accent: light-dark(#F59E0B, #FBBF24);
    --accent-hover: light-dark(#FBBF24, #FCD34D);
    --accent-text: light-dark(#B45309, #FCD34D);
    --band: light-dark(#0F172A, #020617);
    --band-2: light-dark(#1E293B, #0F172A);
    --ok: light-dark(#047857, #6EE7B7);
    --ok-bg: light-dark(#ECFDF5, #064E3B);
    --soon: light-dark(#92400E, #FDE68A);
    --soon-bg: light-dark(#FFFBEB, #422006);
    --soon-line: light-dark(#FDE68A, #854D0E);
    --err: light-dark(#B91C1C, #FCA5A5);
    --err-bg: light-dark(#FEF2F2, #450A0A);
    --focus: light-dark(#0F172A, #FBBF24);
    --float-bg: light-dark(#0F172A, #FBBF24);
    --float-text: light-dark(#FFFFFF, #0F172A);
    --amber: light-dark(#F59E0B, #FBBF24);
    --amber-soft: light-dark(#FDE7B0, #6B4A12);
    --art-bg: light-dark(#E6ECF4, #1B2638);
    --art-fill: light-dark(#EEF2F7, #2A3950);
    --rule: light-dark(rgba(15, 23, 42, .055), rgba(148, 163, 184, .09));
    --shadow: 0 1px 2px light-dark(rgba(15, 23, 42, .06), rgba(0, 0, 0, .4)), 0 14px 30px -16px light-dark(rgba(15, 23, 42, .3), rgba(0, 0, 0, .7));
  }
}
/* The theme switch writes its choice into the color-scheme meta tag; these rules follow it. */
:root:has(> head > meta[name="color-scheme"][content="dark"]) { color-scheme: dark; }
:root:has(> head > meta[name="color-scheme"][content="light"]) { color-scheme: light; }

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  /* keeps the fallback font the same visual size as Anek Latin while the font file loads */
  font-size-adjust: 0.489;
  color: var(--body);
  background: var(--bg);
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.45rem + 3.5vw, 3.6rem); line-height: 1.04; }
h2 { font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.4rem); }
h3 { font-size: 1.3rem; line-height: 1.2; }
h4 { font-size: 1.1rem; line-height: 1.25; }
p, ul, ol, dl, figure, table { margin: 0; }
p { text-wrap: pretty; }
a { color: var(--text); text-decoration-line: underline; text-decoration-color: var(--accent-text); text-decoration-thickness: .09em; text-underline-offset: .18em; }
a:hover { color: var(--accent-text); }
strong { font-weight: 600; color: var(--text); }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: .2rem; }
::selection { background: #FDE68A; color: #0F172A; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--surface); color: var(--text);
  padding: .7rem 1rem; border-radius: var(--radius); border: 2px solid var(--focus); font-weight: 600;
}
.skip-link:focus { top: 1rem; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .9375rem; }
.nowrap { white-space: nowrap; }

/* 4. Layout */
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.wrap--narrow { max-width: 48rem; }
.section { padding-block: clamp(2.75rem, 7vw, 5rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3rem); }
.section--alt { background: var(--surface); border-block: 1px solid var(--line); }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }
[data-render] > section + section { margin-top: 2.25rem; }
.lede { font-size: 1.2rem; line-height: 1.5; max-width: 60ch; }
.section-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); }
.section-head p { margin-top: .75rem; }
.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  /* a split whose picture has not arrived yet closes up: the words take the row, at a readable width */
  .split > :only-child { grid-column: 1 / -1; max-width: 46rem; }
  .split--flip > :first-child { order: 2; }
}
.cols { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .cols--2, .cols--3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }
.page-head { padding-block: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 1rem; }
.page-art { width: 7.5rem; margin-bottom: 1rem; }
@media (min-width: 48rem) {
  .page-head > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(11rem, 22vw, 16rem); column-gap: clamp(1.5rem, 4vw, 3rem); align-content: center; }
  .page-head > .wrap > * { grid-column: 1; }
  .page-head > .wrap > .page-art { grid-column: 2; grid-row: 1 / span 8; align-self: center; width: auto; margin: 0; }
  .page-head > .wrap--narrow { grid-template-columns: minmax(0, 1fr) 10.5rem; }
}
.crumbs { font-size: .9375rem; color: var(--muted); margin-bottom: .9rem; }
.crumbs a { color: var(--muted); }

/* 5. Header and navigation */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 1.25rem; pointer-events: none; opacity: 0; z-index: -1;
  box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .5); }
.progress { position: absolute; inset: auto 0 -1px; height: 3px; background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.header-inner { display: flex; align-items: center; gap: .5rem 1rem; min-height: 4rem; }
.site-logo { display: inline-flex; align-items: center; margin-right: auto; padding-block: .5rem; color: var(--text); text-decoration: none; }
.wordmark { display: block; height: 1.7rem; width: auto; }
.wm-main { fill: currentColor; }
.wm-erp { fill: var(--muted); }
.wm-rule { fill: var(--amber); }
.header-login { font-weight: 600; padding: .65rem .5rem; white-space: nowrap; }
.menu-button {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .5rem .8rem;
  font: inherit; font-weight: 600; color: var(--text); background: transparent;
  border: 1.5px solid var(--control); border-radius: var(--radius); cursor: pointer;
}
.menu-button svg { width: 1.15rem; height: 1.15rem; }
.site-menu { list-style: none; margin: 0; padding: .5rem; }
.site-menu a { display: block; padding: .7rem .75rem; border-radius: .4rem; text-decoration: none; color: var(--text); font-weight: 500; }
.site-menu a:hover { background: var(--surface-2); color: var(--text); }
.site-menu a[aria-current="page"] { font-weight: 700; box-shadow: inset 3px 0 0 var(--amber); }
.site-menu .nav-cta { padding: .5rem .25rem .25rem; }
.site-menu .nav-cta .btn { display: flex; }
.site-menu .nav-rule { height: 1px; background: var(--line); margin: .4rem .5rem; padding: 0; }
@media (max-width: 69.99rem) {
  .site-menu {
    position: fixed; inset: auto; inset-block-start: 4.5rem; inset-inline-end: 1rem;
    inline-size: min(22rem, calc(100vw - 2rem));
    max-block-size: calc(100vh - 6rem); max-block-size: calc(100dvh - 6rem);
    overflow: auto; background: var(--surface); color: var(--text);
    border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  }
  /* browsers without the popover feature: the script opens and closes the menu with a class */
  .js .site-menu:not([popover]):not(.is-open) { display: none; }
  .site-menu .nav-login { display: none; }
}
@media (min-width: 70rem) {
  .menu-button, .header-login--bar, .site-menu .nav-more, .site-menu .nav-rule { display: none; }
  .site-nav { flex: 1; margin-left: 1.5rem; }
  .site-menu {
    position: static; display: flex; align-items: center; gap: .15rem; inline-size: auto; max-inline-size: none;
    block-size: auto; max-block-size: none; overflow: visible; margin: 0; padding: 0; border: 0;
    background: transparent; box-shadow: none; color: inherit;
  }
  .site-menu a { padding: .55rem .7rem; white-space: nowrap; }
  .site-menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--amber); border-radius: .2rem; }
  .site-menu .nav-login { margin-left: auto; }
  .site-menu .nav-cta { padding: 0 0 0 .5rem; }
  .site-menu .nav-cta .btn { display: inline-flex; min-height: 2.6rem; padding: .5rem 1rem; }
}

/* 6. Buttons, chips, notes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem;
  padding: .7rem 1.3rem; border-radius: var(--radius); border: 1.5px solid transparent;
  font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.btn, .tile, .toc a, .mods a, .wa-float, .to-top, .menu-button, .theme-toggle, .motion-toggle {
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, box-shadow .2s ease-out, translate .2s ease-out, scale .12s ease-out;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.btn--block { display: flex; width: 100%; }
.btn svg { width: 1.2rem; height: 1.2rem; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.actions--stack { flex-direction: column; align-items: stretch; }
@media (min-width: 30rem) { .actions--stack { flex-direction: row; align-items: center; } }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem; border-radius: 999px;
  font-size: .875rem; font-weight: 600; line-height: 1.35; white-space: nowrap;
}
.chip--live { background: var(--ok-bg); color: var(--ok); }
.chip--live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.chip--soon { background: var(--soon-bg); color: var(--soon); box-shadow: inset 0 0 0 1px var(--soon-line); }
.chip--type { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.more a { display: inline-block; padding-block: .3rem; }
.note {
  border-left: 4px solid var(--amber); background: var(--surface); padding: .9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0; box-shadow: inset 0 0 0 1px var(--line);
}
.note > * + * { margin-top: .5rem; }
.empty { padding: 1.5rem; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); }

/* 7. Home: hero and the live invoice */
.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-block: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 4vw, 2.5rem); }
.hero__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 62rem) { .hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); } }
.hero h1 span { display: block; }
.hero .lede { margin-top: 1.1rem; }
.hero .actions { margin-top: 1.6rem; }
.hero__login { margin-top: 1.1rem; }

.demo { background: var(--band); color: var(--band-text); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 1.5rem); }
.demo__controls { display: grid; gap: .75rem 1rem; margin-bottom: 1rem; }
@media (min-width: 30rem) { .demo__controls { grid-template-columns: 1fr 1fr; } }
.demo .field > label { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--band-text); }
.demo select {
  width: 100%; min-height: 2.9rem; padding: .5rem .7rem; font: inherit; font-size: max(1rem, 1em);
  color: #0F172A; background: #FFFFFF; border: 2px solid transparent; border-radius: var(--radius); color-scheme: light;
}
.demo .field--primary select { border-color: var(--amber); }
.demo :focus-visible { outline-color: #FBBF24; }
.demo__note { margin-top: 1rem; color: var(--band-muted); font-size: .9375rem; }
.demo__why { margin-top: .9rem; font-weight: 500; }

/* the invoice is paper: it stays light in the dark theme too */
.sheet {
  color-scheme: light; background: #FFFFFF; color: #0F172A; border-radius: .2rem; padding: clamp(.9rem, 3vw, 1.35rem);
  font-size: .95rem; line-height: 1.4; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 16px 30px -14px rgba(0, 0, 0, .6);
}
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid #0F172A; padding-bottom: .4rem; }
.sheet__title { font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; line-height: 1.1; }
.sheet__tag { color: #475569; font-size: .85rem; }
.sheet__parties { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-block: .7rem; }
.sheet__parties small { display: block; color: #475569; font-size: .85rem; }
.sheet__parties b { display: block; font-weight: 600; }
.sheet__parties span { display: block; overflow-wrap: anywhere; }
.sheet__lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid #0F172A; }
.line { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; padding: .55rem 0; border-bottom: 1px solid #E2E8F0; align-items: baseline; }
.line__name { font-weight: 600; }
.line__amount { text-align: right; }
.line__meta { color: #475569; font-size: .85rem; grid-column: 1 / -1; }
.line__edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; color: #334155; }
.line__edit label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-weight: 500; color: #334155; font-size: .9rem; }
.line__edit input {
  width: 5.2rem; min-height: 2.4rem; padding: .25rem .5rem; font: inherit; font-size: max(1rem, 1em); text-align: right;
  color: #0F172A; background: #F8FAFC; border: 1.5px solid #64748B; border-radius: .35rem; font-variant-numeric: tabular-nums;
}
.line__edit input:focus-visible { outline-color: #0F172A; }
.sheet__tax { margin-top: .6rem; margin-left: auto; width: min(100%, 17.5rem); }
.tax-row { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem .5rem; }
.tax-row--hl { background: #FFFBEB; box-shadow: inset 3px 0 0 #F59E0B; }
.tax-row--total { margin-top: .3rem; padding-block: .35rem; font-weight: 700; font-size: 1.08rem; border-top: 1px solid #0F172A; border-bottom: 3px double #0F172A; }
.sheet__words { margin-top: .6rem; color: #475569; font-size: .88rem; }
/* the split of the tax, drawn as one bar: two halves for CGST and SGST, one whole for IGST */
.taxbar { position: relative; height: 2.6rem; margin-top: 1rem; font-size: .95rem; font-weight: 600; color: #0F172A; font-variant-numeric: tabular-nums; }
.taxbar__seg { position: absolute; top: 0; bottom: 0; width: 50%; background: #F59E0B; transition: background-color .35s ease-out, translate .35s cubic-bezier(.2, .7, .2, 1); }
.taxbar__seg--a { left: 0; border-radius: .4rem 0 0 .4rem; translate: -3px 0; }
.taxbar__seg--b { right: 0; border-radius: 0 .4rem .4rem 0; translate: 3px 0; background: #FCD34D; }
.taxbar__label { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; width: 50%; padding-inline: .4rem; white-space: nowrap; overflow: hidden; transition: opacity .25s ease-out; }
.taxbar__label--a { left: 0; }
.taxbar__label--b { right: 0; }
.taxbar__label--w { left: 0; width: 100%; opacity: 0; }
.taxbar[data-kind="inter"] .taxbar__seg { translate: 0 0; background: #F59E0B; }
.taxbar[data-kind="inter"] .taxbar__label--a, .taxbar[data-kind="inter"] .taxbar__label--b { opacity: 0; }
.taxbar[data-kind="inter"] .taxbar__label--w { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .taxbar__seg, .taxbar__label { transition: none; } }
@media (prefers-reduced-motion: no-preference) {
  .sheet__tax.is-changing .tax-row--hl { animation: tax-flash .5s ease-out both; }
  .sheet__tax.is-switching .tax-row--hl { animation: tax-in .42s cubic-bezier(.2, .7, .2, 1) both; }
  .sheet__tax.is-switching .tax-row--hl + .tax-row--hl { animation-delay: .09s; }
  .sheet__tax.is-switching .tax-row--total { animation: tax-total .7s ease-out .15s both; }
  @keyframes tax-flash { from { background: #FDE68A; } }
  @keyframes tax-in { from { opacity: 0; translate: -.75rem 0; background: #FDE68A; } }
  @keyframes tax-total { 40% { background: #FEF3C7; } }
}

/* the path from quotation to GST return: five steps, each an icon in a ring, joined by a line */
.flow { list-style: none; padding: 0; display: grid; gap: 0; }
.flow li { position: relative; padding: 0 0 1.6rem 4.7rem; min-height: 3.5rem; }
.flow li:last-child { padding-bottom: 0; }
.flow li::after { content: ""; position: absolute; left: 1.69rem; top: 3.75rem; bottom: .25rem; width: 2px; background: var(--line-strong); transform-origin: 50% 0; }
.flow li:last-child::after { display: none; }
.flow h3 { font-size: 1.15rem; padding-top: .3rem; }
.flow p { margin-top: .25rem; }
}

/* 8. Ledger rows, module list, facts, screenshots, band */
.ledger { list-style: none; padding: 0; border-top: 2px solid var(--text); }
.ledger__row { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: .8rem .2rem; border-bottom: 1px solid var(--line); }
.ledger__name { display: block; font-weight: 600; color: var(--text); }
.ledger__text { display: block; color: var(--muted); font-size: .97em; }
.ledger__row a { font-weight: 600; }

.mods { list-style: none; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--text); }
@media (min-width: 46rem) { .mods { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.mods a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1rem .2rem; border-bottom: 1px solid var(--line); text-decoration: none; }
.mods a:hover .mods__name { color: var(--accent-text); }
.mods__icon, .mod-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .6rem; background: var(--art-bg); color: var(--text); flex: none; }
.mod-head { display: flex; align-items: center; gap: .8rem; }
.mods__name { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.mods__count { font-family: var(--font); font-weight: 500; font-size: .9rem; color: var(--muted); white-space: nowrap; }
.mods__text { display: block; margin-top: .2rem; color: var(--body); }

.facts { display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 46rem) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { border-top: 2px solid var(--text); padding-top: .8rem; }
.facts dt, .facts h2, .facts h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--text); }
.facts dd, .facts p { margin: .3rem 0 0; }

.shot img { width: 100%; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
.shot figcaption { margin-top: .5rem; font-size: .9375rem; color: var(--muted); }
.shot--phone { max-width: 17rem; margin-inline: auto; }
.shot--phone img { border-radius: 0; background: none; box-shadow: none; }
.shot--phone figcaption { text-align: center; }

.band { background: var(--band); color: var(--band-muted); }
.band h2, .band h3, .band strong { color: var(--band-text); }
.band a:not(.btn) { color: var(--band-text); text-decoration-color: #FBBF24; }
.band .btn--ghost { color: var(--band-text); border-color: var(--band-text); }
.band .btn--ghost:hover { background: var(--band-2); }
.band :focus-visible { outline-color: #FBBF24; }
.band__inner { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 50rem) { .band__inner { grid-template-columns: 1fr auto; } }

.tiles { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 46rem) { .tiles { grid-template-columns: repeat(3, 1fr); } .tiles--2 { grid-template-columns: 1fr 1fr; } }
.tile { display: block; height: 100%; padding: 1.2rem 1.25rem 1.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; }
a.tile:hover { border-color: var(--text); color: inherit; }
.tile--art { display: grid; grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 22vw, 8.5rem); gap: 1rem; align-items: center; }
.tile__art { display: block; }
.tile h2, .tile h3 { font-size: 1.3rem; line-height: 1.2; text-decoration: underline; text-decoration-color: var(--accent-text); text-decoration-thickness: .08em; text-underline-offset: .18em; }
.tile p { margin-top: .4rem; color: var(--body); }

.log { list-style: none; padding: 0; border-top: 2px solid var(--text); }
.log > li { display: grid; gap: .3rem 2rem; padding: 1.1rem .2rem; border-bottom: 1px solid var(--line); }
@media (min-width: 46rem) { .log > li { grid-template-columns: 11rem 1fr; } }
.log time { font-weight: 600; color: var(--text); }
.log h2 { display: inline; font-size: 1.15rem; margin-left: .5rem; }
.log p { margin-top: .35rem; }
.log__item + .log__item { margin-top: .9rem; }

/* 9. FAQ (plain details elements; the marker sits before the question) */
.faq { border-top: 2px solid var(--text); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary {
  list-style: none; display: flex; align-items: baseline; gap: .8rem; padding: .95rem .2rem; cursor: pointer;
  font-weight: 600; color: var(--text); font-size: 1.08rem;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::before {
  content: ""; flex: none; width: .55em; height: .55em; margin-left: .15em; border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor; transform: translateY(-.1em) rotate(-45deg);
}
.faq__item[open] > summary::before { transform: translateY(-.2em) rotate(45deg); }
.faq__a { padding: 0 .2rem 1.1rem 1.7rem; max-width: 68ch; }
.faq__a > * + * { margin-top: .6rem; }
@media (prefers-reduced-motion: no-preference) {
  .faq__item > summary::before { transition: transform .2s; }
  .faq__item::details-content { interpolate-size: allow-keywords; overflow: clip; contain: layout; transition: block-size .25s ease-in-out, content-visibility .25s; transition-behavior: allow-discrete; }
  .faq__item:not([open])::details-content { block-size: 0; }
}

/* 10. Forms and tools */
.field > label, .field > .label { display: block; font-weight: 600; color: var(--text); margin-bottom: .3rem; }
.hint { display: block; color: var(--muted); font-size: .9375rem; margin-bottom: .4rem; }
.input, .select {
  width: 100%; min-height: 3rem; padding: .6rem .8rem; font: inherit; font-size: max(1rem, 1em); color: var(--text);
  background: var(--surface); border: 1.5px solid var(--control); border-radius: var(--radius);
}
.input:is(:user-invalid, .is-invalid), .input[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
.error-msg { display: none; margin-top: .45rem; color: var(--err); font-weight: 500; }
.error-msg.is-shown { display: block; }
.error-msg::before { content: "Error: "; font-weight: 700; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--2 .span-2 { grid-column: 1 / -1; } }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; font-weight: 600; color: var(--text); margin-bottom: .4rem; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 1.5rem); }
.tool { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 56rem) { .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 3.4rem; padding: .4rem .9rem;
  border: 1.5px solid var(--control); border-radius: var(--radius); background: var(--surface); color: var(--text); font-weight: 600;
}
.choice input:checked + span { background: var(--band); color: var(--band-text); border-color: var(--band); box-shadow: inset 0 -4px 0 var(--amber); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.choices--wide .choice { flex: 1 1 14rem; }
.choices--wide .choice span { width: 100%; justify-content: flex-start; text-align: left; font-weight: 500; padding: .6rem .9rem; }
.rate-custom { display: flex; align-items: center; gap: .5rem; margin-top: .6rem; }
.rate-custom .input { width: 7rem; }

.result { font-variant-numeric: tabular-nums; }
.result__rows { border-top: 2px solid var(--text); }
.result__row { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .2rem; border-bottom: 1px solid var(--line); }
.result__row span:last-child { color: var(--text); font-weight: 500; text-align: right; }
.result__row--total { font-weight: 700; font-size: 1.2rem; border-bottom: 3px double var(--text); }
.result__row--total span { color: var(--text); font-weight: 700; }
.result__words { margin-top: .7rem; color: var(--muted); }

.verdict { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: var(--radius); font-weight: 600; }
.verdict--ok { background: var(--ok-bg); color: var(--ok); }
.verdict--bad { background: var(--err-bg); color: var(--err); }
.verdict--warn { background: var(--soon-bg); color: var(--soon); box-shadow: inset 0 0 0 1px var(--soon-line); }
.verdict ul { margin: .3rem 0 0; padding-left: 1.1rem; font-weight: 500; }
.gstin-strip { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: 1rem; font-variant-numeric: tabular-nums; }
.gstin-strip span { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; }
.gstin-strip b { display: block; padding: .35rem .5rem; border: 1.5px solid var(--text); border-radius: .35rem; font-size: 1.15rem; letter-spacing: .12em; background: var(--surface); color: var(--text); font-weight: 600; }
.gstin-strip i { font-style: normal; font-size: .8rem; color: var(--muted); }
.gstin-input { text-transform: uppercase; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.parts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: .35rem 1.25rem; }
.parts dt { color: var(--muted); }
.parts dd { margin: 0; color: var(--text); font-weight: 500; overflow-wrap: anywhere; }

.due { list-style: none; padding: 0; border-top: 2px solid var(--text); }
.due li { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: .75rem .2rem; border-bottom: 1px solid var(--line); align-items: baseline; }
.due__form { font-weight: 700; color: var(--text); }
.due__date { font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.due__what { color: var(--muted); font-size: .95em; }
.due__left { color: var(--muted); font-size: .95em; text-align: right; }
.due__left--soon { color: var(--soon); font-weight: 600; }

.table-wrap { overflow-x: auto; }
.cell-note { display: block; margin-top: .2rem; color: var(--muted); font-size: .9375rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; overflow-wrap: anywhere; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .6rem .75rem .6rem .2rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { border-bottom: 2px solid var(--text); color: var(--text); font-weight: 600; }
tbody th { color: var(--text); font-weight: 600; white-space: nowrap; }

.login-box__row { display: flex; align-items: stretch; border: 1.5px solid var(--control); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.login-box__row:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.login-box__row .input { border: 0; border-radius: 0; min-width: 0; flex: 1; outline: none; background: transparent; }
.login-box__suffix { display: inline-flex; align-items: center; padding: 0 .8rem 0 .1rem; color: var(--muted); white-space: nowrap; font-weight: 500; }
.login-box__row.is-invalid { border-color: var(--err); background: var(--err-bg); }
.login-box .btn { margin-top: .8rem; }
.login-box__saved { margin-top: .8rem; font-size: .9375rem; color: var(--muted); }
.link-button { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--accent-text); text-underline-offset: .18em; }
.preview-msg { white-space: pre-wrap; background: var(--surface-2); border-radius: var(--radius); padding: .8rem 1rem; color: var(--text); font-size: .97rem; }

/* 11. Long text: legal pages and guides */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem); margin-top: 2.4rem; padding-top: 1.1rem; border-top: 2px solid var(--text); }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .4rem; }
.prose table { font-size: .97rem; }
.plain-list { padding-left: 1.2rem; }
.plain-list li + li { margin-top: .4rem; }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 1.7rem; }
.check-list li + li { margin-top: .5rem; }
.check-list li::before { content: ""; position: absolute; left: .15rem; top: .45em; width: .95rem; height: .5rem; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.toc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.toc a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: .35rem .9rem; border: 1.5px solid var(--control); border-radius: 999px; text-decoration: none; font-weight: 600; background: var(--surface); }
.toc a:hover { border-color: var(--text); color: var(--text); }

/* 12. Footer and the floating WhatsApp button */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: clamp(2rem, 5vw, 3rem) 6rem; font-size: 1rem; }
.footer-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 52rem) { .footer-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 52rem) { .footer-brand { grid-column: auto; } }
.footer-brand .wordmark { height: 1.6rem; color: var(--text); }
.footer-brand p { margin-top: .8rem; max-width: 30ch; }
.site-footer h2 { font-family: var(--font); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin-bottom: .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: .1rem; }
.site-footer li a { display: inline-block; padding-block: .32rem; text-decoration: none; color: var(--body); }
.site-footer li a:hover { color: var(--text); text-decoration: underline; }
.footer-legal { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; gap: .8rem; color: var(--muted); font-size: .9375rem; }
@media (min-width: 52rem) { .footer-legal { grid-template-columns: 1fr auto; align-items: start; } }
.theme-toggle { display: none; font: inherit; font-weight: 600; color: var(--text); background: transparent; border: 1.5px solid var(--control); border-radius: var(--radius); min-height: 2.75rem; padding: .4rem .9rem; cursor: pointer; }
@supports (color: light-dark(#000, #fff)) { .js .theme-toggle { display: inline-flex; align-items: center; } }
.theme-toggle .to-light { display: none; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .to-dark { display: none; }
  .theme-toggle .to-light { display: inline; }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle .to-dark { display: none; }
:root:has(> head > meta[name="color-scheme"][content="dark"]) .theme-toggle .to-light { display: inline; }
:root:has(> head > meta[name="color-scheme"][content="light"]) .theme-toggle .to-dark { display: inline; }
:root:has(> head > meta[name="color-scheme"][content="light"]) .theme-toggle .to-light { display: none; }

.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3.25rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--float-bg); color: var(--float-text);
  font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px -6px rgba(2, 6, 23, .55);
}
.wa-float:hover { color: var(--float-text); filter: brightness(1.12); }
.to-top {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 40; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--control); box-shadow: 0 6px 18px -8px rgba(2, 6, 23, .5);
  text-decoration: none; visibility: hidden; opacity: 0;
}
.to-top:hover { color: var(--text); border-color: var(--text); }
.to-top.is-shown { visibility: visible; opacity: 1; }
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 100vh; pointer-events: none; visibility: hidden; }
.wa-float svg { width: 1.35rem; height: 1.35rem; flex: none; }

/* 13. Print, and moving from page to page */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* a short cross-fade between pages; the header and the floating buttons stay where they are */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  .wa-float { view-transition-name: wa-float; }
  ::view-transition-old(root) { animation: vt-out .14s ease-in both; }
  ::view-transition-new(root) { animation: vt-in .26s ease-out both; }
  @keyframes vt-out { to { opacity: 0; } }
  @keyframes vt-in { from { opacity: 0; translate: 0 .5rem; } }
}
[id] { scroll-margin-top: .5rem; }
@media print {
  .site-header nav, .header-login, .wa-float, .to-top, .site-footer ul, .theme-toggle, .motion-toggle, .skip-link, .band .btn, .progress, .video-slot { display: none !important; }
  .site-header { position: static; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 1rem; }
  a { text-decoration: none; }
}

/* 14. Icons and illustrations (all drawn for this site; colours follow the theme) */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-a { stroke: var(--amber); }
.i-f { fill: currentColor; stroke: none; }
.art { display: block; width: 100%; height: auto; color: var(--text); fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.a-bg { fill: var(--art-bg); stroke: none; }
.a-paper { fill: var(--surface); }
.a-fill { fill: var(--art-fill); }
.a-soft { stroke: var(--line-strong); }
.a-amber { fill: var(--amber); stroke: none; }
.a-amber-p { fill: var(--amber-soft); }
.a-amber-l { stroke: var(--amber); }
.a-ok { stroke: var(--ok); stroke-width: 3; }
.a-ink { fill: currentColor; stroke: none; }
.a-on { fill: #0F172A; stroke: none; }
.a-on-l { stroke: #0F172A; }
.art text { font-family: var(--font-head); font-weight: 700; fill: currentColor; stroke: none; }
.art text.a-on { fill: #0F172A; }

/* 15. Motion. Everything here is extra: with reduced motion, or in a browser without these features, the page is simply still. */

/* hover and press feedback (colour changes always; lifting only where a mouse hovers and motion is welcome) */
@media (hover: hover) {
  .btn:hover { box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .55); }
  a.tile:hover { box-shadow: var(--shadow); }
  .to-top:hover, .wa-float:hover { box-shadow: 0 10px 22px -8px rgba(2, 6, 23, .6); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover, .toc a:hover, .to-top:hover, .wa-float:hover { translate: 0 -2px; }
  a.tile:hover { translate: 0 -4px; }
  .mods a:hover .mods__icon { translate: 0 -2px; }
  .mods__icon { transition: translate .2s ease-out; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active, a.tile:active, .to-top:active, .wa-float:active { scale: .98; translate: 0 0; }
}

/* the hero background: ledger rules, two slow lights, and a row marker that steps down the page */
.motion-toggle { display: none; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .35rem .8rem; font: inherit; font-size: .9375rem; font-weight: 600;
  color: var(--muted); background: transparent; border: 1.5px solid var(--line-strong); border-radius: 999px; cursor: pointer; }
.motion-toggle:hover { color: var(--text); border-color: var(--text); }
.motion-toggle .icon { width: 1.1rem; height: 1.1rem; }
.motion-toggle .when-paused, .motion-paused .motion-toggle .when-playing { display: none; }
.motion-paused .motion-toggle .when-paused { display: inline; }
.motion-paused .motion-toggle svg.when-paused { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .motion-toggle { display: inline-flex; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* these follow the scroll position; the browser runs them without any script */
  @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
    /* the header gives up .75rem of height in the first .75rem of scrolling, and gains a shadow */
    .site-header { top: -.75rem; }
    .header-inner { animation: header-settle auto linear both; animation-timeline: scroll(block root); animation-range: 0px .75rem; }
    .site-logo .wordmark { transform-origin: 0 50%; animation: logo-shrink auto linear both; animation-timeline: scroll(block root); animation-range: 0px 3rem; }
    .site-header::after { animation: fade-in auto linear both; animation-timeline: scroll(block root); animation-range: 0px 3rem; }
    /* how far down a long page you are */
    .progress { animation: progress auto linear both; animation-timeline: scroll(block root); }
    @keyframes header-settle { to { translate: 0 .375rem; } }
    @keyframes logo-shrink { to { scale: .9; } }
    @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
    @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    /* a screenshot grows the last few percent as it comes up the screen */
    .shot img { animation: settle auto linear both; animation-timeline: view(); animation-range: entry 0% entry min(100%, 14rem); }
    @keyframes settle { from { scale: .965; } }

    /* the steps of a flow are joined by a line that draws itself as the list comes up the screen */
    .flow { view-timeline: --flow block; }
    .flow li::after { animation: flow-link-y auto linear both; animation-timeline: --flow; }
    /* when each line draws, as a share of the list's trip up the screen */
    .flow li { --r0: 6%; --r1: 12%; --l0: 11%; --l1: 15%; }
    .flow li:nth-child(2) { --r0: 14%; --r1: 20%; --l0: 19%; --l1: 23%; }
    .flow li:nth-child(3) { --r0: 22%; --r1: 28%; --l0: 27%; --l1: 31%; }
    .flow li:nth-child(4) { --r0: 30%; --r1: 36%; --l0: 35%; --l1: 39%; }
    .flow li:nth-child(5) { --r0: 38%; --r1: 44%; }
    .flow li::after { animation-range: cover var(--l0) cover var(--l1); }
    @keyframes flow-link-y { from { scale: 1 0; } }
  }
}
/* Sections that start below the screen rise into place once, when they arrive. The script marks them (.pre) only after it
   has seen that they are below the screen, so nothing is hidden if the script does not run. The move takes half a second
   and then the text is still: it is never left half-faded. */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal { transition: opacity .5s ease-out, translate .5s cubic-bezier(.2, .7, .2, 1); }
  .reveal.pre { opacity: 0; translate: 0 1.25rem; transition: none; }
}
/* the back-to-top button appears after one screen of scrolling (a small script does the same job in older browsers) */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .to-top { animation: to-top auto linear both; animation-timeline: scroll(block root); animation-range: 99vh 100vh; }
  @keyframes to-top { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } }
}

/* 16. Book a demo steps, the intro video */
.steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 1.25rem; }
@media (min-width: 50rem) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.steps li { counter-increment: step; position: relative; padding: 1.2rem 1.25rem 1.3rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: .8rem; border-radius: 50%;
  background: var(--amber); color: #0F172A; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; }
.steps h3 { font-size: 1.25rem; }
.steps p { margin-top: .35rem; }
.band .steps li { background: var(--band-2); border-color: #334155; color: var(--band-muted); }
.steps__cta { margin-top: 1.75rem; }

.video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #0F172A; box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; width: 100%; display: grid; grid-template-rows: 1fr auto auto 1fr; place-items: center; gap: .9rem; padding: 1rem;
  font: inherit; color: #FFFFFF; cursor: pointer; border: 0;
  background: radial-gradient(60% 80% at 80% 0%, rgba(245, 158, 11, .28), rgba(245, 158, 11, 0)), repeating-linear-gradient(0deg, transparent 0 calc(2.5rem - 1px), rgba(148, 163, 184, .1) calc(2.5rem - 1px) 2.5rem), #0F172A; }
.video__poster { grid-row: 1; align-self: end; display: flex; gap: clamp(.6rem, 3vw, 1.5rem); color: #CBD5E1; }
.video__poster .icon { width: clamp(1.5rem, 5vw, 2.25rem); height: clamp(1.5rem, 5vw, 2.25rem); }
.video__btn { grid-row: 2; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #F59E0B; color: #0F172A; transition: scale .2s ease-out; }
.video__btn .icon { width: 2.2rem; height: 2.2rem; }
.video__label { grid-row: 3; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.1rem, 3.5vw, 1.6rem); text-align: center; }
.video__play:focus-visible { outline: 3px solid #FBBF24; outline-offset: -6px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .video__play:hover .video__btn { scale: 1.07; } }