/* VirtuaQ landing page.
 *
 * One file, no build step, no preprocessor — the same rule the rest of the app follows. The page's CSP is
 * `style-src 'self'` with no `'unsafe-inline'`, so there is not a single inline `style` attribute or `<style>`
 * block anywhere in the markup: everything visual happens here, and the handful of things JavaScript animates
 * it sets through `el.style`, which the CSP does allow.
 *
 * Fonts come from `/landing/fonts/fonts.css`, which defines `--font-sans` and overrides it on `html[lang]`.
 * Never name a Noto family directly in here: `unicode-range` would then pull ~140 KB of Kannada and Tamil onto
 * every page, because the language switcher prints all ten names in their own scripts.
 *
 * Single theme, deliberately — every colour is stated, and there is no `prefers-color-scheme` branch. The page
 * is a light sheet with two ink bands; the product's own screenshots have to look native on it.
 *
 * Breakpoints: 1100 / 900 / 600, mobile-first inside each component.
 */

/* ================================================================ tokens */

:root {
  --ink: #14171c;
  --ink-2: #4b5058;
  --ink-3: #7d838c;
  --paper: #fff;
  --ground: #f5f4f0;
  --line: #e4e2dc;
  --brand: #f2701c;
  --brand-deep: #d65510;
  --brand-tint: #fff1e8;
  --ok: #1d7a4c;
  --whatsapp: #25d366;

  /* On the ink bands. */
  --on-ink: #f5f4f0;
  --on-ink-2: #a9aeb6;
  --on-ink-line: #2b3038;

  /* The punched notches in the ticket stub are cut out of whatever sits behind the stub. */
  --stub-notch: var(--ink);

  --r-card: 20px;
  --r-pill: 999px;
  --r-sm: 12px;
  --gap: 24px;
  --pad-y: clamp(72px, 9vw, 120px);
  --wrap: min(1180px, 100% - 40px);
  --offset: 12px 12px 0 var(--brand-tint);
  --offset-ink: 12px 12px 0 var(--brand);
}

/* ================================================================ base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The nav floats over the top of the page, so an anchor must not land under it. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Several things here are flex or grid containers that the script toggles with the `hidden` attribute; without
   this the display value would win and `hidden` would do nothing. */
[hidden] { display: none !important; }

img, svg { max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

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

.skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 60;
  /* "முதன்மை உள்ளடக்கத்திற்கு செல்லவும்" is 397px on one line: wider than a 390px phone. */
  max-width: calc(100% - 16px);
  padding: 10px 18px;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform .15s ease;
}
.skip:focus-visible { transform: none; }

.wrap { width: var(--wrap); margin-inline: auto; }

/* ================================================================ type */

/* `overflow-wrap: anywhere` is load-bearing, and not for the wrapping: it is what stops one long word from
   setting a grid track's minimum. Tamil sets "வாடிக்கையாளர்கள்" as a single 800px word at the H1 size, and
   with the default `normal` the hero's copy column claimed 800px of the 1124 available and left the device
   cluster 323px — a demo phone too small to read — while at phone width the same word pushed the page wider
   than the screen. A heading only ever breaks mid-word when the word would not fit at all, so no Latin
   heading on the page is touched. */
.h1, .h2, .h3, h1, h2, h3 { margin: 0 0 .4em; text-wrap: balance; overflow-wrap: anywhere; }

/* The brief's ceiling was 92px. At that size this particular headline — a 49-character sentence — takes four
   lines in a 576px column, and the brief also asks for two on desktop; the two cannot both hold, so the size
   gives way and the line count wins. 68px puts it on three lines at 1400px and two at 1600px. */
.h1 {
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: .95;
  letter-spacing: -.03em;
  font-weight: 750;
  font-stretch: 100%;
}

.h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.02em;
  font-weight: 700;
}

h3 { font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.01em; }

.lead {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 62ch;
  text-wrap: pretty;
}

/* `.ph-label` is deliberately not in here: the kiosk sets "Your ticket number is" in sentence case, and the
   demo phone is the kiosk, not this page. */
.eyebrow, .board-label, .foot-head {
  font-size: 13px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--ink-3);
  margin: 0 0 14px;
}

p { text-wrap: pretty; }

/* Tabular, slightly condensed numerals — the way a take-a-number board sets them. */
.tk, .ph-ticket, .up, .stub-no, .plan-amount, .final-ghost {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-stretch: 90%;
  letter-spacing: -.01em;
}

/* Per-script headings. The stacks themselves live in fonts.css; only the metrics change here.
   Devanagari, Kannada and Tamil need the extra leading, and none of the three takes negative tracking. */
html[lang="hi"] .h1, html[lang="hi"] .h2, html[lang="hi"] h3 { letter-spacing: 0; line-height: 1.15; font-weight: 700; }
html[lang="kn"] .h1, html[lang="kn"] .h2, html[lang="kn"] h3,
html[lang="ta"] .h1, html[lang="ta"] .h2, html[lang="ta"] h3 { letter-spacing: 0; line-height: 1.25; font-weight: 700; }
html[lang="ja"] .h1, html[lang="ja"] .h2, html[lang="ja"] h3 { letter-spacing: 0; line-height: 1.2; font-weight: 700; font-stretch: normal; }
html[lang="ja"] .h1 { font-size: clamp(34px, 4.6vw, 64px); }
html[lang="hi"] .h1, html[lang="kn"] .h1, html[lang="ta"] .h1 { font-size: clamp(36px, 5vw, 72px); }
/* Tamil is the one script here whose words outrun the column: "வாடிக்கையாளர்கள்" is a single word 800px wide
   at 70px, so the headline can only be set at a size where its longest word fits the hero's 576px copy column
   (and a 358px phone) without breaking in the middle. Hindi and Kannada set narrower and keep the 72px. */
html[lang="ta"] .h1 { font-size: clamp(30px, 3.4vw, 48px); }

/* ================================================================ buttons and pills */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn.big { padding: 15px 28px; font-size: 18px; }
.btn.small { padding: 7px 14px; font-size: 14px; }

.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-deep); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: rgba(20, 23, 28, .04); }

.band-ink .btn.ghost { color: var(--on-ink); border-color: var(--on-ink-line); }
.band-ink .btn.ghost:hover { border-color: var(--on-ink-2); background: rgba(255, 255, 255, .06); }

.ic { width: 24px; height: 24px; flex: none; }
.ic-accent { stroke: var(--brand); }
.ic-accent[fill] { fill: var(--brand); stroke: none; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px 7px 11px;
  background: var(--brand-tint);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
}
.chip-ic { width: 17px; height: 17px; color: var(--brand-deep); }

/* ================================================================ nav */

.nav-wrap {
  position: sticky;
  top: 12px;
  z-index: 50;
  padding-top: 12px;
  margin-bottom: -76px;
}

.nav {
  width: var(--wrap);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 8px 8px 20px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  text-decoration: none;
  font-weight: 750;
  font-size: 20px;
  letter-spacing: -.02em;
  margin: 0;
}
.brand-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  align-self: center;
  margin-top: 6px;
}

.nav-links { display: flex; gap: 4px; margin-left: 10px; }
.nav-link {
  display: block;
  padding: 8px 13px;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 15px;
  font-weight: 550;
  color: var(--ink-2);
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: var(--ink); background: rgba(20, 23, 28, .05); }
.nav-link[aria-current="true"] { color: var(--ink); background: var(--brand-tint); }

.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Popovers (language, phone menu) — native <details>, so they work with JavaScript off. */
.pop { position: relative; }
.pop > summary { list-style: none; }
.pop > summary::-webkit-details-marker { display: none; }
.pop-summary { padding: 9px 12px; font-size: 15px; }
.pop-summary .ic { width: 18px; height: 18px; }
.pop-label { max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop[open] > .pop-summary .chev { transform: rotate(180deg); }
.chev { transition: transform .15s ease; }

.pop-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 40px -22px rgba(20, 23, 28, .45);
  max-height: min(70vh, 460px);
  overflow-y: auto;
}
.pop-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 15px;
}
.pop-item:hover { background: var(--ground); }
.pop-item.is-current { background: var(--brand-tint); font-weight: 650; }
.pop-native { font-weight: 550; }
.pop-en { font-size: 13px; color: var(--ink-3); margin-left: auto; }

.menu-pop { display: none; }
.menu-summary { padding: 9px; }
/* The phone menu's language list: hidden while the globe picker is in the bar (≥ 601px). */
.menu-langs, .menu-langs-title { display: none; }
.menu-langs-title { margin: 10px 12px 4px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* The language suggestion. A link, never a redirect. */
.lang-suggest {
  position: sticky;
  top: 0;
  z-index: 51;
  background: var(--ink);
  color: var(--on-ink);
}
.lang-suggest .wrap { display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.lang-suggest p { margin: 0; font-size: 15px; margin-right: auto; }
.lang-suggest .btn.ghost { color: var(--on-ink); border-color: var(--on-ink-line); }

/* ================================================================ hero */

.hero { padding: 132px 0 var(--pad-y); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.cta-row .ic { width: 20px; height: 20px; }

.caption {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}

/* ---------------- the live demo cluster */

/* The padding-bottom is the room the phone hangs in, and it sets the overlap exactly: the phone is bottom-
   aligned, so `overlap = phone height - padding`. The phone is 44% of the cluster wide and 15.5/9 of that tall
   (75.8%), and 72% of padding leaves its top corner clipping the board's lower-left corner by ~3.5% of the
   width — enough to read as in front of it, little enough to leave the board's last row of numbers legible.
   Every figure here is a percentage of the same width, so the composition is identical at 360px and at
   1400px and needs no breakpoint of its own. */
.cluster { position: relative; padding-bottom: 72%; }

/* The board is three quarters of the cluster and right-aligned; the phone stands at the left, in front of its
   lower-left corner and hanging below it — the composition the hero's alt text describes. */
.tv {
  width: 74%;
  margin-left: auto;
  border: 10px solid #23262b;
  border-radius: 14px;
  background: #23262b;
  box-shadow: var(--offset);
}
.tv-screen {
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
}
.tv-foot {
  width: 26%;
  height: 10px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: #23262b;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3cqw 4cqw;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 2.6cqw;
}
.board-venue { font-weight: 700; letter-spacing: -.01em; }
.board-clock { font-variant-numeric: tabular-nums; color: var(--on-ink-2); }

.board-body { display: grid; grid-template-columns: 1.45fr 1fr; flex: 1; min-height: 0; }
.board-main { padding: 3.4cqw 4cqw; display: flex; flex-direction: column; }
.board-main .board-label { font-size: 2cqw; margin-bottom: 1.6cqw; }

.callouts { display: grid; gap: 1.4cqw; }
.callout {
  display: grid;
  grid-template-columns: auto 3cqw 1fr;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.4cqw 2cqw;
  border-radius: 1.4cqw;
  background: var(--ground);
  font-size: 3cqw;
  transition: background-color .3s ease;
}
.callout .tk { font-size: 4.4cqw; line-height: 1; }
.callout .ctr { color: var(--ink-2); font-weight: 600; }
.callout .to::before { content: "\2192"; color: var(--ink-3); }
.callout.is-lead { background: var(--brand); color: #fff; }
.callout.is-lead .ctr { color: rgba(255, 255, 255, .88); }
.callout.is-lead .to::before { color: rgba(255, 255, 255, .7); }
.callout.is-lead .tk { font-size: 5.6cqw; }
/* The short slide the top callout makes when the next number is called. */
@keyframes callout-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.callout.is-swap { animation: callout-in .36s cubic-bezier(.22, .61, .36, 1) both; }

.board-up {
  margin: auto 0 0;
  display: flex;
  align-items: baseline;
  gap: 1.6cqw;
  flex-wrap: wrap;
  padding-top: 2.4cqw;
  border-top: 1px solid var(--line);
}
.board-up .board-label { font-size: 1.7cqw; margin: 0; }
.board-up .up { font-size: 2.4cqw; color: var(--ink-2); }

.board-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  padding: 3cqw;
  background: var(--ground);
  border-left: 1px solid var(--line);
  text-align: center;
}
.qr-frame {
  width: 55%;
  padding: 1.6cqw;
  background: #fff;
  border-radius: 1.6cqw;
  line-height: 0;
}
.qr-frame svg { width: 100%; height: auto; display: block; }
.qr-prompt { margin: 0; font-size: 2.2cqw; font-weight: 700; line-height: 1.2; }
.qr-help { margin: 0; font-size: 1.7cqw; color: var(--ink-3); line-height: 1.2; }

/* ---------------- the phone, overlapping the board's lower-left corner
 *
 * This is the kiosk's own ticket screen rebuilt here, not a picture of it: the header bar, the blue ticket card
 * with its perforated stub, the green called state. Its colours, gradients, radii and type hierarchy are lifted
 * from `public/m/app.css` (`.topbar`, `.hero`, `.hero-stub`, `.hero.is-called`) so a visitor who takes a ticket
 * ten seconds later meets exactly this screen. They are stated as local custom properties rather than borrowed
 * from the page's tokens because they belong to the *product*, not to this page: the kiosk's blue is not the
 * landing page's orange world, and it must not drift if a landing token changes.
 *
 * Everything inside is sized in `cqw` of the phone, so the whole device is one picture that scales from a
 * 155 px thumbnail at 390 px wide to 240 px in the desktop hero without a single extra breakpoint.
 *
 * `container-type` goes on the wrapper, not on the screen itself: a `cqw` inside the very element that declares
 * the container resolves against the *outer* container — and with none, against the viewport. That is how the
 * phone's 4cqw padding first came out as 56px and squeezed its contents to a fortieth of their size. */
.phone {
  --m-blue: #2563eb;
  --m-bg: #f1f5f9;
  --m-line: #e2e8f0;
  --m-ink: #0f172a;
  --m-muted: #475569;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  container-type: inline-size;
}
.phone-screen {
  aspect-ratio: 9 / 15.5;
  display: flex;
  flex-direction: column;
  border: 1.6cqw solid #23262b;
  border-radius: 9% / 5%;
  background: var(--m-bg);
  box-shadow: 0 22px 44px -18px rgba(20, 23, 28, .5);
  overflow: hidden;
}

/* The kiosk's top bar: its brand mark (a blue rounded square with a magnifier) and the venue's name. */
.ph-bar {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  padding: 2.6cqw 3.4cqw;
  background: #fff;
  border-bottom: 1px solid var(--m-line);
}
.ph-mark {
  position: relative;
  flex: none;
  width: 7.4cqw;
  height: 7.4cqw;
  border-radius: 2.3cqw;
  background: var(--m-blue);
}
.ph-mark::before {
  content: "";
  position: absolute;
  left: 1.6cqw; top: 1.6cqw;
  width: 3.7cqw; height: 3.7cqw;
  border: .7cqw solid #fff;
  border-radius: 50%;
}
.ph-mark::after {
  content: "";
  position: absolute;
  right: 1.6cqw; bottom: 1.2cqw;
  width: .7cqw; height: 2.1cqw;
  border-radius: .4cqw;
  background: #fff;
  transform: rotate(-45deg);
}
.ph-venue {
  font-size: 4.4cqw;
  font-weight: 700;
  color: var(--m-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph-body { flex: 1; display: flex; flex-direction: column; padding: 3.4cqw; min-height: 0; }

/* The ticket card. `flex: 1`, with an auto margin above the first line and below the last, centres the number
   block in whatever height is left and keeps the stub on the bottom edge — which is how a ticket is shaped. */
.ph-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 5cqw 4.4cqw;
  border-radius: 6cqw;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #3b82f6 0%, var(--m-blue) 40%, #1e40af 100%);
  box-shadow: 0 3cqw 8cqw -3cqw rgba(30, 64, 175, .55);
  overflow: hidden;
}
.ph-card.is-called { background: linear-gradient(160deg, #22c55e 0%, #16a34a 45%, #15803d 100%); }
.ph-thanks { margin: auto 0 .6cqw; font-size: 5.4cqw; font-weight: 750; line-height: 1.2; }
.ph-label { margin: 0; font-size: 4.2cqw; line-height: 1.25; opacity: .9; }
.ph-ticket { font-size: 25cqw; line-height: 1; margin: 1cqw 0 1.6cqw; font-weight: 800; letter-spacing: .01em; }
.ph-service { margin: 0 0 auto; font-size: 4.4cqw; font-weight: 600; line-height: 1.25; opacity: .95; }

/* The perforation: a dashed rule with a notch punched out of each side, exactly as the kiosk draws it. The
   notches are filled with the phone's own background, so they read as holes in the card. */
.ph-stub {
  position: relative;
  margin: 4.4cqw -4.4cqw -5cqw;
  padding: 4cqw 3.4cqw 4.6cqw;
  background: rgba(255, 255, 255, .1);
  border-top: .6cqw dashed rgba(255, 255, 255, .45);
}
.ph-stub::before, .ph-stub::after {
  content: "";
  position: absolute;
  top: -3cqw;
  width: 5.4cqw;
  height: 5.4cqw;
  border-radius: 50%;
  background: var(--m-bg);
}
.ph-stub::before { left: -2.7cqw; }
.ph-stub::after { right: -2.7cqw; }
.ph-posn { margin: 0; font-size: 6cqw; font-weight: 800; line-height: 1.2; }
.ph-eta { margin: .8cqw 0 0; font-size: 4.2cqw; line-height: 1.25; opacity: .95; }

/* Called: the same card in the product's green. The counter name is the one thing that matters now, so it is
   set at the size the number was. */
.ph-called-title { margin: auto 0 1.6cqw; font-size: 6cqw; font-weight: 800; line-height: 1.18; }
.ph-counter { margin: .6cqw 0 0; font-size: 11cqw; font-weight: 800; line-height: 1.1; }
/* `.ph-card` is in the selector to outrank the base sheet's `p:last-child { margin-bottom: 0 }`, which would
   otherwise eat the auto margin that centres this block in the card. */
.ph-card .ph-chip {
  align-self: center;
  margin: 3cqw 0 auto;
  padding: 1.4cqw 4cqw;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .18);
  font-size: 4.2cqw;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ph-foot {
  margin: 0;
  padding: 2.8cqw 3cqw;
  border-top: 1px solid var(--m-line);
  font-size: 3.4cqw;
  line-height: 1.3;
  color: var(--m-muted);
  text-align: center;
}

.wa {
  position: absolute;
  left: 88%;
  bottom: 12%;
  width: 190px;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  border-left: 4px solid var(--whatsapp);
  box-shadow: 0 16px 34px -14px rgba(20, 23, 28, .5);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s ease, transform .35s ease;
}
.wa .ic { width: 18px; height: 18px; color: var(--whatsapp); }
.wa .ic-accent { stroke: var(--whatsapp); }
.wa-text { margin: 0; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.wa.is-in { opacity: 1; transform: none; }

/* ================================================================ built for */

.builtfor { padding: 0 0 var(--pad-y); }
.builtfor .h2 { font-size: clamp(26px, 2.6vw, 38px); margin-bottom: 26px; }

.types { display: flex; flex-wrap: wrap; gap: 10px; }
.type {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 550;
}
.type-ic { width: 19px; height: 19px; color: var(--brand-deep); }
.type-any { background: transparent; border-style: dashed; color: var(--ink-2); font-style: italic; }

/* ================================================================ ink bands */

.band-ink {
  background: var(--ink);
  color: var(--on-ink);
  padding: var(--pad-y) 0;
}
.band-ink .lead, .band-ink .eyebrow { color: var(--on-ink-2); }

.pains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: 40px;
}
.pain-title { font-size: clamp(20px, 1.8vw, 26px); color: var(--brand); margin-bottom: .3em; }
.pain-text { color: var(--on-ink-2); margin: 0; }

.steps-block { margin-top: clamp(64px, 8vw, 104px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: 40px; }
.step {
  /* The stub's notches are punched out of whatever is behind it — here, the card, not the band. */
  --stub-notch: #1b1f26;
  padding: 28px;
  background: #1b1f26;
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r-card);
}
.stub { position: relative; width: 132px; height: 56px; margin: 0 0 20px; color: var(--brand); }
.stub-svg { width: 132px; height: 56px; display: block; }
.stub-no {
  position: absolute;
  inset: 0 0 0 34px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
}
.step-title { margin-bottom: .35em; }
.step-text { color: var(--on-ink-2); margin: 0; }
.how-closing {
  margin: 36px 0 0;
  color: var(--on-ink-2);
  font-size: 18px;
  max-width: 68ch;
  border-left: 3px solid var(--brand);
  padding-left: 18px;
}

/* ================================================================ screens */

.screens { padding: var(--pad-y) 0; background: var(--paper); }
/* Each screen gets the shape it is: the 16:9 board across the top, then the customer's phone (tall and narrow,
   so a narrow column) beside the counter strip, then the admin panel — a wide desktop page — across the
   bottom. Three rows, four cards, no empty cell. */
.screen-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  align-items: start;
  gap: clamp(28px, 3.4vw, 48px);
  margin-top: 48px;
}
.card-wide { grid-column: 1 / -1; grid-row: 1; }
.card-phone { grid-column: 1; grid-row: 2; }
/* The counter strip is a third of the phone's height; centred against it, the row reads as two things side by
   side rather than as one tall column with a note pinned to its top corner. */
.card-counter { grid-column: 2; grid-row: 2; align-self: center; }
.card-admin { grid-column: 1 / -1; grid-row: 3; }
.screen-title { margin: 22px 0 .3em; }
.screen-text { color: var(--ink-2); margin: 0; max-width: 56ch; }

/* The frame <img> is in flow and sets the box; the screenshot sits behind it at the window's inset, so the
   bezel covers the last sub-pixel of the image edge. The percentages come from each SVG's viewBox. */
.device { position: relative; }
.device > .frame { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.device > .shot { position: absolute; z-index: 0; object-fit: cover; object-position: top center; }
.device-screen > .shot { left: 1.0204%; top: 1.7986%; width: 97.9592%; height: 89.5683%; }
.device-phone { width: min(260px, 74%); margin-inline: auto; }
.device-phone > .shot { left: 3.125%; top: 1.4943%; width: 93.75%; height: 97.0115%; border-radius: 8% / 3.7%; }

.device-flat {
  padding: 26px 16px 0;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--r-card) var(--r-card) 6px 6px;
  overflow: hidden;
}
.device-flat::before {
  content: "";
  position: absolute;
  top: 10px; left: 16px;
  width: 38px; height: 6px;
  border-radius: 3px;
  background: var(--line);
}
.device-flat > .shot {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
}
/* The admin capture is a whole desktop page, 640×700. Shown whole across the full width it would be over a
   thousand pixels tall, so the frame crops it to its top 430 — the header, the getting-started checklist and
   the three live counts — and the rest scrolls where it does in the product. */
.card-admin .device-flat > .shot { aspect-ratio: 640 / 430; object-fit: cover; object-position: top center; }

.card-wide .device, .card-phone .device, .card-admin .device { filter: drop-shadow(12px 12px 0 var(--brand-tint)); }

/* ================================================================ why */

.why { padding: var(--pad-y) 0; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap); margin-top: 48px; }
.why-item { padding-top: 0; }
/* Hairlines between the rows only. */
.why-grid > .why-item:nth-child(n + 4) { border-top: 1px solid var(--line); padding-top: 40px; }
.why-ic { width: 28px; height: 28px; color: var(--ink); margin-bottom: 14px; }
.why-title { font-size: 20px; margin-bottom: .3em; }
.why-text { color: var(--ink-2); margin: 0; max-width: 42ch; }

/* ================================================================ languages */

.langs { padding: var(--pad-y) 0; background: var(--ground); }

/* The ten phones. A scroller rather than a wrapping grid: ten frames on three ragged rows would be a wall, and
   a strip you push says "there are more" by itself. `scroll-padding-inline` is for the keyboard — tabbing to a
   tile scrolls it flush to the edge otherwise, and the focus ring would be cut in half. */
.lang-strip {
  display: flex;
  gap: 18px;
  margin-top: 34px;
  padding: 4px 4px 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 6px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.lang-tile { flex: none; width: 160px; scroll-snap-align: start; }
.lang-tile-link { display: block; text-decoration: none; color: var(--ink-2); }
/* The tile is the phone's width: the `.device-phone` default (a 260px card frame) does not apply here. */
.lang-tile .device { display: block; width: 100%; transition: transform .15s ease; }
.lang-tile-link:hover .device { transform: translateY(-3px); }
.lang-tile-name {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
}
.lang-tile-link:hover .lang-tile-name { color: var(--ink); }
/* The page you are on: an orange dot beside its name, and nothing else — the order never changes, so the eye
   can find the same language in the same place on all ten pages. */
.lang-tile-link.is-current { color: var(--ink); }
.lang-tile-link.is-current .lang-tile-name::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--brand);
  vertical-align: middle;
}

.lang-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.lang-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.lang-pill:hover { border-color: var(--ink); transform: translateY(-2px); }
.lang-pill.is-current { border-color: var(--brand); background: var(--brand-tint); }
.lang-native { font-weight: 650; font-size: 16px; }
.lang-en { font-size: 13px; color: var(--ink-3); }

/* ================================================================ pricing */

.pricing { padding: var(--pad-y) 0; background: var(--paper); }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: 48px 0 0; }
.plan {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  transition: transform .15s ease, border-color .15s ease;
}
.plan:hover { transform: translateY(-2px); }
.plan.is-recommended { border-color: var(--brand); box-shadow: var(--offset); }
.plan-name { font-size: 20px; margin-bottom: .2em; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: 0 0 14px; }
.plan-amount { font-size: 44px; line-height: 1; }
.plan-per { font-size: 13px; color: var(--ink-3); }
.plan-blurb { color: var(--ink-2); font-size: 15px; margin-bottom: 20px; }
.plan-feats { display: grid; gap: 10px; margin-bottom: 26px; font-size: 15px; }
.plan-feats li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start; }
.feat-ic { width: 18px; height: 18px; color: var(--ok); margin-top: 3px; }
.plan-cta { margin-top: auto; }

.pricing-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
}
.note-title { font-size: 17px; color: var(--ink); margin-bottom: .4em; }
.fineprint { margin-top: 28px; font-size: 14px; color: var(--ink-3); max-width: 78ch; }

/* ================================================================ faq */

.faq { padding: var(--pad-y) 0; }
.faq-cols { columns: 2; column-gap: clamp(28px, 3.4vw, 56px); margin-top: 40px; }
.qa {
  break-inside: avoid;
  margin-bottom: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.qa > summary {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.35;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--brand-deep); }
.qa-q { flex: 1; }
.qa-mark { position: relative; width: 18px; height: 18px; flex: none; margin-top: 4px; }
.qa-mark::before, .qa-mark::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  border-radius: 1px;
  background: var(--brand);
}
.qa-mark::after { transform: rotate(90deg); transition: transform .2s ease; }
.qa[open] .qa-mark::after { transform: rotate(0deg); }
.qa-a { margin: 0 0 18px; color: var(--ink-2); max-width: 60ch; padding-right: 34px; }

/* ================================================================ final CTA */

.final { position: relative; overflow: hidden; text-align: center; }
.final .lead { margin-inline: auto; }
.final-ghost {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-size: min(42vw, 480px);
  line-height: 1;
  opacity: .08;
  color: var(--brand);
  pointer-events: none;
  user-select: none;
}
.final .wrap { position: relative; }
.final .btn { margin-top: 12px; }
.final-ticket { margin-top: 26px; font-size: 14px; color: var(--on-ink-2); font-style: italic; }

/* ================================================================ footer */

.foot { background: var(--ground); padding: clamp(56px, 6vw, 80px) 0 32px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 2fr; gap: var(--gap); }
.foot-brand .brand { font-size: 22px; }
.foot-tagline { margin-top: 12px; color: var(--ink-2); font-size: 15px; max-width: 42ch; }
.foot-head { margin-bottom: 14px; }
.foot-col ul { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.foot-langs ul { display: flex; flex-flow: row wrap; gap: 9px 18px; }
.foot-col a { color: var(--ink-2); text-decoration: none; }
.foot-col a:hover { color: var(--ink); text-decoration: underline; }
.foot-col a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.foot-bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }

/* ================================================================ back to top */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px 11px 14px;
  background: var(--ink);
  color: var(--on-ink);
  border: 0;
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 30px -14px rgba(20, 23, 28, .6);
}
.to-top .ic { width: 17px; height: 17px; }
.to-top:hover { background: var(--brand-deep); }

/* ================================================================ 404 */

.notfound { padding: clamp(96px, 14vh, 180px) 0; text-align: center; }
.notfound .lead { margin-inline: auto; }
.notfound .btn { margin: 14px 0 44px; }
.notfound .lang-pills { justify-content: center; }

/* ================================================================ reveal on scroll
 *
 * Nothing is hidden by this stylesheet on its own: `[data-rv]` has no styles until the script adds `rv-init`,
 * and it only ever adds it to an element that is below the fold. A page with JavaScript off, or a printed one,
 * or one where the script fails, is fully visible. The delay for the stagger is set by the script on `el.style`.
 */

[data-rv].rv-init {
  opacity: .001;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
}
[data-rv].rv-init.rv-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rv].rv-init { opacity: 1; transform: none; }
}

/* ================================================================ breakpoints */

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 720px; margin-inline: auto; width: 100%; }
  .hero { padding-top: 116px; }
  .nav-links { display: none; }
  .menu-pop { display: block; }
  .screen-grid { gap: 36px; }
  .plans { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .pains, .steps, .why-grid { grid-template-columns: 1fr; }
  .why-grid { gap: 32px; }
  .why-grid > .why-item:nth-child(n + 2) { border-top: 1px solid var(--line); padding-top: 32px; }
  .screen-grid { grid-template-columns: 1fr; }
  .screen-grid > .screen-card { grid-column: 1 !important; grid-row: auto !important; }
  .card-phone .device-phone { width: min(280px, 80%); }
  .faq-cols { columns: 1; }
  .pricing-notes { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .nav-signin { display: none; }
}

@media (max-width: 600px) {
  :root { --wrap: min(1180px, 100% - 32px); }
  body { font-size: 16px; }
  .nav { padding-left: 14px; gap: 8px; }
  /* The bar must keep its menu on screen whatever the language calls "Start free" (Tamil's label is twice
     English's width), so the globe picker leaves the bar here and its ten links move into the menu. */
  .nav-right { min-width: 0; }
  .nav .btn.primary { font-size: 14px; padding: 10px 14px; }
  html[lang="ta"] .nav .btn.primary, html[lang="kn"] .nav .btn.primary { font-size: 13px; padding: 9px 11px; letter-spacing: 0; line-height: 1.15; }
  .lang-pop { display: none; }
  .menu-langs, .menu-langs-title { display: block; }
  .menu-panel { max-height: min(70vh, 560px); overflow-y: auto; }
  .pop-label { display: none; }
  .plans { grid-template-columns: 1fr; }
  .hero { padding-top: 104px; }
  .wa { display: none; }
  .lang-tile { width: 120px; }
  .lang-tile-name { font-size: 14px; }
  .foot-grid { grid-template-columns: 1fr; }
  .to-top span { display: none; }
  .to-top { padding: 12px; }
  .qa > summary { font-size: 17px; }
  .stub, .stub-svg { width: 112px; height: 48px; }
  .stub-no { inset: 0 0 0 29px; font-size: 19px; }
}