/* aibuddy.ae: the AI Buddy public-site design system (marketing kit, 05 Brand and Design/BRAND.md).
   Warm canvas, ink type, Newsreader 300 display with one gradient-italic emphasis, Instrument Sans text, ink pill
   buttons, pastel orbs only as atmosphere, real app screens. Light and dark; right to left for Arabic. */

@font-face { font-family: "AB Display"; src: url(../fonts/newsreader.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap }
@font-face { font-family: "AB Display"; src: url(../fonts/newsreader-italic.woff2) format("woff2"); font-weight: 300; font-style: italic; font-display: swap }
@font-face { font-family: "AB Sans"; src: url(../fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap }
@font-face { font-family: "AB Arabic Display"; src: url(../fonts/noto-naskh-arabic.woff2) format("woff2"); font-weight: 400 700; font-display: swap }
@font-face { font-family: "AB Arabic"; src: url(../fonts/plex-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap }
@font-face { font-family: "AB Arabic"; src: url(../fonts/plex-arabic-600.woff2) format("woff2"); font-weight: 600; font-display: swap }

:root {
  --canvas: #f5f5f3; --paper: #ffffff; --ink: #0c0a09; --ink-2: #1c1917; --muted: #57534e; --faint: #8a837d;
  --line: rgba(12,10,9,.10); --line-2: rgba(12,10,9,.16); --wash: #efeeea;
  --purple: #7d37ff; --purple-ink: #5b21d6; --violet: #b45cf0; --pink: #e091bb;
  --grad: linear-gradient(135deg, #7d37ff 0%, #b45cf0 45%, #e091bb 100%);
  --mint: #a7e5d3; --peach: #f4c5a8; --lavender: #c8b8e0; --sky: #a8c8e8; --rose: #e8b8c4;
  --learn-bg: #dde9f7; --learn-ink: #1e3a6e; --class-bg: #ddf3ea; --class-ink: #14532d; --family-bg: #fbe6d9; --family-ink: #7c2d12;
  --good: #15803d; --bad: #b91c1c;
  --btn-bg: #0c0a09; --btn-ink: #ffffff; --orb: .55; --shadow: 0 24px 60px -28px rgba(12,10,9,.30);
  --display: "AB Display", "Newsreader", Georgia, serif;
  --sans: "AB Sans", "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 16px; --r-lg: 28px; --wrap: 1200px; --gutter: 16px; --rhythm: 64px;
  color-scheme: light;
}
:root[dir="rtl"] { --display: "AB Arabic Display", "Noto Naskh Arabic", serif; --sans: "AB Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif }
@media (min-width: 720px) { :root { --gutter: 28px; --rhythm: 96px } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0c0a09; --paper: #171412; --ink: #f5f5f4; --ink-2: #e7e5e4; --muted: #b8b0a9; --faint: #8f8780;
    --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --wash: #131110;
    --purple-ink: #c4a8ff; --learn-bg: #182436; --learn-ink: #bcd4f2; --class-bg: #12271f; --class-ink: #aee5cc; --family-bg: #2c1d15; --family-ink: #f5c9ad;
    --good: #4ade80; --bad: #f87171; --btn-bg: #f5f5f4; --btn-ink: #0c0a09; --orb: .16; --shadow: 0 24px 60px -28px rgba(0,0,0,.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0c0a09; --paper: #171412; --ink: #f5f5f4; --ink-2: #e7e5e4; --muted: #b8b0a9; --faint: #8f8780;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --wash: #131110;
  --purple-ink: #c4a8ff; --learn-bg: #182436; --learn-ink: #bcd4f2; --class-bg: #12271f; --class-ink: #aee5cc; --family-bg: #2c1d15; --family-ink: #f5c9ad;
  --good: #4ade80; --bad: #f87171; --btn-bg: #f5f5f4; --btn-ink: #0c0a09; --orb: .16; --shadow: 0 24px 60px -28px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden }
img, svg, video, picture { display: block; max-width: 100% }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: var(--purple-ink) }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0 }
ul, ol { padding: 0; list-style: none }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 6px }
::selection { background: rgba(125,55,255,.18) }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none }
.skip:focus { top: 12px }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter) }
.narrow { max-width: 760px }

.display, h1, h2 { font-family: var(--display); font-weight: 300; letter-spacing: -0.018em; line-height: 1.06 }
h1, .hero h2 { text-wrap: balance }
h1 { font-size: clamp(40px, 6.4vw, 78px) }
h2 { font-size: clamp(32px, 4.4vw, 54px) }
h3 { font-family: var(--sans); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em }
[dir="rtl"] .display, [dir="rtl"] h1, [dir="rtl"] h2 { font-weight: 500; letter-spacing: 0; line-height: 1.32 }
[dir="rtl"] h1 { font-size: clamp(34px, 5.4vw, 64px) }
[dir="rtl"] h2 { font-size: clamp(28px, 3.8vw, 46px) }
.em { font-family: var(--display); font-style: italic; font-weight: 300; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone }
[dir="rtl"] .em { font-style: normal; font-weight: 600 }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--purple-ink) }
[dir="rtl"] .eyebrow { letter-spacing: 0; font-size: 14px }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); line-height: 1.55; max-width: 640px }
.muted { color: var(--muted) }
.small { font-size: 14px; color: var(--muted); line-height: 1.5 }
.num { font-variant-numeric: tabular-nums }
strong { font-weight: 600 }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); border: 1.5px solid var(--btn-bg); font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, background .2s, color .2s }
.btn:hover { color: var(--btn-ink); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(12,10,9,.45) }
.btn:active { transform: translateY(0) scale(.98) }
.btn .ic { width: 18px; height: 18px }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2) }
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); box-shadow: none }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14.5px }
.btn-block { width: 100% }
[dir="rtl"] .btn .ic-arrow, [dir="rtl"] .link-arrow .ic { transform: scaleX(-1) }
.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none; color: var(--ink) }
.link-arrow .ic { width: 16px; height: 16px; transition: transform .2s }
.link-arrow:hover .ic { transform: translateX(3px) }
[dir="rtl"] .link-arrow:hover .ic { transform: scaleX(-1) translateX(3px) }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.cta-note { font-size: 14px; color: var(--muted); max-width: 520px; margin-top: 12px; line-height: 1.5 }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }

/* ---------- header ---------- */
.hd { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s }
.hd.scrolled { border-bottom-color: var(--line) }
.hd-in { display: flex; align-items: center; gap: 20px; height: 68px }
.logo img { height: 34px; width: auto }
.logo-dark { display: none }
:root[data-theme="dark"] .logo-light { display: none } :root[data-theme="dark"] .logo-dark { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none } :root:not([data-theme="light"]) .logo-dark { display: block } }
.nav { display: flex; align-items: center; flex: 1; gap: 8px }
.nav ul { display: flex; gap: 2px; margin-inline-start: 18px }
.nav ul a { display: block; padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink) }
.nav ul a:hover { background: var(--wash) }
.nav ul a[aria-current="page"] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line) }
.nav-extra { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; font-size: 15px }
.nav-extra a:not(.btn) { text-decoration: none; font-weight: 500 }
.nav-lang { font-family: "AB Arabic", var(--sans) }
[dir="rtl"] .nav-lang { font-family: "AB Sans", system-ui, sans-serif }
.hd-tools { display: flex; gap: 6px; align-items: center }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; color: var(--ink) }
.icon-btn:hover { border-color: var(--line-2) }
.theme-btn .moon { display: none }
:root[data-theme="dark"] .theme-btn .sun { display: none } :root[data-theme="dark"] .theme-btn .moon { display: block }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .sun { display: none } :root:not([data-theme="light"]) .theme-btn .moon { display: block } }
.menu-btn { display: none }
.burger { width: 18px; height: 12px; position: relative; display: block }
.burger i { position: absolute; inset-inline: 0; height: 1.6px; background: currentColor; border-radius: 2px; transition: transform .25s, top .25s }
.burger i:first-child { top: 2px } .burger i:last-child { top: 9px }
.menu-open .burger i:first-child { top: 5.5px; transform: rotate(45deg) } .menu-open .burger i:last-child { top: 5.5px; transform: rotate(-45deg) }

@media (max-width: 1080px) {
  .menu-btn { display: grid }
  .hd-in { justify-content: space-between }
  .nav { position: fixed; inset: 68px 0 0 0; background: var(--canvas); flex-direction: column; align-items: stretch; padding: 12px var(--gutter) 32px; gap: 0; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .22s, visibility 0s .22s }
  .menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .22s }
  .nav ul { flex-direction: column; margin: 0; gap: 0 }
  .nav ul a { font-family: var(--display); font-weight: 300; font-size: 30px; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--line) }
  [dir="rtl"] .nav ul a { font-weight: 500; font-size: 26px }
  .nav ul a:hover, .nav ul a[aria-current="page"] { background: none; box-shadow: none; color: var(--purple-ink) }
  .nav-extra { flex-direction: column; align-items: stretch; margin: 24px 0 0; gap: 14px; font-size: 17px }
  .nav-extra .btn { min-height: 52px }
  .menu-open { overflow: hidden }
}

/* ---------- sections ---------- */
.sec { padding-block: var(--rhythm); position: relative }
.sec-tight { padding-block: calc(var(--rhythm) * .6) }
.sec-wash { background: var(--wash) }
.sec-paper { background: var(--paper) }
.sec-ink { background: #0c0a09; color: #f5f5f4; --muted: #c9c2bb; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.2); --paper: #171412; --wash: #131110; --purple-ink: #c4a8ff; --btn-bg: #f5f5f4; --btn-ink: #0c0a09; --ink: #f5f5f4; --orb: .14 }
.sec-head { display: grid; gap: 16px; margin-bottom: 48px; max-width: 760px }
.sec-head.center { margin-inline: auto; text-align: center; justify-items: center }
.sec-head .lede { margin: 0 }
.orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
.orbs i { position: absolute; border-radius: 50%; opacity: var(--orb) }
.orbs i:nth-child(1) { width: min(62vw, 760px); aspect-ratio: 1; inset-inline-start: -14%; top: -30%; background: radial-gradient(closest-side, var(--lavender), transparent) }
.orbs i:nth-child(2) { width: min(52vw, 640px); aspect-ratio: 1; inset-inline-end: -10%; top: -18%; background: radial-gradient(closest-side, var(--mint), transparent) }
.orbs i:nth-child(3) { width: min(58vw, 700px); aspect-ratio: 1; inset-inline-end: -18%; bottom: -36%; background: radial-gradient(closest-side, var(--peach), transparent) }
.orbs i:nth-child(4) { width: min(46vw, 560px); aspect-ratio: 1; inset-inline-start: -12%; bottom: -30%; background: radial-gradient(closest-side, var(--sky), transparent) }
.orbs.dots::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 40%, #000 15%, transparent 70%) }
.layer { position: relative; z-index: 1 }

/* ---------- hero ---------- */
.hero { position: relative; padding-block: 48px 64px; overflow: hidden }
@media (min-width: 720px) { .hero { padding-block: 72px 96px } }
.hero-grid { display: grid; gap: 48px; align-items: center }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.08fr .92fr; gap: 56px } }
.hero-copy { display: grid; gap: 22px; justify-items: start }
.hero h1 { max-width: 15ch }
[dir="rtl"] .hero h1 { max-width: 18ch }
.hero-simple { text-align: center }
.hero-simple .hero-copy { justify-items: center; margin-inline: auto; max-width: 860px }
.hero-simple h1 { max-width: 20ch }
.hero-simple .lede { margin-inline: auto }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: var(--ink) }
.chip .ic { width: 15px; height: 15px }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2 }
.pill.learn { background: var(--learn-bg); color: var(--learn-ink) }
.pill.classroom { background: var(--class-bg); color: var(--class-ink) }
.pill.family { background: var(--family-bg); color: var(--family-ink) }
.pill.soon { background: var(--wash); color: var(--muted); border: 1px solid var(--line) }

/* phones: real, framed app screens */
.phone { display: block; width: 100%; max-width: 280px; filter: drop-shadow(0 30px 40px rgba(12,10,9,.18)) }
.phone img { width: 100%; height: auto }
.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 420px; padding-top: 12px }
.phones .phone { width: 52%; max-width: 290px }
.phones .phone.back { transform: translateX(14%) rotate(-3deg); z-index: 0 }
.phones .phone.front { transform: translate(-12%, 34px) rotate(2.5deg); z-index: 1 }
[dir="rtl"] .phones .phone.back { transform: translateX(-14%) rotate(3deg) }
[dir="rtl"] .phones .phone.front { transform: translate(12%, 34px) rotate(-2.5deg) }
.phones .tag { position: absolute; z-index: 2; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.35; max-width: 220px }
.phones .tag b { display: block; font-weight: 600 }
.phones .tag.t1 { top: 18%; inset-inline-start: 0 }
.phones .tag.t2 { bottom: 10%; inset-inline-end: 0 }
.sample { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 18px; letter-spacing: .02em }
@media (max-width: 560px) { .phones .tag { display: none } .phones { min-height: 0 } }

/* proof strip */
.proof { border-block: 1px solid var(--line); background: var(--canvas) }
.proof ul { display: flex; gap: 10px 28px; flex-wrap: wrap; justify-content: center; padding-block: 18px; font-size: 14.5px; color: var(--muted) }
.proof li { display: inline-flex; align-items: center; gap: 8px }
.proof li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); flex: none }
@media (max-width: 720px) { .proof ul { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent) } .proof ul::-webkit-scrollbar { display: none } .proof li { white-space: nowrap } }

/* ---------- grids and cards ---------- */
.grid { display: grid; gap: 20px }
@media (min-width: 720px) { .g2 { grid-template-columns: repeat(2, 1fr) } .g3 { grid-template-columns: repeat(3, 1fr) } .g4 { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1024px) { .g4 { grid-template-columns: repeat(4, 1fr) } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; position: relative }
.card h3 { margin-bottom: 8px }
.card p { color: var(--muted) }
.card .ic-wrap { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--wash); margin-bottom: 18px; color: var(--purple-ink) }
.card .ic-wrap .ic { width: 22px; height: 22px }
.card-link { text-decoration: none; display: flex; flex-direction: column; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); color: inherit }
.card-link .link-arrow { margin-top: auto; padding-top: 18px }
.list-check { display: grid; gap: 12px }
.list-check li { position: relative; padding-inline-start: 26px; line-height: 1.5 }
.list-check li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .58em; width: 9px; height: 9px; border-radius: 50%; background: var(--grad) }
.list-check li strong { color: var(--ink) }

/* definition block: the answer first (for people and for answer engines) */
.answer { display: grid; gap: 28px; align-items: start }
@media (min-width: 900px) { .answer { grid-template-columns: 1fr 1.25fr; gap: 64px } }
.answer p.big { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.32; color: var(--ink) }
[dir="rtl"] .answer p.big { font-weight: 400; line-height: 1.6 }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.facts div { background: var(--paper); padding: 20px }
.facts dt { font-size: 13px; color: var(--muted); margin-bottom: 4px }
.facts dd { margin: 0; font-weight: 600; line-height: 1.35 }

/* the gap (dark story) */
.scene { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.2; display: grid; gap: 6px; margin-block: 8px 28px }
[dir="rtl"] .scene { font-weight: 400; line-height: 1.5 }
.scene span:nth-child(2) { color: color-mix(in srgb, currentColor 72%, transparent) }
.scene span:nth-child(3) { color: color-mix(in srgb, currentColor 50%, transparent) }
.turn { font-size: 20px; font-weight: 600; margin-top: 24px; max-width: 640px }

/* pillars */
.pillar { display: flex; flex-direction: column; gap: 14px; padding: 28px 28px 0; overflow: hidden }
.pillar h3 { font-family: var(--display); font-weight: 300; font-size: 30px; letter-spacing: -0.01em; margin: 0 }
[dir="rtl"] .pillar h3 { font-weight: 500; font-size: 26px }
.pillar .list-check { font-size: 15.5px; color: var(--muted) }
.pillar .shot { margin: 8px auto 0; width: 72%; max-width: 250px; transform: translateY(18%); transition: transform .4s cubic-bezier(.2,.8,.2,1) }
.pillar:hover .shot { transform: translateY(12%) }
.pillar.learn { background: linear-gradient(180deg, var(--learn-bg), var(--paper) 70%) }
.pillar.classroom { background: linear-gradient(180deg, var(--class-bg), var(--paper) 70%) }
.pillar.family { background: linear-gradient(180deg, var(--family-bg), var(--paper) 70%) }

/* timeline: one gap, three people */
.timeline { display: grid; gap: 28px; counter-reset: t }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(3, 1fr); gap: 28px } }
.tl { display: grid; gap: 14px; align-content: start }
.tl .when { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
[dir="rtl"] .tl .when { letter-spacing: 0 }
.tl .when::before { content: ""; width: 26px; height: 2px; background: var(--grad); border-radius: 2px }
.tl h3 { font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 1.2 }
[dir="rtl"] .tl h3 { font-weight: 500; font-size: 22px }
.tl .phone { max-width: 240px; margin: 6px auto 0 }

/* feature rows */
.feature { display: grid; gap: 36px; align-items: center; padding-block: 40px }
.feature + .feature { border-top: 1px solid var(--line) }
@media (min-width: 900px) { .feature { grid-template-columns: 1fr 1fr; gap: 72px; padding-block: 56px } .feature.flip .feature-copy { order: 2 } }
.feature-copy { display: grid; gap: 16px; align-content: start }
.feature-copy h3 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.015em }
[dir="rtl"] .feature-copy h3 { font-weight: 500; line-height: 1.4 }
.feature-art { display: flex; justify-content: center; position: relative }
.feature-art::before { content: ""; position: absolute; inset: 8% 12%; border-radius: 40px; background: var(--grad); opacity: .10; filter: blur(30px) }
.feature-art .phone { max-width: 290px; position: relative }

/* tool catalogue (platform) */
.tools { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
@media (min-width: 720px) { .tools { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1024px) { .tools { grid-template-columns: repeat(3, 1fr) } }
.tool { background: var(--paper); padding: 26px; display: grid; gap: 8px; align-content: start }
.tool-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.tool-h .ic { color: var(--purple-ink); width: 22px; height: 22px }
.tool p { color: var(--muted); font-size: 15.5px }
.tool .pill { justify-self: start; font-size: 12px; padding: 3px 10px }

/* compare */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: 16px }
.compare th, .compare td { padding: 18px 22px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line) }
.compare tr:last-child td { border-bottom: 0 }
.compare th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--wash) }
[dir="rtl"] .compare th { letter-spacing: 0 }
.compare td:first-child { color: var(--muted); width: 42% }
.compare td:last-child { font-weight: 500 }
.compare th:last-child { color: var(--purple-ink) }
@media (max-width: 640px) { .compare th, .compare td { padding: 14px; font-size: 15px } }

/* steps */
.steps { display: grid; gap: 20px; counter-reset: s }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(var(--n, 3), 1fr) } }
.step { display: grid; gap: 10px; align-content: start; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r) }
.step::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-family: "AB Display", Georgia, serif; font-weight: 300; font-size: 40px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.step p { color: var(--muted); font-size: 15.5px }

/* tabs (roles) */
.tabs { display: grid; gap: 24px }
.tablist { display: flex; gap: 6px; overflow-x: auto; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; scrollbar-width: none; justify-self: start; max-width: 100% }
.tablist::-webkit-scrollbar { display: none }
.tab { border: 0; background: none; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer; color: var(--muted) }
.tab[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-ink) }
.panel { display: grid; gap: 28px }
@media (min-width: 900px) { .panel { grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start } }
.panel h3 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 18px }
[dir="rtl"] .panel h3 { font-weight: 500; line-height: 1.4 }
.no-js .panel[hidden] { display: grid }

/* tiles (safety) */
.tile { padding: 26px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start }
.tile .ic { color: var(--purple-ink); width: 26px; height: 26px }
.tile p { color: var(--muted); font-size: 15.5px }

/* ecosystem diagram */
.eco { display: grid; gap: 16px }
@media (min-width: 900px) { .eco { grid-template-columns: 1fr 1.2fr 1fr; align-items: stretch } }
.eco-col { display: grid; gap: 12px; align-content: start }
.eco-node { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start }
.eco-node .ic { color: var(--purple-ink); margin-top: 2px }
.eco-node b { display: block; font-weight: 600 }
.eco-node span { color: var(--muted); font-size: 14.5px; line-height: 1.45 }
.eco-core { border-radius: var(--r-lg); padding: 32px; color: #f5f5f4; background: #0c0a09; display: grid; gap: 14px; align-content: center; text-align: center; position: relative; overflow: hidden; min-height: 300px }
.eco-core::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, rgba(125,55,255,.35), rgba(180,92,240,.15), rgba(224,145,187,.3), rgba(125,55,255,.35)); filter: blur(50px); opacity: .55; animation: spin 24s linear infinite }
.eco-core > * { position: relative }
.eco-core img { margin: 0 auto; height: 52px; width: auto }
.eco-core p { color: #d6d0ca; font-size: 15.5px }
.eco-core .chip-row { justify-content: center }
.eco-core .chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #f5f5f4 }
@keyframes spin { to { transform: rotate(360deg) } }

/* video */
.video { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #0c0a09; aspect-ratio: 16 / 9; box-shadow: var(--shadow); border: 1px solid var(--line) }
.video video, .video img { width: 100%; height: 100%; object-fit: cover }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, transparent 40%, rgba(12,10,9,.55)); border: 0; cursor: pointer; color: #fff; width: 100% }
.video-play span { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: rgba(255,255,255,.94); color: #0c0a09; font-weight: 600; font-size: 15.5px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); transition: transform .2s }
.video-play:hover span { transform: scale(1.04) }
.video-play .ic { width: 18px; height: 18px; fill: currentColor; stroke: none }

/* ---------- pricing ---------- */
.price-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 36px }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); gap: 2px }
.seg button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14.5px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; gap: 8px }
.seg button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-ink) }
.seg .badge { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--class-bg); color: var(--class-ink) }
.plans { display: grid; gap: 20px; align-items: stretch }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 899px) { .plans .plan.pick { order: -1 } }
.plan { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; display: flex; flex-direction: column; gap: 18px; position: relative }
.plan.pick { border: 2px solid var(--ink); box-shadow: var(--shadow) }
.plan .flag { position: absolute; top: -13px; inset-inline-start: 26px; background: var(--btn-bg); color: var(--btn-ink); font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px }
.plan h3 { font-size: 22px }
.plan .for { color: var(--muted); font-size: 15.5px; min-height: 2.6em }
.price { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; line-height: 1.2 }
.price b { font-family: var(--display); font-weight: 300; font-size: 48px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums }
[dir="rtl"] .price b { font-family: "AB Display", Georgia, serif }
.price span { color: var(--muted); font-size: 15px }
.price-sub { font-size: 14px; color: var(--muted); margin-top: 0; line-height: 1.45 }
.plan .list-check { font-size: 15.5px }
.plan .btn { margin-top: auto }
.plan .fine { font-size: 13px; color: var(--muted); line-height: 1.45 }
[data-country="IN"] .c-AE, [data-country="AE"] .c-IN { display: none !important }
[data-period="monthly"] .p-yearly, [data-period="yearly"] .p-monthly { display: none !important }
.terms { margin-top: 28px; display: grid; gap: 20px }
@media (min-width: 900px) { .terms { grid-template-columns: 1fr 1fr } }
.calc { display: grid; gap: 14px }
.calc label { font-weight: 600 }
.calc-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.calc-row input { width: 160px }
.calc-out { font-size: 16px; min-height: 3em }
.calc-out b { font-weight: 600 }

/* school plan table */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper) }
.tbl { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15.5px }
.tbl th, .tbl td { padding: 16px 20px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top }
.tbl thead th { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600 }
[dir="rtl"] .tbl thead th { letter-spacing: 0 }
.tbl tbody th { font-weight: 600 }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0 }
.tbl .pick { background: color-mix(in srgb, var(--purple) 6%, transparent) }
.tbl b { font-family: var(--display); font-weight: 300; font-size: 26px; font-variant-numeric: tabular-nums }

/* offer */
.offer { border-radius: var(--r-lg); padding: 36px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 24px; position: relative; overflow: hidden }
.offer::after { content: ""; position: absolute; inset-inline-end: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, var(--lavender), transparent); opacity: var(--orb) }
@media (min-width: 900px) { .offer { grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px } }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 0; font-weight: 600; font-size: 18px; line-height: 1.4 }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); background: linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat; transition: transform .25s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq .a { padding: 0 0 24px; color: var(--muted); display: grid; gap: 12px; max-width: 760px }
.faq .a ul { display: grid; gap: 6px; padding-inline-start: 20px; list-style: disc }
.faq-group + .faq-group { margin-top: 48px }
.faq-group h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px }

/* ---------- forms ---------- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow) }
@media (min-width: 720px) { .form-card { padding: 40px } }
.form-head { display: grid; gap: 8px; margin-bottom: 24px }
.form-head h2 { font-size: clamp(28px, 3vw, 38px) }
.fields { display: grid; gap: 16px }
@media (min-width: 640px) { .fields .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px } }
.field { display: grid; gap: 6px }
.field > span { font-size: 14px; font-weight: 600 }
.field small { font-size: 13px; color: var(--muted) }
.field small.err { color: var(--bad); display: none }
.field.bad small.err { display: block }
.field.bad input, .field.bad select { border-color: var(--bad) }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--canvas); font-size: 16px; transition: border-color .15s, box-shadow .15s }
textarea { min-height: 96px; resize: vertical }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(125,55,255,.14) }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px }
[dir="rtl"] select { background-position: 20px 22px, 15px 22px }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; cursor: pointer }
.check input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--purple); flex: none }
.check.bad { color: var(--bad) }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden }
.form-note { font-size: 13px; color: var(--muted) }
.form-msg { border-radius: 14px; padding: 14px 16px; font-weight: 500; display: none }
.form-msg.ok { display: block; background: var(--class-bg); color: var(--class-ink) }
.form-msg.no { display: block; background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad) }
.form-done { display: grid; gap: 14px; justify-items: start; padding: 8px 0 }
.form-done .ic { width: 44px; height: 44px; color: var(--good) }
.aud-tabs { margin-bottom: 20px }
.form-split { display: grid; gap: 40px; align-items: start }
@media (min-width: 980px) { .form-split { grid-template-columns: .9fr 1.1fr; gap: 72px } }
.form-side { display: grid; gap: 22px }
.contact-list { display: grid; gap: 12px }
.contact-list a, .contact-list p { display: flex; gap: 12px; align-items: center; text-decoration: none; font-weight: 500 }
.contact-list .ic { color: var(--purple-ink) }

/* ---------- CTA band ---------- */
.band { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 48px 28px; text-align: center; display: grid; gap: 18px; justify-items: center; background: #0c0a09; color: #f5f5f4; --muted: #c9c2bb; --btn-bg: #f5f5f4; --btn-ink: #0c0a09; --ink: #f5f5f4; --line-2: rgba(255,255,255,.28); --orb: .2 }
@media (min-width: 720px) { .band { padding: 80px 48px } }
.band h2 { max-width: 18ch }
.band .lede { margin-inline: auto }
.split { display: grid; gap: 20px }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr } }
.split .card { padding: 36px; display: grid; gap: 14px; align-content: start }
.split .card h3 { font-family: var(--display); font-weight: 300; font-size: 32px; line-height: 1.12 }
[dir="rtl"] .split .card h3 { font-weight: 500; font-size: 28px; line-height: 1.4 }
.split .card .btn { justify-self: start; margin-top: 8px }

/* article (guide, privacy) */
.prose { max-width: 720px; display: grid; gap: 18px; font-size: 18px }
.prose h2 { font-size: clamp(28px, 3vw, 38px); margin-top: 28px }
.prose h3 { margin-top: 10px }
.prose p, .prose li { color: var(--ink-2) }
.prose ul { list-style: disc; padding-inline-start: 22px; display: grid; gap: 8px }
.prose ol { list-style: decimal; padding-inline-start: 22px; display: grid; gap: 8px }
.prose .note { font-size: 15px; color: var(--muted); border-inline-start: 3px solid var(--lavender); padding-inline-start: 16px }
.prose table { border-collapse: collapse; width: 100%; font-size: 16px }
.prose th, .prose td { text-align: start; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top }
.prose th { font-weight: 600 }
.chap, .chap-body { display: grid; gap: 18px; align-content: start }
@media (min-width: 960px) {
  .prose { max-width: none; gap: 0; align-items: start }
  .prose h2 { margin-top: 0; position: sticky; top: 104px }
  .chap { padding-block: 44px; border-top: 1px solid var(--line) }
  .chap:first-of-type { border-top: 0; padding-top: 8px }
  .chap-body { max-width: 720px }
  .prose:not(.has-toc) .chap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; align-items: start }
  .prose:not(.has-toc) .chap > h2 { font-size: clamp(30px, 3.2vw, 44px) }
  .prose:not(.has-toc) .chap-body { grid-column: 2 }
  .prose.has-toc { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: 72px }
  .prose.has-toc > * { grid-column: 2 }
  .prose.has-toc > .toc { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 104px }
  .prose.has-toc .chap > h2 { position: static }
  .updated { padding-bottom: 8px }
}
.toc { display: grid; gap: 8px; font-size: 15px; padding: 20px 22px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line) }
.toc a { text-decoration: none; color: var(--muted) }
.toc a:hover { color: var(--purple-ink) }
.updated { font-size: 14px; color: var(--muted) }

/* ---------- footer ---------- */
.ft { border-top: 1px solid var(--line); padding-block: 64px 32px; margin-top: var(--rhythm); font-size: 15px }
.ft-top { display: grid; gap: 36px }
@media (min-width: 900px) { .ft-top { grid-template-columns: 1.6fr 1fr 1fr 1fr } }
.ft-brand { display: grid; gap: 16px; justify-items: start }
.ft-brand img { height: 36px; width: auto }
.ft-tag { font-size: 26px; line-height: 1.2; max-width: 16ch }
[dir="rtl"] .ft-tag { font-weight: 500; line-height: 1.5 }
.ft-contact { display: grid; gap: 8px }
.ft-contact a { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--muted) }
.ft-contact .ic { width: 17px; height: 17px }
.ft-col ul { display: grid; gap: 10px; margin-top: 14px }
.ft-col a { text-decoration: none; color: var(--muted) }
.ft-col a:hover, .ft-contact a:hover { color: var(--ink) }
.ft-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 20px; font-size: 13.5px; color: var(--muted) }
.ft-notes { display: grid; gap: 6px }
.ft-bottom { display: grid; gap: 10px; justify-items: start }
@media (min-width: 900px) { .ft-legal { grid-template-columns: 1.6fr 1fr 1fr 1fr; column-gap: 36px; align-items: start } .ft-notes { grid-column: span 2 } .ft-bottom { grid-column: span 2; justify-items: end; text-align: end } }
.ft-bottom a { text-decoration: none; display: inline-flex; gap: 6px; align-items: center }
.ft-bottom .ic { width: 15px; height: 15px }
.ft-links { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: center }
.page-home .ft, .page-schools .ft, .page-parents .ft { margin-top: 0 }

/* sticky mobile CTA */
.sticky-cta { position: fixed; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 40; transform: translateY(140%); transition: transform .3s cubic-bezier(.2,.8,.2,1) }
.sticky-cta.on { transform: none }
.sticky-cta .btn { width: 100%; box-shadow: 0 16px 36px -12px rgba(12,10,9,.5) }
@media (min-width: 900px) { .sticky-cta { display: none } }

/* 404 */
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }

/* reveal on scroll (only with JavaScript, and never for people who prefer less motion) */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1) }
.js .rv.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .js .rv { opacity: 1; transform: none; transition: none }
  .eco-core::before { animation: none }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important }
}
@media print { .hd, .sticky-cta, .orbs, .video { display: none } body { background: #fff; color: #000 } }

[hidden] { display: none !important }
.ctas.center { justify-content: center }
.steps.n4 { --n: 4 } .steps.n5 { --n: 5 }
.center-text { text-align: center; margin-top: 18px }
.family-line { max-width: 640px; margin-inline: auto }
.mt { margin-top: 18px }
.price-tools.start { justify-content: flex-start }
.tool-group + .tool-group { margin-top: 48px }
.tool-group-h { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px }
.tool-group-h h3 { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.01em }
[dir="rtl"] .tool-group-h h3 { font-weight: 500 }
.tool h4 { margin: 0; font-size: 17px; font-weight: 600 }
.phones.one .phone.front { transform: none; width: 64%; max-width: 300px }
.video-wrap { max-width: 980px; margin-inline: auto }
.hero .video { width: 100% }
.pill { justify-self: start; align-self: flex-start; width: fit-content }
.form-h1 { font-size: clamp(36px, 5vw, 60px) }

/* ---------- products ---------- */
.aio { position: relative; overflow: hidden; border-radius: var(--r-lg); background: #0c0a09; color: #f5f5f4; display: grid; gap: 32px; padding: 36px 28px; --muted: #c9c2bb; --ink: #f5f5f4; --btn-bg: #f5f5f4; --btn-ink: #0c0a09; --line-2: rgba(255,255,255,.28) }
@media (min-width: 980px) { .aio { grid-template-columns: 1.05fr .95fr; padding: 56px; align-items: center } }
.aio::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(from 90deg, rgba(125,55,255,.4), rgba(180,92,240,.12), rgba(224,145,187,.35), rgba(125,55,255,.4)); filter: blur(60px); opacity: .5; animation: spin 30s linear infinite }
.aio > * { position: relative }
.aio-copy { display: grid; gap: 16px; justify-items: start }
.aio-logo { height: 40px; width: auto }
.aio h2 { font-size: clamp(34px, 4vw, 52px) }
.aio .list-check li { color: #e7e5e4 }
.flag-pill { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18) }
.aio-art { display: flex; justify-content: center; align-items: flex-end; min-height: 360px }
.aio-art .phone { width: 38%; max-width: 210px }
.aio-art .a1 { transform: translateX(18%) rotate(-6deg) translateY(18px) }
.aio-art .a2 { z-index: 1; transform: translateY(-14px) }
.aio-art .a3 { transform: translateX(-18%) rotate(6deg) translateY(18px) }
.product { display: flex; flex-direction: column; gap: 14px }
.product-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between }
.product-h h3 { font-size: 22px; margin: 0 }
.product-line { font-size: 30px; line-height: 1.15 }
[dir="rtl"] .product-line { font-weight: 500 }
.product-aio { background: linear-gradient(160deg, var(--paper), color-mix(in srgb, var(--lavender) 22%, var(--paper))) }
.ic-inline { display: inline; width: 16px; height: 16px; vertical-align: -3px; color: var(--purple-ink) }
.tbl.choose td.pick, .tbl.choose th.pick { background: color-mix(in srgb, var(--purple) 7%, transparent); font-weight: 500 }
.choice { gap: 12px }
.choice .big { width: 34px; height: 34px; color: var(--purple-ink) }
.choice h3 { font-family: var(--display); font-weight: 300; font-size: 30px; line-height: 1.15; margin: 0 }
[dir="rtl"] .choice h3 { font-weight: 500 }
.choice-aio { background: linear-gradient(160deg, var(--paper), color-mix(in srgb, var(--mint) 25%, var(--paper))) }

/* ---------- motion: purposeful, transform and opacity only, always off for reduced motion ---------- */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1) }
/* scroll progress hairline */
.progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 60; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); pointer-events: none }
[dir="rtl"] .progress { transform-origin: 100% 50% }
/* hero entrance: words rise in, one after another */
.js .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.42em) rotate(2deg); filter: blur(6px); animation: rise .9s var(--ease-out) forwards; animation-delay: calc(120ms + var(--i) * 55ms) }
.js .hero .hero-copy > :not(h1) { opacity: 0; transform: translateY(14px); animation: rise .8s var(--ease-out) forwards; animation-delay: calc(380ms + var(--k, 0) * 90ms) }
.js .hero .phones .phone, .js .hero .video, .js .aio-art .phone { opacity: 0; animation: phone-in 1.1s var(--ease-out) forwards; animation-delay: calc(300ms + var(--k, 0) * 140ms) }
.js .hero .phones .tag { opacity: 0; animation: pop .7s var(--ease-spring) forwards; animation-delay: calc(900ms + var(--k, 0) * 160ms) }
@keyframes rise { to { opacity: 1; transform: none; filter: none } }
@keyframes phone-in { from { opacity: 0; translate: 0 60px; scale: .96 } to { opacity: 1; translate: 0 0; scale: 1 } }
@keyframes pop { from { opacity: 0; scale: .85 } to { opacity: 1; scale: 1 } }
/* phones float gently once in */
.float { animation: float 7s ease-in-out infinite; animation-delay: var(--fd, 0s) }
@keyframes float { 0%, 100% { translate: 0 0 } 50% { translate: 0 -10px } }
.js .hero .phones .phone.float { animation: phone-in 1.1s var(--ease-out) forwards, float 7s ease-in-out 1.4s infinite }
/* orbs drift */
.orbs i { animation: drift 22s ease-in-out infinite alternate }
.orbs i:nth-child(2) { animation-duration: 26s; animation-delay: -6s }
.orbs i:nth-child(3) { animation-duration: 30s; animation-delay: -12s }
.orbs i:nth-child(4) { animation-duration: 24s; animation-delay: -3s }
@keyframes drift { 0% { translate: 0 0; scale: 1 } 50% { translate: 4% 3%; scale: 1.06 } 100% { translate: -3% 5%; scale: .97 } }
/* staggered reveal inside groups */
.js .rv { transition-delay: calc(var(--d, 0) * 70ms) }
.js .rv.from-l { transform: translateX(-28px) } .js .rv.from-r { transform: translateX(28px) }
.js .rv.zoom { transform: scale(.94) }
.js .rv.in.from-l, .js .rv.in.from-r, .js .rv.in.zoom { transform: none }
/* the emphasis shimmers once when it arrives */
.em { background-size: 200% 100% }
.in .em, .hero .em { animation: shimmer 2.4s var(--ease-out) .6s 1 both }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }
/* proof strip as a slow marquee */
.proof.marquee ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; animation: marquee 40s linear infinite; -webkit-mask-image: none }
.proof.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent) }
.proof.marquee:hover ul { animation-play-state: paused }
.proof.marquee li { white-space: nowrap }
@keyframes marquee { to { transform: translateX(-50%) } }
[dir="rtl"] .proof.marquee ul { animation-name: marquee-rtl } @keyframes marquee-rtl { to { transform: translateX(50%) } }
/* cards tilt towards the pointer, with a soft light */
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease-out), box-shadow .3s, border-color .3s; will-change: transform }
.tilt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.35), transparent 40%); opacity: 0; transition: opacity .3s }
.tilt:hover::after { opacity: 1 }
:root[data-theme="dark"] .tilt::after { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(196,168,255,.12), transparent 40%) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tilt::after { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(196,168,255,.12), transparent 40%) } }
/* buttons: a light sweep, and a gentle pull towards the pointer on the big ones */
.btn { position: relative; overflow: hidden; isolation: isolate }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-out) }
.btn:hover::before { transform: translateX(120%) }
.btn-ghost::before { background: linear-gradient(110deg, transparent 30%, rgba(125,55,255,.12) 50%, transparent 70%) }
.magnet { transition: transform .35s var(--ease-out), box-shadow .2s }
.btn .ic-arrow { transition: transform .3s var(--ease-out) }
.btn:hover .ic-arrow { transform: translateX(4px) }
[dir="rtl"] .btn:hover .ic-arrow { transform: scaleX(-1) translateX(4px) }
/* timeline: a line draws itself as you scroll */
.timeline { position: relative }
@media (min-width: 900px) {
  .timeline::before { content: ""; position: absolute; inset-inline: 0; top: 8px; height: 2px; background: var(--line) }
  .timeline::after { content: ""; position: absolute; inset-inline-start: 0; top: 8px; height: 2px; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--tl, 0)); transition: transform .2s linear }
  [dir="rtl"] .timeline::after { transform-origin: 100% 50% }
}
/* a soft spotlight follows the pointer on dark sections */
.sec-ink::after, .band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px circle at var(--sx, 50%) var(--sy, 30%), rgba(196,168,255,.10), transparent 50%); z-index: 0 }
/* tab panels and price changes cross-fade */
.panel:not([hidden]) { animation: fade-up .5s var(--ease-out) }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.flip { animation: flip .45s var(--ease-out) }
@keyframes flip { from { opacity: 0; transform: translateY(-8px) rotateX(40deg) } to { opacity: 1; transform: none } }
/* FAQ opens smoothly */
.faq .a { overflow: hidden }
.faq details.anim .a { transition: height .35s var(--ease-out), opacity .35s; }
/* header tightens on scroll */
.hd-in { transition: height .3s var(--ease-out) }
.hd.scrolled .hd-in { height: 60px }
/* parallax layers (set by script) */
[data-parallax] { translate: 0 var(--py, 0px) }
.icon-btn, .tab, .seg button, .chip { transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease-out) }
.icon-btn:active, .tab:active, .seg button:active { transform: scale(.94) }
.tool { transition: background .25s }
.tool:hover { background: color-mix(in srgb, var(--paper) 92%, var(--purple)) }
.tool:hover .tool-h .ic { transform: scale(1.12) rotate(-6deg) }
.tool-h .ic, .tile .ic, .eco-node .ic { transition: transform .35s var(--ease-spring) }
.tile:hover .ic, .eco-node:hover .ic { transform: scale(1.15) rotate(-6deg) }
.eco-node { transition: transform .35s var(--ease-out), border-color .25s }
.eco-node:hover { transform: translateY(-3px); border-color: var(--line-2) }

@media (prefers-reduced-motion: reduce) {
  .js .hero h1 .w, .js .hero .hero-copy > :not(h1), .js .hero .phones .phone, .js .hero .video, .js .hero .phones .tag, .js .aio-art .phone { opacity: 1; transform: none; filter: none; animation: none }
  .orbs i, .float, .proof.marquee ul, .aio::before, .in .em, .hero .em { animation: none }
  .tilt { transform: none !important } .magnet { transform: none !important } [data-parallax] { translate: none }
  .progress { display: none }
}
.em.em-split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; padding: 0 }
.em .wg { background: var(--grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; font-style: inherit }
.js .hero h1 .wg { animation: rise .9s var(--ease-out) forwards, shimmer 2.4s var(--ease-out) .9s 1 both; animation-delay: calc(120ms + var(--i) * 55ms), 900ms }
.nb { display: inline-block; white-space: nowrap }
.nb > .w:not(.wg) { font-style: normal; color: var(--ink) }

/* animations rest while their section is off screen */
.off .orbs i, .off.eco-core::before, .off.aio::before, .off .float, .off .phone { animation-play-state: paused !important }
.proof.off ul { animation-play-state: paused }

/* ---------- live product scenes ---------- */
.scene:not(.live) *, .scene:not(.live) *::after { animation-play-state: paused !important }
.scene { position: relative; font-size: 14px; line-height: 1.45; --glass: color-mix(in srgb, var(--paper) 86%, transparent) }
.sc-card { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px 18px; box-shadow: 0 30px 60px -30px rgba(12,10,9,.35), 0 1px 0 rgba(255,255,255,.5) inset; display: grid; gap: 10px; color: var(--ink) }
.sc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); font-weight: 600 }
.sc-label { display: inline-flex; align-items: center; gap: 7px; letter-spacing: .02em }
.sc-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--grad) }
.sc-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--purple); opacity: .25; animation: beat 2s ease-in-out infinite }
@keyframes beat { 50% { transform: scale(1.6); opacity: 0 } }
.sc-time { font-variant-numeric: tabular-nums }
/* appear behaviours */
.sc-in, .sc-slide, .sc-pop, .sc-write, .sc-fill, .sc-line, .sc-circle { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), background .4s, color .4s, stroke-dashoffset 1.2s var(--ease-out) }
.js .scene .sc-in:not(.on) { opacity: 0; transform: translateY(8px) }
.js .scene .sc-slide:not(.on) { opacity: 0; transform: translateX(-16px) }
[dir="rtl"].js .scene .sc-slide:not(.on), .js [dir="rtl"] .scene .sc-slide:not(.on) { transform: translateX(16px) }
.js .scene .sc-pop:not(.on) { opacity: 0; transform: scale(.8) }
.sc-pop.on { transition-timing-function: var(--ease-spring) }
.scene.out .on { opacity: 0 !important; transition-duration: .5s }
/* chat */
.sc-q { justify-self: end; max-width: 88%; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-size: 13.5px }
[dir="rtl"] .sc-q { border-radius: 16px 16px 16px 4px }
.sc-typing { display: inline-flex; gap: 4px; padding: 10px 14px; background: var(--wash); border-radius: 14px; justify-self: start; width: fit-content }
.sc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: bounce 1s infinite }
.sc-typing i:nth-child(2) { animation-delay: .15s } .sc-typing i:nth-child(3) { animation-delay: .3s }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .5 } 30% { transform: translateY(-4px); opacity: 1 } }
.js .scene .sc-typing:not(.on) { display: none }
.sc-a { display: grid; gap: 6px }
.sc-step { display: flex; gap: 10px; align-items: center; background: var(--wash); border-radius: 12px; padding: 8px 12px; font-family: var(--display); font-size: 16px }
.sc-step b { font-family: var(--sans); font-size: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; flex: none }
.sc-chip { display: inline-flex; gap: 6px; align-items: center; justify-self: start; font-size: 12.5px; font-weight: 600; color: var(--class-ink); background: var(--class-bg); padding: 5px 10px; border-radius: 999px }
.sc-chip .ic { width: 15px; height: 15px }
/* pulse */
.sc-title { font-family: var(--display); font-size: 20px; line-height: 1.2 }
[dir="rtl"] .sc-title { font-weight: 500 }
.sc-rows { display: grid; gap: 6px }
.sc-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--wash); border-inline-start: 3px solid transparent }
.sc-row.warn { border-color: #f59e0b } .sc-row.quiet { border-color: var(--faint) } .sc-row.good { border-color: #22c55e }
.sc-row b { display: block; font-size: 13.5px } .sc-row small { color: var(--muted); font-size: 12px }
.sc-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--learn-bg); color: var(--learn-ink); flex: none }
.sc-row.good .sc-av { background: var(--class-bg); color: var(--class-ink) } .sc-row.quiet .sc-av { background: var(--family-bg); color: var(--family-ink) }
.sc-btn { display: inline-flex; gap: 8px; align-items: center; justify-self: start; background: var(--btn-bg); color: var(--btn-ink); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13px }
.sc-btn .ic { width: 15px; height: 15px }
/* parent */
.sc-days { display: flex; gap: 6px }
.sc-day { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; background: var(--wash); color: var(--muted); border: 1px solid var(--line) }
.sc-fill.on { background: var(--grad); color: #fff; border-color: transparent; transform: scale(1.06) }
.js .scene .sc-fill:not(.on) { transform: scale(.9) }
.sc-stats { font-size: 13px; color: var(--muted) }
.sc-help { background: var(--family-bg); color: var(--family-ink); border-radius: 14px; padding: 10px 12px; display: grid; gap: 4px; font-size: 13.5px; min-height: 66px }
.sc-help b { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px } .sc-help .ic { width: 15px; height: 15px }
/* whiteboard */
.sc-board { background: color-mix(in srgb, #0f2e24 92%, transparent); color: #eafff5; border-color: rgba(255,255,255,.08); min-height: 300px; position: relative }
.sc-board .sc-top { color: #a7e5d3 }
.sc-board-q { font-size: 13px; color: #a7e5d3 }
.sc-ink { font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.3 }
.sc-ink span { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s steps(24, end) }
[dir="rtl"] .sc-ink span { clip-path: inset(0 100% 0 0) }
.sc-ink.on span, .no-js .sc-ink span { clip-path: inset(0 0 0 0) }
.sc-circle { position: absolute; width: 230px; height: 70px; bottom: 54px; inset-inline-start: 6px; fill: none; stroke: #f4c5a8; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; overflow: visible }
.sc-circle.on { stroke-dashoffset: 0 }
.sc-voice { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: #a7e5d3; margin-top: auto }
.sc-voice .ic { width: 15px; height: 15px }
.sc-wave { display: inline-flex; gap: 3px; align-items: center; height: 14px }
.sc-wave i { width: 3px; border-radius: 2px; background: #a7e5d3; animation: wave 1s ease-in-out infinite; height: 100%; transform: scaleY(.4) }
.sc-wave i:nth-child(2) { animation-delay: .1s } .sc-wave i:nth-child(3) { animation-delay: .25s } .sc-wave i:nth-child(4) { animation-delay: .4s }
@keyframes wave { 50% { transform: scaleY(1) } }
/* marking */
.sc-q2 { font-weight: 600; font-size: 14.5px }
.sc-points { display: grid; gap: 6px }
.sc-points li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--wash); font-size: 13px }
.sc-points b { font-variant-numeric: tabular-nums; font-size: 12px }
.sc-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700 }
.sc-points .ok .sc-tick { background: var(--class-bg); color: var(--class-ink) } .sc-points .no .sc-tick { background: var(--family-bg); color: var(--family-ink) }
.sc-tick .ic { width: 14px; height: 14px; stroke-width: 2.4 }
.sc-score { display: flex; gap: 12px; align-items: center }
.sc-score svg { width: 52px; height: 52px; transform: rotate(-90deg) }
.sc-score circle { fill: none; stroke-width: 4 } .sc-score .bg { stroke: var(--line-2) }
.sc-score .fg { stroke: url(#scg); stroke: #7d37ff; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-out); stroke-linecap: round }
.sc-score.on .fg { stroke-dashoffset: .33 }
.sc-score b { font-family: var(--display); font-size: 26px; display: block; line-height: 1 } .sc-score small { color: var(--muted); font-size: 12px }
.sc-work { font-size: 13.5px; background: var(--learn-bg); color: var(--learn-ink); border-radius: 12px; padding: 10px 12px; min-height: 44px }
/* the hero: three people, one gap */
.sc-hero { height: 640px; max-width: 640px; margin-inline: auto; width: 100%; font-size: 15px }
.sc-slot { position: absolute; width: 54%; display: grid; gap: 6px }
.sc-slot.s1 { top: 0; inset-inline-start: 0; z-index: 3 }
.sc-slot.s2 { top: 31%; inset-inline-end: 0; width: 50%; z-index: 2 }
.sc-slot.s3 { bottom: 0; inset-inline-start: 0; width: 50%; z-index: 3 }
.sc-who { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-ink); padding-inline-start: 6px }
[dir="rtl"] .sc-who { letter-spacing: 0; font-size: 13px }
.sc-hero .s2 .sc-card { animation-delay: -2.6s } .sc-hero .s3 .sc-card { animation-delay: -5.2s }
@keyframes bob { 50% { translate: 0 -8px } }
.sc-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0 }
.sc-line { fill: none; stroke: url(#scg); stroke-width: .5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 1px rgba(125,55,255,.6)) }
.sc-line.on { stroke-dashoffset: 0 }
[dir="rtl"] .sc-path { transform: scaleX(-1) }
.no-js .scene [data-at], .scene.done [data-at] { opacity: 1 }
@media (max-width: 979px) {
  .sc-hero { height: auto; display: grid; gap: 14px; max-width: 440px }
  .sc-slot { position: relative; width: auto !important; inset: auto !important }
  .sc-slot.s2 { margin-inline-start: 10% } .sc-slot.s3 { margin-inline-end: 10% }
  .sc-path { display: none }
}
.sc-solo { max-width: 420px; margin-inline: auto; width: 100% }
.feature-art .scene { z-index: 1 }
.hero-stage { position: relative; display: grid; gap: 22px; justify-items: center }
/* film button and player */
.film-btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; text-align: start; box-shadow: var(--shadow); transition: transform .3s var(--ease-out) }
[dir="rtl"] .film-btn { padding: 8px 8px 8px 18px }
.film-btn:hover { transform: translateY(-2px) }
.film-thumb { position: relative; width: 72px; height: 44px; border-radius: 999px; overflow: hidden; flex: none }
.film-thumb img { width: 100%; height: 100%; object-fit: cover }
.film-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12,10,9,.35); color: #fff }
.film-play .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; animation: pulse-play 2s ease-in-out infinite }
@keyframes pulse-play { 50% { transform: scale(1.2) } }
.film-text b { display: block; font-size: 14.5px } .film-text small { color: var(--muted); font-size: 12.5px }
dialog.film { width: min(1100px, 94vw); padding: 0; border: 0; border-radius: 20px; background: #000; overflow: visible }
dialog.film::backdrop { background: rgba(12,10,9,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
dialog.film[open] { animation: film-in .45s var(--ease-out) }
@keyframes film-in { from { opacity: 0; transform: scale(.94) } }
dialog.film video { width: 100%; display: block; border-radius: 20px; aspect-ratio: 16 / 9; background: #000 }
.film-close { position: absolute; top: -52px; inset-inline-end: 0; background: #fff; color: #0c0a09; font-size: 24px }
/* showcase */
.showcase { display: grid; gap: 28px }
.show-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap }
.show-tab { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #e7e5e4; border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background .3s, color .3s }
.show-tab[aria-selected="true"] { background: #f5f5f4; color: #0c0a09 }
.show-tab .bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50% }
[dir="rtl"] .show-tab .bar { transform-origin: 100% 50% }
.show-tab.run .bar { animation: fillbar var(--len, 8s) linear forwards }
@keyframes fillbar { to { transform: scaleX(1) } }
.show-panel { display: grid; gap: 32px; align-items: center; min-height: 440px }
.show-panel:not([hidden]) { animation: fade-up .6s var(--ease-out) }
@media (min-width: 900px) { .show-panel { grid-template-columns: .8fr 1.2fr; gap: 64px } }
.show-copy { display: grid; gap: 14px; align-content: center }
.show-copy h3 { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1 }
[dir="rtl"] .show-copy h3 { font-weight: 500; line-height: 1.4 }
.show-copy p { color: var(--muted); font-size: 17px }
.show-copy .link-arrow { color: #f5f5f4 }
.sec-ink .scene { --glass: rgba(28,25,23,.78); --ink: #f5f5f4; --muted: #b8b0a9; --wash: rgba(255,255,255,.06); --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.2); --btn-bg: #f5f5f4; --btn-ink: #0c0a09; --learn-bg: #182436; --learn-ink: #bcd4f2; --class-bg: #12271f; --class-ink: #aee5cc; --family-bg: #2c1d15; --family-ink: #f5c9ad }
@media (prefers-reduced-motion: reduce) { .sc-dot::after, .sc-hero .sc-card, .sc-wave i, .film-play .ic, .sc-typing i { animation: none } }
.no-js .sc-typing { display: none }
.lede-xl { font-size: clamp(19px, 1.9vw, 23px); color: var(--ink); opacity: .82 }
.pillar p { color: var(--muted); font-size: 16px }
.hero-home { padding-bottom: 72px }
@media (min-width: 980px) { .hero-home .hero-grid { grid-template-columns: .92fr 1.08fr } }
.hero .film-btn { margin-top: 6px }

.sc-rise { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out) }
.js .scene .sc-rise:not(.on) { opacity: 0; transform: translateY(24px) scale(.97) }
.scene.out .sc-rise.on { opacity: 0 !important }
.sc-hero .sc-card.on { animation: bob 8s ease-in-out 1s infinite }
.sc-slot.s2 .sc-who { text-align: end }
.hero-stage .sc-solo { max-width: 470px; font-size: 15.5px }
.hero-stage .sc-solo .sc-card { padding: 20px 22px 22px }
.sc-solo .sc-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--paper) }
.sec-ink .sc-solo .sc-card { background: #1c1917 }
.sc-solo .sc-board, .sec-ink .sc-solo .sc-board { background: #0f2e24 }
.sc-top { color: var(--ink); opacity: .72 }
@media (max-width: 719px) { .pillar .shot { width: 52% } .pillar { padding-bottom: 0 } }

/* ---------- review round: phone overflow, pre-launch banner, stacked tables, short forms, two doors ---------- */
html, body { overflow-x: clip }
.prelaunch { display: flex; gap: 12px; align-items: flex-start; max-width: 760px; margin: 0 auto 28px; padding: 14px 18px; border-radius: 14px; background: var(--family-bg); color: var(--family-ink); font-size: 15.5px; line-height: 1.5 }
.prelaunch .ic { flex: none; margin-top: 2px }
details.more { border-top: 1px dashed var(--line-2); padding-top: 12px }
details.more > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--purple-ink); list-style: none; display: inline-flex; gap: 8px; align-items: center }
details.more > summary::-webkit-details-marker { display: none }
details.more > summary::before { content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-size: 14px; line-height: 1 }
details.more[open] > summary::before { content: "−" }
details.more > .fields { margin-top: 14px }
@media (max-width: 719px) {
  .tbl.stack { min-width: 0 }
  .tbl.stack thead { display: none }
  .tbl.stack tr { display: grid; gap: 6px; padding: 16px 18px; border-bottom: 1px solid var(--line) }
  .tbl.stack tr:last-child { border-bottom: 0 }
  .tbl.stack th, .tbl.stack td { display: flex; justify-content: space-between; gap: 16px; padding: 0; border: 0; text-align: start }
  .tbl.stack td::before { content: attr(data-label); color: var(--muted); font-size: 13px; flex: none; max-width: 45% }
  .tbl.stack td { text-align: end; flex-wrap: wrap }
  .tbl.stack th[scope="row"] { font-size: 17px }
  .tbl.stack b { font-size: 22px }
}
.doors { display: grid; gap: 12px; width: 100%; max-width: 560px }
@media (min-width: 560px) { .doors { grid-template-columns: 1fr 1fr } }
.door { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; text-decoration: none; background: var(--btn-bg); color: var(--btn-ink); position: relative; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s }
.door small { font-size: 12.5px; opacity: .72; font-weight: 600; letter-spacing: .08em; text-transform: uppercase }
[dir="rtl"] .door small { letter-spacing: 0 }
.door b { font-size: 17px; display: flex; justify-content: space-between; align-items: center; gap: 8px }
.door:hover { color: var(--btn-ink); transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(12,10,9,.5) }
.door.alt { background: var(--paper); color: var(--ink); border: 1px solid var(--line-2) }
.door.alt:hover { color: var(--ink) }
.door .ic-arrow { transition: transform .3s var(--ease-out) } .door:hover .ic-arrow { transform: translateX(4px) }
[dir="rtl"] .door .ic-arrow { transform: scaleX(-1) } [dir="rtl"] .door:hover .ic-arrow { transform: scaleX(-1) translateX(4px) }
@media (max-width: 719px) { .hero .film-btn { padding-block: 6px; box-shadow: none } .hero .film-thumb { width: 56px; height: 34px } }

/* demo labels never below 12.5px */
.sc-top, .sc-row small, .sc-stats, .sc-board-q, .sc-voice, .sc-points b, .sc-score small, .sc-chip, .sc-help b { font-size: 12.5px }
.sc-who { font-size: 12.5px } .sc-day { font-size: 12px }

/* tap targets and small text (review) */
.icon-btn { width: 44px; height: 44px }
.chip { min-height: 40px }
.seg button { min-height: 44px }
.ft-col a, .ft-contact a, .ft-bottom a { display: inline-flex; padding-block: 8px }
.ft-col ul { gap: 2px }
.seg .badge { font-size: 12.5px }
.film-close { width: 44px; height: 44px }
.card-link .link-arrow, .feature-copy .link-arrow { min-height: 44px }
@media (max-width: 899px) { body:has(.sticky-cta.on) { padding-bottom: 84px } }
[dir="rtl"] .hero h1 .em { white-space: nowrap }
.field + .field, .fields > .two + .two { margin-top: 2px }

/* ---------- the event page (/meet) ---------- */
.meet-hero { padding-bottom: 40px }
.meet-who { display: grid; gap: 8px; justify-items: center; margin-top: 8px }
.team-on { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--class-bg); color: var(--class-ink); font-weight: 600; font-size: 14.5px }
.meet-body[data-aud="school"] .aud-family, .meet-body[data-aud="family"] .aud-school { display: none }
.meet-h2 { font-size: clamp(26px, 3.2vw, 38px) }
.video-inline video { width: 100%; height: 100%; background: #000 }
.deck-card { display: grid; gap: 18px; grid-template-columns: auto 1fr; align-items: start }
.deck-card .big { width: 40px; height: 40px; color: var(--purple-ink) }
@media (max-width: 560px) { .deck-card { grid-template-columns: 1fr } }
.page-meet .form-card .aud-tabs { display: none }
.page-meet .ft { margin-top: 0 }

/* ---------- webinars ---------- */
.when-chip { display: inline-flex; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 15px }
.when-chip .ic { color: var(--purple-ink) }
.agenda { display: grid; gap: 10px; counter-reset: none }
.agenda li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: baseline }
.agenda b { font-family: var(--display); font-weight: 300; font-size: 22px }
.sessions { display: grid; gap: 10px }
.sessions li { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line) }
.sessions small, .radio small { display: block; color: var(--muted); font-size: 13.5px }
.sess-date { width: 52px; height: 52px; border-radius: 14px; background: var(--grad); color: #fff; display: grid; place-items: center; align-content: center; flex: none; line-height: 1 }
.sess-date b { font-size: 20px } .sess-date small { color: #fff !important; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em }
fieldset.sess-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 8px }
fieldset.sess-pick legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0 }
.radio { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; background: var(--canvas) }
.radio:has(input:checked) { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(125,55,255,.14) }
.radio input { margin-top: 3px; accent-color: var(--purple); width: 18px; height: 18px; flex: none }
.track-card { gap: 12px }
.track-h { font-size: clamp(26px, 2.8vw, 34px) }
.webinar-bar { background: var(--btn-bg); color: var(--btn-ink); font-size: 14px }
.webinar-bar a { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 9px var(--gutter); text-decoration: none; color: inherit; flex-wrap: wrap; text-align: center }
.webinar-bar b { font-weight: 600 }
.webinar-bar .go { text-decoration: underline; text-underline-offset: 3px; font-weight: 600 }
.webinar-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; box-shadow: 0 0 0 0 rgba(244,63,94,.6); animation: live 2s infinite }
@keyframes live { 70% { box-shadow: 0 0 0 8px rgba(244,63,94,0) } 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0) } }
@media (prefers-reduced-motion: reduce) { .webinar-bar .dot { animation: none } }

/* Home: every tool in one place, as the study loop (learn → practise and test → see the gap close). A light runs
   along the rail and each step's number lights as it passes; module rows rise in once their step is in view. */
.suite .sec-head { margin-inline: auto }
.suite-flow { position: relative; --loop: 4.8s }
.suite-steps { list-style: none; margin: 0; padding: 20px 0 0; display: grid; gap: 40px }
.suite-step { --acc-bg: var(--learn-bg); --acc-ink: var(--learn-ink); position: relative; display: grid; gap: 20px; align-content: start; padding: 34px 20px 20px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(180deg, var(--acc-bg), var(--paper) 40%) }
.suite-step:nth-child(2) { --i: 1; --d: 2 } .suite-step:nth-child(3) { --i: 2; --d: 4 }
.suite-mods li:nth-child(2) { --k: 1 } .suite-mods li:nth-child(3) { --k: 2 } .suite-mods li:nth-child(4) { --k: 3 }
.suite-step.test { --acc-bg: color-mix(in srgb, var(--purple) 16%, var(--paper)); --acc-ink: var(--purple-ink) }
.suite-step.track { --acc-bg: var(--class-bg); --acc-ink: var(--class-ink) }
.suite-n { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--acc-ink); color: var(--acc-ink); font-weight: 700; font-size: 16px }
.suite-step-h { text-align: center; display: grid; gap: 4px }
.suite-step-h h3 { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -0.01em }
.suite-step-h p { color: var(--muted); font-size: 15.5px }
.suite-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.mod { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s }
.mod:hover { color: var(--ink); transform: translateY(-2px); border-color: var(--line-2); box-shadow: 0 14px 30px -20px rgba(12,10,9,.35) }
.mod-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--acc-bg); color: var(--acc-ink) }
.mod-ic .ic { width: 20px; height: 20px; transition: transform .35s var(--ease-spring) }
.mod:hover .mod-ic .ic { transform: scale(1.15) rotate(-6deg) }
.mod-t { flex: 1; min-width: 0; display: grid; gap: 2px }
.mod-t b { font-weight: 600; font-size: 16px; line-height: 1.3 }
.mod-t small { color: var(--muted); font-size: 14px; line-height: 1.45 }
.mod-go { flex: none; width: 16px; height: 16px; color: var(--faint); transition: transform .25s var(--ease-out), color .25s }
.mod:hover .mod-go { color: var(--acc-ink); transform: translateX(3px) }
[dir="rtl"] .mod-go { transform: scaleX(-1) } [dir="rtl"] .mod:hover .mod-go { transform: scaleX(-1) translateX(3px) }
.suite-loop { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: 32px auto 0; padding: 10px 18px; border-radius: 999px; background: var(--paper); border: 1px dashed var(--line-2); color: var(--muted); font-size: 15px; text-align: center }
.suite-loop .ic { flex: none; width: 18px; height: 18px; color: var(--purple-ink) }
.suite-rail { display: none }
.suite .center-text .link-arrow { min-height: 44px }
@media (max-width: 419px) { .suite-step { padding-inline: 14px } .mod { gap: 12px; padding: 12px } .mod-go { display: none } }
@media (min-width: 720px) and (max-width: 1099px) { .suite-mods { grid-template-columns: 1fr 1fr } }
@media (min-width: 1100px) {
  .suite-steps { grid-template-columns: repeat(3, 1fr); gap: 20px }
  .suite-rail { display: block; position: absolute; top: 19px; height: 2px; inset-inline: calc((100% - 40px) / 6); border-radius: 2px; background: var(--line-2); overflow: hidden }
  .suite-rail i { position: absolute; top: 0; inset-inline-start: 0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--purple), var(--violet), transparent); opacity: 0 }
}
@media (prefers-reduced-motion: no-preference) {
  .suite-rail i { animation: suite-run var(--loop) linear infinite }
  [dir="rtl"] .suite-rail i { animation-name: suite-run-rtl }
  .suite-n { animation: suite-node var(--loop) linear infinite; animation-delay: calc(var(--i, 0) * var(--loop) * .35) }
  .suite-loop .ic { animation: suite-spin 8s linear infinite }
  .js .suite-mods li { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms + 250ms + var(--k, 0) * 90ms) }
  .js .suite-step.in .suite-mods li { opacity: 1; transform: none }
}
@keyframes suite-run { 0% { transform: translateX(-50%); opacity: 0 } 6% { opacity: 1 } 70% { transform: translateX(283%); opacity: 1 } 76%, 100% { transform: translateX(283%); opacity: 0 } }
@keyframes suite-run-rtl { 0% { transform: translateX(50%); opacity: 0 } 6% { opacity: 1 } 70% { transform: translateX(-283%); opacity: 1 } 76%, 100% { transform: translateX(-283%); opacity: 0 } }
@keyframes suite-node { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--purple) 45%, transparent) } 14%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--purple) 0%, transparent) } }
@keyframes suite-spin { to { transform: rotate(360deg) } }
.tool:target { box-shadow: inset 0 0 0 2px var(--purple); background: color-mix(in srgb, var(--paper) 90%, var(--purple)) }

/* WhatsApp: a floating chat button on every page (above the phone call-to-action bar when it shows), with a label
   on hover for pointer users. It pops in once the page has settled and pulses three times, then stays still. */
.wa-float { position: fixed; inset-inline-end: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 39; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(7,94,84,.6), 0 2px 6px rgba(0,0,0,.14); transition: transform .3s var(--ease-spring), bottom .3s cubic-bezier(.2,.8,.2,1) }
/* landscape iPhones: keep clear of the notch and rounded corners (the page uses viewport-fit=cover) */
.wa-float { inset-inline-end: max(16px, env(safe-area-inset-right)) } [dir="rtl"] .wa-float { inset-inline-end: max(16px, env(safe-area-inset-left)) }
.menu-open .wa-float { opacity: 0; visibility: hidden }
.wa-float:hover { color: #fff; transform: scale(1.07) }
.wa-float:focus-visible { outline-offset: 4px }
.wa-float .ic { width: 28px; height: 28px }
.wa-tip { position: absolute; inset-inline-end: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--canvas); font-size: 14px; font-weight: 600; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease-out) }
[dir="rtl"] .wa-tip { transform: translate(-6px, -50%) }
.wa-float:hover .wa-tip, .wa-float:focus-visible .wa-tip { opacity: 1; transform: translate(0, -50%) }
@media (hover: none) { .wa-tip { display: none } }
@media (max-width: 899px) {
  .wa-float { width: 52px; height: 52px; inset-inline-end: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)) }
  [dir="rtl"] .wa-float { inset-inline-end: max(12px, env(safe-area-inset-left)) }
  .wa-float .ic { width: 26px; height: 26px }
  body:has(.sticky-cta.on) .wa-float { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 66px) }
}
@media (prefers-reduced-motion: no-preference) {
  .wa-float { animation: wa-in .6s var(--ease-spring) 1.2s backwards }
  .wa-float::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: wa-ring 2.4s ease-out 2.2s 3 }
}
@keyframes wa-in { from { opacity: 0; transform: translateY(16px) scale(.5) } }
@keyframes wa-ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55) } 75%, 100% { box-shadow: 0 0 0 16px rgba(37,211,102,0) } }
@media print { .wa-float { display: none } }