/* ==========================================================================
   Smart Flock Lite — landing & legal pages
   Ivory + champagne gold, espresso ink. Dark "on-dark" surfaces as accents.
   Self-hosted fonts, no third-party requests.
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-normal.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: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-vietnamese-500-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.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: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-vietnamese-600-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-latin-500-italic.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: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-garamond-vietnamese-500-italic.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-italic.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: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-vietnamese-600-italic.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-vietnamese-wght-normal.woff2") format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }

:root {
  /* light surface tokens */
  --bg: #faf6ef;
  --bg-2: #f3ebdd;
  --fg: #1c130c;
  --fg-2: #3b2d20;
  --muted: #6c5f50;
  --muted-2: #9a8c79;
  --gold: #9a6b2f;            /* accent text on light */
  --gold-soft: #b8873f;
  --line: rgba(70, 45, 15, .13);
  --line-strong: rgba(154, 107, 47, .4);
  --surface: rgba(255, 255, 255, .66);
  --surface-2: rgba(255, 255, 255, .92);
  --shadow: 0 34px 80px -34px rgba(96, 62, 20, .42);
  --gold-text: linear-gradient(115deg, #7b4f20 0%, #c79a55 34%, #a5722b 62%, #6b4319 100%);
  --gold-fill: linear-gradient(115deg, #f8e6bd 0%, #ddb677 38%, #f4dfb1 62%, #c19352 100%);
  --brand: #a9764f;
  --ff-display: "Cormorant Garamond", "Noto Serif Devanagari", "Playfair Display", "Times New Roman", Georgia, serif;
  --ff-body: "Manrope", "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.22, .8, .24, 1);
}
/* dark accent surfaces re-map the same tokens */
.on-dark {
  --bg: #0d0906; --bg-2: #15100b;
  --fg: #f7efe2; --fg-2: #e8dcc7; --muted: #b8a993; --muted-2: #857863;
  --gold: #dcb677; --gold-soft: #f0d59c;
  --line: rgba(226, 194, 142, .16); --line-strong: rgba(226, 194, 142, .36);
  --surface: rgba(255, 240, 214, .05); --surface-2: rgba(255, 240, 214, .1);
  --shadow: 0 40px 100px -40px rgba(0, 0, 0, .9);
  --gold-text: linear-gradient(115deg, #fbeccb 0%, #e2bd7d 38%, #f6e2b8 62%, #bd8d52 100%);
  color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 1.0625rem/1.72 var(--ff-body); letter-spacing: .005em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* paper grain */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, svg { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
::selection { background: rgba(201, 154, 82, .35); }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--fg); color: var(--bg); padding: .6rem 1rem; border-radius: 10px; z-index: 200; font-weight: 700; }
.skip:focus { left: 8px; }

.container { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding: clamp(5rem, 11vw, 9.5rem) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .75rem; font: 700 .74rem/1 var(--ff-body); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--gold-text); }
.display { font-family: var(--ff-display); font-weight: 500; letter-spacing: -.02em; line-height: .98; font-size: clamp(2.7rem, 6.2vw, 5.6rem); }
.h2 { text-wrap: balance; font-family: var(--ff-display); font-weight: 500; letter-spacing: -.015em; line-height: 1.02; font-size: clamp(2.3rem, 4.6vw, 4rem); }
.display em, .h2 em, .gold-text {
  font-style: italic; font-weight: 500;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-right: .06em;
}
.lead { font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--muted); max-width: 40rem; line-height: 1.75; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head .h2 { margin-top: 1.1rem; max-width: 18ch; }
.center .section-head .h2, .section-head.center .h2 { margin-inline: auto; }
.section-head .lead { margin-top: 1.25rem; }

/* ---------- buttons ---------- */
.btn {
  --h: 58px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: var(--h); padding: 0 1.8rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  font: 700 .95rem/1 var(--ff-body); letter-spacing: .02em; white-space: nowrap; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, border-color .35s, color .35s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
/* primary: espresso with gold hairline (gold fill on dark surfaces) */
.btn-gold { color: #f7e6c1; background: linear-gradient(180deg, #2d2015, #150e08); border-color: rgba(220, 182, 119, .45); box-shadow: 0 14px 34px -14px rgba(40, 24, 8, .7), inset 0 1px 0 rgba(255, 235, 200, .18); }
.btn-gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 235, 200, .35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(40, 24, 8, .8), inset 0 1px 0 rgba(255, 235, 200, .25); }
.btn-gold:hover::after { transform: translateX(120%); }
.on-dark .btn-gold { color: #20140a; background: var(--gold-fill); border-color: transparent; }
.btn-ghost { color: var(--fg); border-color: var(--line-strong); background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: var(--gold); background: var(--surface-2); transform: translateY(-3px); }
.btn-sm { --h: 44px; padding: 0 1.25rem; font-size: .86rem; }
.play {
  display: inline-flex; align-items: center; gap: .95rem; padding: .8rem 1.6rem .8rem 1.25rem; border-radius: 18px;
  background: linear-gradient(180deg, #2d2015, #120b06); border: 1px solid rgba(220, 182, 119, .5); color: #f7efe2;
  box-shadow: 0 22px 48px -20px rgba(40, 24, 8, .75), inset 0 1px 0 rgba(255, 235, 200, .16);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.play:hover { transform: translateY(-3px); border-color: #e2bd7d; box-shadow: 0 30px 58px -20px rgba(40, 24, 8, .85), inset 0 1px 0 rgba(255, 235, 200, .22); }
.play svg { width: 30px; height: 30px; color: #dcb677; flex: none; }
.play small { display: block; font: 600 .62rem/1 var(--ff-body); letter-spacing: .2em; text-transform: uppercase; color: #b8a993; margin-bottom: .28rem; }
.play strong { display: block; font: 600 1.32rem/1 var(--ff-display); letter-spacing: .01em; }
.play--gold { background: var(--gold-fill); border-color: transparent; box-shadow: 0 18px 50px -14px rgba(220, 182, 119, .55), inset 0 1px 0 rgba(255, 255, 255, .6); color: #20140a; }
.play--gold:hover { border-color: transparent; box-shadow: 0 26px 64px -14px rgba(220, 182, 119, .8), inset 0 1px 0 rgba(255, 255, 255, .7); }
.play--gold svg { color: #2a1a0b; } .play--gold small { color: rgba(32, 20, 10, .7); }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: 1rem 0; transition: background .4s, padding .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.site-header.is-stuck { background: rgba(250, 246, 239, .8); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border-color: var(--line); padding: .65rem 0; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; font: 600 1.42rem/1 var(--ff-display); letter-spacing: .01em; }
.brand span { white-space: nowrap; }
.brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px var(--line-strong), 0 10px 22px -10px rgba(80, 50, 15, .6); }
.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.3rem); list-style: none; margin: 0; padding: 0; }
.nav-links a { font: 600 .88rem/1 var(--ff-body); color: var(--muted); letter-spacing: .03em; padding: .5rem 0; position: relative; transition: color .3s; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold-text); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--fg); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-tools { display: flex; align-items: center; gap: .8rem; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 700 .74rem/1 var(--ff-body); letter-spacing: .12em; transition: border-color .3s, background .3s; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { border-color: var(--gold); background: var(--surface-2); }
.lang summary svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.lang summary svg:last-child { width: 14px; height: 14px; color: var(--muted); transition: transform .3s var(--ease); }
.lang[open] summary svg:last-child { transform: rotate(180deg); }
.lang ul { position: absolute; right: 0; top: calc(100% + .6rem); z-index: 120; list-style: none; margin: 0; padding: .4rem; width: 236px; max-height: min(70vh, 460px); overflow-y: auto; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(255, 253, 249, .98); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -24px rgba(60, 38, 12, .38), 0 2px 0 rgba(255, 255, 255, .6) inset; }
.lang li a { display: flex; align-items: center; gap: .85rem; padding: .62rem .8rem; border-radius: 12px; color: var(--fg-2); transition: background .25s, color .25s; }
.lang li a b { flex: none; width: 2rem; font: 700 .68rem/1 var(--ff-body); letter-spacing: .14em; color: var(--gold); }
.lang li a span { font: 600 .95rem/1.2 var(--ff-body); }
.lang li a:hover { background: var(--surface-2); color: var(--fg); }
.lang li a[aria-current="true"] { background: #1c130c; color: #f7e6c1; }
.lang li a[aria-current="true"] b { color: #dcb677; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 20px; height: 20px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; padding: clamp(7.5rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 7rem); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60rem 38rem at 80% 6%, rgba(232, 196, 130, .5), transparent 62%),
    radial-gradient(46rem 36rem at 4% 96%, rgba(214, 170, 120, .34), transparent 60%),
    radial-gradient(38rem 28rem at 52% 52%, rgba(255, 255, 255, .8), transparent 70%),
    linear-gradient(180deg, #fbf7f0, #f6efe3 70%, #faf6ef);
}
.hero::after { /* fine gold hairline grid, fading out */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 96px 96px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 68% 35%, #000 0%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 68% 35%, #000 0%, transparent 72%);
}
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hero .eyebrow { margin-bottom: 1.6rem; }
.hero .display { font-size: clamp(2.9rem, 5.5vw, 5.9rem); text-wrap: balance; }
.hero .lead { margin-top: 1.7rem; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.2rem; margin-top: 2.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.chips li { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 .82rem/1 var(--ff-body); color: var(--fg-2); letter-spacing: .03em; }
.chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-text); box-shadow: 0 0 10px rgba(199, 154, 85, .7); }
.req { margin-top: 1.4rem; font-size: .84rem; color: var(--muted-2); letter-spacing: .02em; }

.hero-visual { position: relative; height: clamp(520px, 62vw, 760px); perspective: 1600px; }
.hero-visual .glow { position: absolute; left: 50%; top: 52%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(226, 186, 118, .55), rgba(226, 186, 118, .18) 55%, transparent 72%); filter: blur(26px); z-index: -1; }
.phone {
  --w: 300px; position: absolute; width: var(--w); aspect-ratio: 9 / 16.05; padding: 9px; border-radius: 46px;
  background: linear-gradient(145deg, #4a3826, #17100a 42%, #33241a 100%);
  box-shadow: 0 0 0 1px rgba(90, 60, 25, .55), 0 50px 90px -34px rgba(60, 36, 10, .75), 0 24px 40px -22px rgba(60, 36, 10, .5), inset 0 0 0 2px rgba(0, 0, 0, .5);
}
.phone::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; width: 26%; height: 15px; transform: translateX(-50%); border-radius: 999px; background: #050302; }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 38px; background: #f5f0e6; }
.hero-visual .phone { left: 50%; top: 50%; }
.phone--front { --w: clamp(230px, 22vw, 320px); transform: translate(-50%, -50%) translateZ(0); z-index: 3; animation: float 8s ease-in-out infinite; }
.phone--left { --w: clamp(190px, 18vw, 262px); transform: translate(-122%, -47%) rotate(-7deg); z-index: 2; animation: float2 9s ease-in-out -2s infinite; }
.phone--right { --w: clamp(190px, 18vw, 262px); transform: translate(22%, -53%) rotate(7deg); z-index: 1; animation: float2 10s ease-in-out -4s infinite; }
@keyframes float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 14px)); } }
@keyframes float2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.float-card {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: .85rem; padding: .85rem 1.15rem .85rem .95rem; border-radius: 18px;
  background: rgba(255, 255, 255, .78); border: 1px solid var(--line-strong); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 26px 50px -22px rgba(96, 62, 20, .5); animation: float2 7s ease-in-out infinite;
}
.float-card .ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(199, 154, 85, .16); color: var(--gold); }
.float-card .ico svg { width: 20px; height: 20px; }
.float-card b { display: block; font: 700 .9rem/1.2 var(--ff-body); }
.float-card span { display: block; font: 500 .74rem/1.3 var(--ff-body); color: var(--muted); }
.float-card--a { left: -2%; bottom: 14%; animation-delay: -1s; }
.float-card--b { right: -1%; top: 10%; animation-delay: -3s; }
.scroll-hint { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; font: 700 .64rem/1 var(--ff-body); letter-spacing: .3em; text-transform: uppercase; color: var(--muted-2); }
.scroll-hint i { width: 1px; height: 46px; background: linear-gradient(var(--gold-soft), transparent); animation: drip 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- stats ---------- */
.stats { border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25)); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: clamp(1.8rem, 3.4vw, 3rem) 1rem; text-align: center; position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.stat b { display: block; font: 500 clamp(2.6rem, 5vw, 4.2rem)/1 var(--ff-display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: .6rem; font: 600 .78rem/1.4 var(--ff-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.score-num, .stat b, .how-step .bubble, .step .num { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; padding: 1.6rem 0; border-bottom: 1px solid var(--line); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 3.2rem; animation: scroll 42s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 3.2rem; font: 500 clamp(1.6rem, 3vw, 2.4rem)/1 var(--ff-display); font-style: italic; color: var(--muted-2); white-space: nowrap; }
.marquee-track span::after { content: "✦"; font-style: normal; font-size: .8em; color: var(--gold-soft); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- showcase (sticky phone) ---------- */
.showcase { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.steps { display: grid; }
.step { min-height: 66vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; opacity: .4; transition: opacity .6s var(--ease); }
.step.is-active { opacity: 1; }
.step .num { font: 500 clamp(3.4rem, 7vw, 6rem)/1 var(--ff-display); font-style: italic; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .95; margin-bottom: .6rem; }
.step h3 { font: 500 clamp(1.9rem, 3.2vw, 2.9rem)/1.08 var(--ff-display); letter-spacing: -.01em; margin-bottom: 1rem; }
.step p { color: var(--muted); max-width: 34rem; }
.step ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .65rem; }
.step li { display: flex; gap: .8rem; align-items: flex-start; color: var(--fg-2); font-size: .98rem; }
.step li::before { content: ""; flex: none; margin-top: .55em; width: 14px; height: 1px; background: var(--gold-text); }
.step .step-phone { display: none; }
.showcase-sticky { position: sticky; top: 96px; height: calc(100svh - 140px); min-height: 560px; display: grid; place-items: center; }
.showcase-phone { position: relative; --w: min(100%, 340px); width: var(--w); aspect-ratio: 9 / 16.05; }
.showcase-phone .phone { position: relative; inset: auto; width: 100%; height: 100%; --w: 100%; animation: none; }
.showcase-phone .phone img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); opacity: 0; transition: opacity .7s var(--ease), transform .9s var(--ease); transform: scale(1.03); }
.showcase-phone .phone img.is-active { opacity: 1; transform: none; }
.showcase-sticky::before { content: ""; position: absolute; width: 130%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(226, 186, 118, .42), transparent 70%); filter: blur(24px); z-index: -1; }
.dots { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); display: grid; gap: .7rem; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); transition: background .4s, height .4s var(--ease); }
.dots i.is-active { background: var(--gold); height: 22px; border-radius: 6px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.card {
  --mx: 50%; --my: 0%; position: relative; padding: clamp(1.6rem, 2.6vw, 2.3rem); border-radius: 28px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 252, 246, .6)); border: 1px solid var(--line);
  box-shadow: 0 18px 44px -30px rgba(96, 62, 20, .35);
  transition: border-color .5s, transform .6s var(--ease), box-shadow .6s var(--ease);
}
.card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(226, 186, 118, .32), transparent 60%); }
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(96, 62, 20, .5); }
.card:hover::before { opacity: 1; }
.card .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--gold); background: linear-gradient(145deg, rgba(248, 230, 189, .7), rgba(248, 230, 189, .25)); border: 1px solid var(--line-strong); margin-bottom: 1.5rem; }
.card .ico svg { width: 24px; height: 24px; }
.card h3 { font: 500 clamp(1.5rem, 2.1vw, 1.95rem)/1.1 var(--ff-display); letter-spacing: -.005em; margin-bottom: .7rem; }
.card p { color: var(--muted); font-size: .98rem; margin: 0; }
.span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; }

/* ---------- insight spotlight ---------- */
.insight { background: radial-gradient(60rem 30rem at 88% 8%, rgba(232, 196, 130, .35), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg-2) 30%, var(--bg-2) 72%, var(--bg)); border-block: 1px solid var(--line); }
.insight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.rules { display: flex; flex-wrap: wrap; gap: .65rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.rules li { padding: .6rem 1.05rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font: 600 .84rem/1 var(--ff-body); color: var(--fg-2); transition: border-color .3s, background .3s, transform .3s var(--ease); }
.rules li:hover { border-color: var(--gold); transform: translateY(-2px); }
.note { display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.2rem; padding: 1.2rem 1.4rem; border-radius: 20px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(232, 196, 130, .3), rgba(232, 196, 130, .08)); color: var(--fg-2); font-size: .96rem; }
.note svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: .2rem; }
.note p { margin: 0; }
.score-card { position: relative; padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: 32px; border: 1px solid rgba(226, 194, 142, .3); background: linear-gradient(160deg, #2a1d12, #130c07 70%); box-shadow: 0 50px 90px -40px rgba(60, 36, 10, .8); overflow: hidden; }
.score-card::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; background: radial-gradient(closest-side, rgba(226, 186, 118, .3), transparent); }
.score-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.score-top small { font: 600 .72rem/1 var(--ff-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.score-num { font: 500 clamp(4rem, 7vw, 6rem)/.95 var(--ff-display); background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: .6rem; }
.pill { padding: .5rem 1rem; border-radius: 999px; font: 700 .78rem/1 var(--ff-body); letter-spacing: .06em; background: rgba(220, 182, 119, .16); color: var(--gold-soft); border: 1px solid var(--line-strong); }
.spark { width: 100%; height: 120px; margin: 1.4rem 0 .8rem; }
.spark path.line { fill: none; stroke: url(#sg); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: url(#sa); }
.factors { display: grid; gap: .7rem; margin-top: 1.2rem; }
.factor { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; border-radius: 16px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-left: 3px solid var(--gold-soft); font-size: .92rem; }
.factor em { font-style: normal; font: 700 .68rem/1 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); padding: .4rem .7rem; border-radius: 999px; background: rgba(220, 182, 119, .14); white-space: nowrap; }

/* ---------- species ---------- */
.species { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.sp { position: relative; text-align: center; padding: 1.6rem 1rem 1.4rem; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 251, 243, .6)); box-shadow: 0 18px 44px -30px rgba(96, 62, 20, .4); transition: transform .6s var(--ease), border-color .4s, box-shadow .6s; overflow: hidden; }
.sp::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1.4rem; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 196, 130, .5), rgba(232, 196, 130, .16) 62%, transparent 100%); z-index: 0; }
.sp:hover { transform: translateY(-8px); border-color: var(--line-strong); box-shadow: 0 34px 60px -30px rgba(96, 62, 20, .55); }
.sp img { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(60, 36, 10, .28)); transition: transform .7s var(--ease); }
.sp:hover img { transform: scale(1.06) rotate(-1.5deg); }
.sp b { display: block; margin-top: .4rem; font: 500 1.6rem/1 var(--ff-display); }

/* ---------- how ---------- */
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.how::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent); }
.how-step { position: relative; padding: 0 1.4rem; text-align: center; }
.how-step .bubble { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 1.6rem; border-radius: 50%; display: grid; place-items: center; font: 500 1.9rem/1 var(--ff-display); font-style: italic; color: var(--gold); background: radial-gradient(circle at 30% 25%, #ffffff, #f6ead3); border: 1px solid var(--line-strong); box-shadow: 0 0 0 8px var(--bg), 0 20px 34px -14px rgba(96, 62, 20, .5); }
.how-step h3 { font: 500 1.7rem/1.1 var(--ff-display); margin-bottom: .6rem; }
.how-step p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ---------- privacy band (dark accent) ---------- */
.privacy-band { position: relative; border-radius: 40px; padding: clamp(2.2rem, 5vw, 4.5rem); border: 1px solid rgba(226, 194, 142, .3); overflow: hidden; background: radial-gradient(50rem 26rem at 100% 0%, rgba(226, 186, 118, .22), transparent 60%), linear-gradient(160deg, #2a1d12, #0f0a06 72%); box-shadow: 0 50px 100px -44px rgba(60, 36, 10, .8); }
.privacy-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.ticks li { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: 18px; border: 1px solid var(--line); background: rgba(0, 0, 0, .26); font-size: .98rem; color: var(--fg-2); }
.ticks svg { width: 22px; height: 22px; color: var(--gold); flex: none; margin-top: .15rem; }

/* ---------- faq ---------- */
.faq { max-width: 60rem; margin-inline: auto; display: grid; gap: .8rem; }
.faq details { border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 252, 246, .6)); transition: border-color .4s, box-shadow .4s; }
.faq details[open] { border-color: var(--line-strong); box-shadow: 0 24px 50px -32px rgba(96, 62, 20, .5); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 1.7rem; font: 500 clamp(1.3rem, 2vw, 1.62rem)/1.2 var(--ff-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); transition: transform .5s var(--ease), background .3s; }
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--gold); transform: translate(-50%, -50%); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .5s var(--ease); }
.faq details[open] .plus { transform: rotate(180deg); background: rgba(232, 196, 130, .3); }
.faq details[open] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq .ans { padding: 0 1.7rem 1.6rem; color: var(--muted); max-width: 48rem; }
.faq .ans p:last-child { margin-bottom: 0; }

/* ---------- cta + footer (dark finale) ---------- */
.cta { text-align: center; position: relative; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--fg); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56rem 30rem at 50% 100%, rgba(220, 182, 119, .3), transparent 65%), radial-gradient(30rem 20rem at 15% 20%, rgba(169, 118, 79, .3), transparent 70%); }
.cta .display { max-width: 16ch; margin: 1.4rem auto 0; }
.cta .lead { margin: 1.6rem auto 0; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.6rem; }
.cta .icon-big { width: 96px; height: 96px; border-radius: 27px; margin: 0 auto; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 80px -20px rgba(220, 182, 119, .5); }
.site-footer { border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) 0 2.5rem; background: var(--bg); color: var(--fg); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
.foot-grid h4 { font: 700 .72rem/1 var(--ff-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.3rem; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.foot-grid a { color: var(--muted); font-size: .95rem; transition: color .3s; }
.foot-grid a:hover { color: var(--fg); }
.foot-brand p { color: var(--muted-2); font-size: .92rem; max-width: 26rem; margin: 1.2rem 0 0; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.2rem; padding-top: 1.8rem; border-top: 1px solid var(--line); color: var(--muted-2); font-size: .82rem; }
.site-footer .brand img { box-shadow: 0 0 0 1px var(--line-strong); }

/* ---------- legal (privacy) ---------- */
.legal-hero { padding: clamp(8.5rem, 14vw, 12rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; isolation: isolate; }
.legal-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50rem 26rem at 82% 0%, rgba(232, 196, 130, .5), transparent 62%), radial-gradient(36rem 24rem at 0% 100%, rgba(214, 170, 120, .3), transparent 65%); }
.legal-hero .display { font-size: clamp(2.8rem, 6vw, 5.2rem); margin-top: 1.3rem; }
.meta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.meta span { padding: .5rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 .8rem/1 var(--ff-body); color: var(--muted); }
.legal { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); padding-bottom: clamp(4rem, 8vw, 7rem); align-items: start; }
.toc { position: sticky; top: 96px; padding: 1.5rem; border-radius: 22px; border: 1px solid var(--line); background: var(--surface-2); box-shadow: 0 20px 44px -30px rgba(96, 62, 20, .4); }
.toc h4 { font: 700 .7rem/1 var(--ff-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: .15rem; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a { display: flex; gap: .7rem; padding: .45rem .5rem; border-radius: 10px; font-size: .88rem; color: var(--muted); line-height: 1.4; transition: color .3s, background .3s; }
.toc a::before { content: counter(t, decimal-leading-zero); color: var(--gold-soft); font-weight: 700; font-size: .74rem; padding-top: .12rem; }
.toc a:hover { color: var(--fg); background: rgba(232, 196, 130, .22); }
.prose { max-width: 52rem; }
.prose section { padding: 2.2rem 0; border-top: 1px solid var(--line); }
.prose section:first-child { border-top: 0; padding-top: 0; }
.prose h2 { font: 500 clamp(1.8rem, 3vw, 2.5rem)/1.1 var(--ff-display); letter-spacing: -.01em; margin-bottom: 1.1rem; display: flex; gap: 1rem; align-items: baseline; }
.prose h2 span { font-style: italic; color: var(--gold-soft); font-size: .7em; }
.prose h3 { font: 700 1rem/1.4 var(--ff-body); color: var(--gold); margin: 1.6rem 0 .5rem; letter-spacing: .02em; }
.prose p, .prose li { color: var(--fg-2); }
.prose ul { padding-left: 0; list-style: none; display: grid; gap: .7rem; margin: 0 0 1em; }
.prose ul li { display: flex; gap: .8rem; }
.prose ul li::before { content: ""; flex: none; margin-top: .78em; width: 12px; height: 1px; background: var(--gold-text); }
.prose a { color: var(--gold); border-bottom: 1px solid var(--line-strong); transition: border-color .3s, color .3s; }
.prose a:hover { color: var(--fg); border-color: var(--gold); }
.prose strong { color: var(--fg); font-weight: 700; }
.prose .callout { margin: 1.4rem 0; padding: 1.3rem 1.5rem; border-radius: 20px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, rgba(232, 196, 130, .3), rgba(232, 196, 130, .08)); }
.prose .callout p:last-child { margin: 0; }
.tablewrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; border-radius: 20px; border: 1px solid var(--line); background: var(--surface-2); }
.prose table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: 1rem 1.15rem; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { font: 700 .7rem/1 var(--ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); background: rgba(232, 196, 130, .2); }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { color: var(--fg); font-weight: 700; white-space: nowrap; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lead, .hero .display { margin-inline: auto; }
  .hero-cta, .chips { justify-content: center; }
  .hero .eyebrow::before { display: none; }
  .hero-visual { height: clamp(470px, 92vw, 640px); margin-top: 1rem; }
  .float-card--b { right: 2%; } .float-card--a { left: 2%; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-sticky { display: none; }
  .step { min-height: 0; opacity: 1; padding: 3rem 0; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: 0; }
  .step .step-phone { display: block; width: min(260px, 70%); margin: 2rem auto 0; }
  .step .step-phone .phone { position: relative; width: 100%; --w: 100%; animation: none; }
  .step .step-phone .phone img { position: static; }
  .insight-grid, .privacy-grid { grid-template-columns: 1fr; }
  .species { grid-template-columns: repeat(3, 1fr); }
  .how { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; } .how::before { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .legal { grid-template-columns: 1fr; } .toc { position: static; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 6; }
}
@media (max-width: 820px) {
  .menu-btn { display: inline-flex; }
  .nav-links { position: fixed; inset: 0 0 auto 0; top: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 5.6rem var(--gutter) 2rem; background: rgba(250, 246, 239, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line-strong); transform: translateY(-110%); transition: transform .6s var(--ease); z-index: -1; }
  .nav-links.open { transform: none; }
  .nav-links li { width: 100%; border-bottom: 1px solid var(--line); }
  .nav-links a { display: block; padding: 1.1rem 0; font-size: 1.1rem; }
  .nav-tools .btn { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
  .phone--left { transform: translate(-96%, -46%) rotate(-7deg); } .phone--right { transform: translate(-4%, -54%) rotate(7deg); }
  .float-card { display: none; }
}
@media (max-width: 560px) {
  .brand { gap: .55rem; } .brand img { width: 34px; height: 34px; } .brand span { font-size: 1.12rem; }
  .nav { gap: .6rem; } .nav-tools { gap: .5rem; } .lang summary { padding: 0 .65rem; gap: .35rem; } .lang summary svg:first-child { display: none; } .menu-btn { width: 40px; height: 40px; }
  .species { grid-template-columns: repeat(2, 1fr); }
  .how { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .btn, .play { width: 100%; justify-content: center; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .phone--front { --w: 210px; } .phone--left, .phone--right { --w: 150px; }
  .privacy-band { border-radius: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media print { body::before, .site-header, .hero-visual, .scroll-hint { display: none !important; } body { background: #fff; color: #000; } .prose p, .prose li { color: #222; } }

/* lining figures — must come after the font shorthands above, which reset feature settings */
.score-num, .stat b, .how-step .bubble, .step .num { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.legal > *, .prose { min-width: 0; }
@media (max-width: 640px) {
  .prose table { min-width: 0; } .prose thead { display: none; }
  .prose tr, .prose td { display: block; }
  .prose tr { padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); }
  .prose tr:last-child { border-bottom: 0; }
  .prose td { padding: .35rem 0; border: 0; white-space: normal; }
  .prose td::before { content: attr(data-label); display: block; font: 700 .64rem/1 var(--ff-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .3rem; }
  .prose td:first-child { font-size: 1.04rem; white-space: normal; padding-bottom: .5rem; } .prose td:first-child::before { display: none; }
}

/* longer translations: let grid children shrink and buttons wrap instead of overflowing */
.privacy-grid > *, .insight-grid > *, .hero-grid > * { min-width: 0; }
@media (max-width: 560px) { .btn { white-space: normal; text-align: center; line-height: 1.3; } }