/* Owlglance website. Palette and type follow the app (Ánh Xa for grown-ups, Rừng Mắt Sáng for kids). */
:root {
  --paper: #F5F2EC; --card: #FFFFFF; --ink: #10272B; --text: #10272B; --muted: #4F6466; --mist: #E6ECEA; --line: #D9DED9;
  --amber: #E59A3B; --amber-text: #8A5A12; --dawn: #F6D9B8; --tea: #1F5C5A; --tea-light: #8FC7BE;
  --cream: #FFF6E5; --night: #1E2A3A; --sun: #FFC83D; --owl: #7B61FF;
  --sky-top: #BFE3EF; --sky-bottom: #F6E2C8; --hill1: #A9CFC6; --hill2: #3E7D73;
  --radius: 22px; --shadow: 0 18px 50px -24px rgba(16, 39, 43, .45);
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --kids: "Baloo 2", "Be Vietnam Pro", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0B1C1F; --card: #10272B; --text: #F5F2EC; --muted: #A9BDBB; --mist: #17363B; --line: #2C4A4F;
    --amber-text: #E59A3B; --cream: #16223A; --sky-top: #1B2E45; --sky-bottom: #2A3F4A; --hill1: #24474B; --hill2: #17363B;
    --shadow: 0 18px 50px -24px rgba(0, 0, 0, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--text); font: 400 1.0625rem/1.65 var(--sans); text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--amber); text-underline-offset: 3px; }
a:hover { color: var(--amber-text); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
h1 { font: 500 clamp(2.4rem, 2.6rem + 3vw, 4.6rem)/1.05 var(--serif); letter-spacing: -.02em; }
h2 { font: 500 clamp(1.9rem, 1.6rem + 2vw, 3.1rem)/1.1 var(--serif); letter-spacing: -.015em; margin-bottom: .6em; }
h3 { font: 600 1.15rem/1.3 var(--sans); }
p { margin: 0 0 1em; }
.wrap { width: min(1180px, 100% - 2 * clamp(16px, 4vw, 40px)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * clamp(16px, 4vw, 40px)); }
.eyebrow { font: 600 .78rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.lead { font-size: clamp(1.08rem, 1rem + .5vw, 1.3rem); color: var(--muted); max-width: 40em; }
.small { font-size: .92rem; color: var(--muted); }
.icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 999px; z-index: 50; }
.skip:focus { left: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .8rem 1.5rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); font: 600 1rem/1 var(--sans); text-decoration: none; border: 2px solid var(--ink);
  transition: transform .15s ease, background .15s ease; }
.btn:hover { color: var(--paper); transform: translateY(-1px); }
.btn .icon { width: 20px; height: 20px; }
.btn-ghost { background: transparent; color: var(--text); border-color: currentColor; }
.btn-ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.btn-small { min-height: 42px; padding: .55rem 1.1rem; font-size: .92rem; }
@media (prefers-color-scheme: dark) { .btn { background: var(--dawn); color: #10272B; border-color: var(--dawn); } .btn:hover { color: #10272B; } .btn-ghost { background: transparent; color: var(--text); border-color: var(--text); } }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.link-arrow .icon { width: 20px; height: 20px; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.top-row { display: flex; align-items: center; gap: 1.25rem; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font: 500 1.45rem/1 var(--serif); }
.brand-mark { width: 38px; height: 38px; }
.nav { margin-left: auto; }
.nav ul, .langs, .foot-links, .mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.nav ul { display: flex; gap: 1.4rem; }
.nav a { text-decoration: none; font-weight: 500; font-size: .96rem; }
.nav a:hover { color: var(--amber-text); }
.langs { display: flex; gap: .2rem; }
.langs a { display: inline-block; padding: .3rem .45rem; font: 600 .8rem/1 var(--sans); letter-spacing: .06em; text-decoration: none; border-radius: 8px; color: var(--muted); }
.langs a[aria-current="true"] { color: var(--text); background: var(--mist); }
.menu-btn { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.mobile-nav { border-top: 1px solid var(--line); padding: .5rem clamp(16px, 4vw, 40px) 1rem; }
.mobile-nav li a { display: block; padding: .8rem 0; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.mobile-nav .langs { margin-top: .8rem; }
.mobile-nav .langs a { padding: .6rem .8rem; border-bottom: 0; }
@media (max-width: 960px) {
  .nav, .top-row > .langs { display: none; }
  .menu-btn { display: inline-grid; place-items: center; }
  .top-row > .btn-small { margin-left: auto; }
  .top-row > .btn-small + .menu-btn { margin-left: 0; }
}
@media (max-width: 420px) { .top-row > .btn-small { display: none; } }
.lang-hint { background: var(--ink); color: var(--paper); text-align: center; font-size: .92rem; padding: .5rem 1rem; }
.lang-hint a { color: var(--dawn); font-weight: 600; }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 8vw, 6rem); }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 72%, var(--paper) 100%); z-index: -1; }
.hills { position: absolute; bottom: 0; left: 0; width: 100%; height: 42%; }
.hills .h1 { fill: var(--hill1); }
.hills .h2 { fill: var(--hill2); }
.hero-row { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-text h1 { margin-bottom: 1.1rem; }
.hero .eyebrow { color: var(--tea); }
@media (prefers-color-scheme: dark) { .hero .eyebrow { color: var(--tea-light); } }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.8rem 0 1.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chips li { padding: .4rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); font-size: .88rem; font-weight: 500; }
.hero-art { position: relative; justify-self: center; }

/* Hero owl: one 12 s loop (hops out into the free space, spin-jump, hops back, a happy jump). --dir: -1 hops left, 1 right.
   Nested layers each move one way: run = across, face = turn in 3D, hop = up/down with squash and stretch, tilt = follows the pointer, trick = the tap somersault.
   It stands on the hill at the phone's foot, and the shadow stays on the ground, so it never looks like it is floating. */
.owl-stage { position: absolute; width: clamp(120px, 15vw, 190px); left: -38%; bottom: -6%; padding: 0; border: 0; background: none;
  color: inherit; cursor: pointer; perspective: 700px; --dir: -1; -webkit-tap-highlight-color: transparent; }
.owl-stage:focus-visible { outline-offset: -6px; border-radius: 50%; }
.owl-run, .owl-face, .owl-hop, .owl-tilt, .owl-trick { display: block; transform-style: preserve-3d; }
.owl-hop { transform-origin: 50% 86%; }
.owl-tilt { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.owl-trick { position: relative; aspect-ratio: 1; }
.owl-trick img { position: absolute; inset: 0; width: 100%; filter: drop-shadow(0 10px 12px rgba(16, 39, 43, .22)); }
.owl-cheer { opacity: 0; }
/* Real 3D owl (assets/owl3d.js) fades in over the drawn one; the drawn one stays as the fallback. */
.owl-canvas { position: absolute; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.owl-stage.is-3d { cursor: default; }
.owl-stage.is-3d .owl-canvas { opacity: 1; }
.owl-stage.is-3d .owl-run { opacity: 0; transition: opacity .6s ease; }
.owl-stage.is-3d-done .owl-run { visibility: hidden; }
.owl-stage.is-3d-done .owl-run, .owl-stage.is-3d-done .owl-run * { animation: none !important; }
.owl-shadow { position: absolute; left: 22%; right: 22%; bottom: 10%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 39, 43, .9), rgba(16, 39, 43, 0)); opacity: .34; }
.owl-star { position: absolute; left: 50%; top: 40%; width: 18%; aspect-ratio: 1; pointer-events: none; opacity: 0;
  background: var(--sun); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
@media (prefers-reduced-motion: no-preference) {
  .owl-run { animation: owl-run 12s linear infinite; }
  .owl-face { animation: owl-face 12s ease-in-out infinite; }
  .owl-hop { animation: owl-hop 12s ease-in-out infinite; }
  .owl-shadow { animation: owl-shadow 12s ease-in-out infinite; }
  .owl-wave { animation: owl-wave 12s linear infinite; }
  .owl-cheer { animation: owl-cheer 12s linear infinite; }
  .owl-stage.paused * { animation-play-state: paused; }
  .owl-stage.still * { animation: none !important; }
  .owl-trick.boing { animation: owl-boing .9s cubic-bezier(.3, .6, .4, 1); }
  .owl-trick.boing .owl-cheer { animation: none; opacity: 1; }
  .owl-trick.boing .owl-wave { animation: none; opacity: 0; }
  .owl-star.go { animation: owl-star .9s ease-out forwards; }
  @keyframes owl-run { 0%, 12% { transform: translateX(0); } 36%, 46% { transform: translateX(calc(var(--dir) * 45%)); } 70%, 100% { transform: translateX(0); } }
  @keyframes owl-boing {
    0% { transform: none; }
    15% { transform: translateY(4%) scale(1.12, .88); }
    55% { transform: translateY(-70%) rotateX(-200deg) scale(1); }
    85% { transform: translateY(0) rotateX(-360deg) scale(1.08, .92); }
    100% { transform: rotateX(-360deg); }
  }
  @keyframes owl-star {
    0% { opacity: 1; transform: translate(-50%, 0) scale(.3) rotate(0); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1) rotate(160deg); }
  }
  @keyframes owl-hop {
    0% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
    5% { transform: translateY(0%) rotate(0deg) scale(1.02, 0.98); }
    10% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
    12% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    13.2% { transform: translateY(-6.5%) rotate(-2deg) scale(0.94, 1.07); }
    16% { transform: translateY(-26%) rotate(-4deg) scale(1, 1); }
    18.8% { transform: translateY(-6.5%) rotate(-2deg) scale(0.95, 1.06); }
    20% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    21.2% { transform: translateY(-6.5%) rotate(2deg) scale(0.94, 1.07); }
    24% { transform: translateY(-26%) rotate(4deg) scale(1, 1); }
    26.8% { transform: translateY(-6.5%) rotate(2deg) scale(0.95, 1.06); }
    28% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    29.2% { transform: translateY(-6.5%) rotate(-2deg) scale(0.94, 1.07); }
    32% { transform: translateY(-26%) rotate(-4deg) scale(1, 1); }
    34.8% { transform: translateY(-6.5%) rotate(-2deg) scale(0.95, 1.06); }
    36% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    36.8% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
    37.6% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    38.86% { transform: translateY(-20%) rotate(0deg) scale(0.94, 1.07); }
    41.8% { transform: translateY(-80%) rotate(0deg) scale(1, 1); }
    44.74% { transform: translateY(-20%) rotate(0deg) scale(0.95, 1.06); }
    46% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    47.2% { transform: translateY(-6.5%) rotate(2deg) scale(0.94, 1.07); }
    50% { transform: translateY(-26%) rotate(4deg) scale(1, 1); }
    52.8% { transform: translateY(-6.5%) rotate(2deg) scale(0.95, 1.06); }
    54% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    55.2% { transform: translateY(-6.5%) rotate(-2deg) scale(0.94, 1.07); }
    58% { transform: translateY(-26%) rotate(-4deg) scale(1, 1); }
    60.8% { transform: translateY(-6.5%) rotate(-2deg) scale(0.95, 1.06); }
    62% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    63.2% { transform: translateY(-6.5%) rotate(2deg) scale(0.94, 1.07); }
    66% { transform: translateY(-26%) rotate(4deg) scale(1, 1); }
    68.8% { transform: translateY(-6.5%) rotate(2deg) scale(0.95, 1.06); }
    70% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    71.5% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
    76% { transform: translateY(0%) rotate(0deg) scale(1.02, 0.98); }
    79.5% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
    80.5% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    81.55% { transform: translateY(-11.25%) rotate(0deg) scale(0.94, 1.07); }
    84% { transform: translateY(-45%) rotate(0deg) scale(1, 1); }
    86.45% { transform: translateY(-11.25%) rotate(0deg) scale(0.95, 1.06); }
    87.5% { transform: translateY(0%) rotate(0deg) scale(1.08, 0.92); }
    89% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
    94% { transform: translateY(0%) rotate(0deg) scale(1.02, 0.98); }
    100% { transform: translateY(0%) rotate(0deg) scale(1, 1); }
  }
  @keyframes owl-face {
    0% { transform: rotateY(0deg); }
    10% { transform: rotateY(0deg); }
    13% { transform: rotateY(calc(var(--dir) * 22deg)); }
    38.4% { transform: rotateY(calc(var(--dir) * 22deg)); }
    45.6% { transform: rotateY(calc(var(--dir) * 382deg)); }
    49% { transform: rotateY(calc(var(--dir) * 338deg)); }
    69% { transform: rotateY(calc(var(--dir) * 338deg)); }
    73% { transform: rotateY(calc(var(--dir) * 360deg)); }
    100% { transform: rotateY(calc(var(--dir) * 360deg)); }
  }
  @keyframes owl-shadow {
    0% { transform: scale(1); opacity: 0.34; }
    10% { transform: scale(1); opacity: 0.34; }
    12% { transform: scale(1); opacity: 0.34; }
    16% { transform: scale(0.82); opacity: 0.27; }
    20% { transform: scale(1); opacity: 0.34; }
    24% { transform: scale(0.82); opacity: 0.27; }
    28% { transform: scale(1); opacity: 0.34; }
    32% { transform: scale(0.82); opacity: 0.27; }
    36% { transform: scale(1); opacity: 0.34; }
    37.6% { transform: scale(1); opacity: 0.34; }
    41.8% { transform: scale(0.45); opacity: 0.12; }
    46% { transform: scale(1); opacity: 0.34; }
    50% { transform: scale(0.82); opacity: 0.27; }
    54% { transform: scale(1); opacity: 0.34; }
    58% { transform: scale(0.82); opacity: 0.27; }
    62% { transform: scale(1); opacity: 0.34; }
    66% { transform: scale(0.82); opacity: 0.27; }
    70% { transform: scale(1); opacity: 0.34; }
    80.5% { transform: scale(1); opacity: 0.34; }
    84% { transform: scale(0.69); opacity: 0.22; }
    87.5% { transform: scale(1); opacity: 0.34; }
    100% { transform: scale(1); opacity: 0.34; }
  }
  @keyframes owl-cheer {
    0% { opacity: 0; }
    39.6% { opacity: 0; }
    39.9% { opacity: 1; }
    52% { opacity: 1; }
    54% { opacity: 0; }
    80.2% { opacity: 0; }
    80.8% { opacity: 1; }
    90% { opacity: 1; }
    92% { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes owl-wave {
    0% { opacity: 1; }
    39.6% { opacity: 1; }
    39.9% { opacity: 0; }
    52% { opacity: 0; }
    54% { opacity: 1; }
    80.2% { opacity: 1; }
    80.8% { opacity: 0; }
    90% { opacity: 0; }
    92% { opacity: 1; }
    100% { opacity: 1; }
  }
}
@media (max-width: 860px) {
  .hero-row { grid-template-columns: 1fr; }
  .hero-art { margin-top: 1rem; }
  .owl-stage { left: -18%; bottom: -5%; width: 120px; --dir: 1; }
}

/* Phone frames */
.phone { margin: 0; width: min(300px, 78vw); border-radius: 34px; border: 9px solid #10272B; background: #10272B; overflow: hidden; box-shadow: var(--shadow); }
.phone img { width: 100%; }
.art { display: flex; justify-content: center; }
.art-pair { gap: 1.2rem; align-items: flex-start; }
.art-pair .phone { width: min(250px, 42vw); }
.art-pair .phone + .phone { margin-top: 3.5rem; }

/* Sections */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split-wide { grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .split, .split-wide { grid-template-columns: 1fr; } }
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.1rem; }
.step { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; padding: 1.2rem 1.3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.step h3, .step p { grid-column: 2; }
.step p { margin: .3rem 0 0; color: var(--muted); }
.step-n { grid-row: span 2; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--dawn); color: #10272B; font: 600 1.1rem/1 var(--serif); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cards-2 { margin-top: 1.4rem; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.6rem 0 2rem; }
@media (max-width: 960px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards, .cards-4 { grid-template-columns: 1fr; } }
.card { padding: 1.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.card .icon { color: var(--amber-text); width: 30px; height: 30px; margin-bottom: .8rem; }
.card p { margin: .4rem 0 0; color: var(--muted); font-size: .98rem; }
.adults .split { margin-top: 1rem; }

/* Kids world */
.kids { background: var(--cream); border-radius: clamp(28px, 4vw, 48px); margin: 0 clamp(8px, 2vw, 24px); }
.kids h2, .kids h3 { font-family: var(--kids); }
.kids h2 { font-weight: 800; letter-spacing: 0; }
.kids h3 { font-weight: 700; font-size: 1.25rem; }
.kids .eyebrow { color: #6B4FE0; }
@media (prefers-color-scheme: dark) { .kids .eyebrow { color: #CFC4FF; } }
.kids-head { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .kids-head { grid-template-columns: 1fr; } }
.missions { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 960px) { .missions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .missions { grid-template-columns: 1fr; } }
.mission { background: var(--card); border-radius: 26px; padding: 1rem 1rem 1.3rem; box-shadow: 0 6px 0 #EADCC2; }
@media (prefers-color-scheme: dark) { .mission { box-shadow: 0 6px 0 #0C1424; } }
.mission-art { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: color-mix(in srgb, var(--sun) 16%, transparent); border-radius: 18px; margin-bottom: .9rem; }
.mission p { margin: .3rem 0 0; color: var(--muted); font-size: .97rem; }
.safe { margin-top: 2rem; padding: 1.4rem 1.6rem; border-radius: 24px; background: var(--card); border: 2px dashed color-mix(in srgb, var(--owl) 45%, transparent); }
.safe ul { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .55rem; }
.safe li { display: flex; gap: .6rem; align-items: flex-start; }
.safe .icon { color: #2E9E6A; width: 22px; height: 22px; margin-top: .2rem; }

/* Privacy band */
.privacy-band { background: var(--ink); color: #F5F2EC; }
.privacy-band .eyebrow { color: var(--tea-light); }
.privacy-band .card { background: #17363B; border-color: #2C4A4F; }
.privacy-band .card p { color: #C9D6D4; }
.privacy-band .card .icon { color: var(--dawn); }
.privacy-band a { color: var(--dawn); }
@media (prefers-color-scheme: dark) { .privacy-band { background: #07141A; } }

/* Honest note */
.honest { padding-block: clamp(2.5rem, 5vw, 4rem); }
.note { display: flex; gap: 1.2rem; align-items: flex-start; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--amber); }
.note .icon { width: 34px; height: 34px; color: var(--amber-text); margin-top: .3rem; }
.note h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .5rem; }
.note p { margin: 0; color: var(--muted); }

/* Plans */
.plan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1.5rem 0 1.2rem; }
@media (max-width: 760px) { .plan-row { grid-template-columns: 1fr; } }
.plan { padding: 1.8rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.plan h3 { font: 500 1.6rem/1.2 var(--serif); margin-bottom: 1rem; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; }
.plan li .icon { width: 22px; height: 22px; color: var(--tea); margin-top: .2rem; }
.plan-family { background: linear-gradient(160deg, #FBE7CF, #F6D9B8); color: #10272B; border: 0; }
.plan-family li .icon { color: #8A5A12; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.5rem 1rem 0; font-weight: 600; font-size: 1.08rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .4rem; top: .7rem; font: 400 1.6rem/1 var(--serif); color: var(--amber-text); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-right: 2rem; }

/* Early access */
.early-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: center; padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: clamp(28px, 4vw, 44px); background: linear-gradient(135deg, #10272B, #1F5C5A); color: #F5F2EC; }
.early-card p { color: #D7E3E1; max-width: 36em; }
.early-card .btn { background: var(--dawn); color: #10272B; border-color: var(--dawn); }
.early-owl { width: clamp(110px, 16vw, 180px); }
@media (max-width: 620px) { .early-card { grid-template-columns: 1fr; text-align: center; } .early-owl { margin-inline: auto; } }

/* Footer */
.foot { padding: 3rem 0 2.5rem; border-top: 1px solid var(--line); margin-top: 2rem; }
.foot-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem 2rem; align-items: start; }
.foot-brand { display: flex; gap: .8rem; align-items: center; }
.foot-brand p { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: flex-end; }
.foot-by { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; margin: 0; }
@media (max-width: 700px) { .foot-row { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; } }

/* Documents */
.doc { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.doc h1 { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); margin-bottom: .4rem; }
.doc .updated { color: var(--muted); font-size: .92rem; }
.doc section { margin-top: 2.2rem; }
.doc h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.8rem); margin-bottom: .6rem; }
.doc ul { padding-left: 1.2rem; display: grid; gap: .55rem; }
.doc .eyebrow a { text-decoration: none; }
.nf { text-align: center; }
.nf section { margin-top: 2rem; }
.nf-owl { width: 180px; margin: 0 auto; }

/* Gentle reveal on scroll (only with JS, never for reduced motion) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .js .reveal { opacity: 1; transform: none; } .top, .lang-hint, .menu-btn { position: static; } }