/* The site's fonts (tools/fetch_fonts.py): self-hosted, SIL Open Font License. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-bengali-bengali.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-devanagari-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF4, U+1CF7-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B0A;
}
@font-face {
  font-family: 'Noto Sans Gujarati';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-gujarati-gujarati.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A80-0AFF, U+200C-200D, U+20B9, U+25CC, U+A830-A839;
}
@font-face {
  font-family: 'Noto Sans Gurmukhi';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-gurmukhi-gurmukhi.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0A01-0A76, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839;
}
@font-face {
  font-family: 'Noto Sans Kannada';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-kannada-kannada.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;
}
@font-face {
  font-family: 'Noto Sans Malayalam';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-malayalam-malayalam.woff2) format('woff2');
  unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0B83, U+0D00-0D7F, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
}
@font-face {
  font-family: 'Noto Sans Oriya';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-oriya-oriya.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B01-0B77, U+1CDA, U+1CF2, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Tamil';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-tamil-tamil.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Telugu';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-telugu-telugu.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C00-0C7F, U+1CD5-1CD6, U+1CD8, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}

/* Deft logo motion (11 Oct 2026). Built from the real logo shapes; pure CSS, no images, no video.
   Feedback so far (heydeft.ai/motion): arrival A "Morse beat"; working signal 1 "Morse pulse"; chime liked.
   Both working signals are here: "pulse" (Morse pulse) and "breathe" (only the full stop breathes).
   Markup: see README.md beside this file. Respects prefers-reduced-motion (the still logo). */

.deft-logo, .deft-mark { --deft-u: 110ms; overflow: visible; }
.deft-logo .dash, .deft-logo .dot1, .deft-logo .word, .deft-mark .dash, .deft-mark .dot1 { fill: var(--deft-ink, #1E3A34); }
.deft-logo .dot2, .deft-mark .dot2 { fill: var(--deft-accent, #B5603C); }
.deft-logo .dash, .deft-logo .word { transform-box: fill-box; transform-origin: left center; }
.deft-logo .dot1, .deft-logo .dot2, .deft-mark .dot2 { transform-box: fill-box; transform-origin: center; }

/* Arrival A, "Morse beat": dah (3 units), di, dit, then the word. Add the class "arrive" once, on load. */
@keyframes deft-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes deft-pop { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes deft-settle { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.deft-logo.arrive .dash { animation: deft-grow calc(var(--deft-u) * 3) cubic-bezier(.3, .7, .3, 1) both; }
.deft-logo.arrive .dot1 { animation: deft-pop calc(var(--deft-u) * 1.6) calc(var(--deft-u) * 4) both; }
.deft-logo.arrive .dot2 { animation: deft-pop calc(var(--deft-u) * 1.6) calc(var(--deft-u) * 6) both; }
.deft-logo.arrive .word { animation: deft-settle 420ms calc(var(--deft-u) * 8) cubic-bezier(.2, .7, .2, 1) both; }

/* Working 1, "Morse pulse": the marks brighten in the rhythm of "d", rest, repeat. */
@keyframes deft-beat { 0%, 100% { opacity: .3; } 8%, 22% { opacity: 1; } 30% { opacity: .3; } }
.deft-mark.pulse .dash { animation: deft-beat 2.2s infinite; }
.deft-mark.pulse .dot1 { animation: deft-beat 2.2s .44s infinite; }
.deft-mark.pulse .dot2 { animation: deft-beat 2.2s .66s infinite; }

/* Working 2, "Full stop breathing": only the terracotta dot breathes. */
@keyframes deft-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
.deft-mark.breathe .dot2 { animation: deft-breathe 1.7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .deft-logo *, .deft-mark * { animation: none !important; }
}

/* heydeft.ai: the site's one stylesheet (Claude Design's "Pop · Daylight", built exactly; rules in
   platform/design/deft-site/RULES.md, enforced by platform/hq/tests/test_frontdoor_design.py).
   Tokens first (deft-site.js THEMES, light and dark), then the shared pieces, then each page's own.
   No shadows, no gradients; every colour a token except the few the design fixes in both modes. */

/* ---------------------------------------------------------------------------------------------- tokens */
:root {
  --bg: #FFF8EE; --surface: #FFFFFF; --sunk: #F2E8D9; --ink: #1E1A17; --ink2: #3A302A; --ink3: #6E5E52;
  --line: #1E1A17; --hair: #E6DACA; --brand: #1E3A34; --onBrand: #FFF8EE; --onBrand2: #CFE3D3; --onBrandAccent: #FFB38F;
  --brandSoft: #26463F; --accent: #E2704A; --onAccent: #1E1A17; --accentText: #B5603C; --dot: #E2704A;
  --peach: #FFD9C2; --sage: #CFE3D3; --butter: #FFE7A3; --blush: #F7D4D9; --danger: #B42318; --dangerBg: #FDE7E4;
  --ok: #1E6B4F; --okBg: #D7EEDF; --field: #FFF8EE; --focus: #E2704A;
  --logoInk: #1E3A34; --logoDot: #B5603C; --logoInkOn: #FFFFFF; --logoDotOn: #D9784F;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0F1F1B; --surface: #172B26; --sunk: #1F3832; --ink: #F3EEE4; --ink2: #C9D5CF; --ink3: #9DB0A8;
  --line: #4A6A62; --hair: #2A433C; --brand: #F3EEE4; --onBrand: #0F1F1B; --onBrand2: #3E4F49; --onBrandAccent: #B5603C;
  --brandSoft: #E4DCCD; --accent: #E2704A; --onAccent: #1E1A17; --accentText: #FFB38F; --dot: #E2704A;
  --peach: #3B2A22; --sage: #1F3A33; --butter: #38321F; --blush: #3A2629; --danger: #FF8A7A; --dangerBg: #3A1E1A;
  --ok: #7FD1A8; --okBg: #173A2D; --field: #0F1F1B; --focus: #FFB38F;
  --logoInk: #FFFFFF; --logoDot: #D9784F; --logoInkOn: #1E3A34; --logoDotOn: #B5603C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1F1B; --surface: #172B26; --sunk: #1F3832; --ink: #F3EEE4; --ink2: #C9D5CF; --ink3: #9DB0A8;
    --line: #4A6A62; --hair: #2A433C; --brand: #F3EEE4; --onBrand: #0F1F1B; --onBrand2: #3E4F49; --onBrandAccent: #B5603C;
    --brandSoft: #E4DCCD; --accent: #E2704A; --onAccent: #1E1A17; --accentText: #FFB38F; --dot: #E2704A;
    --peach: #3B2A22; --sage: #1F3A33; --butter: #38321F; --blush: #3A2629; --danger: #FF8A7A; --dangerBg: #3A1E1A;
    --ok: #7FD1A8; --okBg: #173A2D; --field: #0F1F1B; --focus: #FFB38F;
    --logoInk: #FFFFFF; --logoDot: #D9784F; --logoInkOn: #1E3A34; --logoDotOn: #B5603C;
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------------------------- base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .85; }
button { font: inherit; }
input::placeholder { color: var(--ink3); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the screen's own edges (DUO-1, 23 Oct 2026, his iPhone Duo; every phone turned on its side): a gutter is the
   design's, or the safe area where that is wider (the Dynamic Island, the rounded corners; left and right apart, as
   they differ), so nothing sits under them while every band's colour still runs to the edge. The top and the bottom
   add the safe area to the design's own space (the Home Screen app runs under the status bar and the home bar). */
.page, .su-page { --gl: max(18px, env(safe-area-inset-left)); --gr: max(18px, env(safe-area-inset-right));
                  --gt: env(safe-area-inset-top, 0px); --gb: env(safe-area-inset-bottom, 0px); }
.page {
  container: page / inline-size; background: var(--bg); color: var(--ink); overflow: hidden; min-height: 100vh; min-height: 100svh;
  font-family: 'Figtree', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu',
               'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Oriya', 'Noto Sans Gurmukhi', sans-serif;
  transition: background .3s, color .3s;
}
.display { font-family: 'Bricolage Grotesque', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil',
           'Noto Sans Telugu', 'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Oriya',
           'Noto Sans Gurmukhi', sans-serif; font-weight: 800; }
.h2 { margin: 0; font-size: clamp(38px, 9cqw, 80px); line-height: .95; letter-spacing: -.05em; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accentText); }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: var(--gl); padding-right: var(--gr); }
.fullstop { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--dot); }

/* the brand's marks: the logo (arrival) and the working pulse, coloured by the tokens */
.deft-logo { --deft-ink: var(--logoInk); --deft-accent: var(--logoDot); display: block; }
.deft-mark { --deft-ink: var(--ink); --deft-accent: var(--accent); flex-shrink: 0; }
.mark-on-brand { --deft-ink: var(--onBrand); --deft-accent: var(--accent); }

/* ---------------------------------------------------------------------------------------------- header */
.site-header { max-width: 1280px; margin: 0 auto; padding: calc(14px + var(--gt)) var(--gr) 14px var(--gl); display: flex; align-items: center;
               justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink); position: relative; }
.site-header .home { display: flex; align-items: center; }
.site-header .deft-logo { width: 94px; height: 32px; }
.site-nav { display: none; gap: 22px; font-size: 15px; font-weight: 600; }
.site-nav a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px;
              text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { text-decoration-line: underline; }
.tools { display: flex; align-items: center; gap: 6px; }
.lang-pill { display: flex; background: var(--sunk); border-radius: 999px; padding: 3px; border: 0; cursor: pointer;
             color: var(--ink); }
.lang-pill span { font-size: 13px; font-weight: 700; padding: 8px 10px; border-radius: 999px; background: var(--ink);
                  color: var(--bg); min-width: 36px; text-align: center; line-height: normal; }
.theme-btn { width: 40px; height: 40px; border-radius: 20px; border: 0; background: var(--sunk); color: var(--ink);
             cursor: pointer; display: flex; align-items: center; justify-content: center; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .moon { display: none; }
}
.signin { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px;
          border: 2px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; }
.header-cta { display: none; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px;
              background: var(--accent); color: var(--onAccent); font-size: 14px; font-weight: 800; }
@container page (min-width: 900px) {
  .site-nav { display: flex; }
  .header-cta { display: inline-flex; }
}
/* the language sheet: the 11 languages as the design's chips (BUILD-BRIEF: the segmented control fits only three) */
.lang-sheet { position: absolute; z-index: 20; right: var(--gr); top: calc(100% - 6px); width: min(420px, calc(100% - 36px));
              background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 18px;
              display: flex; flex-direction: column; gap: 12px; }
.lang-sheet[hidden] { display: none; }
.lang-sheet .title { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }

/* ---------------------------------------------------------------------------------------------- shared pieces */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px;
        border: 2px solid var(--hair); background: var(--surface); color: var(--ink); font-size: 16px; font-weight: 700;
        cursor: pointer; }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.chip.add { border: 2px dashed var(--hair); background: transparent; color: var(--ink2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 999px;
       cursor: pointer; font-weight: 700; text-align: center; }
.btn:hover { opacity: .85; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: default; }
.btn-primary { height: 58px; padding: 0 26px; background: var(--brand); color: var(--onBrand); font-size: 17px; font-weight: 800; }
.btn-big { height: 60px; padding: 0 30px; font-size: 18px; }
.btn-secondary { height: 54px; padding: 0 22px; border: 2px solid var(--line); background: transparent; color: var(--ink);
                 font-size: 16px; }
.btn-link { min-height: 44px; border: 0; background: none; color: var(--accentText); font-size: 15px; font-weight: 700;
            text-decoration: underline; cursor: pointer; }
.btn-pill { align-self: flex-start; border: 2px solid var(--line); background: var(--surface); border-radius: 999px;
            padding: 10px 18px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; }
.receipt { background: var(--brand); color: var(--onBrand); border-radius: 22px; padding: 18px 20px; display: flex;
           flex-direction: column; gap: 10px; }
.receipt .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--onBrandAccent); }
.receipt .t { font-size: 24px; letter-spacing: -.03em; line-height: 1.1; }
.receipt .n { font-size: 15px; color: var(--onBrand2); line-height: 1.45; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tags span { font-size: 12px; font-weight: 700; background: var(--brandSoft); border-radius: 999px; padding: 5px 10px; }
.notice { border-radius: 14px; padding: 14px 16px; font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.notice.ok { background: var(--okBg); }
.notice.wait { background: var(--butter); }
.notice.err { background: var(--dangerBg); }
.notice .again { border: 0; background: none; font-size: 14px; text-decoration: underline; cursor: pointer; color: var(--ink); padding: 0; }
.placeholder-tag { font-size: 12px; font-weight: 700; color: var(--ink); background: var(--peach); border-radius: 999px; padding: 6px 12px; }

/* ---------------------------------------------------------------------------------------------- footer */
.site-footer { border-top: 1.5px solid var(--hair); color: var(--ink); }
.site-footer .in { max-width: 1280px; margin: 0 auto; padding: 36px var(--gr) calc(44px + var(--gb)) var(--gl); display: flex;
                   flex-direction: column; gap: 22px; }
.site-footer .row { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.site-footer .who { display: flex; flex-direction: column; gap: 8px; }
.site-footer .brandline { display: flex; align-items: center; gap: 8px; }
.site-footer .brandline span { font-weight: 500; font-size: 24px; letter-spacing: -.015em; line-height: 1; padding-bottom: 2px; }
.site-footer .by { font-size: 14px; color: var(--ink3); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; font-weight: 600; max-width: 720px; }
.site-footer nav a { color: var(--ink); }
.site-footer .copy { font-size: 13px; color: var(--ink3); }
/* the legal pages are in English: on a page in another language one line says so (empty in English: not shown) */
.legal-en { font-size: 13px; color: var(--ink3); margin-bottom: 6px; }
.legal-en:empty { display: none; }
.su-legal-en { text-align: center; margin-top: 8px; }
.fill-ink { fill: var(--ink); }
.fill-accent { fill: var(--accent); }
.fill-bg { fill: var(--bg); }
.fill-hair { fill: var(--hair); }

/* ---------------------------------------------------------------------------------------------- home */
.hero { max-width: 1280px; margin: 0 auto; padding: clamp(24px, 6cqw, 72px) var(--gr) clamp(48px, 8cqw, 96px) var(--gl); display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 40px; align-items: center; }
.hero .left { display: flex; flex-direction: column; gap: 22px; }
.beta { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--sage); border-radius: 999px;
        padding: 7px 14px 7px 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.hero h1 { margin: 0; font-size: clamp(46px, 12.5cqw, 124px); line-height: .95; letter-spacing: -.05em; }
.hero h1 .a { display: block; }
.hero h1 .b { display: inline-flex; align-items: baseline; gap: .06em; }
.word { display: inline-block; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em;
        text-underline-offset: .08em; text-decoration-skip-ink: none; transition: opacity .22s, transform .22s; }
.word.out { opacity: 0; transform: translateY(-.2em); }
.word.in { opacity: 0; transform: translateY(.2em); }
.hero .sub { margin: 0; font-size: clamp(17px, 4.4cqw, 21px); line-height: 1.5; max-width: 30em; color: var(--ink2); text-wrap: pretty; }
.ticket { position: relative; width: min(100%, 520px); background: var(--surface); border: 2px solid var(--line); border-radius: 24px; overflow: hidden; }
.ticket .top { padding: 18px 20px 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ticket .top div { display: flex; flex-direction: column; gap: 2px; }
.ticket .k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accentText); }
.ticket .t { font-size: 22px; letter-spacing: -.03em; }
/* tracking breaks the Indian scripts' joined letters: the translated eyebrow and stamp go untracked */
html:not([lang="en"]) .ticket .k, html:not([lang="en"]) .stamp { letter-spacing: 0; }
.perf { position: relative; height: 0; border-top: 2px dashed var(--hair); margin: 0 18px; }
.perf::before, .perf::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
                              background: var(--bg); border: 2px solid var(--line); }
.perf::before { left: -30px; }
.perf::after { right: -30px; }
.ticket form { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.ticket .fields { display: flex; flex-direction: column; gap: 14px; }
.ticket-field { display: flex; align-items: center; height: 54px; padding: 0 14px; gap: 10px; background: var(--field);
                border-radius: 14px; border: 1.5px solid var(--hair); }
.ticket-field:focus-within { border: 2px solid var(--focus); }
.ticket-field.bad { border: 2px solid var(--danger); }
.ticket-field span { color: var(--ink3); font-size: 17px; font-weight: 700; }
.ticket-field input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); flex: 1; min-width: 0; }
.ticket button[type="submit"] { height: 54px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--brand);
                                color: var(--onBrand); font-size: 16px; font-weight: 700; cursor: pointer; display: inline-flex;
                                align-items: center; justify-content: center; gap: 10px; }
.ticket button .busy { display: inline-flex; align-items: center; gap: 10px; }
.ticket button .busy[hidden], .ticket button .idle[hidden] { display: none; }
.ticket .note { font-size: 13.5px; color: var(--ink3); line-height: 1.5; }
.ticket .err { font-size: 14.5px; font-weight: 600; color: var(--danger); display: flex; gap: 8px; align-items: center; }
.ticket .err[hidden] { display: none; }
.bang { width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: var(--bg); font-size: 12px; font-weight: 800;
        display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.listed { padding: 22px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.listed[hidden], .ticket form[hidden] { display: none; }
.stamp { transform: rotate(-7deg); border: 3px solid var(--accentText); color: var(--accentText); border-radius: 10px; padding: 6px 12px;
         font-size: 20px; letter-spacing: .04em; }
.listed p { margin: 0; flex: 1 1 200px; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.listed .note { flex: 1 1 100%; }   /* (the Junk line: the form's own note, on a line of its own) */
.listed button { border: 0; background: none; font-size: 13px; color: var(--ink3); cursor: pointer; text-decoration: underline; }
.open-cta { display: flex; flex-direction: column; gap: 10px; }
.open-cta a { align-self: flex-start; }
.open-cta div { font-size: 14px; color: var(--ink3); }
.said-did { display: flex; flex-direction: column; align-items: center; max-width: 440px; width: 100%; justify-self: center; }
.said { align-self: flex-start; width: 88%; background: var(--surface); border: 2px solid var(--line); border-radius: 22px;
        padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-2deg); }
.said .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.said .row { display: flex; align-items: center; gap: 10px; }
.play-dot { width: 34px; height: 34px; border-radius: 17px; background: var(--ink); display: flex; align-items: center;
            justify-content: center; flex-shrink: 0; }
.bars { flex: 1; display: flex; align-items: center; gap: 3px; }
.said .bars { height: 24px; }
.said .bars i { flex: 1; border-radius: 2px; background: var(--hair); }
.said .dur { font-size: 12px; color: var(--ink3); }
.said .q { font-size: 16px; font-weight: 600; line-height: 1.4; }
.connector { margin: -4px 0; }
.did { align-self: flex-end; width: 92%; transform: rotate(1.5deg); }
.strip { background: #1E3A34; color: #FFF8EE; padding: 16px 0; overflow: hidden; }
.strip .track { display: flex; gap: 12px; white-space: nowrap; width: max-content; animation: drift 70s linear infinite; }
.strip .track div { display: flex; align-items: center; gap: 10px; background: #26463F; border-radius: 999px; padding: 11px 20px;
                    font-size: 17px; font-weight: 600; }
.strip .track i { width: 9px; height: 9px; border-radius: 5px; background: #E2704A; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sec { max-width: 1280px; margin: 0 auto; padding: clamp(64px, 10cqw, 112px) var(--gr) clamp(64px, 10cqw, 112px) var(--gl); }
.sec-tail { padding-top: 0; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 40px; align-items: start; }
.stack { display: flex; flex-direction: column; }
.g6 { gap: 6px; } .g18 { gap: 18px; } .g20 { gap: 20px; } .g28 { gap: 28px; } .g32 { gap: 32px; } .g12 { gap: 12px; } .g14 { gap: 14px; }
.lede { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink2); max-width: 28em; text-wrap: pretty; }
.call { background: var(--surface); border: 2px solid var(--line); border-radius: 28px; padding: 20px; display: flex;
        flex-direction: column; gap: 16px; }
.call .bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.call .state { display: flex; align-items: center; gap: 8px; }
.call .live { width: 10px; height: 10px; border-radius: 5px; background: var(--accent); }
.call .phase { font-size: 15px; font-weight: 700; }
.call .timer { font-size: 15px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.seg { display: flex; background: var(--sunk); border-radius: 999px; padding: 3px; }
.seg button { border: 0; cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
              background: transparent; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.progress { height: 4px; border-radius: 2px; background: var(--sunk); }
.progress i { display: block; height: 4px; border-radius: 2px; background: var(--accent); width: 0; }
.progress i.full { width: 100%; }
.call .dialling { display: inline-flex; }
.call .dialling[hidden] { display: none; }
.lines { display: flex; flex-direction: column; gap: 12px; }
.line { display: flex; flex-direction: column; gap: 3px; opacity: .14; transition: opacity .35s; }
.line.on { opacity: 1; }
.line .who { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.line.r .who { color: var(--accentText); }
.line .text { font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.booked { border-radius: 18px; padding: 16px 18px; gap: 6px; }
.booked .t { font-size: 19px; font-weight: 700; letter-spacing: 0; line-height: normal; }
.booked .n { font-size: 14px; }
.booked[hidden] { display: none; }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.step-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; border-radius: 24px;
             background: var(--surface); border: 2px solid var(--line); }
.step-card .n { width: 56px; height: 56px; border-radius: 28px; background: var(--accent); color: var(--onAccent); display: flex;
                align-items: center; justify-content: center; font-size: 26px; }
.step-card .t { font-size: 22px; letter-spacing: -.03em; }
.step-card .b { font-size: 15.5px; line-height: 1.5; color: var(--ink2); }
.max12 { max-width: 12ch; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.feature { background: var(--surface); border: 2px solid var(--line); border-radius: 28px; padding: 22px; display: flex;
           flex-direction: column; gap: 14px; }
.feature .t { font-size: 26px; letter-spacing: -.035em; line-height: 1.05; }
.feature .b { font-size: 16px; line-height: 1.5; color: var(--ink2); text-wrap: pretty; }
.feature .res { margin-top: auto; border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.feature .res .k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.feature .res .v1 { font-size: 16px; font-weight: 700; }
.feature .res .v2 { font-size: 14.5px; color: var(--ink2); }
.tint-peach { background: var(--peach); } .tint-sage { background: var(--sage); }
.tint-butter { background: var(--butter); } .tint-blush { background: var(--blush); }
.sunk { background: var(--sunk); }
.approval { background: var(--surface); border: 2px solid var(--line); border-radius: 24px; padding: 20px; display: flex;
            flex-direction: column; gap: 14px; }
.approval .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accentText); }
.approval .q { font-size: 18px; font-weight: 700; line-height: 1.35; }
.approval .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.approval .acts[hidden], .approval .notice[hidden] { display: none; }
.approval .acts button { flex: 1 1 120px; height: 50px; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; }
.approval .yes { border: 0; background: var(--brand); color: var(--onBrand); }
.approval .no { border: 2px solid var(--line); background: transparent; color: var(--ink); }
.trust-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 20px 0; border-top: 2px solid var(--line); }
.trust-row svg { margin-top: 8px; }
.trust-row .t { font-size: 23px; letter-spacing: -.03em; }
.trust-row .b { font-size: 16px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.langs-head p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink2); }
.lang-chip { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 999px; border: 2px solid var(--line);
             background: var(--surface); }
.lang-chip b { font-size: 21px; font-weight: 700; line-height: 1.3; }
.lang-chip span { font-size: 13px; color: var(--ink3); }
.headrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; }
.voice { border-radius: 26px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.voice .row { display: flex; align-items: center; gap: 12px; }
.voice .play { width: 56px; height: 56px; border-radius: 28px; border: 0; background: var(--ink); display: flex; align-items: center;
               justify-content: center; cursor: pointer; flex-shrink: 0; }
.voice .play:disabled { opacity: .4; cursor: default; }
.voice .play .pause { display: none; }
.voice.playing .play .pause { display: block; }
.voice.playing .play .tri { display: none; }
.voice .bars { height: 36px; }
.voice .bars i { flex: 1; border-radius: 3px; background: var(--ink); }
.voice .meta { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; }
.voice .meta span:last-child { font-weight: 500; }
.voice .line { opacity: 1; font-size: 15px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; display: block; }
.plans-block { background: var(--brand); color: var(--onBrand); }
.plans-block .lnk { font-size: 16px; font-weight: 700; color: var(--onBrandAccent); }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.plan-card { border-radius: 28px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.plan-card.p0 { background: var(--bg); color: var(--ink); }
.plan-card.p1 { background: #E2704A; color: #1E1A17; }
.plan-card.p2 { background: var(--sage); color: var(--ink); }
.plan-card .name { font-size: 17px; font-weight: 800; }
.plan-card .price { display: flex; align-items: baseline; gap: 6px; }
.plan-card .price b { font-size: 52px; letter-spacing: -.05em; line-height: 1; }
.plan-card .price span { font-size: 14px; }
.plan-card .for { font-size: 16px; line-height: 1.45; }
.plan-card .allow { font-size: 13px; opacity: .85; }
.plans-note { font-size: 15px; color: var(--onBrand2); line-height: 1.6; }
.faq-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; }
.faq-cols .head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.faq-cols .head a { font-size: 16px; font-weight: 700; color: var(--accentText); }
.qa-list { display: flex; flex-direction: column; gap: 8px; }
.qa { border: 2px solid var(--line); border-radius: 22px; padding: 0 18px; background: var(--surface); }
.qa.open { background: var(--sunk); }
.qa button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 0;
             background: none; border: 0; font-size: 17px; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; }
.qa .plus { width: 32px; height: 32px; border-radius: 16px; background: var(--accent); color: var(--onAccent); display: flex;
            align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; transition: transform .25s; }
.qa.open .plus { transform: rotate(45deg); }
.qa .a { padding: 0 18px 18px 0; font-size: 15.5px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }
.qa .a[hidden] { display: none; }
/* an answer's link, after its words (15 Oct 2026, the Google questions): the design's text link, --accentText underlined */
.qa .a a { color: var(--accentText); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cta-wrap { padding: 0 max(12px, env(safe-area-inset-right)) 40px max(12px, env(safe-area-inset-left)); }
.cta-block { max-width: 1256px; margin: 0 auto; background: #E2704A; border-radius: 36px;
             padding: clamp(48px, 10cqw, 112px) clamp(22px, 5cqw, 64px); display: flex; flex-direction: column;
             align-items: flex-start; gap: 26px; }
.cta-block h2 { margin: 0; font-size: clamp(48px, 13cqw, 150px); line-height: .88; letter-spacing: -.055em; color: #1E1A17; }
.cta-block h2 i { display: inline-block; width: .18em; height: .18em; border-radius: 50%; background: #1E3A34; margin-left: .04em; }
.cta-block a { display: inline-flex; align-items: center; height: 60px; padding: 0 30px; border-radius: 999px; background: #1E1A17;
               color: #FFF8EE; font-size: 18px; font-weight: 700; }

/* ---------------------------------------------------------------------------------------------- Pricing */
.h2-72 { font-size: clamp(36px, 8cqw, 72px); }
.pr-hero { max-width: 1280px; margin: 0 auto; padding: clamp(32px, 7cqw, 88px) var(--gr) 40px var(--gl); display: flex;
           flex-direction: column; gap: 18px; }
.pr-hero h1 { margin: 0; font-size: clamp(44px, 11cqw, 112px); line-height: .92; letter-spacing: -.05em; max-width: 11ch; }
.pr-hero h1 .fullstop { margin-left: .04em; }
.pr-hero p { margin: 0; font-size: clamp(17px, 4.4cqw, 21px); line-height: 1.5; color: var(--ink2); max-width: 34em;
             text-wrap: pretty; }
.pr-plans { max-width: 1280px; margin: 0 auto; padding: 0 var(--gr) clamp(56px, 9cqw, 104px) var(--gl); }
.pr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.pr-card { border-radius: 32px; border: 2px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.pr-card .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pr-card .name { font-size: 19px; font-weight: 800; }
.pr-card .price { display: flex; align-items: baseline; gap: 6px; }
.pr-card .price b { font-size: clamp(48px, 12cqw, 64px); letter-spacing: -.05em; line-height: 1; }
.pr-card .price span { font-size: 15px; opacity: .8; }
.pr-card .gst { font-size: 13px; font-weight: 700; opacity: .8; }
.pr-card .for { font-size: 17px; line-height: 1.45; }
.pr-card .allow { border-radius: 16px; padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px;
                  font-size: 14.5px; }
.pr-card .allow span:first-child { font-weight: 700; }
.pr-card .go { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 54px;
               border-radius: 999px; font-size: 16px; font-weight: 800; }
.pr-card.s0 { background: var(--surface); color: var(--ink); }
.pr-card.s0 .allow { background: var(--sunk); }
.pr-card.s0 .go { background: var(--brand); color: var(--onBrand); }
.pr-card.s1 { background: #E2704A; color: #1E1A17; }
.pr-card.s1 .allow { background: rgba(30, 26, 23, .1); }
.pr-card.s1 .go { background: #1E1A17; color: #FFF8EE; }
.pr-card.s2 { background: var(--brand); color: var(--onBrand); }
.pr-card.s2 .allow { background: var(--brandSoft); }
.pr-card.s2 .go { background: var(--accent); color: var(--onAccent); }
.pr-incl { background: var(--sunk); }
.pr-incl .inner { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 9cqw, 104px) var(--gr) clamp(56px, 9cqw, 104px) var(--gl); display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 36px; }
.pr-incl ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pr-incl li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px 0;
              border-top: 1.5px solid var(--hair); font-size: 17px; line-height: 1.45; }
.pr-incl li svg { margin-top: 7px; }
.pr-billing { max-width: 1280px; margin: 0 auto; padding: clamp(56px, 9cqw, 104px) var(--gr) clamp(56px, 9cqw, 104px) var(--gl); display: flex;
              flex-direction: column; gap: 28px; }
.pr-billing .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.pr-billing .card { border-radius: 26px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.pr-billing .t { font-size: 23px; letter-spacing: -.03em; }
.pr-billing .d { font-size: 16px; line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.tint-surface { background: var(--surface); }
.pr-faq { max-width: 1280px; margin: 0 auto; padding: 0 var(--gr) clamp(56px, 9cqw, 104px) var(--gl); display: grid;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; }
.pr-faq .head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.pr-faq .head a { font-size: 16px; font-weight: 700; color: var(--accentText); }

/* ---------------------------------------------------------------------------------------------- FAQ */
.faq-hero { max-width: 920px; margin: 0 auto; padding: clamp(32px, 7cqw, 80px) var(--gr) 24px var(--gl); display: flex;
            flex-direction: column; gap: 22px; }
.faq-hero h1 { margin: 0; font-size: clamp(44px, 11cqw, 104px); line-height: .92; letter-spacing: -.05em; }
/* (the full stop hangs: the design's dot sits after the word, but at 1280 its 0.24em tipped it onto a line alone) */
.faq-hero h1 .fullstop { margin-left: .04em; margin-right: -.24em; }
.faq-search { display: flex; align-items: center; gap: 12px; height: 60px; border-radius: 999px; border: 2px solid var(--line);
              background: var(--surface); padding: 0 20px; }
.faq-search:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-search svg { flex-shrink: 0; }
.faq-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink);
                    outline: none; padding: 0; }
.faq-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-g { min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--hair); background: var(--surface);
          color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.chip-g[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.faq-body { max-width: 920px; margin: 0 auto; padding: 12px var(--gr) clamp(56px, 9cqw, 96px) var(--gl); display: flex; flex-direction: column;
            gap: 32px; }
.faq-sec { display: flex; flex-direction: column; gap: 10px; }
.faq-sec[hidden] { display: none; }
.faq-sec h2 { margin: 0 0 4px; font-size: clamp(26px, 6cqw, 36px); letter-spacing: -.035em; }
.qa.big button { font-size: 17.5px; }
.qa.big .a { padding: 0 18px 20px 0; font-size: 16px; line-height: 1.65; }
.faq-empty { border: 2px dashed var(--hair); border-radius: 22px; padding: 28px; text-align: center; font-size: 16px;
             color: var(--ink2); }
.still { background: var(--brand); color: var(--onBrand); border-radius: 30px; padding: 28px; display: flex;
         flex-direction: column; gap: 12px; }
.still .t { font-size: 28px; letter-spacing: -.035em; }
.still .d { font-size: 16px; line-height: 1.55; color: var(--onBrand2); }
.still a { align-self: flex-start; display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 999px;
           background: var(--accent); color: var(--onAccent); font-size: 15px; font-weight: 800; }

/* ---------------------------------------------------------------------------------------------- Legal */
.legal { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 6cqw, 64px) var(--gr) clamp(56px, 9cqw, 96px) var(--gl); display: grid;
         grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5cqw, 56px); align-items: start; }
.legal-tabs { display: flex; flex-direction: row; gap: 6px; flex-wrap: wrap; }
.legal-tabs a { min-height: 44px; display: flex; align-items: center; padding: 8px 16px; border-radius: 14px; font-size: 15.5px;
                font-weight: 700; background: var(--sunk); color: var(--ink); }
@container page (min-width: 900px) {
  .legal { grid-template-columns: 240px minmax(0, 1fr); }
  .legal-tabs { flex-direction: column; position: sticky; top: calc(20px + var(--gt)); }
}
/* which document shows, and which tab is lit: the address's (theme.js sets data-legal before the page draws) */
.legal-doc { display: none; flex-direction: column; gap: 22px; min-width: 0; max-width: 720px; }
html:not([data-legal]) .d-terms, html[data-legal="terms"] .d-terms, html[data-legal="privacy"] .d-privacy,
html[data-legal="refund"] .d-refund, html[data-legal="shipping"] .d-shipping, html[data-legal="contact"] .d-contact {
  display: flex; }
html:not([data-legal]) .t-terms, html[data-legal="terms"] .t-terms, html[data-legal="privacy"] .t-privacy,
html[data-legal="refund"] .t-refund, html[data-legal="shipping"] .t-shipping, html[data-legal="contact"] .t-contact {
  background: var(--ink); color: var(--bg); }
.legal-doc .head { display: flex; flex-direction: column; gap: 10px; }
.legal-doc h1 { margin: 0; font-size: clamp(38px, 9cqw, 72px); line-height: .95; letter-spacing: -.05em; }
.legal-doc .when { font-size: 14px; color: var(--ink3); }
.legal-doc .short { background: var(--sage); color: var(--ink); border-radius: 22px; padding: 18px 20px; display: flex;
                    flex-direction: column; gap: 6px; }
.legal-doc .short span:first-child { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.legal-doc .short span:last-child { font-size: 17px; line-height: 1.55; }
.legal-doc .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.legal-doc .card, .legal-doc .officer { border: 2px solid var(--line); border-radius: 22px; display: flex; flex-direction: column;
                                        background: var(--surface); }
.legal-doc .card { padding: 18px 20px; gap: 6px; }
.legal-doc .officer { padding: 20px; gap: 8px; }
.legal-doc .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accentText); }
.legal-doc .card .v { font-size: 17px; font-weight: 700; line-height: 1.45; white-space: pre-line; }
.legal-doc .officer .name { font-size: 17px; font-weight: 700; }
.legal-doc .officer .how { font-size: 15.5px; line-height: 1.55; color: var(--ink2); }
.legal-doc .toc { border-top: 2px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.legal-doc .toc span { font-size: 13px; font-weight: 800; color: var(--ink3); }
.legal-doc .toc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 15.5px; }
.legal-doc .toc a, .legal-doc .prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair);
                                         text-underline-offset: 3px; }
.legal-doc .prose { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 20px; }
.legal-doc .prose h2 { margin: 0; font-size: clamp(22px, 5cqw, 28px); letter-spacing: -.03em; }
.legal-doc .prose p, .legal-doc .prose ul { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink2); text-wrap: pretty; }
.legal-doc .prose ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal-doc .prose ul ul { margin-top: 6px; }
.legal-doc .prose strong { color: var(--ink); font-weight: 700; }
/* the drafts' tables (the template has none): the design's text and hairlines; on a phone each row stacks */
.legal-doc .tbl table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.55; color: var(--ink2); }
.legal-doc .tbl th { text-align: left; font-size: 13px; font-weight: 800; color: var(--ink3); padding: 0 12px 10px 0;
                     border-bottom: 2px solid var(--line); }
.legal-doc .tbl td { padding: 12px 12px 12px 0; border-top: 1.5px solid var(--hair); vertical-align: top; }
@container page (max-width: 640px) {
  .legal-doc .tbl thead { display: none; }
  .legal-doc .tbl table, .legal-doc .tbl tbody, .legal-doc .tbl tr, .legal-doc .tbl td { display: block; }
  .legal-doc .tbl tr { border-top: 1.5px solid var(--hair); padding: 12px 0; }
  .legal-doc .tbl td { border: 0; padding: 2px 0; }
  .legal-doc .tbl td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800;
                               letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
  .legal-doc .tbl td:first-child { color: var(--ink); font-weight: 700; }   /* (the row's name: no label above it) */
  .legal-doc .tbl td:first-child::before { display: none; }
}
/* the help page (/help/google, 15 Oct 2026): one document in the legal template's parts, no tabs, the text's width */
.legal.help { grid-template-columns: minmax(0, 1fr); max-width: 756px; }
.help .legal-doc { display: flex; }

/* ---------------------------------------------------------------------------------------------- Status */
.status-page { max-width: 860px; margin: 0 auto; padding: clamp(28px, 6cqw, 64px) var(--gr) clamp(56px, 9cqw, 96px) var(--gl); display: flex;
               flex-direction: column; gap: 26px; }
.status-page h1 { margin: 0; font-size: clamp(36px, 8cqw, 64px); line-height: .95; letter-spacing: -.05em; }
.st-banner { border-radius: 28px; padding: clamp(22px, 5cqw, 32px); display: flex; align-items: center; gap: 18px;
             color: var(--ink); }
.st-banner.st-ok { background: var(--okBg); }
.st-banner.st-degraded { background: var(--butter); }
.st-banner.st-incident { background: var(--dangerBg); }
.st-banner.st-checking, .st-banner.st-plain { background: var(--sunk); }
.st-banner .ok-badge { width: 56px; height: 56px; border-radius: 28px; background: var(--ok); color: var(--surface);
                       display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-banner .ok-badge[hidden], .st-banner .pulse-wrap[hidden] { display: none; }
.st-banner .pulse-wrap { display: flex; flex-shrink: 0; }
.st-banner .pulse-wrap svg { --deft-ink: var(--ink); --deft-accent: var(--accent); }
.st-banner .txt { display: flex; flex-direction: column; gap: 4px; }
.st-banner .t { font-size: clamp(24px, 6cqw, 34px); letter-spacing: -.035em; line-height: 1.05; }
.st-banner .s { font-size: 15px; line-height: 1.5; }
.st-parts { display: flex; flex-direction: column; border: 2px solid var(--line); border-radius: 24px; overflow: hidden;
            background: var(--surface); }
.st-parts .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px;
                 border-top: 1.5px solid var(--hair); }
.st-parts .row:first-child { border-top: 0; }
.st-parts .name { font-size: 16.5px; font-weight: 700; }
.st-parts .state { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.st-parts .state i { width: 10px; height: 10px; border-radius: 5px; background: currentColor; }
.st-parts .state.st-ok { color: var(--ok); }
.st-parts .state.st-degraded { color: var(--accentText); }
.st-parts .state.st-down { color: var(--danger); }
.st-parts .state.st-checking { color: var(--ink3); }
.st-inc, .st-past { display: flex; flex-direction: column; }
.st-inc { gap: 14px; }
.st-inc[hidden] { display: none; }
.st-past { gap: 12px; }
.st-inc h2, .st-past h2 { margin: 0; font-size: 28px; letter-spacing: -.035em; }
.st-upd { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1.5px solid var(--hair); }
.st-upd .k { display: flex; flex-direction: column; gap: 2px; }
.st-upd .k b { font-size: 14px; font-weight: 800; }
.st-upd .k span { font-size: 13px; color: var(--ink3); }
.st-upd .d { font-size: 16px; line-height: 1.55; color: var(--ink2); }
.st-past .empty { font-size: 16px; line-height: 1.55; color: var(--ink2); border: 1.5px dashed var(--hair); border-radius: 18px;
                  padding: 16px 18px; }
.st-sub { background: var(--sunk); border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.st-sub .t { font-size: 17px; font-weight: 800; }
.st-sub .row { display: flex; gap: 8px; flex-wrap: wrap; }
.st-sub input { flex: 1 1 220px; height: 52px; border-radius: 14px; border: 2px solid var(--hair); background: var(--surface);
                padding: 0 16px; font: inherit; font-size: 16px; color: var(--ink); }
.st-sub button { height: 52px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--brand); color: var(--onBrand);
                 font: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer; }
.st-sub button:disabled { cursor: default; }
.st-sub .msg { font-size: 14px; color: var(--ink2); }
.st-sub .msg.bad { color: var(--danger); }
.st-sub .msg[hidden], .st-sub[hidden] { display: none; }

/* ---------------------------------------------------------------------------------------------- Sign-up
   /start and /signin: the design's "Deft Sign-up" (its own chrome, no site header or footer): a top bar, the 7-segment
   progress, one screen at a time, a sticky action bar; from 860px (the page's width) the brand side panel. The sizes
   are the prototype's own; signup.js draws the screens. */
.su-page { container: su / inline-size; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink);
           font-family: 'Figtree', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Sans Tamil', 'Noto Sans Telugu',
                        'Noto Sans Gujarati', 'Noto Sans Kannada', 'Noto Sans Malayalam', 'Noto Sans Oriya', 'Noto Sans Gurmukhi', sans-serif;
           transition: background .3s, color .3s; }
.su { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100svh; position: relative; }
.su-page [hidden] { display: none !important; }   /* (a drawn screen's parts: hidden means hidden, whatever the class) */
.su-side { display: none; background: var(--brand); color: var(--onBrand); flex-direction: column; gap: 40px;
           padding: calc(36px + var(--gt)) 40px calc(36px + var(--gb)) max(40px, env(safe-area-inset-left)); }
.su-side-logo { display: block; align-self: flex-start; }
.su-side .deft-logo { width: 112px; height: 38px; --deft-ink: var(--logoInkOn); --deft-accent: var(--logoDotOn); }
.su-side-h { font-size: 40px; line-height: 1; letter-spacing: -.045em; }
.su-side-h .fullstop { margin-left: .05em; background: var(--accent); }
.su-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.su-steps li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.su-steps li.todo { opacity: .6; }
.su-steps .n { width: 36px; height: 36px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
               flex-shrink: 0; font-weight: 800; font-size: 15px; background: var(--brandSoft); color: var(--onBrand); }
.su-steps .done .n { background: var(--onBrand2); color: var(--brand); }
.su-steps .cur .n { background: var(--accent); color: var(--onAccent); }
.su-steps .cur .deft-mark { --deft-ink: var(--onAccent); --deft-accent: var(--onAccent); }
.su-steps .name { font-size: 17px; font-weight: 700; }
.su-side-help { margin-top: auto; font-size: 14px; line-height: 1.5; color: var(--onBrand2); }

.su-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100svh; }
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative;
          padding: calc(12px + var(--gt)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
.su-top-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.su-back { width: 44px; height: 44px; border-radius: 22px; border: 0; background: var(--sunk); color: var(--ink); cursor: pointer;
           display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.su-back[hidden] { display: none; }
.su-top-logo { display: flex; padding: 0 4px; }
.su-top-logo .deft-logo { width: 80px; height: 27px; }
.su-top .lang-sheet { right: max(14px, env(safe-area-inset-right)); }
.su-top .theme-btn { width: 40px; height: 40px; }

.su-progress { width: 100%; max-width: 600px; margin: 0 auto; padding: 4px var(--gr) 0 var(--gl); display: flex; flex-direction: column; gap: 8px; }
.su-segs { display: flex; gap: 5px; }
.su-segs span { height: 6px; border-radius: 3px; flex: 1; background: var(--hair); transition: background .3s; }
.su-segs .done { background: var(--ink); }
.su-segs .cur { flex: 3; background: var(--accent); }
.su-steplabel { font-size: 13px; font-weight: 700; color: var(--ink3); min-height: 1.2em; }

.su-body { flex: 1; width: 100%; max-width: 600px; margin: 0 auto; padding: 18px var(--gr) 24px var(--gl); display: flex; flex-direction: column;
           gap: 22px; }
.su-loading { display: flex; justify-content: center; padding: 48px 0; }
.su-loading[hidden] { display: none; }
.su-screen { display: flex; flex-direction: column; gap: 22px; }
.su-screen[hidden] { display: none; }
.su-gap18 { gap: 18px; }
.su-gap20 { gap: 20px; }
.su-gap24 { gap: 24px; }
.su-center { align-items: center; text-align: center; }
.su-pt8 { padding-top: 8px; }
.su-pt16 { padding-top: 16px; }
.su-pt24 { padding-top: 24px; }
.su-head { display: flex; flex-direction: column; gap: 8px; }
.su-h1 { margin: 0; font-size: clamp(30px, 8cqw, 46px); line-height: 1; letter-spacing: -.04em; }
.su-h1-c { font-size: clamp(28px, 7.4cqw, 42px); line-height: 1.02; }
.su-h1-done { font-size: clamp(32px, 9cqw, 52px); letter-spacing: -.045em; }
.su-h1-done .fullstop { margin-left: .05em; }
.su-sub { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--ink2); }
.su-sub strong { color: var(--ink); }
.su-sub[hidden] { display: none; }
.su-sub-16 { font-size: 16px; }
.su-sub-15 { font-size: 15px; }
.su-sub-lhn { line-height: normal; }
.su-28em { max-width: 28em; }
.su-26em { max-width: 26em; }
.su-muted { color: var(--ink3); }
.su-muted[hidden] { display: none; }
.su-start { align-self: flex-start; }

/* fields, as the design draws them: 56 tall, radius 14, 2px; the error under its field with the round "!" */
.su-field { display: flex; flex-direction: column; gap: 8px; }
.su-field[hidden] { display: none; }
.su-field-10 { gap: 10px; }
.su-label { font-size: 14px; font-weight: 700; }
.su-label-15 { font-size: 15px; }
.su-label-sub { font-size: 14px; color: var(--ink3); margin-top: -6px; }
.su-input { width: 100%; min-width: 0; height: 56px; border-radius: 14px; border: 2px solid var(--hair); background: var(--surface);
            padding: 0 16px; font: inherit; font-size: 17px; color: var(--ink); }
.su-input:focus { outline: none; border-color: var(--focus); }
.su-input.bad { border-color: var(--danger); }
.su-input[hidden] { display: none; }
.su-caps, .su-gstin { letter-spacing: .06em; text-transform: uppercase; }
.su-textarea { height: auto; padding: 14px 16px; resize: vertical; }
.su-tel { height: 56px; border-radius: 14px; border: 2px solid var(--hair); background: var(--surface); display: flex;
          align-items: center; gap: 10px; padding: 0 16px; }
.su-tel:focus-within { border-color: var(--focus); }
.su-tel.bad { border-color: var(--danger); }
.su-tel .cc { font-size: 17px; font-weight: 700; color: var(--ink3); }
.su-tel input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0; font: inherit;
                font-size: 17px; color: var(--ink); }
.su-tel input:focus { outline: none; }
.su-alert { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--danger);
            font-weight: 600; text-align: left; }
.su-alert[hidden] { display: none; }
.su-alert .b { width: 20px; height: 20px; border-radius: 10px; background: var(--danger); color: var(--surface); display: flex;
               align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.su-alert-pin { font-weight: 700; }
.su-terms { font-size: 13px; line-height: 1.5; color: var(--ink3); }
.su-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--accentText);
           text-decoration: underline; cursor: pointer; }
.su-link[hidden] { display: none; }
.su-link-15 { font-size: 15px; min-height: 44px; }
.chip.su-name { min-height: 52px; padding: 8px 20px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* the code: 6 boxes over one hidden one-time-code input */
.su-otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-width: 420px; }
.su-otp span { aspect-ratio: .82; border-radius: 14px; border: 2px solid var(--hair); background: var(--surface); display: flex;
               align-items: center; justify-content: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
               font-size: clamp(24px, 7cqw, 34px); }
.su-otp span.filled { border-color: var(--line); }
.su-otp span.next { border-color: var(--focus); }
.su-otp.bad span { border-color: var(--danger); }
.su-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; cursor: text; border: 0; }
.su-otp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }

/* plan and payment: the radio cards, the GST switch, the order summary */
.su-radios { display: flex; flex-direction: column; gap: 10px; }
.su-radio { text-align: left; border-radius: 20px; border: 2px solid var(--hair); background: transparent; padding: 16px 18px;
            display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; cursor: pointer;
            font: inherit; color: var(--ink); }
.su-radio[aria-checked="true"] { border-color: var(--line); background: var(--surface); }
.su-radio .ring { width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--line); display: flex;
                  align-items: center; justify-content: center; }
.su-radio .dot { width: 12px; height: 12px; border-radius: 6px; }
.su-radio[aria-checked="true"] .dot { background: var(--accent); }
.su-radio .name { font-size: 18px; font-weight: 800; }
.su-radio .price { display: flex; align-items: baseline; gap: 4px; }
.su-radio .price b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; letter-spacing: -.03em; }
.su-radio .price span { font-size: 13px; color: var(--ink3); }
.su-radio .for { grid-column: 2 / 4; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.su-radio .allow { grid-column: 2 / 4; font-size: 13px; color: var(--accentText); font-weight: 600; }
.su-method { grid-template-columns: 26px minmax(0, 1fr); }
.su-method .t { font-size: 17px; font-weight: 800; }
.su-method .s { font-size: 14.5px; line-height: 1.45; color: var(--ink2); }
.su-switch { display: flex; align-items: center; gap: 14px; border: 0; background: var(--sunk); border-radius: 18px; padding: 14px 16px;
             cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.su-switch .track { width: 48px; height: 28px; border-radius: 14px; background: var(--hair); position: relative; flex-shrink: 0;
                    transition: background .2s; }
.su-switch .knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 11px; background: var(--surface);
                   transition: left .2s; }
.su-switch[aria-checked="true"] .track { background: var(--ok); }
.su-switch[aria-checked="true"] .knob { left: 23px; }
.su-switch .words { display: flex; flex-direction: column; gap: 2px; }
.su-switch .t { font-size: 16px; font-weight: 700; }
.su-switch .s { font-size: 13.5px; color: var(--ink3); }
.su-gst { display: flex; flex-direction: column; gap: 14px; }
.su-gst[hidden] { display: none; }
.su-summary { background: var(--sunk); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.su-summary .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.su-summary .what { font-size: 15px; font-weight: 700; }
.su-summary .price { font-size: 15px; }
.su-summary .price strong { font-size: 18px; }
.su-summary .offer { font-size: 13.5px; font-weight: 700; color: var(--accentText); }
.su-summary .offer[hidden] { display: none; }
.su-secure { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink3); }
.su-waitbox { display: flex; flex-direction: column; gap: 4px; background: var(--sunk); border-radius: 18px; padding: 14px 22px; }
.su-waitbox .t { font-size: 14px; font-weight: 700; }
.su-waitbox .s { font-size: 13.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.su-badge-xl { width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center; }
.su-badge-xl.bad { background: var(--dangerBg); color: var(--danger); font-size: 38px; }
.su-badge-xl.ok { background: var(--okBg); color: var(--ok); }

/* your assistant: name chips, the voice cards, city, languages, people */
.su-voicehead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.su-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.su-voice { border-radius: 20px; border: 2px solid var(--hair); background: transparent; padding: 14px; display: flex;
            align-items: center; gap: 12px; }
.su-voice.on { border-color: var(--line); background: var(--surface); }
.su-voice .play { width: 48px; height: 48px; border-radius: 24px; border: 0; background: var(--ink); color: var(--bg); display: flex;
                  align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.su-voice .play:disabled { opacity: .4; cursor: default; }
.su-voice .pick { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--ink);
                  cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.su-voice .n { font-size: 16px; font-weight: 800; }
.su-voice .d { font-size: 13.5px; color: var(--ink3); }
.su-voice .bars { flex: none; display: flex; align-items: center; gap: 2px; height: 14px; }   /* (not Home's growing .bars) */
.su-voice .bars span { flex: 1; border-radius: 2px; background: var(--accent); }

/* setting up: the bar, the four checks, the "taking longer" notice, the tip */
.su-bar { height: 10px; border-radius: 5px; background: var(--sunk); overflow: hidden; }
.su-bar .fill { height: 10px; border-radius: 5px; background: var(--accent); width: 0; transition: width .3s; }
.su-checks { display: flex; flex-direction: column; gap: 12px; }
.su-check { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; }
.su-check.todo { opacity: .4; }
.su-check .b { width: 24px; height: 24px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
               flex-shrink: 0; background: var(--sunk); color: var(--ok); }
.su-check.done .b { background: var(--okBg); }
.su-check.failed .b { background: var(--dangerBg); color: var(--danger); font-size: 13px; font-weight: 800; }
.su-notice { border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.su-notice[hidden] { display: none; }
.su-notice.wait { background: var(--butter); }
.su-notice .t { font-size: 16px; font-weight: 800; }
.su-notice .s { font-size: 15px; line-height: 1.5; }
.su-tip { background: var(--surface); border: 2px solid var(--line); border-radius: 22px; padding: 18px 20px; display: flex;
          flex-direction: column; gap: 8px; }
.su-tip .k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accentText); }
.su-tip .v { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }

/* connect: Telegram's big button, the PIN keypad, the accounts */
.su-tg { min-height: 64px; border: 0; border-radius: 20px; background: var(--brand); color: var(--onBrand); font-size: 18px;
         font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; padding: 8px 18px;
         text-align: center; }
.su-tg[hidden] { display: none; }
/* the invite card's film (INVITES-1, 29 Oct 2026; no board): a mobile card's radius, the page's sunk ground until it plays */
.su-film { display: block; width: 100%; border-radius: 22px; background: var(--sunk); }
.su-okrow { display: flex; align-items: center; gap: 12px; background: var(--okBg); border-radius: 20px; padding: 16px 18px;
            font-size: 16.5px; font-weight: 700; }
.su-okrow[hidden] { display: none; }
.su-okrow .b { width: 28px; height: 28px; border-radius: 14px; background: var(--ok); color: var(--surface); display: flex;
               align-items: center; justify-content: center; flex-shrink: 0; }
.su-bf { display: flex; flex-direction: column; gap: 14px; }
.su-bf[hidden] { display: none; }
.su-bf-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.5;
               color: var(--ink2); }
.su-pindots { display: flex; gap: 14px; }
.su-pindots span { width: 18px; height: 18px; border-radius: 9px; border: 2px solid var(--line); }
.su-pindots span.on { background: var(--ink); }
.su-pindots.bad span { border-color: var(--danger); }
.su-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; }
.su-keys button { height: 64px; border-radius: 20px; border: 0; background: var(--sunk); color: var(--ink);
                  font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; cursor: pointer; }
.su-keys .del { background: transparent; }
.su-keys .gap { visibility: hidden; }
.su-accounts { display: flex; flex-direction: column; gap: 10px; }
.su-account { display: flex; align-items: center; gap: 14px; border-radius: 20px; border: 2px solid var(--hair); background: var(--surface);
              padding: 14px 16px; }
.su-account.soon { opacity: .6; }
.su-account .ini { width: 44px; height: 44px; border-radius: 12px; background: var(--sunk); display: flex; align-items: center;
                   justify-content: center; font-weight: 800; font-size: 18px; flex-shrink: 0; }
.su-account .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.su-account .t { font-size: 16.5px; font-weight: 800; }
.su-account .s { font-size: 13.5px; color: var(--ink3); }
.su-soon { font-size: 12.5px; font-weight: 700; background: var(--butter); color: var(--ink); border-radius: 999px; padding: 6px 10px; }
.su-conn { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--line); background: transparent;
           color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 800; cursor: pointer; }
.su-conn[aria-pressed="true"] { border-color: var(--ok); background: var(--okBg); }

/* done: the ringing mark, the number to save */
.su-rings { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; }
.su-rings .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: su-ring 2.4s linear infinite; }
.su-rings .r2 { animation-delay: -1.2s; }
.su-rings .core { position: relative; width: 132px; height: 132px; border-radius: 66px; background: var(--brand); display: flex;
                  align-items: center; justify-content: center; }
@keyframes su-ring { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.1); } }
.su-numcard { width: 100%; max-width: 400px; background: var(--surface); border: 2px solid var(--line); border-radius: 22px;
              padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.su-numcard .w { display: flex; flex-direction: column; gap: 2px; }
.su-numcard .k { font-size: 12.5px; font-weight: 700; color: var(--ink3); }
.su-numcard .n { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.su-save { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--line); background: transparent;
           color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.su-nocall { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.su-nocall span { color: var(--ink3); }
.su-nocall a { font-weight: 800; color: var(--accentText); text-decoration: underline; }
.su-applink { font-size: 15px; font-weight: 700; text-decoration: underline; }

/* 2 · Number (13 Oct 2026, the approved design: platform/design/number-verification; only where HQ's policy puts a
   kind of sign-up on Vobiz): For me / For my business, the PAN with its name shown back, the DigiLocker hop, the
   business's PAN and GST number; the "Verifying your number…" card on Plan, Payment, Setting up and Done; Done as
   "Verified. Your number is ready." The sizes are the artboards' own; the sign-up's frame, headings, labels and
   action bar stay its own. */
.su-head-10 { gap: 10px; }
.su-wide { display: none; }
.su-grow { flex: 1; }
.su-screen .su-foot { margin-top: auto; }   /* (the boards' spacer: the consent line, or "When you're back", just above the button) */
.su-nb { display: flex; flex-direction: column; gap: 14px; }
.su-nb .h { font-size: 22px; }
.su-for { display: flex; flex-direction: column; gap: 12px; }
.su-forcard { text-align: left; border: 2px solid var(--hair); background: var(--surface); border-radius: 18px; padding: 18px;
              display: flex; gap: 14px; align-items: flex-start; cursor: pointer; font: inherit; color: var(--ink); }
.su-forcard[aria-checked="true"] { border-color: var(--line); }
.su-for[hidden], .su-forcard[hidden] { display: none; }   /* ("how you'll sign in next time": no passkey on a device that
                                                             can't make one; both cards gone once it's done) */
.su-forcard .ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center;
                  justify-content: center; color: var(--ink); }
.su-forcard .ic.peach { background: var(--peach); }
.su-forcard .ic.sage { background: var(--sage); }
.su-forcard .w { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.su-forcard .t { font-size: 18px; font-weight: 700; }
.su-forcard .s { font-size: 14px; line-height: 1.4; color: var(--ink2); }
.su-forcard .ring { flex: none; width: 22px; height: 22px; border-radius: 11px; border: 2px solid var(--hair); display: flex;
                    align-items: center; justify-content: center; }
.su-forcard[aria-checked="true"] .ring { border-color: var(--line); }
.su-forcard .dot { width: 10px; height: 10px; border-radius: 5px; }
.su-forcard[aria-checked="true"] .dot { background: var(--accent); }
.su-assure { display: flex; gap: 10px; align-items: flex-start; background: var(--sunk); border-radius: 14px; padding: 12px 14px;
             font-size: 13px; line-height: 1.45; color: var(--ink2); }
.su-assure svg { flex: none; margin-top: 2px; color: var(--ok); }
.su-fine { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink3); }
.su-id { background: var(--field); font-size: 20px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.su-id:focus, .su-id.ok { border-color: var(--line); }
.su-id.bad { border-color: var(--danger); }
.su-id-gst { font-size: 18px; letter-spacing: .08em; }
.su-looks { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ok); }
.su-looks svg { flex: none; }
.su-errbox { display: block; background: var(--dangerBg); color: var(--danger); border-radius: 12px; padding: 10px 12px;
             font-size: 14px; line-height: 1.4; }
.su-nbody { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink2); }
.su-ncard { background: var(--surface); border: 2px solid var(--hair); border-radius: 18px; padding: 16px 18px; display: flex;
            flex-direction: column; gap: 12px; }
.su-ncard-10 { gap: 10px; }
.su-ncard .k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); }
.su-ncard .n { font-size: 24px; overflow-wrap: anywhere; }
.su-ncard .n22 { font-size: 22px; line-height: 1.15; }
.su-ncard .q { font-size: 15px; color: var(--ink2); }
.su-ncard .c { font-size: 14px; color: var(--ink2); }
.su-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.su-pill { min-height: 48px; border-radius: 24px; border: 2px solid var(--line); background: transparent; color: var(--ink);
           font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; padding: 4px 12px; }
.su-pill.go { border-color: var(--brand); background: var(--brand); color: var(--onBrand); }
.su-pill.s15 { font-size: 15px; }
.su-pill.h52 { min-height: 52px; border-radius: 26px; }
.su-pill:hover, .su-addc:hover { opacity: .85; }
.su-pill:active, .su-addc:active { transform: scale(.97); }
.su-pill:disabled { opacity: .4; cursor: default; }
.su-hops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.su-hops li { display: flex; gap: 12px; align-items: center; background: var(--surface); border: 2px solid var(--hair);
              border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.4; }
.su-hops .b { flex: none; width: 28px; height: 28px; border-radius: 14px; background: var(--brand); color: var(--onBrand);
              font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.su-backnote { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px dashed var(--hair);
               border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--ink2); }
.su-backnote strong { color: var(--ink); }
.su-backnote .p, .su-vcard .p { display: flex; flex: none; }
.su-backnote .deft-mark { --deft-ink: var(--brand); --deft-accent: var(--accent); }
.su-go-out { display: flex; }
.su-vslot { width: 100%; max-width: 600px; margin: 0 auto; padding: 4px var(--gr) 12px var(--gl); display: flex; flex-direction: column; gap: 12px; }
.su-vcard { display: flex; align-items: center; gap: 12px; background: var(--brand); color: var(--onBrand); border-radius: 16px;
            padding: 12px 14px; }
.su-vcard.slow { padding: 14px; }
.su-vcard .deft-mark { --deft-ink: var(--onBrand2); --deft-accent: var(--onBrandAccent); }
.su-vcard .w { display: flex; flex-direction: column; gap: 2px; }
.su-vcard .t { font-size: 15px; font-weight: 700; }
.su-vcard .s { font-size: 13px; color: var(--onBrand2); }
.su-vcard .t1 { font-size: 14px; line-height: 1.4; }
.su-vcard.tight { padding: 10px 14px; }   /* (Pick your number's: "Checking your identity…", design 3b) */
.su-vcard.tight .t { font-size: 14px; }
.su-vcard.tight .s { font-size: 12px; }
/* Pick your number (design 3b, Pick.dc.html): the city chips, four numbers, "Show other numbers", the total */
.su-gap14 { gap: 14px; }
.su-cities { display: flex; flex-wrap: wrap; gap: 8px; }
.su-city { height: 40px; padding: 0 14px; border-radius: 20px; border: 2px solid var(--hair); background: var(--surface);
           font: inherit; font-weight: 600; font-size: 14px; color: var(--ink2); cursor: pointer; }
.su-city[aria-checked="true"] { border-color: var(--line); font-weight: 700; color: var(--ink); }
.su-city.more { background: transparent; color: var(--accentText); }
.su-nums { display: flex; flex-direction: column; gap: 8px; }
.su-num { text-align: left; border: 2px solid var(--hair); background: var(--surface); border-radius: 16px; padding: 12px 14px;
          display: flex; justify-content: space-between; align-items: center; font: inherit; color: inherit; cursor: pointer; }
.su-num[aria-checked="true"] { border-color: var(--line); }
.su-num .l { display: flex; align-items: center; gap: 10px; }
.su-num .ring { width: 20px; height: 20px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--hair) 75%, var(--ink3)); box-sizing: border-box; flex: none; }
.su-num[aria-checked="true"] .ring { border: 0; background: var(--brand); display: flex; align-items: center;
                                     justify-content: center; }   /* (the board's 6px ring: brand, its middle open) */
.su-num[aria-checked="true"] .ring::after { content: ""; width: 8px; height: 8px; border-radius: 50%;
                                            background: var(--surface); }
.su-num .n { font-weight: 600; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.su-num[aria-checked="true"] .n { font-weight: 700; }
.su-num .p { font-weight: 700; font-size: 15px; }
.su-num .p span { font-weight: 500; font-size: 13px; color: var(--ink3); }
.su-othernums { height: 40px; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px;
            color: var(--accentText); cursor: pointer; text-align: left; padding: 0 4px; align-self: flex-start; }
.su-picktotal { background: var(--sunk); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column;
                gap: 4px; font-size: 14px; line-height: 1.4; }
.su-picktotal .t { font-weight: 700; }
.su-picktotal .s { color: var(--ink2); }
.su-plannum { margin: -8px 0 0; font-size: 14px; font-weight: 600; color: var(--ink2); }
.su-summary .row.total { border-top: 1.5px solid var(--hair); padding-top: 8px; margin-top: 2px; }
.su-summary .then { font-size: 13.5px; color: var(--ink3); }
.su-summary .then[hidden], .su-summary .row[hidden] { display: none; }
.su-ecard { background: var(--surface); border: 2px solid var(--hair); border-radius: 22px; padding: 24px; display: flex;
            flex-direction: column; gap: 14px; }
.su-ecard .h { font-size: 22px; line-height: 1.15; }
.su-nv { flex: 1; gap: 18px; }
.su-okbanner { display: flex; align-items: center; gap: 12px; background: var(--okBg); color: var(--ok); border-radius: 16px;
               padding: 12px 14px; font-size: 15px; font-weight: 700; }
.su-okbanner .b { flex: none; width: 28px; height: 28px; border-radius: 14px; background: var(--ok); color: var(--bg); display: flex;
                  align-items: center; justify-content: center; }
.su-nv-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.su-nv-num { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.su-nv-num .k { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.su-nv-num .n { font-size: 38px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.su-nv-num .s { font-size: 15px; line-height: 1.45; color: var(--ink2); max-width: 300px; }
.su-nv-call { background: var(--brand); color: var(--onBrand); border-radius: 22px; padding: 22px 20px; display: flex;
              flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.su-nv-call .m { width: 64px; height: 64px; border-radius: 32px; background: var(--onBrand); display: flex; align-items: center;
                 justify-content: center; }
.su-nv-call .m rect, .su-nv-call .m .d1 { fill: var(--brand); }
.su-nv-call .m .d2 { fill: var(--accent); }
.su-nv-call .t { font-size: 26px; line-height: 1.1; }
.su-nv-call .s { font-size: 14px; color: var(--onBrand2); }
.su-addc { width: 100%; min-height: 56px; border: 0; border-radius: 28px; background: var(--accent); color: var(--onAccent);
           font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; padding: 8px 18px; }
.su-nv-more { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; font-weight: 700; }
.su-nv-more a { color: var(--accentText); text-decoration: underline; text-underline-offset: 3px; }
.su-nv-step { text-align: center; font-size: 13px; color: var(--ink3); }

/* the help line, the legal pages (Razorpay's requirement: every page links all five and Status), the action bar */
.su-helpline { font-size: 13.5px; line-height: 1.5; color: var(--ink3); text-align: center; margin-top: auto; padding-top: 12px; }
.su-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12.5px; color: var(--ink3); }
.su-legal a { text-decoration: underline; text-underline-offset: 3px; }
.su-act { position: sticky; bottom: 0; z-index: 2; background: var(--bg); border-top: 1.5px solid var(--hair);
          padding: 12px var(--gr) calc(12px + var(--gb)) var(--gl); }
.su-act[hidden] { display: none; }
.su-act .in { max-width: 564px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.su-go { width: 100%; min-height: 58px; border: 0; border-radius: 999px; background: var(--brand); color: var(--onBrand); font: inherit;
         font-size: 17px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px;
         padding: 8px 18px; }
.su-go:disabled { opacity: .4; cursor: default; }
.su-go-pulse { display: flex; }
.su-go-pulse[hidden] { display: none; }
.su-sec { min-height: 44px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--ink2);
          text-decoration: underline; cursor: pointer; }
.su-sec[hidden] { display: none; }
.su-noscript { max-width: 600px; margin: 0 auto; padding: 18px; font-size: 16px; line-height: 1.5; }
@container su (min-width: 860px) {
  .su { grid-template-columns: 400px minmax(0, 1fr); }
  .su-side { display: flex; }
  .su-top-logo { display: none; }
  .su-body { padding: 28px max(40px, env(safe-area-inset-right)) 32px 40px; }
  /* (the main column's left meets the side panel, not the screen's edge: its left is the design's alone) */
  .su-top { padding-left: 14px; }
  .su-progress, .su-vslot, .su-act { padding-left: 18px; }
  .su-act { position: static; border-top: 0; }
  .su-wide { display: inline; }   /* (the Number step's desktop board says a little more, and keeps it together) */
  .su-screen .su-foot { margin-top: 0; }
}

/* ---------------------------------------------------------------------------------------------- 44 to tap (DUO-1)
   Where the design draws a control smaller than a finger (the header's logo, language and theme, Sign in; the call
   demo's language switch; the lone text links; the sign-up's logo and "Change"): the drawn size stays, an invisible
   ::after makes the tap area at least 44 x 44 round its middle. A field drawn taller than its input: the input fills it. */
.site-header .home, .lang-pill, .theme-btn, .signin, .header-cta, .site-nav a, .seg button, .btn-pill, .headrow .lnk,
.faq-cols .head a, .pr-faq .head a, .su-top-logo, .su-side-logo, .su-link, .su-nocall a, .site-footer nav a,
.su-legal a { position: relative; }
.site-header .home::after, .lang-pill::after, .theme-btn::after, .signin::after, .header-cta::after, .site-nav a::after,
.seg button::after, .btn-pill::after, .headrow .lnk::after, .faq-cols .head a::after, .pr-faq .head a::after,
.su-top-logo::after, .su-side-logo::after, .su-link::after, .su-nocall a::after, .site-footer nav a::after, .su-legal a::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; min-width: 44px; min-height: 44px;
  transform: translate(-50%, -50%); }
.ticket-field input { align-self: stretch; }
/* a list of links on a touch screen (the footer's, the sign-up's legal line, a document's contents): a 44 row each,
   as a finger needs; the row's words and their gaps across stay the design's (a mouse keeps the design's rows) */
@media (pointer: coarse) {
  .site-footer nav, .su-legal { row-gap: 0; }
  .site-footer nav a, .su-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .legal-doc .toc ol { gap: 0; }
  .legal-doc .toc li a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------------------------------------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .strip .track { animation: none; }
  .word, .line, .qa .plus, .page { transition: none; }
  .su-page, .su-segs span, .su-bar .fill, .su-switch .track, .su-switch .knob { transition: none; }
  .su-rings .ring { animation: none; opacity: 1; transform: scale(.7); }   /* (the design's own still frame) */
  .su-rings .r2 { opacity: .5; transform: scale(.9); }
}

/* A field the browser filled itself (a saved password, an email) keeps the page's own colours (14 Oct 2026, his "why the
   blue box?" on Mission Control's sign-in: Chrome paints an autofilled field light blue and its text black, over any
   design, and no property overrides its own !important). Its background and text change only after ~a week of the
   page staying open, so the field looks as the design draws it. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, select:-webkit-autofill {
  transition: background-color 0s 600000s, color 0s 600000s;
  -webkit-text-fill-color: inherit;
  caret-color: inherit;
}

/* the bars' heights (build.py) */
.bh0{height:0%}.bh1{height:1%}.bh2{height:2%}.bh3{height:3%}.bh4{height:4%}.bh5{height:5%}.bh6{height:6%}.bh7{height:7%}.bh8{height:8%}.bh9{height:9%}.bh10{height:10%}.bh11{height:11%}.bh12{height:12%}.bh13{height:13%}.bh14{height:14%}.bh15{height:15%}.bh16{height:16%}.bh17{height:17%}.bh18{height:18%}.bh19{height:19%}.bh20{height:20%}.bh21{height:21%}.bh22{height:22%}.bh23{height:23%}.bh24{height:24%}.bh25{height:25%}.bh26{height:26%}.bh27{height:27%}.bh28{height:28%}.bh29{height:29%}.bh30{height:30%}.bh31{height:31%}.bh32{height:32%}.bh33{height:33%}.bh34{height:34%}.bh35{height:35%}.bh36{height:36%}.bh37{height:37%}.bh38{height:38%}.bh39{height:39%}.bh40{height:40%}.bh41{height:41%}.bh42{height:42%}.bh43{height:43%}.bh44{height:44%}.bh45{height:45%}.bh46{height:46%}.bh47{height:47%}.bh48{height:48%}.bh49{height:49%}.bh50{height:50%}.bh51{height:51%}.bh52{height:52%}.bh53{height:53%}.bh54{height:54%}.bh55{height:55%}.bh56{height:56%}.bh57{height:57%}.bh58{height:58%}.bh59{height:59%}.bh60{height:60%}.bh61{height:61%}.bh62{height:62%}.bh63{height:63%}.bh64{height:64%}.bh65{height:65%}.bh66{height:66%}.bh67{height:67%}.bh68{height:68%}.bh69{height:69%}.bh70{height:70%}.bh71{height:71%}.bh72{height:72%}.bh73{height:73%}.bh74{height:74%}.bh75{height:75%}.bh76{height:76%}.bh77{height:77%}.bh78{height:78%}.bh79{height:79%}.bh80{height:80%}.bh81{height:81%}.bh82{height:82%}.bh83{height:83%}.bh84{height:84%}.bh85{height:85%}.bh86{height:86%}.bh87{height:87%}.bh88{height:88%}.bh89{height:89%}.bh90{height:90%}.bh91{height:91%}.bh92{height:92%}.bh93{height:93%}.bh94{height:94%}.bh95{height:95%}.bh96{height:96%}.bh97{height:97%}.bh98{height:98%}.bh99{height:99%}.bh100{height:100%}