/* ==========================================================================
   FERDY.COM DESIGN SYSTEM v1.0
   Tokens -> Base -> Layout -> Components -> Utilities -> Motion -> Responsive
   Every value here maps to an Elementor Global Style or Container setting.
   See ELEMENTOR-BUILD-SPEC.md
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand: dark blue / blue-purple / orange */
  --ink:            #080C24;
  --ink-2:          #0E1433;
  --ink-3:          #171E48;
  --navy:           #1B2464;

  --brand:          #4A5BF7;
  --brand-600:      #3A46D8;
  --brand-700:      #2C35AC;
  --brand-100:      #E8EAFE;
  --brand-50:       #F2F3FF;

  --violet:         #7C5CFC;
  --violet-100:     #EFE9FF;

  --accent:         #FF7A2F;
  --accent-soft:    #FFB07C;
  --accent-600:     #C24E09;
  --accent-100:     #FFEDE1;
  --accent-50:      #FFF6F0;

  --paper:          #FFFFFF;
  --paper-2:        #F7F8FD;
  --paper-3:        #EFF1FA;
  --line:           #E3E7F5;
  --line-2:         #D3D9EE;

  --text:           #10163A;
  --text-2:         #3A426B;
  --muted:          #646C93;
  --muted-2:        #676F92;

  --on-dark:        #FFFFFF;
  --on-dark-2:      #C3C9E8;
  --on-dark-3:      #8E97C4;
  --hairline-dark:  rgba(255,255,255,.10);

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, #4A5BF7 0%, #7C5CFC 100%);
  --grad-brand-r:linear-gradient(135deg, #7C5CFC 0%, #4A5BF7 100%);
  --grad-warm:   linear-gradient(135deg, #E4680F 0%, #D4530D 55%, #C2430C 100%);
  --grad-warm-d: linear-gradient(135deg, #C94E0A 0%, #B34309 55%, #A03A0B 100%);
  --grad-ink:    linear-gradient(165deg, #0E1433 0%, #080C24 60%, #0B1130 100%);
  --grad-text:   linear-gradient(100deg, #FFFFFF 0%, #D8DCFF 45%, #FFB98F 100%);
  --grad-sheen:  linear-gradient(100deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  --grad-hair:   linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent);
  --grad-hair-d: linear-gradient(90deg, transparent, rgba(255,255,255,.16) 20%, rgba(255,255,255,.16) 80%, transparent);

  /* Typography */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display: clamp(2.6rem, 5.6vw, 4.6rem);
  --fs-h1:      clamp(2.2rem, 4.4vw, 3.4rem);
  --fs-h2:      clamp(1.85rem, 3.1vw, 2.7rem);
  --fs-h3:      clamp(1.35rem, 1.9vw, 1.7rem);
  --fs-h4:      1.1875rem;
  --fs-lead:    clamp(1.0625rem, 1.25vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug:  1.18;
  --lh-head:  1.28;
  --lh-body:  1.68;

  /* Space: 4pt base */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:48px; --s10:64px; --s11:80px; --s12:96px;
  --s13:120px; --s14:160px;

  --section-y:  clamp(72px, 8.5vw, 128px);
  --section-y-s:clamp(56px, 6vw, 88px);
  --container:  1200px;
  --container-w:1320px;
  --container-n:880px;
  --gutter:     clamp(20px, 4vw, 40px);

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(12,18,50,.04), 0 1px 3px rgba(12,18,50,.05);
  --sh-2: 0 2px 6px rgba(12,18,50,.04), 0 10px 24px rgba(12,18,50,.06);
  --sh-3: 0 4px 10px rgba(12,18,50,.05), 0 20px 48px rgba(12,18,50,.10);
  --sh-4: 0 8px 18px rgba(12,18,50,.07), 0 34px 72px rgba(12,18,50,.14);
  --sh-brand: 0 12px 32px rgba(74,91,247,.26);
  --sh-warm:  0 12px 32px rgba(255,122,47,.28);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* Motion */
  --e-out:   cubic-bezier(.22,.9,.24,1);
  --e-inout: cubic-bezier(.62,.02,.28,1);
  --e-spring:cubic-bezier(.34,1.32,.44,1);
  --t-fast: .18s; --t-mid:.34s; --t-slow:.6s;

  --nav-h: 72px;
}

/* ---------- 2. RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-body); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01"; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%; height:auto}
a{color:var(--brand-600); text-decoration:none; transition:color var(--t-fast) var(--e-out)}
a:hover{color:var(--brand-700)}
h1,h2,h3,h4,h5{font-family:var(--font-display); color:var(--text); margin:0; letter-spacing:-.022em; font-weight:800}
h1{font-size:var(--fs-h1); line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2); line-height:var(--lh-snug); letter-spacing:-.026em}
h3{font-size:var(--fs-h3); line-height:var(--lh-head); font-weight:750}
h4{font-size:var(--fs-h4); line-height:1.36; font-weight:700; letter-spacing:-.012em}
p{margin:0}
ul,ol{margin:0; padding:0}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
::selection{background:rgba(74,91,247,.18); color:var(--text)}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:4px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--s6); top:var(--s3); z-index:2000; background:var(--paper); padding:var(--s3) var(--s5);
  border-radius:var(--r-pill); box-shadow:var(--sh-3); font-weight:650}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.wrap-w{max-width:var(--container-w)}
.wrap-n{max-width:var(--container-n)}
.sec{position:relative; padding-block:var(--section-y)}
.sec-s{padding-block:var(--section-y-s)}
.sec-dark{background:var(--grad-ink); color:var(--on-dark)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--on-dark)}
.sec-soft{background:var(--paper-2)}
.sec-line{border-top:1px solid var(--line)}

/* --- Dark-context inheritance -------------------------------------------
   .hero, .phead, .cta-band and .news are dark surfaces that are not .sec-dark,
   so they need the same text-colour treatment. In Elementor this is one
   "Dark section" global class applied to those containers. */
.hero, .phead, .cta-band, .news{color:var(--on-dark)}
.hero h1,.hero h2,.hero h3,.hero h4,
.phead h1,.phead h2,.phead h3,.phead h4,
.cta-band h1,.cta-band h2,.cta-band h3,
.news h2,.news h3,.news h4{color:var(--on-dark)}
.hero .lead,.phead .lead,.cta-band .lead,.news .lead{color:var(--on-dark-2)}
.hero .eyebrow,.phead .eyebrow,.cta-band .eyebrow,.news .eyebrow{color:var(--accent-soft)}
.hero .muted,.phead .muted,.cta-band .muted,.news .muted{color:var(--on-dark-3)}
.hero .small,.phead .small{color:var(--on-dark-2)}
.hero .btn-ghost,.phead .btn-ghost,.cta-band .btn-ghost,.news .btn-ghost{
  --btn-fg:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07)}
.hero .btn-ghost:hover,.phead .btn-ghost:hover,.cta-band .btn-ghost:hover,.news .btn-ghost:hover{
  border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.13); color:#fff}
.hero .hair,.phead .hair,.cta-band .hair{background:var(--grad-hair-d)}
.grid{display:grid; gap:var(--s6)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hair{height:1px; background:var(--grad-hair); border:0; margin:0}
.sec-dark .hair{background:var(--grad-hair-d)}

/* ---------- 4. TYPE HELPERS ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:750;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-600);
}
.sec-dark .eyebrow{color:var(--accent-soft,#FFB07C)}
.display{font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-tight);
  letter-spacing:-.034em; font-weight:800; margin:0}
.lead{font-size:var(--fs-lead); line-height:1.62; color:var(--text-2)}
.sec-dark .lead{color:var(--on-dark-2)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.muted{color:var(--muted)}
.sec-dark .muted{color:var(--on-dark-3)}
.mono{font-family:var(--font-mono); font-size:.86em; letter-spacing:-.01em}
.balance{text-wrap:balance}
.pretty{text-wrap:pretty}
.grad-text{background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent}
.warm-text{background:var(--grad-warm); -webkit-background-clip:text; background-clip:text; color:transparent}
.underline-mark{position:relative; white-space:nowrap}
.underline-mark::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:.02em; height:.34em; z-index:-1;
  background:var(--grad-warm); opacity:.24; border-radius:var(--r-pill);
}
.sec-head{max-width:720px}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head .eyebrow{margin-bottom:var(--s4)}
.sec-head h2{margin-bottom:var(--s5)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --btn-bg:var(--grad-brand); --btn-fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); letter-spacing:-.008em;
  padding:15px 26px; border-radius:var(--r-pill); background:var(--btn-bg); color:var(--btn-fg);
  box-shadow:var(--sh-brand); overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:transform var(--t-mid) var(--e-spring), box-shadow var(--t-mid) var(--e-out), color var(--t-fast) linear;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-sheen);
  transform:translateX(-120%); transition:transform .72s var(--e-out);
}
.btn:hover{transform:translateY(-2px) scale(1.014); box-shadow:0 18px 44px rgba(74,91,247,.34); color:#fff}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.99)}
.btn .ic{transition:transform var(--t-mid) var(--e-out)}
.btn:hover .ic{transform:translateX(3px)}
.btn-warm{--btn-bg:var(--grad-warm-d); box-shadow:var(--sh-warm)}
.btn-warm:hover{box-shadow:0 18px 44px rgba(255,122,47,.38)}
.btn-ghost{
  --btn-bg:transparent; --btn-fg:var(--text); box-shadow:none;
  border:1.5px solid var(--line-2); background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
}
.btn-ghost:hover{--btn-fg:var(--text); border-color:var(--brand); background:var(--brand-50);
  box-shadow:0 10px 26px rgba(74,91,247,.14); color:var(--text)}
.sec-dark .btn-ghost{--btn-fg:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.07)}
.sec-dark .btn-ghost:hover{border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.13); color:#fff}
.btn-lg{padding:18px 32px; font-size:1rem}
.btn-sm{padding:11px 18px; font-size:var(--fs-xs)}
.btn-white{--btn-bg:#fff; --btn-fg:var(--ink); box-shadow:0 12px 32px rgba(0,0,0,.24)}
.btn-white:hover{color:var(--ink); box-shadow:0 18px 44px rgba(0,0,0,.3)}
.link-arrow{
  display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--font-display);
  font-weight:700; font-size:var(--fs-sm); color:var(--brand-600);
}
.link-arrow .ic{transition:transform var(--t-mid) var(--e-out)}
.link-arrow:hover .ic{transform:translateX(4px)}

/* ---------- 6. PILLS / CHIPS / BADGES ---------- */
.pill{
  display:inline-flex; align-items:center; gap:var(--s2); padding:7px 14px 7px 11px;
  border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--line);
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2); box-shadow:var(--sh-1);
}
.pill-glass{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  color:var(--on-dark-2); backdrop-filter:blur(12px) saturate(140%); box-shadow:none;
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(255,122,47,.18)}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--paper-3); color:var(--text-2); font-size:var(--fs-xs); font-weight:650;
  border:1px solid transparent; transition:all var(--t-fast) var(--e-out);
}
a.chip:hover{background:var(--brand-100); color:var(--brand-700); border-color:rgba(74,91,247,.3); transform:translateY(-1px)}
.tag{
  display:inline-flex; align-items:center; padding:5px 11px; border-radius:7px;
  font-family:var(--font-display); font-size:.6875rem; font-weight:750;
  letter-spacing:.07em; text-transform:uppercase;
}
.tag-brand{background:var(--brand-100); color:var(--brand-700)}
.tag-warm{background:var(--accent-100); color:#B44507}
.tag-violet{background:var(--violet-100); color:#5B37C9}
.tag-glass{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(8px)}

/* ---------- 7. NAVBAR ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  transition:height var(--t-mid) var(--e-out), background var(--t-mid) linear, box-shadow var(--t-mid) linear, border-color var(--t-mid) linear;
  border-bottom:1px solid transparent;
}
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:rgba(255,255,255,.93); backdrop-filter:blur(20px) saturate(180%);
  transition:opacity var(--t-mid) linear;
}
.nav.stuck{height:62px; border-color:var(--line)}
.nav.stuck::before{opacity:1}
.nav.stuck .brand-word{color:var(--text)}
.nav-in{display:flex; align-items:center; gap:var(--s7); width:100%}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0}
.brand-mark{
  width:34px; height:34px; border-radius:11px; background:var(--grad-brand);
  display:grid; place-items:center; box-shadow:var(--sh-brand), var(--sh-inset);
  transition:transform var(--t-mid) var(--e-spring);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-mark span{font-family:var(--font-display); font-weight:800; color:#fff; font-size:1.0625rem; letter-spacing:-.04em}

/* ---------- SVG WORDMARK ---------- */
/* Lettering is currentColor: white over the dark hero, brand purple once the
   nav sticks or on light pages. The play circle and its triangle are fixed. */
.brand-logo{height:16px; width:auto; display:block; color:#fff;
  transition:color .3s var(--ease); flex-shrink:0}
.nav.stuck .brand-logo,
.nav.on-light .brand-logo{color:#341390}
.foot .brand-logo{height:18px; color:#fff}
.brand:hover .brand-logo{opacity:.85}
@media (max-width:600px){ .brand-logo{height:13px} }
.brand-word{font-family:var(--font-display); font-weight:800; font-size:1.1875rem; letter-spacing:-.038em; color:#fff;
  transition:color var(--t-mid) linear}
/* the <nav> wrapper is the flex child, so the auto margin belongs on it,
   this is what pushes the links + CTA to the container's right edge */
.nav-in > nav{margin-left:auto}
.nav-links{display:flex; align-items:center; gap:var(--s1); list-style:none}
.nav-links a{
  position:relative; display:block; padding:9px 15px; border-radius:var(--r-pill);
  font-family:var(--font-display); font-size:var(--fs-sm); font-weight:650; color:#fff;
  transition:color var(--t-fast) linear, background var(--t-fast) linear;
}
.nav.stuck .nav-links a{color:var(--text-2)}
.nav-links a:hover{color:#fff; background:rgba(255,255,255,.1)}
.nav.stuck .nav-links a:hover{color:var(--text); background:var(--paper-3)}
.nav-links a[aria-current="page"]{color:#fff}
.nav.stuck .nav-links a[aria-current="page"]{color:var(--brand-600)}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:50%; bottom:2px; width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--accent);
}
.nav-cta{margin-left:var(--s4); flex-shrink:0}
.nav-burger{display:none; margin-left:auto; width:42px; height:42px; border-radius:12px;
  align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2)}
.nav.stuck .nav-burger{border-color:var(--line)}
.nav-burger i{display:block; width:17px; height:1.8px; background:currentColor; border-radius:2px; position:relative; color:#fff}
.nav.stuck .nav-burger i{color:var(--text)}
.nav-burger i::before,.nav-burger i::after{content:""; position:absolute; left:0; width:17px; height:1.8px;
  background:currentColor; border-radius:2px; transition:transform var(--t-mid) var(--e-out)}
.nav-burger i::before{top:-5.5px} .nav-burger i::after{top:5.5px}
/* Light-header variant for inner pages that start on white */
.nav.on-light .brand-word,.nav.on-light .nav-links a{color:var(--text-2)}
.nav.on-light .brand-word{color:var(--text)}
.nav.on-light{border-color:var(--line)}
.nav.on-light::before{opacity:1}
.nav.on-light .nav-burger i,.nav.on-light .nav-burger i::before,.nav.on-light .nav-burger i::after{color:var(--text)}
.nav.on-light .nav-burger{border-color:var(--line)}

.mobile-menu{
  position:fixed; inset:0; z-index:999; background:var(--grad-ink); color:#fff;
  padding:calc(var(--nav-h) + 32px) var(--gutter) var(--s9);
  display:flex; flex-direction:column; gap:var(--s2);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), visibility var(--t-mid);
}
.mobile-menu.open{opacity:1; visibility:visible; transform:none}
.mobile-menu a{
  font-family:var(--font-display); font-size:1.5rem; font-weight:750; color:#fff;
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline-dark); letter-spacing:-.02em;
  display:flex; justify-content:space-between; align-items:center;
}
/* The mobile menu is already a list of large tap targets, so the CTA is styled
   as one more row rather than a pill button competing with them. */
.mobile-menu .btn{
  margin-top:0; background:none; border:0; box-shadow:none; color:#fff;
  font-family:var(--font-display); font-size:1.5rem; font-weight:750;
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline-dark);
  letter-spacing:-.02em; display:flex; justify-content:space-between;
  align-items:center; border-radius:0; width:100%;
}
.mobile-menu .btn:hover{background:none; transform:none; box-shadow:none; color:var(--accent-soft)}

/* ---------- 8. HERO ---------- */
.hero{
  position:relative; background:var(--grad-ink); color:var(--on-dark);
  padding-top:calc(var(--nav-h) + clamp(56px,7vw,96px)); padding-bottom:clamp(72px,8vw,120px);
  overflow:hidden; isolation:isolate;
}
.hero-fx{position:absolute; inset:0; z-index:-1; overflow:hidden}
.hero-fx .blob{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5}
.hero-fx .b1{width:640px; height:640px; top:-220px; left:-140px;
  background:radial-gradient(circle,#4A5BF7 0%,transparent 68%)}
.hero-fx .b2{width:560px; height:560px; top:-80px; right:-120px;
  background:radial-gradient(circle,#7C5CFC 0%,transparent 66%); opacity:.44}
.hero-fx .b3{width:480px; height:480px; bottom:-240px; left:36%;
  background:radial-gradient(circle,#FF7A2F 0%,transparent 66%); opacity:.2}
.hero-fx .mesh{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 62% at 50% 34%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 34%, #000 20%, transparent 78%);
}
.hero-fx .grain{position:absolute; inset:0; opacity:.35; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero h1{font-size:var(--fs-display); letter-spacing:-.036em; margin:var(--s6) 0 var(--s6); color:#fff}
.hero .lead{max-width:52ch}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s8)}
.hero-note{display:flex; align-items:center; gap:var(--s3); margin-top:var(--s6);
  font-size:var(--fs-sm); color:var(--on-dark-3)}
.hero-note svg{flex-shrink:0}

/* Portrait frame (real photo slot) */
.portrait{position:relative; isolation:isolate}
.portrait-frame{
  position:relative; aspect-ratio:4/5; border-radius:var(--r-2xl); overflow:hidden;
  background:linear-gradient(150deg, rgba(124,92,252,.4), rgba(74,91,247,.22) 45%, rgba(255,122,47,.26));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 50px 110px rgba(0,0,0,.5), var(--sh-inset);
}
.portrait-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,12,36,.7) 0%, transparent 52%);
}
.portrait-frame img{width:100%; height:100%; object-fit:cover}
/* Cut-out portraits. The headroom lives in the asset, not here: ferdy-cutout
   is authored on an exact 4:5 canvas with transparent space above the head and
   small side gutters, matching .portrait-frame. Padding here would shrink the
   content box and make cover crop into the subject instead. */
.portrait-frame img.cutout{object-fit:cover; object-position:center bottom}
.photo-slot{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:var(--s3); text-align:center; padding:var(--s7);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, rgba(124,92,252,.34), rgba(74,91,247,.2) 50%, rgba(255,122,47,.22));
}
.photo-slot .ps-ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(8px)}
.photo-slot .ps-label{font-family:var(--font-display); font-weight:750; font-size:var(--fs-sm); color:#fff}
.photo-slot .ps-hint{font-size:var(--fs-xs); color:rgba(255,255,255,.72); max-width:26ch; line-height:1.5}
.photo-slot .ps-dim{font-family:var(--font-mono); font-size:.6875rem; color:rgba(255,255,255,.55);
  padding:4px 10px; border-radius:var(--r-pill); background:rgba(0,0,0,.24)}
.portrait-badge{
  position:absolute; z-index:3; display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s5); border-radius:var(--r-md);
  background:rgba(12,17,46,.62); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px) saturate(160%); box-shadow:0 18px 44px rgba(0,0,0,.34);
}
.portrait-badge.pb-1{bottom:var(--s7); left:calc(-1 * var(--s6))}
.portrait-badge.pb-2{top:var(--s9); right:calc(-1 * var(--s5))}
.portrait-badge .pb-n{font-family:var(--font-display); font-weight:800; font-size:1.125rem; color:#fff; line-height:1.1}
.portrait-badge .pb-l{font-size:.6875rem; color:var(--on-dark-3); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.portrait-badge .pb-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad-warm); box-shadow:var(--sh-warm)}

/* ---------- 9. STAT STRIP ---------- */
.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--hairline-dark); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--hairline-dark);
}
.stat{padding:var(--s7) var(--s6); background:rgba(255,255,255,.028); text-align:center}
.stat-n{font-family:var(--font-display); font-weight:800; font-size:clamp(1.75rem,3vw,2.5rem);
  letter-spacing:-.038em; line-height:1; background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.stat-l{margin-top:var(--s3); font-size:var(--fs-xs); color:var(--on-dark-3); letter-spacing:.02em}
.stats-light{background:var(--line); border-color:var(--line)}
.stats-light .stat{background:var(--paper)}
.stats-light .stat-n{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text}
.stats-light .stat-l{color:var(--muted)}

/* ---------- 10. LOGO / TRUST ROW ---------- */
.trust{display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--s5) clamp(24px,4vw,56px)}
.trust-item{display:flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:700; font-size:var(--fs-sm); color:var(--muted); letter-spacing:-.01em}
.trust-item svg{opacity:.6}
.trust-label{width:100%; text-align:center; font-size:var(--fs-xs); color:var(--muted-2);
  letter-spacing:.1em; text-transform:uppercase; font-weight:650}

/* ---------- 11. CARDS: TUTORIAL ---------- */
.card{
  position:relative; display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-2); isolation:isolate;
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) linear;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--sh-4); border-color:var(--line-2)}
.card-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--ink-2)}
.card-media img{width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--e-out), filter .5s linear}
.card:hover .card-media img{transform:scale(1.055)}
.card-media::after{content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(to top, rgba(8,12,36,.42), transparent 60%);
  transition:opacity var(--t-mid) linear}
.card:hover .card-media::after{opacity:1}
.card-media .tag{position:absolute; top:var(--s4); left:var(--s4); z-index:2}
.card-media .dur{
  position:absolute; bottom:var(--s4); right:var(--s4); z-index:2;
  padding:5px 10px; border-radius:7px; background:rgba(8,12,36,.72);
  color:#fff; font-family:var(--font-mono); font-size:.6875rem; font-weight:600;
  backdrop-filter:blur(6px);
}
.card-play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center; opacity:0;
  transition:opacity var(--t-mid) linear;
}
.card:hover .card-play{opacity:1}
.card-play span{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.94); box-shadow:0 12px 36px rgba(0,0,0,.3);
  transform:scale(.82); transition:transform var(--t-mid) var(--e-spring);
}
.card:hover .card-play span{transform:scale(1)}
.card-body{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6) var(--s6) var(--s7);
  flex:1 1 auto}
.card-meta{display:flex; align-items:center; gap:var(--s3); font-size:var(--fs-xs); color:var(--muted-2)}
.card-meta .sep{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6}
.card-body h3{letter-spacing:-.024em}
.card-body h3 a{color:inherit}
.card:hover .card-body h3 a{color:var(--brand-600)}
.card-body p{color:var(--muted); font-size:var(--fs-sm); line-height:1.62}
.card-foot{margin-top:auto; padding-top:var(--s5)}

/* Feature card (first of 3, wide) */
.tut-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s6)}
.tut-grid.featured{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* ">" matters here. Written as a descendant selector these also matched the
   FIRST SIDE CARD, which is the first child of .tut-side - that is why it was
   rendering with the 30px featured headline. */
.tut-grid.featured > .card:first-child{grid-row:auto; height:100%}
.tut-grid.featured > .card:first-child .card-media{aspect-ratio:16/9; flex:0 0 auto; min-height:0}
.tut-grid.featured > .card:first-child .card-body{padding:var(--s7); flex:1 1 auto}
.tut-grid.featured > .card:first-child h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.tut-side{display:grid; gap:var(--s6); align-content:start}
.tut-side .card{height:auto}
/* Side cards carry no excerpt, so a tighter body and a smaller headline -
   two of them have to fit inside the lead card's height. */
.tut-side .card-body{padding:var(--s5); gap:var(--s2)}
.tut-side .card-body h3{font-size:1.0625rem; line-height:1.32}
.tut-side .card-foot{padding-top:var(--s3)}
.card-row{
  display:grid; grid-template-columns:180px minmax(0,1fr); gap:0; overflow:hidden;
}
.card-row .card-media{aspect-ratio:auto; width:100%; height:100%; min-height:170px}
.card-row .card-body{padding:var(--s5) var(--s6)}
.card-row .card-body h3{font-size:1.125rem}

/* ---------- 12. TOPIC CARDS ---------- */
/* 7 cards, two balanced rows: 4 across (span 3 of 12) then 3 across (span 4 of 12) */
.topics{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5)}
.topics > *{grid-column:span 3}
.topics > *:nth-child(n+5){grid-column:span 4}
.topic{
  position:relative; display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s7) var(--s6) var(--s6); border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1);
  overflow:hidden; isolation:isolate;
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) linear;
}
.topic::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(74,91,247,.09), transparent 70%);
  transition:opacity var(--t-mid) linear;
}
.topic:hover{transform:translateY(-5px); box-shadow:var(--sh-3); border-color:rgba(74,91,247,.28)}
.topic:hover::before{opacity:1}
.topic-ic{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-600);
  transition:transform var(--t-mid) var(--e-spring), background var(--t-mid) linear, color var(--t-mid) linear;
}
.topic:hover .topic-ic{transform:scale(1.08) rotate(-5deg); background:var(--grad-brand); color:#fff; border-color:transparent}
.topic.warm .topic-ic{background:var(--accent-50); border-color:var(--accent-100); color:var(--accent-600)}
.topic.warm:hover .topic-ic{background:var(--grad-warm); color:#fff}
.topic.warm:hover{border-color:rgba(255,122,47,.34)}
.topic.warm::before{background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(255,122,47,.1), transparent 70%)}
.topic h3{font-size:1.1875rem; letter-spacing:-.02em}
.topic p{font-size:var(--fs-sm); color:var(--muted); line-height:1.6; flex:1}
.topic-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-top:var(--s4); margin-top:var(--s2); border-top:1px solid var(--line)}
.topic-count{font-size:var(--fs-xs); color:var(--muted-2); font-weight:600}
.topic-go{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:var(--paper-3); color:var(--text-2);
  transition:background var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-mid) var(--e-out)}
.topic:hover .topic-go{background:var(--grad-brand); color:#fff; transform:translateX(3px)}
.topic.warm:hover .topic-go{background:var(--grad-warm)}

/* ---------- 13. WHY / VALUE BLOCKS ---------- */
.why-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,80px); align-items:start}
.why-list{display:grid; gap:var(--s2)}
.why{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--s5);
  padding:var(--s6); border-radius:var(--r-md); border:1px solid transparent;
  transition:background var(--t-mid) linear, border-color var(--t-mid) linear, transform var(--t-mid) var(--e-out);
}
.why:hover{background:rgba(255,255,255,.05); border-color:var(--hairline-dark); transform:translateX(4px)}
.why-n{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid var(--hairline-dark);
  font-family:var(--font-display); font-weight:800; font-size:.9375rem; color:#fff;
}
.why:nth-child(1) .why-n{background:var(--grad-brand); border-color:transparent; box-shadow:var(--sh-brand)}
.why:nth-child(2) .why-n{background:linear-gradient(135deg,#7C5CFC,#A17CFF); border-color:transparent}
.why:nth-child(3) .why-n{background:var(--grad-warm); border-color:transparent; box-shadow:var(--sh-warm)}
.why h3{font-size:1.1875rem; margin-bottom:var(--s2); letter-spacing:-.02em}
.why p{font-size:var(--fs-sm); color:var(--on-dark-2); line-height:1.62}

/* ---------- 14. TESTIMONIALS ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.quote{
  display:flex; flex-direction:column; gap:var(--s5); padding:var(--s7);
  border-radius:var(--r-lg); background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-2); transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.quote:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.quote .stars{display:flex; gap:3px; color:var(--accent-600)}
.quote blockquote{margin:0; font-size:var(--fs-body); line-height:1.66; color:var(--text-2)}
.quote blockquote strong{color:var(--text); font-weight:650}
.quote-by{display:flex; align-items:center; gap:var(--s3); margin-top:auto;
  padding-top:var(--s5); border-top:1px solid var(--line)}
.avatar{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex-shrink:0;
  background:var(--grad-brand); color:#fff; font-family:var(--font-display); font-weight:750; font-size:.875rem}
.avatar.v2{background:linear-gradient(135deg,#5140C9,#6E4CF0)}
.avatar.v3{background:var(--grad-warm-d)}
.quote-by .qn{font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm); color:var(--text)}
.quote-by .qr{font-size:var(--fs-xs); color:var(--muted-2)}

/* ---------- 15. ARTICLE LIST ---------- */
.articles{display:grid; gap:0; border-top:1px solid var(--line)}
.article{
  display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:var(--s6); align-items:center;
  padding:var(--s6) var(--s4); border-bottom:1px solid var(--line);
  transition:background var(--t-mid) linear, padding-inline var(--t-mid) var(--e-out);
}
.article:hover{background:var(--paper-2); padding-inline:var(--s6)}
.article-date{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--muted-2); white-space:nowrap}
.article-main{display:flex; flex-direction:column; gap:6px}
.article-main h3{font-size:1.125rem; letter-spacing:-.02em}
.article-main h3 a{color:inherit}
.article:hover .article-main h3 a{color:var(--brand-600)}
.article-main p{font-size:var(--fs-sm); color:var(--muted)}
.article-go{width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:var(--paper-3); color:var(--text-2);
  transition:background var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-mid) var(--e-out)}
.article:hover .article-go{background:var(--grad-brand); color:#fff; transform:translateX(3px)}

/* ---------- 16. NEWSLETTER ---------- */
.news{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(32px,4.5vw,64px); border-radius:var(--r-2xl); overflow:hidden; isolation:isolate;
  background:linear-gradient(140deg,#111845 0%,#0A0F30 55%,#141A48 100%); color:#fff;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 90px rgba(10,15,48,.3);
}
.news::before{
  content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%;
  top:-260px; right:-140px; filter:blur(80px); opacity:.42;
  background:radial-gradient(circle,#7C5CFC,transparent 68%);
}
.news::after{
  content:""; position:absolute; z-index:-1; width:420px; height:420px; border-radius:50%;
  bottom:-260px; left:-100px; filter:blur(80px); opacity:.28;
  background:radial-gradient(circle,#FF7A2F,transparent 68%);
}
.news h2{font-size:clamp(1.6rem,2.6vw,2.25rem); color:#fff; margin-bottom:var(--s4)}
.news p{color:var(--on-dark-2); font-size:var(--fs-sm); line-height:1.62}
.news-form{display:flex; flex-direction:column; gap:var(--s3)}
.field{
  display:flex; gap:var(--s2); padding:6px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); transition:border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.field:focus-within{border-color:rgba(255,255,255,.4); box-shadow:0 0 0 4px rgba(74,91,247,.22)}
.field input{
  flex:1; min-width:0; border:0; background:none; outline:0; padding:12px 18px;
  color:#fff; font-family:var(--font-body); font-size:var(--fs-sm);
}
.field input::placeholder{color:rgba(255,255,255,.46)}
.news-fine{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-xs); color:var(--on-dark-3);
  padding-left:var(--s5)}
.news-points{display:grid; gap:var(--s3); margin-top:var(--s6); list-style:none}
.news-points li{display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-sm); color:var(--on-dark-2)}
.news-points svg{flex-shrink:0; margin-top:4px; color:var(--accent)}

/* ---------- 17. BIG CTA ---------- */
.cta-band{
  position:relative; text-align:center; padding-block:clamp(80px,9vw,132px);
  background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate;
}
.cta-band .fx{position:absolute; inset:0; z-index:-1}
.cta-band .fx .ring{
  position:absolute; left:50%; top:50%; translate:-50% -50%; border-radius:50%;
  border:1px solid rgba(255,255,255,.07);
}
.cta-band .fx .r1{width:560px; height:560px}
.cta-band .fx .r2{width:860px; height:860px}
.cta-band .fx .r3{width:1180px; height:1180px}
.cta-band .fx .glow{
  position:absolute; left:50%; top:38%; translate:-50% -50%; width:720px; height:520px;
  filter:blur(90px); opacity:.4;
  background:radial-gradient(ellipse,#4A5BF7 0%,rgba(124,92,252,.5) 45%,transparent 72%);
}
.cta-band h2{font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:-.032em; margin-bottom:var(--s5); color:#fff}
.cta-band .lead{max-width:56ch; margin-inline:auto}
.cta-actions{display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:center; margin-top:var(--s9)}

/* ---------- 18. FOOTER ---------- */
.foot{background:#060919; color:var(--on-dark-2); padding-block:var(--s12) var(--s8)}
.foot-top{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,56px); padding-bottom:var(--s11)}
.foot-brand .brand-word{color:#fff}
.foot-brand p{margin-top:var(--s5); font-size:var(--fs-sm); color:var(--on-dark-3); max-width:34ch; line-height:1.62}
.foot-social{display:flex; gap:var(--s3); margin-top:var(--s6)}
.foot-social a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid var(--hairline-dark); color:var(--on-dark-2);
  transition:all var(--t-fast) var(--e-out);
}
.foot-social a:hover{background:var(--grad-brand); border-color:transparent; color:#fff; transform:translateY(-2px)}
.foot .foot-h{font-family:var(--font-display); font-size:var(--fs-xs); font-weight:750; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin-bottom:var(--s5)}
.foot ul{list-style:none; display:grid; gap:var(--s3)}
.foot ul a{font-size:var(--fs-sm); color:var(--on-dark-3)}
.foot ul a:hover{color:#fff}
.foot-bot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s5);
  padding-top:var(--s7); border-top:1px solid var(--hairline-dark); font-size:var(--fs-xs); color:var(--on-dark-3)}
.foot-bot ul{display:flex; gap:var(--s6); list-style:none}
.foot-bot a{color:var(--on-dark-3)}
.foot-bot a:hover{color:#fff}

/* ---------- 19. PAGE HEADER (inner pages) ---------- */
.phead{
  position:relative; background:var(--grad-ink); color:#fff; overflow:hidden; isolation:isolate;
  padding-top:calc(var(--nav-h) + clamp(48px,6vw,80px)); padding-bottom:clamp(56px,6vw,88px);
}
.phead .fx{position:absolute; inset:0; z-index:-1}
.phead .fx .blob{position:absolute; border-radius:50%; filter:blur(90px)}
.phead .fx .b1{width:560px;height:560px;top:-240px;left:-120px;
  background:radial-gradient(circle,#4A5BF7,transparent 68%); opacity:.44}
.phead .fx .b2{width:460px;height:460px;top:-140px;right:-100px;
  background:radial-gradient(circle,#FF7A2F,transparent 68%); opacity:.2}
.phead .mesh{position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 30% 20%,#000,transparent 75%)}
.phead h1{color:#fff; margin:var(--s5) 0 var(--s5)}
.crumbs{display:flex; align-items:center; gap:var(--s3); font-size:var(--fs-xs); color:var(--on-dark-3)}
.crumbs a{color:var(--on-dark-3)} .crumbs a:hover{color:#fff}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:#fff; font-weight:600}

/* ---------- 20. ABOUT PAGE ---------- */
.prose{max-width:70ch}
.prose > * + *{margin-top:var(--s5)}
.prose p{font-size:var(--fs-lead); line-height:1.72; color:var(--text-2)}
.prose h2{margin-top:var(--s10); margin-bottom:var(--s5)}
.prose h3{margin-top:var(--s8); margin-bottom:var(--s3)}
.prose ul{padding-left:0; list-style:none; display:grid; gap:var(--s3)}
/* Bullet is absolutely positioned rather than a grid column. A grid li puts
   EVERY child in its own cell, so "<strong>Lead.</strong> trailing text" split
   across two cells and the trailing text landed in the 22px bullet column,
   wrapping one word per line. This handles any mix of inline content. */
.prose ul li{position:relative; padding-left:calc(22px + var(--s3));
  font-size:var(--fs-body); color:var(--text-2); line-height:1.62}
.prose ul li::before{content:""; position:absolute; left:6px; top:11px;
  width:7px; height:7px; border-radius:50%; background:var(--grad-warm)}
.prose ul li strong{color:var(--text)}

/* Legal pages emit one .prose wrapper per block, so the usual "* + *" rule
   inside a single .prose never fires between them. */
.prose + .prose{margin-top:var(--s5)}
.prose + .callout, .callout + .prose{margin-top:var(--s7)}
.prose blockquote{
  margin:var(--s8) 0; padding:var(--s7); border-radius:var(--r-lg);
  background:var(--brand-50); border:1px solid var(--brand-100); border-left:4px solid var(--brand);
}
.prose blockquote p{font-family:var(--font-display); font-size:clamp(1.125rem,1.8vw,1.375rem);
  font-weight:650; line-height:1.5; letter-spacing:-.018em; color:var(--text)}

.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center}
.split.narrow-l{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split.narrow-r{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.split.top{align-items:start}
.sticky-head{position:sticky; top:calc(var(--nav-h) + 48px)}
@media (max-width:1080px){.sticky-head{position:static}}

.photo-card{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line); box-shadow:var(--sh-3); background:var(--paper-3);
}
.photo-card.tall{aspect-ratio:3/4}
.photo-card.square{aspect-ratio:1/1}
.photo-card .photo-slot{
  background:
    repeating-linear-gradient(135deg, rgba(74,91,247,.05) 0 12px, transparent 12px 24px),
    linear-gradient(150deg, var(--brand-50), var(--accent-50));
}
.photo-card .photo-slot .ps-ic{background:#fff; border-color:var(--line); color:var(--brand-600)}
.photo-card .photo-slot .ps-label{color:var(--text)}
.photo-card .photo-slot .ps-hint{color:var(--muted)}
.photo-card .photo-slot .ps-dim{background:var(--paper); color:var(--muted-2); border:1px solid var(--line)}
.photo-mosaic{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4)}
.photo-mosaic .photo-card:nth-child(1){grid-row:span 2; aspect-ratio:3/4}
.photo-mosaic .photo-card:nth-child(2),
.photo-mosaic .photo-card:nth-child(3){aspect-ratio:4/3}

/* Timeline */
.timeline{position:relative; display:grid; gap:0; padding-left:0}
.timeline::before{
  content:""; position:absolute; left:19px; top:14px; bottom:14px; width:2px;
  background:linear-gradient(to bottom, var(--brand), var(--violet) 45%, var(--accent));
  opacity:.28; border-radius:2px;
}
.tl{position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); gap:var(--s6);
  padding-block:var(--s6)}
.tl-dot{
  position:relative; z-index:1; width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper); border:2px solid var(--brand-100); box-shadow:var(--sh-1);
  transition:transform var(--t-mid) var(--e-spring), border-color var(--t-mid) linear;
}
.tl-dot i{width:11px; height:11px; border-radius:50%; background:var(--grad-brand); display:block}
.tl:hover .tl-dot{transform:scale(1.14); border-color:var(--brand)}
.tl:last-child .tl-dot{border-color:var(--accent-100)}
.tl:last-child .tl-dot i{background:var(--grad-warm)}
.tl-year{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs); letter-spacing:.1em;
  color:var(--accent-600); text-transform:uppercase; margin-bottom:6px}
.tl h3{font-size:1.1875rem; margin-bottom:var(--s2); letter-spacing:-.02em}
.tl p{font-size:var(--fs-sm); color:var(--muted); line-height:1.62; max-width:62ch}

/* Value cards */
.values{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.value{
  padding:var(--s7); border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.value:hover{transform:translateY(-4px); box-shadow:var(--sh-3)}
.value-ic{width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--grad-brand); color:#fff; box-shadow:var(--sh-brand); margin-bottom:var(--s5)}
.value:nth-child(2) .value-ic{background:linear-gradient(135deg,#7C5CFC,#A17CFF); box-shadow:0 12px 32px rgba(124,92,252,.28)}
.value:nth-child(3) .value-ic{background:var(--grad-warm); box-shadow:var(--sh-warm)}
.value:nth-child(4) .value-ic{background:linear-gradient(135deg,#2AA981,#38C79A); box-shadow:0 12px 32px rgba(42,169,129,.26)}
.value:nth-child(5) .value-ic{background:linear-gradient(135deg,#E0447C,#FF6A9B); box-shadow:0 12px 32px rgba(224,68,124,.26)}
.value:nth-child(6) .value-ic{background:linear-gradient(135deg,#1B2464,#3A46D8); box-shadow:var(--sh-brand)}
.value h3{font-size:1.125rem; margin-bottom:var(--s3); letter-spacing:-.02em}
.value p{font-size:var(--fs-sm); color:var(--muted); line-height:1.62}

/* ---------- 21. KNOWLEDGE BASE ---------- */
.kb-search{
  position:relative; display:flex; align-items:center; gap:var(--s3);
  padding:6px 6px 6px var(--s5); border-radius:var(--r-pill);
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(160%); max-width:560px;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  transition:border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
}
.kb-search:focus-within{border-color:rgba(255,255,255,.42); box-shadow:0 0 0 4px rgba(74,91,247,.24)}
.kb-search svg{flex-shrink:0; color:rgba(255,255,255,.6)}
.kb-search input{flex:1; min-width:0; border:0; background:none; outline:0; padding:13px 0;
  color:#fff; font-family:var(--font-body); font-size:var(--fs-body)}
.kb-search input::placeholder{color:rgba(255,255,255,.44)}
.kb-search kbd{
  font-family:var(--font-mono); font-size:.6875rem; padding:6px 9px; border-radius:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.62);
}
.az{display:flex; flex-wrap:wrap; gap:var(--s2)}
.az button, .az a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:750; font-size:var(--fs-sm);
  background:var(--paper); border:1px solid var(--line); color:var(--text-2);
  transition:all var(--t-fast) var(--e-out);
}
.az button:hover, .az a:hover{background:var(--brand-50); border-color:var(--brand); color:var(--brand-700); transform:translateY(-2px)}
.az button.on{background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand)}
.az .wide{width:auto; padding-inline:var(--s5)}
.az-dark button, .az-dark a{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:#fff}
.az-dark button:hover, .az-dark a:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.3); color:#fff}

.kb-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.term-card{
  position:relative; display:flex; flex-direction:column; gap:var(--s3); min-height:224px;
  padding:var(--s7) var(--s6) var(--s6); border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); box-shadow:var(--sh-1); overflow:hidden; isolation:isolate;
  scroll-margin-top:calc(var(--nav-h) + 120px);
  transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out), border-color var(--t-mid) linear;
}
.term-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:2;
  background:var(--grad-brand); transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-mid) var(--e-out)}
.term-card:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.term-card:hover::before{transform:scaleY(1)}
.term-ghost{
  position:absolute; top:-16px; right:2px; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:6.25rem; line-height:1;
  letter-spacing:-.06em; background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.12;
  transition:opacity var(--t-mid) linear, transform var(--t-mid) var(--e-out);
}
.term-card:hover .term-ghost{opacity:.2; transform:translateY(2px) scale(1.04)}
.term-card-top{position:relative; z-index:1; display:flex; align-items:flex-start;
  justify-content:space-between; gap:var(--s3)}
.term-card h3{font-size:1.1875rem; letter-spacing:-.022em}
.term-card h3 a{color:inherit}
.term-card:hover h3 a{color:var(--brand-600)}
.term-card p{position:relative; z-index:1; font-size:var(--fs-sm); color:var(--muted); line-height:1.58;
  max-width:32ch}
.term-card-foot{position:relative; z-index:1; margin-top:auto; padding-top:var(--s5);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.term-card:hover .topic-go{background:var(--grad-brand); color:#fff; transform:translateX(3px)}

.kb-featured{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4)}
.kb-feat{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) var(--s6); border-radius:var(--r-md);
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-sm);
  transition:all var(--t-mid) var(--e-out);
}
.kb-feat:hover{background:var(--paper); border-color:var(--brand); box-shadow:var(--sh-2);
  transform:translateY(-2px); color:var(--brand-700)}
.kb-empty{padding:var(--s12) var(--s6); text-align:center; display:none}
.kb-empty.show{display:block}
.kb-empty h3{margin-bottom:var(--s3)}
.kb-empty p{color:var(--muted)}

/* KB stats row */
.kb-facts{display:flex; flex-wrap:wrap; gap:var(--s6) var(--s9); margin-top:var(--s8)}
.kb-fact{display:flex; align-items:center; gap:var(--s4)}
.kb-fact .n{font-family:var(--font-display); font-weight:800; font-size:1.75rem; letter-spacing:-.03em;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent}
.kb-fact .l{font-size:var(--fs-xs); color:var(--on-dark-3); line-height:1.35; max-width:14ch}

/* ---------- 22. TERM PAGE ---------- */
.term-layout{display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:clamp(32px,4vw,64px);
  align-items:start}
.term-layout > *{min-width:0}
.figure{min-width:0}
.term-hero-meta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s5)}
.term-letter{
  width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center; flex-shrink:0;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px);
  font-family:var(--font-display); font-weight:800; font-size:1.625rem; color:#fff; letter-spacing:-.03em;
}
.term-title-row{display:flex; align-items:center; gap:var(--s5); margin-top:var(--s5)}
.term-title-row h1{margin:0}
.term-watermark{
  position:absolute; right:5%; top:52%; translate:0 -46%; z-index:-1; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:clamp(9rem,17vw,15rem); line-height:.8;
  letter-spacing:-.07em; color:rgba(255,255,255,.045); user-select:none;
}
@media (max-width:900px){.term-watermark{display:none}}

.def-card{
  position:relative; padding:clamp(24px,3vw,36px); border-radius:var(--r-lg);
  background:linear-gradient(140deg, var(--brand-50), #fff 60%, var(--accent-50));
  border:1px solid var(--brand-100); box-shadow:var(--sh-2); overflow:hidden;
}
.def-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--grad-brand)}
.def-card .eyebrow{margin-bottom:var(--s4)}
.def-card p{font-family:var(--font-display); font-size:clamp(1.125rem,1.9vw,1.4375rem); font-weight:650;
  line-height:1.5; letter-spacing:-.02em; color:var(--text)}

.callout{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:var(--s5);
  padding:var(--s6); border-radius:var(--r-md); background:var(--paper-2); border:1px solid var(--line);
}
.callout-ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:var(--grad-brand); box-shadow:var(--sh-brand)}
.callout h3{font-size:var(--fs-h4); margin-bottom:6px}
.callout p{font-size:var(--fs-sm); color:var(--muted); line-height:1.62}
.callout.warn{background:var(--accent-50); border-color:var(--accent-100)}
.callout.warn .callout-ic{background:var(--grad-warm); box-shadow:var(--sh-warm)}
.callout.tip{background:#EEFBF5; border-color:#CDEEDF}
.callout.tip .callout-ic{background:linear-gradient(135deg,#2AA981,#38C79A); box-shadow:0 10px 26px rgba(42,169,129,.24)}

.figure{
  margin:var(--s9) 0; padding:clamp(24px,3vw,40px); border-radius:var(--r-lg);
  background:var(--paper-2); border:1px solid var(--line);
}
.figure svg{width:100%; height:auto; display:block}
.figure figcaption{margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line);
  font-size:var(--fs-xs); color:var(--muted); line-height:1.6}

.steps{counter-reset:s; display:grid; gap:var(--s6); list-style:none}
.steps li{
  counter-increment:s; position:relative; display:grid; grid-template-columns:32px minmax(0,1fr);
  gap:var(--s5); align-items:start;
}
.steps li::before{
  content:counter(s); width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--brand-50); border:1px solid var(--brand-100); color:var(--brand-700);
  font-family:var(--font-display); font-weight:750; font-size:.8125rem;
}
.steps li > div{min-width:0}
.steps li strong{display:block; font-family:var(--font-display); font-weight:700; color:var(--text);
  margin-bottom:3px; letter-spacing:-.012em; font-size:1.0625rem}
.steps li span{display:block; font-size:var(--fs-sm); color:var(--muted); line-height:1.62}

/* Sticky sidebar */
.term-side{position:sticky; top:calc(var(--nav-h) + 28px); display:grid; gap:var(--s6);
  max-height:calc(100vh - var(--nav-h) - 48px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.side-box{padding:var(--s6); border-radius:var(--r-md); background:var(--paper-2); border:1px solid var(--line)}
.side-box .side-h{font-family:var(--font-display); font-size:var(--fs-xs); font-weight:750; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted-2); margin-bottom:var(--s5)}
.toc{list-style:none; display:grid; gap:2px}
.toc a{
  display:block; padding:8px 12px; border-radius:9px; font-size:var(--fs-sm); color:var(--text-2);
  border-left:2px solid transparent; transition:all var(--t-fast) var(--e-out);
}
.toc a:hover{background:var(--paper); color:var(--brand-600)}
.toc a.on{background:var(--paper); border-left-color:var(--brand); color:var(--brand-700); font-weight:650}
/* h3 entries sit under their h2. */
.toc a.sub{padding-left:24px; font-size:var(--fs-xs); color:var(--muted)}

.side-chips{display:flex; flex-wrap:wrap; gap:var(--s2)}

.pager{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5)}
.pager a{
  display:flex; flex-direction:column; gap:6px; padding:var(--s6) var(--s7); border-radius:var(--r-md);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1); color:var(--text);
  transition:all var(--t-mid) var(--e-out);
}
.pager a:hover{border-color:var(--brand); box-shadow:var(--sh-3); transform:translateY(-3px); color:var(--text)}
.pager .dir{display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-xs); color:var(--muted-2);
  font-weight:650; letter-spacing:.04em; text-transform:uppercase}
.pager .t{font-family:var(--font-display); font-weight:750; font-size:1.0625rem; letter-spacing:-.02em}
.pager a.next{text-align:right; align-items:flex-end}
.pager a.disabled{opacity:.4; pointer-events:none}

/* Related tutorials mini */
.mini-tuts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5)}
.mini-tut{
  display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden;
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:all var(--t-mid) var(--e-out);
}
.mini-tut:hover{transform:translateY(-4px); box-shadow:var(--sh-3); border-color:var(--line-2)}
.mini-tut .m-media{aspect-ratio:16/9; overflow:hidden; background:var(--ink-2)}
.mini-tut .m-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--e-out)}
.mini-tut:hover .m-media img{transform:scale(1.06)}
.mini-tut .m-body{padding:var(--s5); display:grid; gap:var(--s3)}
.mini-tut h3{font-size:1rem; font-weight:700; letter-spacing:-.018em; line-height:1.36}
.mini-tut h3 a{color:inherit}
.mini-tut:hover h3 a{color:var(--brand-600)}
.mini-tut .m-meta{font-size:var(--fs-xs); color:var(--muted-2)}

/* ---------- 23. TUTORIAL INDEX FILTERS ---------- */
.filters{display:flex; flex-wrap:wrap; gap:var(--s2)}
.filters button{
  padding:9px 17px; border-radius:var(--r-pill); background:var(--paper); border:1px solid var(--line);
  font-family:var(--font-display); font-weight:650; font-size:var(--fs-sm); color:var(--text-2);
  transition:all var(--t-fast) var(--e-out);
}
.filters button:hover{border-color:var(--brand); color:var(--brand-700); transform:translateY(-1px)}
.filters button.on{background:var(--grad-brand); border-color:transparent; color:#fff; box-shadow:var(--sh-brand)}

/* ---------- 24. FAQ ---------- */
.faq{display:grid; gap:var(--s3); max-width:820px; margin-inline:auto}
.faq details{
  border-radius:var(--r-md); background:var(--paper); border:1px solid var(--line);
  box-shadow:var(--sh-1); overflow:hidden; transition:border-color var(--t-fast) linear, box-shadow var(--t-mid) linear;
}
.faq details[open]{border-color:var(--brand-100); box-shadow:var(--sh-2)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:var(--s6) var(--s7); cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem; letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:28px; height:28px; border-radius:9px; display:grid; place-items:center; flex-shrink:0;
  background:var(--paper-3); color:var(--text-2); transition:all var(--t-mid) var(--e-out)}
.faq details[open] summary .pm{background:var(--grad-brand); color:#fff; transform:rotate(45deg)}
.faq .fa{padding:0 var(--s7) var(--s7); font-size:var(--fs-sm); color:var(--muted); line-height:1.68; max-width:68ch}

/* ---------- 25. UTILITIES ---------- */
.mt-0{margin-top:0} .mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)}
.mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)} .mt-7{margin-top:var(--s7)}
.mt-8{margin-top:var(--s8)} .mt-9{margin-top:var(--s9)} .mt-10{margin-top:var(--s10)}
.mt-11{margin-top:var(--s11)}
.mb-5{margin-bottom:var(--s5)} .mb-7{margin-bottom:var(--s7)} .mb-8{margin-bottom:var(--s8)}
.center{text-align:center} .flex{display:flex} .between{justify-content:space-between}
.items-center{align-items:center} .items-end{align-items:flex-end} .wrap-flex{flex-wrap:wrap}
.gap-3{gap:var(--s3)} .gap-4{gap:var(--s4)} .gap-5{gap:var(--s5)} .gap-6{gap:var(--s6)}
.hide{display:none}
.sec-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s7); flex-wrap:wrap}
.sec-head-row .sec-head{margin-bottom:0}

/* ---------- 26. MOTION ---------- */
[data-rv]{opacity:0; transform:translateY(22px); transition:opacity .78s var(--e-out), transform .78s var(--e-out)}
[data-rv].in{opacity:1; transform:none}
[data-rv="fade"]{transform:none}
[data-rv="left"]{transform:translateX(-24px)}
[data-rv="right"]{transform:translateX(24px)}
[data-rv="scale"]{transform:scale(.965)}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.float-d{animation-delay:-3.5s}
@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(.9); opacity:.5}
  100%{transform:translate(-50%,-50%) scale(1.25); opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important; animation-iteration-count:1 !important;
    transition-duration:.001s !important; scroll-behavior:auto !important}
  [data-rv]{opacity:1 !important; transform:none !important}
}

/* ---------- 27. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr; gap:var(--s10)}
  .portrait{max-width:440px; margin-inline:auto; width:100%}
  .portrait-badge.pb-1{left:var(--s4)} .portrait-badge.pb-2{right:var(--s4)}
  .why-grid{grid-template-columns:1fr; gap:var(--s9)}
  .term-layout{grid-template-columns:minmax(0,1fr)}
  .term-side{position:static; grid-template-columns:repeat(2,minmax(0,1fr)); display:grid;
  max-height:none; overflow:visible}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .kb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topics{grid-template-columns:repeat(6,minmax(0,1fr))}
  .topics > *,.topics > *:nth-child(n+5){grid-column:span 2}
  .topics > *:nth-child(7){grid-column:span 6}
  .split,.split.narrow-l,.split.narrow-r{grid-template-columns:1fr; gap:var(--s9)}
  .news{grid-template-columns:1fr}
  .mini-tuts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
  .tut-grid,.tut-grid.featured{grid-template-columns:1fr}
  .tut-grid.featured .card:first-child{grid-row:auto}
  .quotes{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article{grid-template-columns:1fr auto; gap:var(--s4)}
  .article-date{grid-column:1/-1; order:-1}
}
@media (max-width:680px){
  :root{--nav-h:64px}
  .topics{grid-template-columns:1fr}
  .topics > *,.topics > *:nth-child(n+5),.topics > *:nth-child(7){grid-column:span 1}
  .kb-grid,.kb-featured{grid-template-columns:1fr}
  .values,.g2,.g3,.g4{grid-template-columns:1fr}
  .mini-tuts{grid-template-columns:1fr}
  .term-side{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left; align-items:flex-start}
  .card-row{grid-template-columns:1fr}
  .card-row .card-media{aspect-ratio:16/9}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-actions .btn{width:100%}
  .field{flex-direction:column; border-radius:var(--r-lg); padding:var(--s3)}
  .field .btn{width:100%}
  .photo-mosaic{grid-template-columns:1fr}
  .photo-mosaic .photo-card:nth-child(1){grid-row:auto; aspect-ratio:4/3}
  /* badges sit below the frame instead of overlapping it */
  .portrait{display:flex; flex-direction:column; gap:var(--s4)}
  .portrait-frame{order:-1}
  .portrait-badge,.portrait-badge.pb-1,.portrait-badge.pb-2{position:static; inset:auto}
  /* wide diagrams stay legible by scrolling rather than shrinking */
  .figure{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .figure svg{min-width:560px}
  .term-title-row{flex-direction:column; align-items:flex-start; gap:var(--s4)}
}

/* ---------- TUTORIAL SINGLE ---------- */
.tut-player{
  position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--ink-2);
  border:1px solid var(--hairline-dark); box-shadow:var(--sh-lg); aspect-ratio:16/9;
}
.tut-player img{width:100%; height:100%; object-fit:cover; display:block}
.tut-player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.tut-player .veil{
  position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,36,.10),rgba(8,12,36,.62));
  transition:background .35s var(--ease)
}
.tut-player:hover .veil{background:linear-gradient(180deg,rgba(8,12,36,.04),rgba(8,12,36,.52))}
.tut-player .big-play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff; cursor:pointer;
  border:0; background:none; width:100%; padding:0
}
.tut-player .big-play i{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-warm); box-shadow:0 12px 40px rgba(196,78,9,.5);
  transition:transform .32s var(--ease-out)
}
.tut-player:hover .big-play i{transform:scale(1.09)}
.tut-player .big-play svg{margin-left:4px}
.tut-player .soon{
  position:absolute; left:0; right:0; bottom:0; padding:var(--s5) var(--s6);
  font-size:var(--fs-xs); color:var(--on-dark-2); letter-spacing:.02em
}

.tut-facts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

.checks{list-style:none; display:grid; gap:var(--s4)}
.checks li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s4); align-items:start}
.checks li svg{color:var(--brand); margin-top:3px}
.checks li span{font-size:var(--fs-sm); color:var(--text-2); line-height:1.62}
.checks.warm li svg{color:var(--accent-600)}

.chapters{list-style:none; display:grid; gap:2px; counter-reset:c}
.chapters li{
  display:grid; grid-template-columns:76px minmax(0,1fr); gap:var(--s5); align-items:baseline;
  padding:var(--s5) var(--s5); border-radius:var(--r-sm); border:1px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease)
}
.chapters li:hover{background:var(--paper-2); border-color:var(--line)}
.chapters .t{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; color:var(--brand-700);
  background:var(--brand-50); border:1px solid var(--brand-100); border-radius:99px;
  padding:4px 9px; text-align:center; letter-spacing:.01em
}
.chapters h3{font-size:1.0625rem; letter-spacing:-.015em; margin-bottom:4px}
.chapters p{font-size:var(--fs-sm); color:var(--muted); line-height:1.6; margin:0}

.stack-row{display:flex; flex-wrap:wrap; gap:var(--s3)}
.stack-row span{
  font-size:var(--fs-xs); font-weight:600; color:var(--text-2); background:var(--paper-2);
  border:1px solid var(--line); border-radius:99px; padding:7px 13px
}

@media (max-width:640px){
  .chapters li{grid-template-columns:1fr; gap:var(--s2)}
  .chapters .t{justify-self:start}
  .tut-player .big-play i{width:64px; height:64px}
}

/* ---------- LEGAL PAGES ---------- */
.fill{
  background:#FFF3C4; color:#6B4E00; border:1px dashed #E0B400; border-radius:5px;
  padding:1px 7px; font-family:var(--font-mono); font-size:.86em; font-weight:600;
  white-space:nowrap
}
.legal-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4);
  padding:var(--s5) var(--s6); border-radius:var(--r-sm);
  background:var(--paper-2); border:1px solid var(--line); margin-bottom:var(--s8)
}
.legal-meta .lm-ic{color:var(--brand); display:flex}
.legal-meta p{font-size:var(--fs-sm); color:var(--muted); margin:0}
.prose .mono{font-family:var(--font-mono); font-size:.9em; color:var(--brand-700)}
.prose a{color:var(--brand-600); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1.5px; text-decoration-color:var(--brand-100)}
.prose a:hover{text-decoration-color:var(--brand-600)}

/* ---------- COOKIE CONSENT ---------- */
.cc{position:fixed; left:0; right:0; bottom:0; z-index:9000; padding:var(--s5);
  display:flex; justify-content:center; pointer-events:none}
.cc-box{pointer-events:auto; width:100%; max-width:760px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 24px 70px rgba(8,12,36,.28);
  padding:var(--s7); transform:translateY(14px); opacity:0;
  transition:transform .38s var(--ease-out), opacity .38s var(--ease-out)}
.cc.in .cc-box{transform:none; opacity:1}
.cc-main h2{font-size:1.125rem; letter-spacing:-.02em; margin-bottom:8px}
.cc-main p{font-size:var(--fs-sm); color:var(--text-2); line-height:1.6; margin:0}
.cc-main a{color:var(--brand-600); text-decoration:underline; text-underline-offset:2px}

.cc-prefs{margin-top:var(--s6); border-top:1px solid var(--line); padding-top:var(--s3)}
.cc-row{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5);
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline)}
.cc-row:last-child{border-bottom:0}
.cc-row span{display:block}
.cc-row strong{display:block; font-size:var(--fs-sm); font-weight:650; color:var(--text)}
.cc-row em{display:block; font-style:normal; font-size:var(--fs-xs); color:var(--muted);
  line-height:1.5; margin-top:2px}
.cc-row input{flex-shrink:0; width:20px; height:20px; accent-color:var(--brand); margin-top:2px}
.cc-locked input{opacity:.5}

.cc-acts{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}
.cc-b{font-family:var(--font-display); font-size:var(--fs-sm); font-weight:650;
  padding:11px 20px; border-radius:99px; cursor:pointer; border:1px solid transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease)}
/* Reject carries the same visual weight as accept: an EU requirement, and
   the right default everywhere else too. */
.cc-yes{background:var(--brand); color:#fff; border-color:var(--brand)}
.cc-yes:hover{background:var(--brand-700)}
.cc-alt{background:var(--paper-2); color:var(--text); border-color:var(--line)}
.cc-alt:hover{background:#fff; border-color:var(--brand-200)}
.cc-ghost{background:none; color:var(--muted); margin-right:auto; padding-left:0}
.cc-ghost:hover{color:var(--text)}

/* Held-back embed: thumbnail plus play button, no third-party request. */
.tut-player[data-embed]{cursor:pointer}
.tut-player .consent-note{position:absolute; left:0; right:0; bottom:0;
  padding:var(--s5) var(--s6); font-size:var(--fs-xs); color:var(--on-dark-2)}

@media (max-width:640px){
  .cc{padding:0}
  .cc-box{border-radius:var(--r-lg) var(--r-lg) 0 0; padding:var(--s6)}
  .cc-acts{flex-direction:column-reverse}
  .cc-b{width:100%}
  .cc-ghost{margin-right:0; order:3}
}


/* ---------- 8b. HERO: fit above the fold on desktop ----------
   The hero used to size purely off viewport WIDTH, so on a normal laptop the
   headline was big enough to push the buttons and the fine print below the
   fold. These rules make the headline, the top padding and the portrait
   respond to viewport HEIGHT as well, so the whole first screen lands with
   room to spare. Width-gated at 900px, so phones and tablets are untouched. */
@media (min-width:900px){
  .hero{padding-top:calc(var(--nav-h) + clamp(28px, 5.2vh, 96px))}

  /* min() takes whichever is smaller - the width-based size or the
     height-based one - so a short window shrinks the headline. */
  .hero h1{font-size:clamp(2.6rem, min(5.6vw, 7.2vh), 4.1rem)}

  .hero .lead{font-size:clamp(1.0625rem, min(1.25vw, 2.1vh), 1.25rem)}
}

/* On a short window the portrait becomes the tallest thing in the row, so cap
   it too. Above 820px tall this never applies and the portrait keeps its
   full 440px. */
@media (min-width:900px) and (max-height:820px){
  .portrait{max-width:min(440px, 52vh)}
  .hero h1{margin:var(--s5) 0 var(--s5)}
  .hero-actions{margin-top:var(--s6)}
}