/* jointalyn.com. Tokens are the app's DS v2 Violet palette (frontend/src/app/globals.css):
   solid fills only, never gradients; soft shadows on cards; 14px cards, 10px buttons.
   Logical properties throughout so the Arabic page mirrors. The brand colour is one
   variable (--primary and its steps) so another palette is a one-block change. */

@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/manrope-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/manrope-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/manrope-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/fonts/manrope-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 800; src: url(/assets/fonts/manrope-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/noto-kufi-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/noto-kufi-arabic-arabic-500-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-display: swap; font-weight: 600; src: url(/assets/fonts/noto-kufi-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-display: swap; font-weight: 700; src: url(/assets/fonts/noto-kufi-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-display: swap; font-weight: 800; src: url(/assets/fonts/noto-kufi-arabic-arabic-800-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  /* Grounds and text */
  --bg: oklch(0.972 0.007 290);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.984 0.005 290);
  --surface-3: oklch(0.965 0.01 290);
  --fg: oklch(0.27 0.04 290);
  --fg-2: oklch(0.411 0.042 290);
  --muted: oklch(0.5 0.035 290);
  --faint: oklch(0.68 0.03 290);
  --border: oklch(0.935 0.012 290);
  --border-strong: oklch(0.9 0.016 290);
  /* Brand (Violet, the app's default palette) */
  --primary: oklch(0.56 0.218 281.9);
  --primary-hover: oklch(0.524 0.226 280.1);
  --primary-subtle: oklch(0.953 0.023 291.4);
  --primary-muted: oklch(0.892 0.056 293.1);
  --primary-emphasis: oklch(0.47 0.229 278.2);
  --on-primary: oklch(1 0 0);
  --gold: oklch(0.81 0.14 80);
  /* Ink, the app's dark sidebar */
  --ink: oklch(0.215 0.035 285);
  --ink-2: oklch(0.245 0.04 285);
  --ink-line: oklch(0.3 0.035 285);
  --ink-fg: oklch(0.955 0.01 285);
  --ink-muted: oklch(0.77 0.025 285);
  --ink-accent: oklch(0.8 0.1 285);
  --ink-3: oklch(0.31 0.06 285);
  /* The product picture's sidebar: white (crisp) unless the company theme tints it */
  --side: var(--surface); --side-fg: var(--fg-2); --side-border: var(--border); --side-heading: var(--fg);
  /* Fixed meaning colours (same in every palette) */
  --success: oklch(0.52 0.13 152); --success-subtle: oklch(0.965 0.03 152); --success-emphasis: oklch(0.42 0.11 152);
  --warning: oklch(0.79 0.15 75); --warning-subtle: oklch(0.972 0.04 85); --warning-emphasis: oklch(0.47 0.11 60);
  --info: oklch(0.55 0.11 235); --info-subtle: oklch(0.962 0.02 230); --info-emphasis: oklch(0.43 0.09 235);
  --neutral-subtle: oklch(0.955 0.006 262); --neutral-emphasis: oklch(0.36 0.022 262);
  --ai: oklch(0.48 0.16 300); --ai-subtle: oklch(0.962 0.022 300);
  --human: oklch(0.5 0.09 190); --human-subtle: oklch(0.962 0.02 190);
  --business: oklch(0.5 0.09 262); --business-subtle: oklch(0.962 0.02 262);
  --private: oklch(0.47 0.075 215); --private-subtle: oklch(0.962 0.018 215);
  --stage-0: oklch(0.86 0.03 285); --stage-1: oklch(0.74 0.06 285); --stage-2: oklch(0.58 0.08 285); --stage-3: oklch(0.4 0.09 285);
  /* Elevation */
  --shadow-xs: 0 1px 2px color-mix(in oklch, var(--fg) 6%, transparent);
  --shadow-card: 0 1px 2px color-mix(in oklch, var(--fg) 4%, transparent), 0 6px 20px -6px color-mix(in oklch, var(--fg) 8%, transparent);
  --shadow-float: 0 2px 6px color-mix(in oklch, var(--fg) 6%, transparent), 0 24px 48px -16px color-mix(in oklch, var(--fg) 22%, transparent);
  --shadow-window: 0 2px 8px color-mix(in oklch, var(--fg) 5%, transparent), 0 40px 80px -24px color-mix(in oklch, var(--fg) 26%, transparent);
  --font: "Manrope", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--fg); background: var(--surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }
img, svg { display: block; }
.icon { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .flip { transform: scaleX(-1); }
::selection { background: var(--primary-muted); color: var(--fg); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--fg); color: var(--surface); font-weight: 700; }
.skip-link:focus { top: 12px; }

/* Arabic: Kufi sits taller and must never be letter-spaced (it breaks the joins) */
:lang(ar) { letter-spacing: 0 !important; }
[dir="rtl"] body { line-height: 1.8; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn .icon { width: 18px; height: 18px; }
.btn-lg { height: 52px; padding: 0 24px; font-size: 16px; border-radius: 12px; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 1px 2px color-mix(in oklch, var(--primary-emphasis) 30%, transparent); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { border-color: var(--primary-muted); color: var(--primary-emphasis); }
.btn-ghost { color: var(--fg); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-light { background: var(--surface); color: var(--primary-emphasis); }
.btn-light:hover { background: var(--primary-subtle); }
.btn-outline-light { color: var(--on-primary); border-color: oklch(1 0 0 / 0.4); }
.btn-outline-light:hover { background: oklch(1 0 0 / 0.1); border-color: oklch(1 0 0 / 0.7); }
.btn:focus-visible { outline-offset: 2px; border-radius: 12px; }
.cta .btn:focus-visible { outline-color: var(--on-primary); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklch, var(--bg) 86%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: background-color .2s, border-color .2s; }
.site-header.scrolled { background: color-mix(in oklch, var(--surface) 90%, transparent); border-bottom-color: var(--border); }
.header-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.025em; color: var(--fg); }
.brand .mark { width: 34px; height: 34px; }
.mark .m-tile { fill: var(--primary); }
.mark .m-letter { fill: var(--on-primary); }
.mark .m-dot { fill: var(--gold); }
.nav { display: flex; gap: 2px; }
.nav a { padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--fg-2); transition: background-color .15s, color .15s; }
.nav a:hover { background: color-mix(in oklch, var(--fg) 5%, transparent); color: var(--fg); }
.header-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.lang-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--fg-2); }
.lang-link:hover { background: color-mix(in oklch, var(--fg) 5%, transparent); color: var(--fg); }
.lang-link .icon { width: 18px; height: 18px; }
.header-actions .btn-primary { margin-inline-start: 4px; }
.menu-btn { display: none; width: 44px; height: 44px; margin-inline-end: -8px; border: 0; border-radius: 10px; background: transparent; color: var(--fg); cursor: pointer; align-items: center; justify-content: center; }
.menu-btn .icon { width: 24px; height: 24px; }
.menu-btn .i-close, .site-header.open .menu-btn .i-open { display: none; }
.site-header.open .menu-btn .i-close { display: block; }
.mobile-menu { border-top: 1px solid var(--border); background: var(--surface); }
.mobile-menu nav { display: flex; flex-direction: column; padding-block: 12px 20px; }
.mobile-menu nav > a { padding: 14px 4px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--border); }
.mobile-menu .lang-link { padding-inline: 4px; height: 52px; font-size: 16px; }
.mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.mobile-actions .btn { min-width: 0; padding: 0 12px; }
@media (max-width: 560px) { .mobile-actions { grid-template-columns: 1fr; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: 76px 0; background: var(--bg); overflow: clip; }
.hero::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 236px; background: var(--surface); }
.hero-copy { position: relative; z-index: 1; max-width: 920px; margin-inline: auto; text-align: center; }
.eyebrow-chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-xs); font-size: 14px; font-weight: 700; color: var(--fg-2); }
[dir="rtl"] .eyebrow-chip { padding: 7px 12px 7px 14px; }
.eyebrow-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px oklch(0.81 0.14 80 / 0.22); }
.hero h1 { margin-top: 26px; font-size: clamp(2.5rem, 1.15rem + 4.6vw, 4.65rem); line-height: 1.03; font-weight: 800; letter-spacing: -0.042em; text-wrap: balance; }
.hero h1 .accent { color: var(--primary); }
[dir="rtl"] .hero-copy { max-width: 1080px; }
[dir="rtl"] .hero h1 { font-size: clamp(2rem, 1rem + 3.3vw, 3.4rem); line-height: 1.42; }
.hero .lead { max-width: 700px; margin: 26px auto 0; font-size: clamp(1.06rem, 0.98rem + 0.34vw, 1.24rem); line-height: 1.62; color: var(--muted); text-wrap: pretty; }
[dir="rtl"] .hero .lead { line-height: 1.95; }
.hero-ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.proof { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font-size: 14.5px; font-weight: 600; color: var(--fg-2); }
.proof li { display: inline-flex; align-items: center; gap: 8px; }
.proof .icon { width: 18px; height: 18px; color: var(--success); }

.stage { position: relative; z-index: 1; max-width: 1160px; margin: 64px auto 0; padding-bottom: 132px; }
.hero + .section { padding-top: 88px; }

/* ---------- The product window ---------- */
.window { position: relative; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--bg); box-shadow: var(--shadow-window); overflow: hidden; font-size: 13px; line-height: 1.45; text-align: start; user-select: none; }
.win-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.win-dots { display: flex; gap: 7px; }
.win-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.win-dots.ghost { visibility: hidden; }
.win-url { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 14px; border-radius: 8px; background: var(--surface-3); color: var(--muted); font-size: 12.5px; font-weight: 600; direction: ltr; }
.win-url .icon { width: 13px; height: 13px; }
.app { display: grid; grid-template-columns: 236px 1fr; grid-template-rows: minmax(0, 1fr); height: 712px; }
.app .icon { width: 17px; height: 17px; }
.app-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; background: var(--side); border-inline-end: 1px solid var(--side-border); overflow: hidden; }
.app-brand { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; }
.app-brand .mark { width: 32px; height: 32px; }
.app-brand b { display: block; color: var(--side-heading); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.app-brand small { display: block; font-size: 12px; color: var(--muted); }
.app-nav li { display: flex; align-items: center; gap: 11px; height: 34px; padding: 0 10px; border-radius: 8px; color: var(--side-fg); font-size: 13.5px; font-weight: 600; }
.app-nav li.on { background: var(--primary); color: var(--on-primary); }
.app-nav li em { margin-inline-start: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--primary-subtle); color: var(--primary-emphasis); font-size: 11.5px; font-style: normal; font-weight: 700; text-align: center; }
.app-nav .chev { width: 14px; height: 14px; margin-inline-start: auto; color: var(--faint); }
.app-group { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; padding: 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.app-group::after { content: ""; flex: 1; height: 1px; background: var(--side-border); }
.app-my { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px; border-radius: 12px; background: var(--primary-subtle); }
.app-my > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--surface); color: var(--primary); }
.app-my b { display: block; font-size: 13px; color: var(--primary-emphasis); }
.app-my small { display: block; font-size: 11.5px; color: var(--primary-emphasis); opacity: .85; }
.app-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; padding: 14px 18px 18px; }
.app-top { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.app-search { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; width: 290px; height: 36px; padding: 0 10px; border-radius: 10px; background: var(--surface-3); color: var(--muted); }
.app-search kbd { margin-inline-start: auto; padding: 1px 6px; border-radius: 5px; background: var(--surface); color: var(--muted); font: 600 11px ui-monospace, "JetBrains Mono", monospace; direction: ltr; }
.app-ask { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--primary-muted); border-radius: 10px; background: var(--primary-subtle); color: var(--primary-emphasis); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.app-ask .icon { color: var(--ai); }
.app-spacer { flex: 1; }
.app-bell { position: relative; display: grid; place-items: center; width: 34px; height: 34px; color: var(--fg-2); }
.app-bell i { position: absolute; top: 6px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: 50%; background: oklch(0.53 0.19 27); box-shadow: 0 0 0 2px var(--surface); }
.app-user { display: flex; align-items: center; gap: 9px; padding-inline-start: 12px; border-inline-start: 1px solid var(--border); }
.app-user .av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: 12.5px; font-weight: 800; }
.app-user .who b { display: block; font-size: 13px; line-height: 1.2; }
.app-user .who small { display: block; font-size: 11.5px; color: var(--muted); }
.app-user > .icon { width: 15px; height: 15px; color: var(--faint); }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 2px 2px 0; }
.app-head b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.app-head p { margin-top: 3px; color: var(--fg-2); font-size: 13px; }
.app-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.app-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.app-tile { display: flex; flex-direction: column; min-width: 0; padding: 16px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); }
.t-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.t-row > div { min-width: 0; }
.t-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; }
.t-icon .icon { width: 19px; height: 19px; }
.tone-primary { background: var(--primary-subtle); color: var(--primary); }
.tone-info { background: var(--info-subtle); color: var(--info); }
.tone-warning { background: var(--warning-subtle); color: var(--warning-emphasis); }
.tone-success { background: var(--success-subtle); color: var(--success); }
.app-tile small { display: block; color: var(--fg-2); font-size: 12.5px; line-height: 1.3; }
.app-tile b { display: block; white-space: nowrap; margin-top: 3px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.app-tile p { margin-top: auto; padding-top: 10px; margin-block-start: auto; padding-top: 10px; border-top: 1px dashed var(--border-strong); color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-panels { display: grid; grid-template-columns: 1.32fr 1fr; gap: 14px; min-height: 0; flex: 1; }
.app-panel { min-height: 0; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden; }
.ph { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.ph b { font-size: 14.5px; font-weight: 800; }
.ph .count { padding: 1px 8px; border-radius: 999px; background: var(--primary-subtle); color: var(--primary-emphasis); font-size: 11.5px; font-weight: 700; }
.ph-link { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; color: var(--primary); font-weight: 700; font-size: 12.5px; }
.ph-link .icon { width: 14px; height: 14px; }
.ph .scope { margin-inline-start: auto; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--fg-2); font-size: 11.5px; font-weight: 600; }
.app-rows li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.app-rows li:last-child { border-bottom: 0; }
.r-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--primary-subtle); color: var(--primary); }
.r-icon .icon { width: 16px; height: 16px; }
.app-rows div { min-width: 0; flex: 1; }
.app-rows b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-rows p { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--muted); font-size: 11.5px; }
.r-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-3); color: var(--fg-2); font-weight: 600; }
.app-rows .chev { width: 15px; height: 15px; color: var(--faint); }
.app-cap { display: flex; flex-direction: column; }
.stages { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.stages li { display: grid; grid-template-columns: 92px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; }
.s-label { color: var(--fg-2); font-weight: 600; white-space: nowrap; }
.s-val { text-align: end; font-weight: 700; white-space: nowrap; }
.s-track, .fn-track, .p-track, .dual-track, .mini-track, .mt-ready .bar { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.s-track i, .fn-track i, .p-track i, .dual-track i, .mini-track i, .mt-ready .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: inherit; }
.s-0 { background: var(--stage-0); } .s-1 { background: var(--stage-1); } .s-2 { background: var(--stage-2); } .s-3 { background: var(--stage-3); }
.pair { display: none; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; padding: 14px 18px 16px; border-top: 1px solid var(--border); }
.p-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; font-size: 12px; color: var(--fg-2); font-weight: 600; }
.p-item b { font-size: 16px; color: var(--fg); }
.p-item .p-track { grid-column: 1 / -1; height: 8px; }
.p-human .p-track i { background: var(--human); } .p-business .p-track i { background: var(--business); }

/* Ask Talyn, floating over the window's corner */
.ask-card { position: absolute; z-index: 2; inset-inline-end: -36px; bottom: 0; width: 372px; padding: 18px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-float); font-size: 13.5px; line-height: 1.5; text-align: start; }
.ask-head { display: flex; align-items: center; gap: 10px; }
.ask-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ai-subtle); color: var(--ai); }
.ask-icon .icon { width: 18px; height: 18px; }
.ask-head b { display: block; font-size: 14.5px; line-height: 1.2; }
.ask-head small { display: block; font-size: 12px; color: var(--muted); }
.ask-q { width: fit-content; max-width: 88%; margin: 14px 0 0 auto; padding: 9px 13px; border-radius: 14px 14px 4px 14px; background: var(--primary); color: var(--on-primary); font-weight: 600; }
[dir="rtl"] .ask-q { margin: 14px auto 0 0; border-radius: 14px 14px 14px 4px; }
.ask-body { display: grid; margin-top: 12px; }
.ask-body > * { grid-area: 1 / 1; }
.ask-a { color: var(--fg); }
.ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.chip-neutral { background: var(--neutral-subtle); color: var(--neutral-emphasis); }
.chip-info { background: var(--info-subtle); color: var(--info-emphasis); }
.chip-warning { background: var(--warning-subtle); color: var(--warning-emphasis); }
.chip-success { background: var(--success-subtle); color: var(--success-emphasis); }
.chip-plain { height: 38px; padding: 0 16px; background: var(--surface-3); color: var(--fg); font-size: 14.5px; font-weight: 600; }

/* ---------- Sections ---------- */
.section { padding-block: 120px; background: var(--surface); }
.section.alt { background: var(--bg); }
.section-tight { padding-block: 96px; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--primary); font-size: 15px; font-weight: 800; }
.eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
.section-head h2, .cta h2 { font-size: clamp(2rem, 1.3rem + 2.3vw, 3.1rem); line-height: 1.08; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
[dir="rtl"] .section-head h2, [dir="rtl"] .cta h2 { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.65rem); line-height: 1.45; }
.section-lead { margin-top: 18px; font-size: 18.5px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
[dir="rtl"] .section-lead { font-size: 17.5px; line-height: 1.95; }
.card { border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }

/* Platform */
.modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.module { display: flex; flex-direction: column; padding: 26px 24px 28px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); }
.module .tile { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--primary); color: var(--on-primary); }
.module .tile .icon { width: 22px; height: 22px; }
.module .pillar { margin-top: 22px; color: var(--primary); font-size: 13px; font-weight: 700; }
.module h3 { margin-top: 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; }
.module p:last-child { margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }
[dir="rtl"] .module h3 { line-height: 1.6; }
[dir="rtl"] .module p:last-child { line-height: 1.85; }
.foundation { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 16px; padding: 28px 32px; border-radius: 18px; background: var(--primary-subtle); }
.f-head h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; color: var(--primary-emphasis); }
.f-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.f-head p { color: var(--fg-2); font-size: 14.5px; }
.foundation ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 24px; border-top: 1px solid var(--primary-muted); }
.foundation li { display: flex; gap: 12px; align-items: flex-start; }
.f-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--surface); color: var(--primary); box-shadow: var(--shadow-xs); }
.f-icon .icon { width: 19px; height: 19px; }
.foundation b { display: block; font-size: 15px; line-height: 1.35; }
.foundation p { margin-top: 4px; color: var(--fg-2); font-size: 13.5px; line-height: 1.55; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { padding: 28px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--primary-subtle); color: var(--primary); }
.step-icon .icon { width: 22px; height: 22px; }
.step-num { font-size: 15px; font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 22px; font-size: 19px; font-weight: 800; letter-spacing: -0.015em; }
.step p { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }
[dir="rtl"] .step p { line-height: 1.85; }
.evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ev { padding: 32px; }
.ev-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ev-head h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; }
.tag { padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--fg-2); font-size: 12.5px; font-weight: 700; }
.ev > p { margin-top: 8px; max-width: 520px; color: var(--muted); font-size: 15.5px; }
[dir="rtl"] .ev > p { line-height: 1.85; }
.funnel { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.funnel li { display: grid; grid-template-columns: 150px 1fr 82px; align-items: center; gap: 14px; }
.fn-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.fn-label i { width: 10px; height: 10px; border-radius: 3px; }
.fn-track { height: 14px; }
.funnel b { text-align: end; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.realized { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: 12px; color: var(--fg-2); font-size: 14.5px; }
.realized .icon { color: var(--success); }
.realized b { color: var(--fg); }
.realized span { margin-inline-start: auto; color: var(--muted); font-weight: 600; text-align: end; }
.dual { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.dual-side { padding: 20px; border-radius: 14px; }
.d-human { background: var(--human-subtle); --tone: var(--human); }
.d-business { background: var(--business-subtle); --tone: var(--business); }
.dual-label { color: var(--tone); font-size: 14px; font-weight: 800; }
.dual-value { margin-top: 2px; font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.dual-value span { margin-inline-start: 4px; font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.dual-track { margin-top: 12px; background: oklch(1 0 0 / 0.8); }
.dual-track i, .dual-side .mini-track i { background: var(--tone); }
.dual-side ul { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.dual-side li { display: grid; grid-template-columns: 1fr 64px 26px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-2); font-weight: 600; }
.dual-side li b { text-align: end; color: var(--fg); font-variant-numeric: tabular-nums; }
.mini-track { height: 6px; background: oklch(1 0 0 / 0.8); }

/* My Talyn */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split .section-head { margin-bottom: 36px; }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.pt-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--primary-subtle); color: var(--primary); }
.pt-icon .icon { width: 20px; height: 20px; }
.points h3 { font-size: 16px; font-weight: 800; line-height: 1.35; }
.points p { margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
[dir="rtl"] .points p { line-height: 1.85; }
.mt-stage { position: relative; padding: 92px 0 96px; padding-inline-start: 40px; }
.mt-stage::before { content: ""; position: absolute; inset: 0; inset-inline-start: 80px; border-radius: 28px; background: var(--bg); }
.mt-card { position: relative; padding: 22px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-window); font-size: 13.5px; line-height: 1.45; }
.mt-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--private-subtle); color: var(--private); font-size: 12.5px; }
.mt-pill .icon { width: 15px; height: 15px; }
.mt-pill span { opacity: .9; font-weight: 600; }
.mt-direction { margin-top: 18px; padding: 20px; border: 1px solid var(--primary-muted); border-radius: 14px; background: var(--primary-subtle); }
.mt-direction small { display: block; color: var(--primary); font-weight: 700; font-size: 12.5px; }
.mt-direction > b { display: block; margin-top: 2px; color: var(--primary-emphasis); font-size: 23px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.mt-direction > span { display: block; margin-top: 4px; color: var(--fg-2); font-weight: 600; }
.mt-ready { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 10px; background: var(--surface); }
.mt-ready > span:first-child { font-weight: 700; color: var(--fg-2); }
.mt-ready .bar { height: 8px; }
.mt-ready .bar i { background: var(--primary); }
.mt-skills { margin-top: 18px; }
.mt-skills small { display: block; margin-bottom: 6px; font-weight: 700; color: var(--fg-2); font-size: 12.5px; }
.mt-skills li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-weight: 600; }
.mt-skills li:last-child { border-bottom: 0; padding-bottom: 0; }
.mt-opp { position: absolute; inset-inline-start: 0; bottom: 20px; display: flex; align-items: center; gap: 12px; width: min(360px, 82%); padding: 14px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-float); font-size: 13px; line-height: 1.4; }
.o-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: var(--warning-subtle); color: var(--warning-emphasis); }
.o-icon .icon { width: 19px; height: 19px; }
.mt-opp div { flex: 1; min-width: 0; }
.mt-opp small { display: block; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.mt-opp b { display: block; font-size: 14px; }
.mt-opp div > span { display: block; color: var(--fg-2); font-size: 12px; }
.mt-opp .app-btn { height: 32px; padding: 0 14px; font-size: 13px; }
.mt-mentor { position: absolute; inset-inline-end: -16px; top: 14px; display: flex; gap: 10px; width: 270px; padding: 14px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-float); font-size: 12.5px; line-height: 1.45; }
.mt-mentor b { display: block; font-size: 13px; }
.mt-mentor p { margin-top: 2px; color: var(--fg-2); }
[dir="rtl"] .mt-mentor, [dir="rtl"] .mt-opp, [dir="rtl"] .mt-card { line-height: 1.7; }

/* Trust */
.section.ink { background: var(--ink); color: var(--ink-fg); }
.ink .eyebrow { color: var(--ink-accent); }
.ink .section-lead { color: var(--ink-muted); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--ink-line); border-radius: 20px; background: var(--ink-line); overflow: hidden; }
.trust-grid li { padding: 30px 28px 32px; background: var(--ink-2); }
.tr-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ink-3); color: var(--ink-accent); }
.tr-icon .icon { width: 20px; height: 20px; }
.trust-grid h3 { margin-top: 20px; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink-fg); }
.trust-grid p { margin-top: 8px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; }
[dir="rtl"] .trust-grid p { line-height: 1.85; }

/* Integrations and languages */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-card { padding: 36px; }
.duo-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--primary-subtle); color: var(--primary); }
.duo-icon .icon { width: 22px; height: 22px; }
.h2-sm { margin-top: 22px; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.duo-card > p { margin-top: 10px; color: var(--muted); font-size: 16px; }
[dir="rtl"] .duo-card > p { line-height: 1.9; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }
.lang-sample { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.lang-sample small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.lang-sample .icon { width: 17px; height: 17px; }
.lang-sample b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.lang-sample[dir="rtl"] b, .lang-sample[dir="rtl"] { line-height: 1.5; }

/* Closing band */
.cta-section { padding-block: 0 120px; background: var(--bg); }
.cta { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; min-height: 400px; border-radius: 28px; background: var(--primary); color: var(--on-primary); overflow: hidden; }
.cta-copy { align-self: center; padding: 64px; }
.cta h2 { color: var(--on-primary); }
.cta-copy p { max-width: 520px; margin-top: 18px; font-size: 18px; line-height: 1.6; color: oklch(1 0 0 / 0.86); }
[dir="rtl"] .cta-copy p { line-height: 1.9; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.cta-art { align-self: end; padding-inline-start: 24px; }
.stair { width: 100%; height: auto; }
[dir="rtl"] .stair { transform: scaleX(-1); }
.stair .a-soft { fill: oklch(1 0 0 / 0.1); }
.stair .a-mid { fill: oklch(1 0 0 / 0.25); }
.stair .a-tint { fill: var(--primary-muted); }
.stair .a-white { fill: var(--on-primary); }
.stair .a-gold { fill: var(--gold); }
.stair .a-deep { fill: color-mix(in oklch, var(--fg) 40%, transparent); }
.stair .a-brand { fill: var(--primary); }

/* Footer */
.site-footer { padding-block: 72px 36px; background: var(--surface); border-top: 1px solid var(--border); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { max-width: 300px; margin-top: 14px; color: var(--muted); font-size: 15px; }
.foot-brand .btn { margin-top: 22px; }
.foot-title { margin-bottom: 14px; font-size: 14px; font-weight: 800; }
.foot-col li + li { margin-top: 10px; }
.foot-col a { color: var(--fg-2); font-size: 15px; }
.foot-col a:hover { color: var(--primary-emphasis); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.foot-bottom .lang-link { margin-inline-end: -12px; }

/* 404 */
.nf { background: var(--bg); }
.nf-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; min-height: 100vh; padding-block: 48px; text-align: center; }
.nf-code { font-size: 96px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: var(--primary); }
.nf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: min(760px, 100%); }
.nf-block { padding: 32px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); }
.nf-block h1 { font-size: 24px; font-weight: 800; }
.nf-block p { margin: 8px 0 22px; color: var(--muted); }

/* ---------- Reveal on scroll (only once site.js has run) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .08s; } .js .reveal.d2 { transition-delay: .16s; } .js .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Breakpoints ---------- */
@media (max-width: 1280px) {
  .ask-card { inset-inline-end: 20px; }
  .mt-mentor { inset-inline-end: 0; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .header-actions .lang-link, .header-actions .btn-ghost { display: none; }
  .menu-btn { display: inline-flex; }
  .modules { grid-template-columns: repeat(2, 1fr); }
  .foundation { grid-template-columns: 1fr; gap: 22px; }
  .foundation ul { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .app { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .app-side { display: none; }
  .app-panels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .mt-stage { max-width: 620px; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .section { padding-block: 88px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .evidence, .duo { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .cta-copy { padding: 48px 40px 8px; }
  .cta-art { width: min(520px, 100%); margin-inline-start: auto; }
  .app-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pair { display: grid; }
  .app-search { width: auto; flex: 1; }
  .app-search kbd, .app-user .who, .app-user > .icon { display: none; }
  .app-spacer { display: none; }
  .ask-card { position: relative; inset: auto; width: min(400px, calc(100% - 32px)); margin: -20px auto 0; }
  [dir="rtl"] .ask-card { margin: -20px auto 0; }
  .stage { padding-bottom: 0; }
  .hero::after { height: 120px; }
}
@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .hero { padding-top: 48px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .proof { flex-direction: column; align-items: center; gap: 8px; }
  .stage { margin-top: 48px; }
  .app-panels { grid-template-columns: 1fr; }
  .app-cap { display: none; }
  .app-rows li:nth-child(n + 4), .app-tile:nth-child(n + 3) { display: none; }
  .mt-pill span { display: none; }
  .t-icon { display: none; }
  .app-head .app-btn { display: none; }
  .app-ask span { display: none; }
  .app-ask { padding: 0 9px; }
  .win-url { font-size: 11.5px; }
  .modules, .steps, .points, .foundation ul, .trust-grid, .dual, .langs { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 40px; }
  .section-lead { font-size: 17px; }
  .module, .step { padding: 24px; }
  .ev, .duo-card { padding: 26px 22px; }
  .funnel li { grid-template-columns: 1fr 72px; gap: 6px 12px; }
  .funnel .fn-track { grid-column: 1 / -1; grid-row: 2; }
  .funnel b { grid-row: 1; grid-column: 2; }
  .mt-stage { padding: 72px 0 116px; }
  .mt-stage::before { inset-inline-start: 24px; }
  .mt-mentor { inset-inline-end: 0; width: min(270px, 86%); }
  .mt-opp { width: min(340px, 94%); }
  .cta { border-radius: 22px; }
  .cta-copy { padding: 40px 26px 8px; }
  .cta-actions .btn { flex: 1 1 100%; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-bottom { flex-direction: column-reverse; align-items: flex-start; }
  .nf-pair { grid-template-columns: 1fr; }
}

/* ---------- Scenes ----------
   site.js adds .v-on to a scene's root and steps it through state classes (s-*).
   Without .v-on (no JavaScript, reduced motion) every picture shows its end state. */
[data-count] { display: inline-block; }
.v-instant, .v-instant * { transition: none !important; }
.app-rows { overflow: hidden; }
.bump { animation: bump .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes bump { 40% { transform: scale(1.22); } }

/* Hero: Ask Talyn answers, the cited hours light up, the approval arrives */
.ask-thinking { display: flex; align-items: center; gap: 5px; align-self: start; visibility: hidden; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ask-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai); animation: think 1s infinite ease-in-out; }
.ask-thinking i:nth-child(2) { animation-delay: .15s; }
.ask-thinking i:nth-child(3) { animation-delay: .3s; }
.ask-thinking span { margin-inline-start: 6px; }
@keyframes think { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
.v-on.s-think .ask-thinking { visibility: visible; }
.ask-rest { visibility: hidden; }
.v-on .ask-q { transition: opacity .3s; }
.v-on:not(.s-q) .ask-q { opacity: 0; }
.v-on .ask-a, .v-on .ask-chips .chip { transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .2, 1); }
.v-on:not(.s-a) .ask-a { opacity: 0; transform: translateY(6px); }
.v-on:not(.s-chips) .ask-chips .chip { opacity: 0; transform: translateY(6px) scale(.96); }
.v-on.s-chips .ask-chips .chip:nth-child(2) { transition-delay: .14s; }
.v-on.s-chips .ask-chips .chip:nth-child(3) { transition-delay: .28s; }
.s-cited { border-radius: 8px; transition: background-color .4s, box-shadow .4s; }
.v-on.s-hl .s-cited { background: var(--ai-subtle); box-shadow: 0 0 0 6px var(--ai-subtle); }
.v-on.s-hl .s-cited .s-label, .v-on.s-hl .s-cited .s-val { color: var(--ai); }
.app-rows li.row-new { max-height: 90px; overflow: hidden; background: var(--primary-subtle); }
.app-rows li.row-new .r-icon { background: var(--surface); }
.v-on .app-rows li.row-new { transition: max-height .6s cubic-bezier(.2, .7, .2, 1), padding .6s cubic-bezier(.2, .7, .2, 1), opacity .5s .15s, border-width .6s; }
.v-on:not(.s-row) .app-rows li.row-new { max-height: 0; padding-block: 0; opacity: 0; border-bottom-width: 0; }

/* How it works: the player walks the six steps and fills the evidence */
.player { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.player[hidden] { display: none; }
.play-btn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--fg); box-shadow: var(--shadow-xs); cursor: pointer; }
.play-btn:hover { border-color: var(--primary-muted); color: var(--primary-emphasis); }
.play-btn .icon { width: 16px; height: 16px; }
.play-btn .i-play, .paused .play-btn .i-pause { display: none; }
.paused .play-btn .i-play { display: block; }
.player-dots { display: flex; flex: 1; gap: 6px; max-width: 420px; }
.player-dots li { flex: 1; }
.player-dots button { display: flex; align-items: center; width: 100%; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.player-dots span { position: relative; display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--border-strong); overflow: hidden; }
.player-dots span::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: inherit; background: var(--primary); }
.player-dots li.done span::after { width: 100%; }
.player-dots li.on span::after { animation: fillbar 3200ms linear forwards; }
.paused .player-dots li.on span::after { animation-play-state: paused; }
@keyframes fillbar { to { width: 100%; } }
.player-label { color: var(--fg-2); font-size: 14px; font-weight: 700; white-space: nowrap; }
.v-on .step { transition: box-shadow .35s, background-color .35s; }
.v-on .step-icon, .v-on .step-num { transition: background-color .35s, color .35s; }
.v-on .step.on { box-shadow: 0 0 0 2px var(--primary), var(--shadow-float); }
.v-on .step.on .step-icon { background: var(--primary); color: var(--on-primary); }
.v-on .step.on .step-num { color: var(--primary); }
.fn-track i, .dual-track i, .mini-track i, .mt-ready .bar i { transition: width 1.1s cubic-bezier(.2, .7, .2, 1); }

/* My Talyn: a skill gets assessed, readiness rises, the mentor and an opportunity follow */
.mt-skills li.sk-live { margin-inline: -8px; padding-inline: 8px; border-radius: 8px; }
.sk-live.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: var(--success-subtle); } 100% { background: transparent; } }
.v-on .mt-mentor, .v-on .mt-opp { transition: opacity .5s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.v-on:not(.s-mentor) .mt-mentor { opacity: 0; transform: translateY(-8px); }
.v-on:not(.s-opp) .mt-opp { opacity: 0; transform: translateY(10px); }

/* Trust: the audit log grows one hash-chained event at a time */
.chain { margin-top: 16px; padding: 22px 24px 24px; border: 1px solid var(--ink-line); border-radius: 20px; background: var(--ink-2); }
.chain-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.chain-title { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-fg); font-weight: 800; }
.chain-title .icon { color: var(--ink-accent); }
.chain-status { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: oklch(0.52 0.13 152 / 0.2); color: oklch(0.82 0.12 152); font-size: 13px; font-weight: 700; transition: background-color .3s, color .3s; }
.chain-status .icon { width: 16px; height: 16px; }
.chain-status.checking { background: var(--ink-3); color: var(--ink-muted); }
.chain-blocks { --gap: 28px; display: flex; gap: var(--gap); overflow: hidden; padding: 2px; margin: -2px; }
.chain-blocks li { position: relative; flex: 0 0 calc((100% - 3 * var(--gap)) / 4); min-width: 0; padding: 14px 16px; border: 1px solid var(--ink-line); border-radius: 14px; background: var(--ink); transition: transform .65s cubic-bezier(.2, .7, .2, 1), border-color 1.2s; }
.chain-blocks li + li::before { content: ""; position: absolute; top: 50%; inset-inline-end: calc(100% + 1px); width: var(--gap); height: 2px; background: var(--ink-line); }
.chain-blocks.shift li { transform: translateX(calc(-100% - var(--gap))); }
[dir="rtl"] .chain-blocks.shift li { transform: translateX(calc(100% + var(--gap))); }
.chain-blocks.no-anim li { transition: none; }
.chain-blocks li.fresh { border-color: var(--ink-accent); }
.chain-blocks b { display: block; overflow: hidden; color: var(--ink-fg); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.chain-blocks span { display: block; margin-top: 2px; overflow: hidden; color: var(--ink-muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.chain-blocks code { display: inline-block; margin-top: 10px; padding: 2px 8px; border-radius: 6px; background: var(--ink-3); color: var(--ink-accent); font: 600 12px ui-monospace, "JetBrains Mono", Consolas, monospace; direction: ltr; }
@media (max-width: 900px) {
  .chain-blocks li { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 720px) {
  .player-dots { max-width: none; }
  .player-label { display: none; }
  .chain { padding: 18px; }
  .chain-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Company theme: indigo, tinted sidebar (from frontend/src/app/globals.css) */
:root{--bg:oklch(0.972 0.005 262);--surface:oklch(1 0 0);--surface-2:oklch(0.984 0.003 262);--surface-3:oklch(0.965 0.007 262);--fg:oklch(0.27 0.028 262);--fg-2:oklch(0.411 0.029 262);--muted:oklch(0.52 0.025 262);--faint:oklch(0.72 0.021 262);--border:oklch(0.935 0.008 262);--border-strong:color-mix(in oklch, oklch(0.935 0.008 262), oklch(0.27 0.028 262) 7%);--primary:oklch(0.50 0.18 262);--primary-hover:oklch(0.45 0.18 262);--primary-subtle:oklch(0.965 0.025 262);--primary-muted:oklch(0.90 0.05 262);--primary-emphasis:oklch(0.42 0.19 262);--on-primary:oklch(1 0 0);--ink:oklch(0.215 0.035 262);--ink-2:color-mix(in oklch, oklch(0.215 0.035 262), oklch(0.265 0.04 262) 60%);--ink-3:oklch(0.31 0.06 262);--ink-line:oklch(0.3 0.035 262);--ink-fg:oklch(0.935 0.01 262);--ink-muted:oklch(0.75 0.02 262);--ink-accent:oklch(0.8 0.1 262);--ai:oklch(0.50 0.18 262);--ai-subtle:oklch(0.965 0.025 262);--side:oklch(0.972 0.01 262);--side-fg:oklch(0.4 0.025 262);--side-border:oklch(0.9 0.008 262);--side-heading:oklch(0.27 0.028 262)}
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}