/* =============================================================================
   bakicheck.com: the website stylesheet. Standalone, zero dependencies.
   =============================================================================

   SOURCE OF THE LOOK
   LD's own pricing design from his claude.ai chat, saved in the product folder
   at design_ld/website/project/Main.dc.html (13 October 2026). The pricing page
   is built exactly from it; every other page uses the same parts.

   COLOUR, all from that design
     #22513D  deep green (the app's green, LD 16 Oct 2026): header, hero, the green panels, the final call to action
     #1F6B45  green: links, outline buttons, ticks, icons
     #2E6149  the billing switch track and the phone tray on the deep green
     #13261C  ink, and the dark card and the footer
     #4A5A50  muted text on light surfaces
     #F4F7F1  the ground every page stands on
     #FFFFFF  cards
     #D9E3DA, #E3EAE4, #E3EFE6, #C9DCCF, #D6E6DA  lines and tints
     #F2C230  yellow (the app's yellow). A solid yellow fill is ALWAYS an action or the one tag that
              marks the plan on sale, and it ALWAYS carries dark ink #13261C
              (9.7:1). White on yellow is never used anywhere.
     #FFF4C7  warm note: the promise strip and the "before you pay" notice

   TYPE
   Bricolage Grotesque for headings and figures, Hind for everything else, body
   17px on a 1.55 line. Both are self hosted in fonts/ (nothing is asked of
   Google). Hind is used for Latin AND Devanagari, so the Hindi pages are set in
   the same face as the English ones. The Devanagari file is a separate family
   ("Hind Deva") that only the Hindi pages name, so an English page never pays
   for it.

   HOW TYPE ON GREEN WORKS, so nobody undoes it
   The real palette lives in the *-base tokens. The working tokens (--ink,
   --text-2, --text-3, --pine, --focus, --rule, --hairline, --hover) point at
   them. `.on-green` REMAPS the working tokens to the light on green set, so every
   paragraph, list and link inside a green surface turns light with no per
   element rule. Objects that keep the light palette on green (a card, a table,
   a button, a pill) point the working tokens back at the *-base values. That is
   the only mechanism. tools/build.mjs guards the three specificity leaks that
   once broke it.

   MOBILE FIRST
   Everything outside a media query is the phone, checked at 360px. Widths widen
   at 560px, 880px and 1080px. No horizontal scroll at any width.
   ============================================================================= */

/* ----------------------------------------------------------------- tokens -- */
:root {
  color-scheme: light;

  --ground: #F4F7F1;
  --paper: #FFFFFF;
  --deep: #22513D;
  --deep-2: #2E6149;
  --dark: #13261C;
  --dark-2: #1F3A2A;
  --green: #1F6B45;
  --tint: #E3EFE6;
  --edge: #D9E3DA;
  --row: #E3EAE4;
  --yellow: #F2C230;
  --yellow-hover: #F6CF55;
  --note-bg: #FFF4C7;
  --note-edge: #F0D774;
  --note-ink: #3D2E00;
  --note-ink-2: #5C4600;
  --tag-ink: #6B4E00;

  /* the real palette. `.on-green` leaves these alone. */
  --ink-base: #13261C;
  --text-2-base: #4A5A50;
  --text-3-base: #4A5A50;
  --pine-base: #1F6B45;
  --focus-base: #1F6B45;
  --hairline-base: #D9E3DA;
  --rule-base: #E3EAE4;
  --hover-base: #EEF4EF;

  /* the working palette. `.on-green` points these at the light on green set. */
  --ink: var(--ink-base);
  --text-2: var(--text-2-base);
  --text-3: var(--text-3-base);
  --pine: var(--pine-base);
  --focus: var(--focus-base);
  --hairline: var(--hairline-base);
  --rule: var(--rule-base);
  --hover: var(--hover-base);

  /* the light on green set */
  --nav-bg: var(--deep);
  --nav-ink: #FFFFFF;
  --nav-ink-2: #D6E6DA;
  --nav-edge: #70A087;
  --nav-hover: rgba(255, 255, 255, .10);
  --nav-focus: var(--yellow);

  /* the credit palette, the app's own. Always matte: no gradient, no shadow. */
  --ok: #166534;     --ok-bg: #E6F4EA;
  --warn: #6E4500;   --warn-bg: #FFF1CF;
  --stop: #9F1D14;   --stop-bg: #FDE8E5;
  --muted: #333833;  --muted-bg: #E9EDE8;
  --edge-overdue: #F04438;

  --sh-card: 0 12px 32px rgba(34, 81, 61, .10);
  --sh-lead: 0 20px 48px rgba(34, 81, 61, .28);

  --font-body: 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Bricolage Grotesque', 'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* the Hindi pages: Latin first, so BakiCheck, WhatsApp and every figure stay
     in the Latin faces, then Hind's own Devanagari */
  --font-indic: 'Hind', 'Hind Deva', 'Nirmala UI', 'Noto Sans Devanagari', system-ui, sans-serif;
  --font-indic-head: 'Bricolage Grotesque', 'Hind', 'Hind Deva', 'Nirmala UI', 'Noto Sans Devanagari', system-ui, sans-serif;

  --r-card: 24px;
  --r-box: 20px;
  --r-tile: 16px;
  --r-pill: 999px;

  --gutter: 16px;
  --shell: 1200px;
  --measure: 68ch;
  --tap-min: 44px;
  --dur: 160ms;

  --band: 56px;

  /* the size of one pixel inside a phone mockup. 1px is the design size; the
     home hero lowers it on a short screen so the whole phone fits (see hero) */
  --s: 1px;
}

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: break-word;
}
html[lang="hi"] body { font-family: var(--font-indic); line-height: 1.62; }

img, svg { max-width: 100%; }
svg { display: block; }

h1, h2, h3, h4 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; margin-bottom: 14px; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
h4 { font-size: 17px; font-weight: 700; }
/* Devanagari matras need air, and Bricolage's tight tracking is tuned for
   Latin. Hind has no 800, so Hindi headings ask for 700 and get Hind SemiBold. */
html[lang="hi"] :is(h1, h2, h3, h4) {
  font-family: var(--font-indic-head);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
}
html[lang="hi"] h1 { line-height: 1.22; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 16px; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--pine); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }

/* Hind ships 400 and 600 here, so bold is 600 everywhere */
strong, b { font-weight: 600; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: 8px; top: 8px; z-index: 60;
  transform: translateY(-200%);
  background: var(--paper); color: var(--ink-base);
  border: 2px solid var(--green); border-radius: 12px;
  padding: 8px 14px; font-weight: 600; text-decoration: none;
}
.skip:focus-visible { transform: translateY(0); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ frame -- */
.wrap {
  width: 100%;
  max-width: calc(var(--shell) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 16px; }

/* Sections stand on the ground with generous space above. The page closes with
   the same space below its last section. */
main > section { padding-top: var(--band); }
main > section.tight { padding-top: 36px; }
main { padding-bottom: var(--band); }

/* `.on-paper` was a white band in the earlier look. LD's design has one ground
   and white objects standing on it, so the class keeps its name and loses its
   band. */
.on-paper { background: none; }

/* ------------------------------------------------------- the green surface --
   Deep green, as in the design's header, hero and final call to action.
   -------------------------------------------------------------------------- */
.on-green {
  background: var(--nav-bg);
  color: var(--nav-ink);
  --ink: var(--nav-ink);
  --text-2: var(--nav-ink-2);
  --text-3: var(--nav-ink-2);
  --pine: var(--nav-ink);
  --focus: var(--nav-focus);
  --hairline: var(--nav-edge);
  --rule: var(--nav-edge);
  --hover: var(--nav-hover);
}

/* Objects keep the light palette on a green surface. This rule only puts the
   working tokens back; it sets no colour of its own. */
.on-green :is(.card, .phone, .block, .plan-light, .quote, .box, table, .btn,
              .pill, .credit, .menu, .working) {
  --ink: var(--ink-base);
  --text-2: var(--text-2-base);
  --text-3: var(--text-3-base);
  --pine: var(--pine-base);
  --focus: var(--focus-base);
  --hairline: var(--hairline-base);
  --rule: var(--rule-base);
  --hover: var(--hover-base);
}
/* Objects whose text colour is INHERITED take ink back explicitly. `.credit`
   and `.pill` are deliberately absent: they set their own colour from the
   credit palette, and a colour here would turn a red credit check into ink.
   Every selector in both lists is a plain class, so the specificity stays low. */
.on-green :is(.card, .phone, .block, .plan-light, .quote, .box, table,
              .menu, .working) {
  color: var(--ink-base);
}
/* `:not(.btn)` is load bearing. Without it `.on-green a` beats `.btn-primary`
   and paints a yellow button's label white. */
.on-green a:not(.btn) { color: var(--nav-ink); }
.on-green a:not(.btn):hover { color: var(--nav-ink); }
.on-green :is(.card, .block, .plan-light, .quote, .box, table) a:not(.btn) { color: var(--pine-base); }
/* the open menu panel is white inside the green header: its links are ink and
   the page you are on is green */
.on-green .menu a:not(.btn) { color: var(--ink-base); }
.on-green .menu a[aria-current="page"] { color: var(--pine-base); }

/* A green PANEL: a green section that is not a hero becomes a rounded deep
   green card standing on the ground, as the design's final call to action is. */
section.on-green.panel { background: none; }
section.on-green.panel > .wrap {
  max-width: calc(var(--shell) + 2 * var(--gutter));
  padding: 0 var(--gutter);
  background: none;
}
section.on-green.panel > .wrap > .panel-in {
  background: var(--deep);
  border-radius: var(--r-card);
  padding: 36px 20px;
}

.eyebrow {
  margin: 0 0 14px;
  font-size: 14px; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pine);
}
.on-green .eyebrow { color: var(--yellow); }
html[lang="hi"] .eyebrow { letter-spacing: 0.02em; }

.lede { font-size: 19px; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.statement { font-size: 18px; line-height: 1.5; color: var(--text-2); max-width: 62ch; }
.note { font-size: 15px; line-height: 1.45; color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.after-text { margin-top: 28px; }
.lead-out { margin-top: 28px; }

/* ----------------------------------------------------------------- buttons --
   Pills. A solid yellow pill is the action and always carries dark ink.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap-min); padding: 10px 22px;
  border-radius: var(--r-pill); border: 2px solid var(--green);
  font: 600 17px/1.2 var(--font-body);
  text-align: center; text-decoration: none; cursor: pointer;
  background: transparent; color: var(--green);
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
html[lang="hi"] .btn { font-family: var(--font-indic); }
.btn:hover { background: var(--tint); color: var(--deep); }
.btn-primary {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--ink-base);
}
.btn-primary:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); color: var(--ink-base); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.btn-sm { min-height: var(--tap-min); padding: 8px 16px; font-size: 15px; }
.btn-block { width: 100%; }
/* an outline button on a green surface is light, like the design's हिन्दी pill */
.on-green .btn:not(.btn-primary) { border-color: var(--nav-edge); color: var(--nav-ink); }
.on-green .btn:not(.btn-primary):hover { background: var(--nav-hover); }
.on-green :is(.card, .block) .btn:not(.btn-primary) { border-color: var(--edge); color: var(--ink-base); }

.link-plain { font-weight: 600; min-height: var(--tap-min); display: inline-flex; align-items: center; }

.cta-row { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta-sub { margin-top: 12px; font-size: 15px; color: var(--text-3); }

/* ------------------------------------------------------- the promise strip --
   Line A, LD's own refund promise, above the header on every page except the
   two legal pages. Warm note colours, not a button.
   -------------------------------------------------------------------------- */
.promise-bar {
  background: var(--note-bg); color: var(--note-ink);
  border-bottom: 1px solid var(--note-edge);
  text-align: center;
}
.promise-bar .wrap { padding-block: 10px; }
.promise-bar p { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 600; }
.promise-bar p + p { margin-top: 2px; font-size: 14px; font-weight: 400; color: var(--note-ink-2); }
.promise-bar a { color: var(--note-ink); font-weight: 600; }
.promise-bar a:hover { color: var(--ink-base); }

/* ----------------------------------------------------------------- header --
   A green surface through `on-green` in the markup. `.site-head` itself sets
   no colour: build.mjs fails if it ever does.
   -------------------------------------------------------------------------- */
.head-row {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; min-height: 72px; padding-block: 12px;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 20px/1 var(--font-head); letter-spacing: -0.02em;
  color: var(--nav-ink); text-decoration: none; white-space: nowrap;
}
.on-green .wordmark:not(.btn) { color: var(--nav-ink); }
/* The logo mark draws its own tile (LD's choice of 16 Oct 2026). Its colours are
   the two brand tokens, so the header mark can never drift from the page. */
.logo-tile { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; }
.logo-tile svg { width: 100%; height: 100%; }
.logo-tile .lm-tile { fill: var(--yellow); }
.logo-tile .lm-ink { stroke: var(--deep); }
.logo-tile .lm-gap { stroke: var(--yellow); }

.head-actions { display: flex; align-items: center; gap: 8px; }

.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 0 14px;
  border: 1px solid var(--nav-edge); border-radius: var(--r-pill);
  font-size: 16px; font-weight: 400; text-decoration: none; white-space: nowrap;
}
.on-green .lang-toggle:not(.btn) { color: var(--nav-ink); }
.lang-toggle:hover { background: var(--nav-hover); }
.lang-toggle[lang="en"] { font-family: var(--font-body); }

.btn-head { min-height: var(--tap-min); padding: 0 18px; font-size: 16px; border-width: 0; display: none; }

.nav-wide { display: none; }

.menu { position: static; }
.menu > summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 14px;
  border: 1px solid var(--nav-edge); border-radius: var(--r-pill);
  color: var(--nav-ink); font-size: 16px; font-weight: 600;
  cursor: pointer; list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--nav-hover); }
.menu-panel {
  position: absolute; right: var(--gutter); top: calc(100% - 4px); z-index: 40;
  width: max-content; min-width: 13rem; max-width: calc(100vw - 2rem);
  background: var(--paper);
  border: 1px solid var(--edge); border-radius: var(--r-tile);
  box-shadow: var(--sh-card);
  padding: 8px;
}
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel a {
  display: flex; align-items: center; min-height: var(--tap-min);
  padding: 8px 14px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px;
}
.menu-panel a:hover { background: var(--hover); }
.menu-panel .btn { width: 100%; min-height: 48px; font-size: 17px; }
.menu-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--edge);
}

/* Sign in: the quiet outline pill with the person icon, as in LD's header
   design. It sits before the yellow trial button, in the header from 760 px and
   as the first button in the phone menu. Its box is 44 px tall at least. */
.btn-signin svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-signin-head { display: none; min-height: var(--tap-min); padding: 0 18px; gap: 8px; font-size: 16px; }
.btn-head, .btn-signin-head { white-space: nowrap; }
.on-green .menu-panel .btn-signin { border-color: var(--green); color: var(--green); }
.on-green .menu-panel .btn-signin:hover { background: var(--tint); color: var(--deep); }

/* ------------------------------------------------------------------- hero -- */
.hero { padding-block: 48px 56px; }
main > section.hero { padding-top: 48px; }
.hero h1 { margin-bottom: 18px; max-width: 20ch; }
.hero .lede { color: var(--nav-ink-2); }
.hero-grid { display: grid; gap: 40px; }
.hero .cta-row { margin-top: 28px; }
.hero .cta-sub { color: var(--nav-ink-2); }

/* the head of every inner page */
.hero.inner h1 { font-size: clamp(34px, 4.6vw, 54px); max-width: 22ch; }
.hero.inner .prose { margin-top: 20px; color: var(--nav-ink-2); }

/* the pricing hero, centred, with the cards rising into it */
.hero.center { text-align: center; padding-bottom: 140px; }
.hero.center .wrap { max-width: calc(860px + 2 * var(--gutter)); display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hero.center h1, .hero.center .eyebrow, .hero.center .lede { margin: 0; }
.hero.center .lede { max-width: 620px; }

/* ----------------------------------------------------- the phone mockups --
   Renderings of the product's own screens, built from its own tokens, with
   sample data, always captioned as sample data.
   -------------------------------------------------------------------------- */
.phone {
  width: 100%; max-width: calc(368 * var(--s)); margin-inline: auto;
  border-radius: calc(28 * var(--s)); padding: calc(12 * var(--s));
  background: var(--ground);
  border: 1px solid var(--edge);
}
.on-green .phone { border: 0; background: var(--deep-2); }
.card {
  background: var(--paper);
  border: 1px solid var(--edge); border-radius: calc(20 * var(--s));
  overflow: hidden;
}
.card.alert { border-top: calc(4 * var(--s)) solid var(--edge-overdue); }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(8 * var(--s)); padding: calc(16 * var(--s)) calc(16 * var(--s)) calc(8 * var(--s));
}
.card-head h3 { margin: 0; font-size: calc(17 * var(--s)); line-height: 1.3; }
.card-head .note { font-size: calc(15 * var(--s)); white-space: nowrap; color: var(--text-2); }
.card-note { margin: -8px 0 0; padding: 0 calc(16 * var(--s)) calc(12 * var(--s)); }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(88 * var(--s));
  gap: calc(4 * var(--s)) calc(8 * var(--s)); padding: calc(12 * var(--s)) calc(16 * var(--s));
  border-top: 1px solid var(--rule); font-size: calc(15 * var(--s));
}
.lines .l-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.lines .l-amt { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.lines .l-meta { grid-column: 1 / -1; font-size: calc(14 * var(--s)); color: var(--text-2); overflow-wrap: anywhere; }
.lines li.flagged { border-left: calc(3 * var(--s)) solid var(--ink); }
.card-total {
  display: flex; justify-content: space-between; gap: calc(8 * var(--s)); margin: 0;
  padding: calc(12 * var(--s)) calc(16 * var(--s)); border-top: 1px solid var(--hairline);
  font-size: calc(15 * var(--s)); font-weight: 600; font-variant-numeric: tabular-nums;
}
/* the credit check strip. MATTE: no gradient, no shadow, at any size, on any
   surface. A pill is never put inside it: both are the same fill. */
.credit {
  display: flex; align-items: flex-start; gap: calc(8 * var(--s));
  margin: 0; padding: calc(12 * var(--s)) calc(16 * var(--s));
  background: var(--muted-bg); color: var(--muted);
  background-image: none !important; box-shadow: none !important;
  border: 0; border-top: 1px solid var(--hairline);
  font-size: calc(14 * var(--s));
}
.credit.is-stop { background: var(--stop-bg); color: var(--stop); }
.credit.is-ok { background: var(--ok-bg); color: var(--ok); }
.credit.is-warn { background: var(--warn-bg); color: var(--warn); }
.credit.is-muted { background: var(--muted-bg); color: var(--muted); }
.credit-glyph { width: calc(20 * var(--s)); height: calc(20 * var(--s)); flex: 0 0 calc(20 * var(--s)); margin-top: calc(2 * var(--s)); }
.credit-body { min-width: 0; }
.credit-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(4 * var(--s)) calc(8 * var(--s)); margin: 0; }
.credit-word { font-size: calc(18 * var(--s)); font-weight: 600; line-height: 1.2; }
.credit-fig { font-family: var(--font-head); font-size: calc(24 * var(--s)); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.credit-hindi { margin: calc(2 * var(--s)) 0 0; font-family: var(--font-indic); font-size: calc(14 * var(--s)); line-height: 1.45; }
.credit-facts { margin: calc(4 * var(--s)) 0 0; font-size: calc(14 * var(--s)); line-height: 1.4; }
.card-gloss { margin: 14px auto 0; max-width: 34ch; list-style: none; padding: 0; font-size: 14px; color: var(--text-2); }
.card-gloss li + li { margin-top: 4px; }
.card-actions { display: flex; flex-wrap: wrap; gap: calc(8 * var(--s)); padding: calc(12 * var(--s)) calc(16 * var(--s)); border-top: 1px solid var(--hairline); }
.card-actions .btn { font-size: calc(15 * var(--s)); min-height: calc(44 * var(--s)); padding: calc(8 * var(--s)) calc(16 * var(--s)); }
.btn[aria-disabled="true"], .btn.is-off { opacity: 0.55; cursor: not-allowed; }
figure.shot { margin: 0; }
figure.shot figcaption { margin-top: calc(12 * var(--s)); font-size: calc(15 * var(--s)); text-align: center; max-width: 34ch; margin-inline: auto; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; min-height: 28px; border-radius: var(--r-pill);
  background: var(--muted-bg); color: var(--muted);
  background-image: none !important; box-shadow: none !important; border: 0;
  font: 600 14px/1 var(--font-body); white-space: nowrap;
}
.pill svg { width: 16px; height: 16px; flex: 0 0 16px; }
.pill.is-ok { background: var(--ok-bg); color: var(--ok); }
.pill.is-warn { background: var(--warn-bg); color: var(--warn); }
.pill.is-stop { background: var(--stop-bg); color: var(--stop); }
.pill.is-muted { background: var(--muted-bg); color: var(--muted); }

/* ------------------------------------------------------------ the objects -- */
.grid { display: grid; gap: 16px; }
.block {
  background: var(--paper); border-radius: var(--r-box);
  padding: 24px;
}
.block h2 { font-size: 28px; }
.block h3 { margin-bottom: 8px; }
.block p { color: var(--text-2); }
.block p strong { color: var(--ink); }

/* the design's numbered steps: a green rail and a yellow number */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps > li {
  counter-increment: s; position: relative;
  background: var(--paper); border-radius: var(--r-box);
  padding: 20px 20px 20px 72px;
}
.steps > li::before {
  content: counter(s);
  position: absolute; left: 20px; top: 20px;
  width: 36px; height: 36px; border-radius: 12px;
  background: var(--yellow); color: var(--ink-base);
  display: flex; align-items: center; justify-content: center;
  font: 800 17px/1 var(--font-head);
}
.steps h3 { margin-bottom: 6px; }
.steps p { color: var(--text-2); }

/* a list of statements: each one a white tile on the ground */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 80ch; }
.plain-list > li { background: var(--paper); border-radius: var(--r-tile); padding: 16px 20px; }
.on-green .plain-list > li { background: var(--deep-2); }

.tick-list { margin: 0; padding-left: 1.25rem; max-width: 80ch; }
.tick-list > li { margin-bottom: 8px; }

/* ----------------------------------------------------------------- tables -- */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--paper); border: 1px solid var(--edge); border-radius: var(--r-tile);
  font-size: 16px; overflow: hidden;
}
caption { caption-side: top; text-align: left; font-weight: 600; padding-bottom: 8px; }
th, td { text-align: left; padding: 12px 16px; vertical-align: top; line-height: 1.45; }
th { font-weight: 600; }
thead th { border-bottom: 1px solid var(--edge); background: var(--ground); }
tbody tr + tr > * { border-top: 1px solid var(--row); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total > * { font-weight: 600; border-top: 1px solid var(--edge); }
tr.total td.num { font-family: var(--font-head); font-size: 19px; font-weight: 700; }

@media (max-width: 759px) {
  table.stack { border: 0; background: none; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack tr {
    display: block; background: var(--paper);
    border-radius: var(--r-tile); margin-bottom: 10px; padding: 4px 16px;
  }
  table.stack tbody tr + tr > * { border-top: 0; }
  table.stack td, table.stack th { display: block; padding: 8px 0; text-align: left; border-bottom: 1px solid var(--row); }
  table.stack tr > *:last-child { border-bottom: 0; }
  table.stack td[data-h]::before, table.stack th[data-h]::before {
    content: attr(data-h); display: block; font-size: 14px; font-weight: 600; color: var(--text-3);
  }
  table.stack th[scope="row"][data-h]::before { content: none; }
  table.stack th[scope="row"] { font-size: 17px; padding-top: 12px; }
  table.stack td.num { text-align: left; }
}
.scroll-x { overflow-x: auto; }

.box {
  background: var(--paper); border-left: 4px solid var(--green);
  border-radius: var(--r-tile); padding: 16px 20px; max-width: 80ch;
}
details.working { background: var(--paper); border-radius: var(--r-tile); padding: 12px 20px; }
details.working > summary { font-weight: 600; cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; }
details.working > *:not(summary) { margin-top: 16px; }

blockquote.quote {
  margin: 0; padding: 20px; background: var(--paper);
  border-left: 4px solid var(--yellow); border-radius: var(--r-tile);
  font-size: 16px; color: var(--ink-base);
}

.toc { list-style: none; margin: 0; padding: 0; columns: 1; }
.toc li { break-inside: avoid; }
.toc a { display: flex; align-items: center; min-height: var(--tap-min); font-weight: 600; font-size: 16px; }
.toc-label { font-size: 14px; font-weight: 600; color: var(--text-3); margin: 24px 0 4px; }
h2[id], h3[id] { scroll-margin-top: 1rem; }

/* ================================================================ PRICING ==
   Built exactly from LD's design. Plans rise 100px into the hero.
   ========================================================================== */
.billing {
  display: inline-flex; gap: 4px; padding: 6px; margin-top: 8px;
  background: var(--deep-2); border-radius: var(--r-pill);
}
.billing button {
  min-height: var(--tap-min); padding: 10px 26px;
  border: 0; border-radius: var(--r-pill);
  font: 600 16px/1.2 var(--font-body); cursor: pointer;
  background: transparent; color: var(--nav-ink);
}
html[lang="hi"] .billing button { font-family: var(--font-indic); }
.billing button[aria-pressed="true"] { background: var(--yellow); color: var(--ink-base); }
.billing button:focus-visible { outline: 3px solid var(--nav-ink); outline-offset: 2px; }
.bill-note { margin: 0; font-size: 15px; color: var(--nav-ink-2); }
.bill-note strong { color: var(--yellow); }

/* Progressive enhancement. With no script the switch is hidden and both prices
   show. With the script, aria-pressed on the switch is the one source of truth
   and these rules read it. A browser without :has() shows both prices, which
   is the no script view and is still correct. */
html:not(.js) .billing { display: none; }
html.js:has(.billing [data-bill="m"][aria-pressed="true"]) .y-only { display: none; }
html.js:has(.billing [data-bill="y"][aria-pressed="true"]) .m-only { display: none; }

.plans-band { padding-top: 0 !important; margin-top: -100px; }
.plans {
  display: grid; gap: 28px 24px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
}
.plan {
  position: relative;
  display: flex; flex-direction: column; gap: 24px;
  border-radius: var(--r-card); padding: 32px 24px 28px;
}
.plan-light { background: var(--paper); border: 1px solid var(--edge); box-shadow: var(--sh-card); color: var(--ink-base); }
.plan-lead { background: var(--dark); color: #FFFFFF; border: 2px solid var(--yellow); box-shadow: var(--sh-lead); }
.plan-tag {
  position: absolute; top: -16px; left: 24px;
  padding: 6px 14px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; line-height: 1.3;
}
.plan-lead .plan-tag { background: var(--yellow); color: var(--ink-base); }
.plan-light .plan-tag { background: var(--tint); color: var(--green); }
.plan-head { display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.plan-head h2 { font-size: 30px; font-weight: 800; margin: 0; }
.plan-head .gloss { font-family: var(--font-indic); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.plan-for { margin: 0; font-size: 16px; color: var(--text-2-base); }
.plan-lead .plan-for { color: #C9DCCF; }

.price { display: flex; flex-direction: column; gap: 6px; }
.price p { margin: 0; }
.price-chip {
  align-self: flex-start; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600;
}
.plan-lead .price-chip { background: var(--yellow); color: var(--ink-base); }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.price-big {
  font-family: var(--font-head); font-size: 50px; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.price-unit, .price-gst { font-size: 16px; color: var(--text-2-base); }
.plan-lead :is(.price-unit, .price-gst, .price-small) { color: #C9DCCF; }
.price-small { font-size: 15px; color: var(--text-2-base); }
/* the Coming soon price slot: same height as a price, no figure in it */
.price-soon { font-family: var(--font-head); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
html[lang="hi"] .price-soon { font-family: var(--font-indic-head); font-weight: 700; letter-spacing: 0; line-height: 1.25; }

.usage { background: var(--ground); border-radius: var(--r-tile); padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.plan-lead .usage { background: var(--dark-2); }
.usage p { margin: 0; }
.usage-label { font-size: 14px; color: var(--text-2-base); }
.plan-lead .usage-label, .plan-lead .usage-note { color: #C9DCCF; }
.usage-value { font-family: var(--font-head); font-size: 26px; font-weight: 700; line-height: 1.2; }
.usage-value.is-long { font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.35; }
html[lang="hi"] .usage-value { font-family: var(--font-indic-head); }
html[lang="hi"] .usage-value.is-long { font-family: var(--font-indic); }
.usage-note { font-size: 15px; color: var(--text-2-base); }

.plan-feat { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; margin: 0; }
.plan-feat svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--green); }
.plan-lead .plan-feat svg { color: var(--yellow); }

.plan-cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.plan-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 52px; padding: 8px 16px; border-radius: 14px;
  font-weight: 600; font-size: 17px; text-decoration: none;
}
.plan-btn.is-fill { background: var(--yellow); color: var(--ink-base); border: 2px solid var(--yellow); }
.plan-btn.is-fill:hover { background: var(--yellow-hover); border-color: var(--yellow-hover); color: var(--ink-base); }
.plan-btn.is-line { border: 2px solid var(--green); color: var(--green); }
.plan-btn.is-line:hover { background: var(--tint); color: var(--deep); }

.tiles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.tile { background: var(--paper); border-radius: var(--r-tile); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.tile p { margin: 0; }
.tile-title { font-size: 17px; font-weight: 600; }
.tile-body { font-size: 15px; color: var(--text-2); }
.under-tiles { margin: 20px auto 0; font-size: 15px; color: var(--text-2); text-align: center; max-width: 70ch; }

.notice {
  background: var(--note-bg); border: 1px solid var(--note-edge); border-radius: var(--r-card);
  padding: 28px 22px; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.notice > div { display: flex; flex-direction: column; gap: 8px; }
.notice h2 { font-size: 28px; color: var(--note-ink); margin: 0; }
.notice p { margin: 0; font-size: 16px; color: var(--note-ink-2); }
.notice .notice-title { font-size: 18px; font-weight: 600; color: var(--note-ink); }

.sec-head { display: flex; flex-direction: column; gap: 10px; max-width: 680px; margin-bottom: 32px; }
.sec-head h2, .sec-head p { margin: 0; }
.sec-head p { font-size: 18px; color: var(--text-2); }

.features { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.feature { background: var(--paper); border-radius: var(--r-box); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.feature h3, .feature p { margin: 0; }
.feature p { font-size: 16px; color: var(--text-2-base); }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.feature-icon svg { width: 22px; height: 22px; }
.feature.is-dark { background: var(--dark); color: #FFFFFF; }
.feature.is-dark p { color: #C9DCCF; }
.feature.is-dark .feature-icon { background: var(--yellow); }

.rules { display: grid; gap: 24px 20px; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.rule { border-top: 3px solid var(--green); padding-top: 16px; margin: 0; font-size: 16px; }
.rule.is-quiet { color: var(--text-2); }

.next-year {
  background: var(--paper); border-radius: var(--r-card); padding: 28px 22px;
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.next-year h2 { font-size: 32px; margin: 0 0 10px; }
.next-year p { margin: 0; font-size: 16px; color: var(--text-2); }
.next-row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--row); }
.next-row:last-child { border-bottom: 0; }
.next-row strong { text-align: right; }

/* the FAQ accordion. The question is a real button inside a heading, with
   aria-expanded as the one source of truth. With no script every answer shows
   and the + mark is hidden, so nothing is ever locked shut. */
.faq { max-width: calc(860px + 2 * var(--gutter)); }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--paper); border-radius: var(--r-tile); overflow: hidden; }
.faq-item h3 { margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.35; }
html[lang="hi"] .faq-item h3 { font-family: var(--font-indic); font-weight: 600; }
.faq-q {
  width: 100%; min-height: 60px; padding: 18px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: transparent; border: 0; text-align: left;
  font: inherit; color: var(--ink-base); cursor: default;
}
html.js .faq-q { cursor: pointer; }
.faq-q:focus-visible { outline-offset: -3px; }
.faq-mark {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--tint); color: var(--ink-base);
  display: none; align-items: center; justify-content: center;
  font: 400 22px/1 var(--font-body);
  transition: transform .2s;
}
html.js .faq-mark { display: flex; }
.faq-q[aria-expanded="true"] .faq-mark { background: var(--yellow); transform: rotate(45deg); }
.faq-a { padding: 0 20px 20px; font-size: 16px; color: var(--text-2); }
.faq-a p { margin: 0; }
html.js .faq-item:has(.faq-q[aria-expanded="false"]) .faq-a { display: none; }

/* the closing call to action, the design's deep green card */
.cta-card {
  background: var(--deep); color: #FFFFFF; border-radius: 28px;
  padding: 44px 20px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 18px;
  --ink: var(--nav-ink); --text-2: #C9DCCF; --text-3: #C9DCCF; --pine: var(--nav-ink); --focus: var(--nav-focus);
}
.cta-card h2 { margin: 0; max-width: 720px; font-size: clamp(28px, 3.6vw, 46px); }
.cta-card p { margin: 0; color: #C9DCCF; }
.cta-card .cta-body { font-size: 18px; max-width: 560px; }
.cta-card .cta-fine { font-size: 15px; max-width: 560px; }
.cta-card .cta-fine a { color: #FFFFFF; }
.cta-card .btn-lg { border-radius: 16px; margin-top: 8px; }

/* ------------------------------------------------------------------ footer --
   The design's dark ink footer. It is a green surface for its type (on-green)
   and carries its own darker ground.
   -------------------------------------------------------------------------- */
.site-foot { background: var(--dark); color: #C9DCCF; padding-block: 48px; --text-2: #C9DCCF; --text-3: #C9DCCF; }
.foot-grid { display: grid; gap: 28px; font-size: 15px; }
.foot-grid > div, .foot-grid > nav { display: flex; flex-direction: column; gap: 8px; }
.foot-grid h2 { margin: 0; font: 600 16px/1.3 var(--font-body); letter-spacing: 0; color: #FFFFFF; }
html[lang="hi"] .foot-grid h2 { font-family: var(--font-indic); font-weight: 600; }
.foot-grid .foot-brand { font: 800 22px/1.2 var(--font-head); letter-spacing: -0.02em; color: #FFFFFF; }
.foot-grid p { margin: 0; }
.site-foot a:not(.btn) { color: #C9DCCF; }
.site-foot a:not(.btn):hover { color: #FFFFFF; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li a { display: inline-flex; align-items: center; min-height: var(--tap-min); }
.foot-fine { grid-column: 1 / -1; border-top: 1px solid #2E4A3A; padding-top: 20px; font-size: 14px; color: #A9BFB0; }
.foot-fine p + p { margin-top: 8px; }
.site-foot .foot-fine a:not(.btn) { color: #FFFFFF; }

/* ------------------------------------------------- THE LANGUAGE CHOOSER --
   A question, not a gate. A fixed bar at the bottom, never a modal, no focus
   trap. Hidden unless <html> carries .has-chooser, which the inline script
   sets before the first paint. The white top edge keeps it apart from the
   dark footer it can come to rest over.
   -------------------------------------------------------------------------- */
.chooser { display: none; }
html.has-chooser .chooser {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: 8.5rem; display: flex; align-items: center;
  border-top: 1px solid #FFFFFF; padding-block: 16px;
}
.chooser .wrap { display: flex; flex-direction: column; gap: 12px; }
.chooser-row { display: flex; align-items: flex-start; gap: 8px; }
.chooser-q { margin: 0; max-width: 32ch; font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--nav-ink); }
.chooser-q span { display: block; }
.chooser-q span[lang="en"] { font-family: var(--font-body); }
.chooser-pick { display: flex; gap: 12px; }
.chooser-pick .btn { flex: 1 1 0; min-height: 48px; font-size: 17px; }
.chooser-pick .btn[lang="en"] { font-family: var(--font-body); }
/* neither choice is yellow: a yellow fill is the action, these are equal */
.chooser-x {
  margin-left: auto; flex: 0 0 var(--tap-min);
  width: var(--tap-min); height: var(--tap-min);
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--nav-ink);
}
.chooser-x svg { width: 20px; height: 20px; }
html.has-chooser body { padding-bottom: 10rem; }
html.has-chooser { scroll-padding-bottom: 10rem; }

/* ============================================================== 560px up == */
@media (min-width: 560px) {
  :root { --gutter: 24px; }
  .btn-head { display: inline-flex; }
  .wordmark { font-size: 22px; }
  .logo-tile { width: 36px; height: 36px; flex-basis: 36px; }
  .cta-row { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .cta-sub { width: 100%; }
  .grid.two { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .plan { padding: 32px; }
  .plan-tag { left: 32px; }
  .notice, .next-year { padding: 32px; }
  .next-year { padding: 36px; }
  .cta-card { padding: 56px 32px; }
  section.on-green.panel > .wrap > .panel-in { padding: 48px 40px; }

  html.has-chooser .chooser { height: 5rem; }
  .chooser .wrap { flex-direction: row; align-items: center; gap: 16px; }
  .chooser-row { flex: 1 1 auto; }
  .chooser-q span { display: inline; }
  .chooser-q span + span::before { content: " · "; }
  .chooser-pick .btn { flex: 0 0 auto; min-width: 9rem; }
  .chooser-x { order: 3; }
  html.has-chooser body { padding-bottom: 6.5rem; }
  html.has-chooser { scroll-padding-bottom: 6.5rem; }
}

/* ============================================================== 760px up == */
/* Below this the header has no room for a second button beside the language
   chooser, the menu and the trial button, so Sign in lives in the menu. */
@media (min-width: 760px) {
  .btn-signin-head { display: inline-flex; }
}

/* ============================================================== 880px up == */
@media (min-width: 880px) {
  :root { --band: 88px; }
  .hero { padding-block: 64px 72px; }
  main > section.hero { padding-top: 64px; }
  .hero.center { padding-top: 56px; padding-bottom: 140px; }
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .hero .phone { max-width: calc(384 * var(--s)); }
  /* The home hero must show headline, buttons and the WHOLE phone on one screen
     at any laptop height. The phone is about 765 design pixels tall at 384 wide (Hindi, the taller) and its
     top sits about 175px below the top of the screen (promise bar, header and the
     hero's own top space, which also shrinks with the height), so one scale
     covers every height: 1 from 940 up, 0.71 at 720. tools/check-hero-fit.mjs
     proves it in a browser; change the phone and that number moves with it. */
  main > section.hero.hero-fit { padding-top: clamp(24px, calc(9vh - 40px), 64px); }
  .hero-fit .phone { --s: clamp(0.68px, calc((100vh - 175px) / 765), 1px); }
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .grid { gap: 20px; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .toc { columns: 2; column-gap: 24px; }
  .foot-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .after-text, .lead-out { margin-top: 32px; }
  .steps > li { padding: 24px 24px 24px 84px; }
  .steps > li::before { left: 24px; top: 24px; }
}

/* ============================================================= 1080px up == */
@media (min-width: 1080px) {
  .head-row { min-height: 80px; padding-block: 18px; gap: 16px; }
  .menu { display: none; }
  .nav-wide {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
    font-size: 16px;
  }
  .nav-wide a {
    display: inline-flex; align-items: center; min-height: var(--tap-min);
    text-decoration: none;
  }
  .on-green .nav-wide a:not(.btn) { color: var(--nav-ink-2); }
  .on-green .nav-wide a[aria-current="page"]:not(.btn) { color: var(--nav-ink); font-weight: 600; }
  .nav-wide a[aria-current="page"] > span { border-bottom: 2px solid var(--yellow); padding-bottom: 2px; }
  .on-green .nav-wide a:not(.btn):hover { color: var(--nav-ink); }
  .head-actions { gap: 12px; }
}

/* ------------------------------------------------------------------ motion -- */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ------------------------------------------------------------------- print -- */
@media print {
  .site-head, .site-foot, .skip, .chooser, .promise-bar, .billing { display: none; }
  body { background: #FFFFFF; color: #000000; padding-bottom: 0; }
  a { color: #000000; }
  .faq-a { display: block !important; }
}