/* =============================================================
   Apex — Marketing website stylesheet
   Apex 2026 theme, second pass. Tokens are the ones measured off the
   Figma file "Apex Final Design" (usYmGmmdKBeijQtnqW4ctS) and shipped in the
   merged app — see APEX_2026_DESIGN_DECISIONS.md §2.

   What changed from the first pass, and why:
   · The accent is #0053E2 (was #1F53E3) and the deep blue is #002C7B.
   · The page is the app's screen tint #EEF0F7 with the #008DFF hero wash on
     top, instead of a white→#f0f4ff gradient.
   · CARDS HAVE NO SHADOW AND NO BORDER. Separation is white-on-tint, which
     survives a bright factory floor better than a soft shadow. Do not add
     borders back "for definition" — that is the one rule the app is strictest
     about.
   · Card radius 12 (was 16), pills fully round, badges 8.
   · Inter throughout, as in the apps.
   Vanilla CSS, no frameworks.
============================================================= */

:root {
  /* --- Ink ramp --- */
  --ink:       #171717;   /* Typography/900 — primary text AND the dark pill CTA */
  --ink-700:   #404040;
  --ink-600:   #525252;
  --ink-500:   #737373;   /* MutedClr — secondary text */
  --ink-400:   #a3a3a3;
  --ink-50:    #fafafa;   /* label on dark pills */

  /* --- Surfaces --- */
  --screen:    #eef0f7;   /* FigScreen — the page under the wash */
  --bg:        #eef0f7;
  --surface:   #ffffff;   /* every card */
  --surface-2: #f5f5f5;   /* FigTrack — segmented / toggle tracks */
  --badge-bg:  #eef0f8;   /* FigBadge — machine-number badge fill */
  --line:      #e5e5e5;   /* FigLine — the only border in the system */
  --border:    #e5e5e5;
  --border-in: #e5e5e5;
  --text:      #171717;
  --muted:     #737373;

  /* --- Brand --- */
  --primary:   #0053e2;   /* FigBlue — figures, links, selected pill, badges */
  --primary-d: #0040ae;   /* the flat mid-tone the system splash uses */
  --primary-l: #ebf0ff;
  --purple:    #6900e2;   /* FigPurple — night shift */
  --fig-green: #008455;   /* saved tick, 24-hour figure */

  /* The splash gradient. The hero and the CTA band are the website's splash. */
  --grad:      linear-gradient(180deg, #0052e1 0%, #002c7b 100%);
  /* FigHero — #008DFF at 20% fading to 0 over ~200dp, behind every header. */
  --wash:      linear-gradient(180deg, rgba(0,141,255,.20) 0%, rgba(0,141,255,0) 260px);

  /* --- Category pills (one source, same as the app's Category enum) --- */
  --c-karigar:    #1f53e3;  --c-karigar-l:    #ebf0ff;
  --c-supervisor: #8635f6;  --c-supervisor-l: #f1e9ff;
  --c-designer:   #ef0078;  --c-designer-l:   #ffe6f0;
  --c-other:      #01897c;  --c-other-l:      #d8f4f0;

  /* --- Workforce list vocabulary --- */
  --id-bg:     #d9e5fb;  --id-fg:     #0053e2;
  --share-bg:  #cdeadd;  --share-fg:  #039855;
  --del-bg:    #f7d5d2;  --del-fg:    #d92d20;
  --edit-bg:   #ebf0ff;  --edit-fg:   #1f53e3;
  --active-bg: #d8f4f0;  --active-fg: #01897c;

  /* --- Report performance bands --- */
  --band-green: #12b76a;
  --band-amber: #ff8d28;
  --band-red:   #ff383c;

  /* Semantic aliases used by the legal/pricing pages */
  --green: #12b76a;  --green-l: #e3f7ed;
  --red:   #ff383c;  --red-l:   #ffe9e9;
  --amber: #ff8d28;  --amber-l: #fff2e6;

  /* --- Geometry --- */
  --radius:      12px;    /* card */
  --radius-sm:   8px;     /* badge / input */
  --radius-lg:   16px;
  --radius-pill: 100px;

  --maxw: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--screen);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Skip link for keyboard / screen-reader users */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 12px;
}
h1, h2, h3 { line-height: 1.2; color: var(--text); letter-spacing: -.015em; }
h2.section-title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; }
.lead { font-size: 18px; color: var(--muted); max-width: 640px; }
.center .lead { margin-left: auto; margin-right: auto; }

/* A white band, for sections that should read as one big card. */
.section-white { background: var(--surface); }

/* ---------- Buttons ---------- */
/* The app's primary action is a BLACK PILL ("Save Hajari", "+ Add upad"). Blue
   is reserved for selection and for figures, so the site's CTA is ink too. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 13px 24px; font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: transform .05s, background .15s, border-color .15s, color .15s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: var(--ink-50); }
.btn-primary:hover { background: #000; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-light:hover { background: var(--surface-2); }

/* ---------- Brand mark ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--text); }
.brand:hover { text-decoration: none; }
/* The mark is the 330.593x48 Stichbook wordmark (height = width / 6.8876). Sizes are
   explicit so the nav does not reflow while the SVG loads. */
.brand-logo { width: 138px; height: 20px; }
.site-footer .brand-logo { width: 152px; height: 22px; }

/* =============================================================
   HEADER / NAV
============================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(238,240,247,.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
  color: var(--ink-600); font-weight: 500; font-size: 15px;
  padding: 8px 14px; border-radius: var(--radius-pill);
}
.nav-links a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
/* Selection in this app is a filled blue pill — the nav's active tab follows it. */
.nav-links a.active { color: #fff; background: var(--primary); font-weight: 600; }
.nav-links a.active:hover { background: var(--primary); color: #fff; }
.nav-links .btn-primary { background: var(--ink); color: var(--ink-50); font-weight: 600; }
.nav-links .btn-primary:hover { background: #000; color: var(--ink-50); }
.nav-cta { margin-left: 6px; }
.nav-toggle {
  display: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); width: 42px; height: 40px; cursor: pointer;
  font-size: 20px; color: var(--text);
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 16px 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 16px; }
  .nav-links .nav-cta { margin: 8px 0 0; }
  .nav-links .btn { width: 100%; }
}

/* =============================================================
   HERO
   The deep blue is the app's SPLASH (#0052E1 → #002C7B), which is also the
   background of every store screenshot. The page below it is the screen tint
   with the hero wash, exactly as the app draws it under a header.
============================================================= */
.hero {
  background: var(--grad); color: #fff; position: relative; overflow: hidden;
  padding: 76px 0 84px;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(680px 320px at 84% -10%, rgba(255,255,255,.14), transparent 62%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
}
.hero .eyebrow { color: #9fc0ff; }
.hero h1 { font-size: clamp(32px, 5.2vw, 52px); font-weight: 800; letter-spacing: -.025em; color: #fff; }
.hero p.lead { color: #c9d9ff; font-size: 19px; margin-top: 18px; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: #93aeee; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
/* On blue, the app pairs WHITE surfaces with BLUE content — the header's white
   search circle and the white mode pill. The hero chips follow that pairing. */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--primary);
  padding: 7px 15px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
}
.hero .btn-light {            /* primary action on blue: solid white pill */
  background: #fff; color: var(--primary); border-color: #fff; font-weight: 700;
}
.hero .btn-light:hover { background: var(--primary-l); color: var(--primary-d); border-color: var(--primary-l); }
.hero .btn-ghost {            /* secondary: outlined white */
  background: transparent; color: #fff; border-color: rgba(255,255,255,.5);
}
.hero .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.hero .btn-primary { background: #fff; color: var(--primary); }
.hero .btn-primary:hover { background: var(--primary-l); color: var(--primary-d); }

/* Hero phone cluster. The screenshots already carry the device bezel and
   rounded corners in their alpha, so there is no border here to fight it. */
.hero-visual { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
/* The intrinsic PNGs are 560×1213 and the markup carries those as width/height
   attributes (so the browser can reserve the box before they load). Without an
   explicit `height: auto` the height attribute survives as a presentational hint
   and the phones render 1213px tall next to a 224px width. */
.hero-visual .phone { height: auto; filter: drop-shadow(0 26px 50px rgba(0,20,70,.45)); }
.hero-visual .phone.back { width: 190px; transform: translateY(26px) rotate(-5deg); }
.hero-visual .phone.front { width: 224px; transform: rotate(3deg); z-index: 2; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { order: 2; }
}
@media (max-width: 460px) {
  .hero-visual .phone.back { display: none; }
  .hero-visual .phone.front { transform: none; }
}

/* The wash under the hero — the same #008DFF fade the app puts under a header. */
.wash { background: var(--wash); }

/* =============================================================
   CARDS / GRIDS
============================================================= */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* No border. No shadow. White on tint. */
.card {
  background: var(--surface); border: 0; border-radius: var(--radius);
  padding: 24px; height: 100%;
}
/* Inside a white section a card needs the one 1px line the system allows. */
.section-white .card { border: 1px solid var(--line); }
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.card p { color: var(--ink-500); font-size: 15px; }
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 15px; font-weight: 600;
}
.card-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; font-size: 21px; margin-bottom: 16px;
  background: var(--badge-bg); color: var(--primary);
}
.card-icon.worker   { background: var(--c-karigar-l);    color: var(--c-karigar); }
.card-icon.super    { background: var(--c-supervisor-l); color: var(--c-supervisor); }
.card-icon.designer { background: var(--c-designer-l);   color: var(--c-designer); }
.card-icon.other    { background: var(--c-other-l);      color: var(--c-other); }
.card-icon.green    { background: #dff4ea;               color: var(--fig-green); }
.card-icon.amber    { background: #fff2e6;               color: #b45309; }
.card-icon.purple   { background: #f1e9ff;               color: var(--purple); }

/* ---------- The one-app / mode split ---------- */
.apps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .apps { grid-template-columns: 1fr; } }
.app-card { position: relative; overflow: hidden; }
.app-card .tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 12px;
  border-radius: var(--radius-pill); margin-bottom: 14px;
}
.tag.wf { background: var(--c-karigar-l); color: var(--c-karigar); }
.tag.pr { background: var(--c-other-l);   color: var(--c-other); }
.app-card ul { list-style: none; margin-top: 14px; }
.app-card li { padding: 7px 0 7px 26px; position: relative; color: var(--ink-700); font-size: 15px; }
.app-card li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  color: var(--fig-green); font-weight: 800;
}

/* ---------- Mode pill (the app's Production ⇄ Workforce switch) ----------
   Reproduced literally: a white pill on the tint, holding two halves, the
   active one filled with the blue wash. It is the clearest way to say "one
   app" without a paragraph explaining it. */
.mode-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface); border-radius: var(--radius-pill); padding: 5px;
}
.mode-pill span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: var(--radius-pill);
  font-size: 15px; font-weight: 600; color: var(--ink-500);
}
.mode-pill span.on { background: var(--primary-l); color: var(--primary); }
.hero .mode-pill { box-shadow: 0 2px 12px rgba(0,20,70,.25); }

/* Steps */
.steps { counter-reset: step; }
.step { display: flex; gap: 18px; align-items: flex-start; padding: 14px 0; }
.step::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-sm);
  /* FigBadge (#EEF0F8) on FigScreen (#EEF0F7) is invisible. On the tint the
     app separates with a white surface, so the step number does too. */
  background: var(--surface); color: var(--primary); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { font-size: 17px; }
.step p { color: var(--muted); font-size: 15px; }

/* A deeper tint band, so the mostly-white phone screens read as objects
   sitting ON the page rather than bleeding into it. */
.section-tint { background: linear-gradient(180deg, #e6eaf6 0%, #dde3f2 100%); }

/* Screenshot gallery */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: end; }
@media (max-width: 760px) { .shots { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } }
.shot { text-align: center; }
.shot img { width: 100%; max-width: 280px; height: auto; margin: 0 auto 14px; filter: drop-shadow(0 16px 32px rgba(0,20,70,.20)); }
.shot span { color: var(--ink-600); font-size: 14px; font-weight: 600; }

/* Platform strip */
.platforms { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.platform-pill {
  background: var(--surface); border-radius: var(--radius-pill);
  padding: 10px 20px; font-weight: 600; font-size: 14px;
}
a.platform-pill { color: var(--ink); }
a.platform-pill:hover { background: var(--surface-2); text-decoration: none; }

/* CTA band — the splash again, closing the page as it opened */
.cta-band {
  background: var(--grad); color: var(--ink-50);
  border-radius: var(--radius-lg); padding: 48px; text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(24px, 3.5vw, 32px); font-weight: 800; }
.cta-band p { color: #c9d9ff; margin: 12px auto 24px; max-width: 520px; }
.cta-band .btn-light { background: #fff; color: var(--primary); border-color: #fff; font-weight: 700; }
.cta-band .btn-light:hover { background: var(--primary-l); color: var(--primary-d); border-color: var(--primary-l); }

/* =============================================================
   LEGAL / CONTENT PAGES
============================================================= */
.page-hero { background: var(--grad); color: #fff; padding: 52px 0; }
.page-hero h1 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 800; color: #fff; }
.page-hero p { color: #c9d9ff; margin-top: 8px; }

.content-wrap { padding: 52px 0; }
.prose {
  max-width: 780px; margin: 0 auto; background: var(--surface);
  border: 0; border-radius: var(--radius); padding: 40px 44px;
}
@media (max-width: 620px) { .prose { padding: 28px 22px; } }
.prose h2 { font-size: 21px; font-weight: 800; margin: 34px 0 12px; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.prose p { margin-bottom: 14px; color: var(--ink-700); }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 8px; color: var(--ink-700); }
.prose strong { color: var(--text); }
.prose a { font-weight: 600; }
.prose .updated { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 28px 0; }

.callout {
  border-left: 4px solid var(--primary); background: var(--primary-l);
  padding: 16px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 18px 0;
}
.callout.warn { border-color: var(--amber); background: var(--amber-l); }
.callout p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin: 16px 0; }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; }
table.data th, table.data td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { background: var(--surface-2); font-weight: 700; }

/* Contact cards */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { text-align: center; }
.contact-card .card-icon { margin: 0 auto 14px; }
.contact-card a { font-weight: 700; word-break: break-word; }

/* =============================================================
   LAUNCH BANNER
   Sits ABOVE the sticky header so it scrolls away and never eats viewport
   height on a phone. Ink strip, so it reads as an announcement rather than
   competing with the blue hero directly below it.
============================================================= */
.promo-banner { background: var(--ink); color: var(--ink-50); }
.promo-banner[hidden] { display: none; }
.promo-inner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 10px; padding-bottom: 10px; position: relative;
}
.promo-banner p { font-size: 14px; text-align: center; margin: 0; padding: 0 26px; }
.promo-banner strong { color: #fff; font-weight: 700; }
.promo-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: var(--ink-400); font-size: 22px;
  line-height: 1; cursor: pointer; font-family: inherit;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
}
.promo-close:hover { color: #fff; background: rgba(255,255,255,.12); }
@media (max-width: 620px) {
  .promo-banner p { font-size: 13px; text-align: left; padding: 0 24px 0 0; }
  .promo-inner { justify-content: flex-start; }
  .promo-close { right: 4px; }
}

/* One-time onboarding line inside each price card */
.onboard-note {
  margin-top: 14px; padding: 10px 12px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--ink-700); text-align: center;
}
.onboard-note s { color: var(--ink-500); }
.onboard-note strong { color: var(--fig-green); }

/* =============================================================
   PRICING CALCULATOR  (pricing.html)
   Same tokens as the rest of the site: 12px cards, ink pills, the blue
   accent. Desktop lays the selector beside the result cards; below 980px the
   selector goes full width; below 760px everything stacks.
============================================================= */
.calc-grid { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 980px) { .calc-grid { grid-template-columns: 1fr; } }

/* ---------- Machine selector ---------- */
.calc-selector { position: sticky; top: 88px; }
@media (max-width: 980px) { .calc-selector { position: static; } }
.calc-selector h2 { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.calc-selector .calc-hint { color: var(--ink-500); font-size: 14px; margin-bottom: 18px; }

/* −  [ 12 ]  +   — one control, 8px radius per the standard input spec. */
.stepper {
  display: grid; grid-template-columns: 56px 1fr 56px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface);
}
.stepper:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-l); }
.stepper button {
  border: 0; background: var(--surface-2); color: var(--ink);
  font-size: 26px; font-weight: 600; line-height: 1; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
  /* 56px tall keeps the tap target comfortably above the 44px touch minimum. */
  min-height: 56px;
  -webkit-user-select: none; user-select: none;
}
.stepper button:hover:not(:disabled) { background: var(--primary-l); color: var(--primary); }
.stepper button:active:not(:disabled) { background: #dfe8ff; }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper button:first-child { border-right: 1px solid var(--line); }
.stepper button:last-child { border-left: 1px solid var(--line); }
.stepper input {
  border: 0; outline: 0; text-align: center; width: 100%;
  font-family: inherit; font-size: 26px; font-weight: 800; color: var(--text);
  background: transparent; padding: 0 4px; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- The ladder ----------
   Machine steps as pills. Real radio inputs sit behind them, hidden but
   focusable, so arrow keys move between steps and the group is announced
   properly — no keyboard handling in JS. auto-fit packs as many steps per row
   as the column allows, so adding a step never needs a count changed here. */
.ladder {
  display: grid; gap: 8px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(66px, 1fr));
}
.ladder-step { display: block; margin: 0; }
.ladder-step input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.ladder-step span {
  display: flex; align-items: center; justify-content: center;
  /* 52px keeps the tap target comfortably above the 44px touch minimum. */
  min-height: 52px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-700);
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
  -webkit-user-select: none; user-select: none;
}
.ladder-step span:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }
.ladder-step input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.ladder-step input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

.calc-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.calc-presets button {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-600);
  border-radius: var(--radius-pill); padding: 7px 14px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s;
}
.calc-presets button:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-l); }

.calc-included { list-style: none; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.calc-included li { position: relative; padding: 6px 0 6px 26px; font-size: 14.5px; color: var(--ink-700); }
.calc-included li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--fig-green); font-weight: 800; }

/* ---------- Result cards ---------- */
/* The pricing page's single plan card. */
.plan-solo { max-width: 520px; margin: 0 auto; }
/* One plan, one card. */
.calc-results { display: grid; grid-template-columns: 1fr; gap: 16px; }

.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.featured { outline: 2px solid var(--primary); outline-offset: -2px; }
.price-card .plan-name {
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-500);
}
.price-card .price-row { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.price-card .price {
  font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.02em;
  color: var(--ink); line-height: 1.05;
  /* Tabular figures stop the price jittering while it animates. */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.price-card .per { font-size: 16px; font-weight: 600; color: var(--ink-500); }
/* Anchor row: regular price struck through, then the % OFF pill and the rupee
   saving. Wraps to a second line on narrow cards rather than squashing. */
.price-card .was {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 15px; color: var(--ink-500); margin-top: 8px;
}
.price-card .was[hidden] { display: none; }
.price-card .was s { text-decoration: line-through; }
.off-pill {
  background: var(--red-l); color: var(--red); font-weight: 800;
  font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.off-save { font-size: 13px; font-weight: 600; color: var(--fig-green); }
/* "Works out to ₹112.50/month · billed ₹675 every 6 months" — the line that
   makes three packages on different terms comparable at a glance. */
.price-card .equiv { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-600); line-height: 1.45; }
.price-card .price-meta { list-style: none; margin: 18px 0 0; }
.price-card .price-meta li { position: relative; padding: 6px 0 6px 26px; font-size: 14.5px; color: var(--ink-700); }
.price-card .price-meta li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--fig-green); font-weight: 800; }
/* `auto` absorbs the leftover space, so all three CTAs sit on the same line
   however differently the copy above them wraps. */
.price-card .onboard-note { margin-bottom: 18px; }
.price-card .btn { width: 100%; margin-top: auto; }
.price-card .save-line {
  margin-top: 12px; background: var(--green-l); color: #056a41;
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13.5px; font-weight: 700;
  text-align: center;
}
.best-badge {
  position: absolute; top: -12px; right: 18px;
  background: var(--primary); color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
}

/* Summary strip above the cards — the 5-second answer. */
.calc-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  margin-bottom: 16px; padding: 14px 18px;
  /* Same trap as the step badge: #EBF0FF all but disappears on #EEF0F7. */
  background: var(--surface); border-radius: var(--radius);
}
.calc-summary strong { font-size: 18px; font-weight: 800; color: var(--ink); }
.calc-summary span { color: var(--ink-600); font-size: 14.5px; }
.calc-summary .from { color: var(--primary); font-weight: 700; }

/* ---------- Launch-offer notice ---------- */
.launch-note {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--amber-l); border-radius: var(--radius);
  padding: 16px 18px; margin-top: 20px;
}
.launch-note .launch-icon { font-size: 20px; line-height: 1.4; }
.launch-note h3 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.launch-note p { font-size: 14px; color: var(--ink-700); margin: 0; }

/* ---------- Expandable working ---------- */
.calc-details { margin-top: 22px; }
.calc-details summary {
  cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--primary);
  list-style: none; padding: 10px 0;
}
.calc-details summary::-webkit-details-marker { display: none; }
.calc-details summary::before { content: "▸ "; display: inline-block; transition: transform .15s; }
.calc-details[open] summary::before { content: "▾ "; }
.calc-break { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
.calc-break > * { min-width: 0; }
.calc-break h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 8px; }
.calc-break ul { list-style: none; }
.calc-break li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
  font-size: 14px; color: var(--ink-700);
}
.calc-break li s { color: var(--ink-500); }
.calc-break .calc-break-total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: 4px; font-size: 15px; color: var(--text); }
.calc-break .calc-break-saving { border-bottom: 0; color: var(--fig-green); font-weight: 600; }
.calc-break .calc-break-saving strong { color: var(--fig-green); }
/* Two prices per row needs a little more breathing room than one. */
table.data td s { color: var(--ink-500); margin-right: 4px; }

/* ---------- Rate tables ---------- */
.rate-tables { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; gap: 16px; }
/* A grid item defaults to min-width:auto, so a wide table would stretch its
   column and push the whole page sideways. `0` lets the column shrink and the
   .table-wrap scroll on its own instead. */
.rate-tables > * { min-width: 0; }
table.data td.rate-included { color: var(--fig-green); font-weight: 700; }
table.data tr.is-current { background: var(--primary-l); }
table.data tr.is-current td { font-weight: 700; color: var(--primary); }

/* =============================================================
   FOOTER
============================================================= */
.site-footer { background: var(--ink); color: #d4d4d4; padding: 52px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .footer-top { grid-template-columns: 1fr; gap: 26px; } }
.site-footer .brand { color: #fff; }
.site-footer p { color: var(--ink-400); font-size: 14px; margin-top: 12px; max-width: 320px; }
.footer-col h4 { color: #fff; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: #d4d4d4; font-size: 14.5px; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
  color: var(--ink-400); font-size: 13.5px;
}

/* =============================================================
   STORE DOWNLOAD BUTTONS
   The stores' own badge artwork is a fixed lockup that fights every other
   CTA on this site; these are the same black pill as "Get access", with the
   store glyph doing the identifying. The Play glyph keeps its four brand
   colours, so it reads correctly on both the dark and the white pill.

   Apple has not issued numeric App Store ids for either app yet, so those
   render as `.is-soon` — an inert <span>. When the listings go live, swap
   the <span class="store-btn is-soon"> for <a class="store-btn" href="…">
   and change the small line back to "Download on the". Nothing else moves.
============================================================= */
.store-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 11px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 10px 22px 10px 18px;
  background: var(--ink); color: var(--ink-50);
  transition: transform .05s, background .15s, border-color .15s, color .15s;
}
a.store-btn:hover { background: #000; color: var(--ink-50); text-decoration: none; }
a.store-btn:active { transform: scale(.98); }
.store-btn svg { flex: none; width: 22px; height: 22px; }
.store-lines { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-sm {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; opacity: .7;
}
.store-lg { font-size: 15px; font-weight: 700; }

/* Not listed yet: the same pill, visibly inert rather than hidden — the app
   exists, it just cannot be downloaded from here today. */
.store-btn.is-soon {
  background: var(--surface-2); color: var(--ink-500);
  border-color: var(--line); cursor: default;
}
.store-btn.is-soon svg { opacity: .5; }
.store-btn.is-soon .store-lg { color: var(--ink-600); }

/* On blue the pills flip white, exactly as .btn-light does above. */
.hero .store-btns { margin-top: 18px; }
.hero .store-btn { background: #fff; color: var(--ink); border-color: #fff; }
.hero a.store-btn:hover { background: var(--primary-l); color: var(--primary-d); }
.hero .store-btn.is-soon {
  background: rgba(255,255,255,.12); color: #c9d9ff;
  border-color: rgba(255,255,255,.4);
}
.hero .store-btn.is-soon .store-lg { color: #eaf1ff; }

/* In an app card the buttons sit on the floor of the card, so both cards'
   rows line up however many bullets each one has. */
.app-card { display: flex; flex-direction: column; }
.app-card .store-btns { margin-top: auto; padding-top: 22px; }

@media (max-width: 420px) {
  .store-btn { width: 100%; justify-content: center; }
}

/* The footer is ink, so the ink pill would disappear into it — lift it one
   step and give it the one line the system allows. */
.site-footer .store-btns { margin-top: 20px; gap: 10px; }
.site-footer .store-btn { background: #262626; border-color: #404040; color: #fafafa; padding: 9px 18px 9px 15px; }
.site-footer a.store-btn:hover { background: #333; color: #fff; }
.site-footer .store-btn svg { width: 20px; height: 20px; }
.site-footer .store-btn.is-soon { background: transparent; border-color: #404040; color: var(--ink-400); }
.site-footer .store-btn.is-soon .store-lg { color: #d4d4d4; }