/* Korlea marketing site. Neutrals adopted verbatim from the Veskyra house
   design system (../../veskyra/public/styles.css) so Korlea sits on the same
   gunmetal/warm-paper canvas as every other family site. Signature pair is
   Teal (the product's real primary, leads: wordmark, CTAs, links, focus)
   with Violet as its supporting partner (gradient stop, hero glow, logo),
   differentiating Korlea from ryskra's teal+amber pairing. Light is
   default; dark via [data-theme="dark"] on <html>, toggle persisted to
   localStorage under 'korlea_theme'. */

:root,
[data-theme="light"]{
  --ink:#141A22;
  --primary:#0B5B55;      /* korlea-teal-ink: wordmark/nav text, always contrasts against --nav-bg */
  --accent:#0F766E;       /* korlea-teal: the lead, CTA fill, focus, badge */
  --accent-ink:#0B5B55;   /* korlea-teal-ink: links/text on paper */
  --violet:#5B3FA6;       /* korlea-violet: the support, gradient partner, hero glow */
  --violet-ink:#4A2F8C;
  --paper:#F3F1EC;        /* warm paper with a touch more body than flat cream */
  --surface:#FFFEFA;
  --surface-2:#E9E5DC;
  --muted:#5A636F;
  --border:#DDD8CE;
  --danger:#E11D48;
  --success:#0E9F6E;
  --review:#D97706;
  --nav-bg:rgba(243,241,236,.88);
  --footer-bg:#1A1C22;    /* deep ink with a cool undertone for teal/violet contrast */
  --footer-text:#B6B8BE;
  --footer-border:rgba(255,255,255,.12);
  --glow-teal:rgba(15,118,110,.18);
  --glow-violet:rgba(91,63,166,.16);
  --depth-shadow:0 18px 48px -28px rgba(20,26,34,.28);
}

/* Dark mode is a rich neutral gunmetal gray, not a navy-tinted "AI dark mode".
   R/G/B channels stay close together on purpose. */
[data-theme="dark"]{
  --ink:#F0EEE9;
  --primary:#12A093;      /* teal.bright, the real app's dark-surface teal */
  --accent:#12A093;
  --accent-ink:#35C0B0;
  --violet:#8B6FD6;
  --violet-ink:#B3A3E8;
  --paper:#121316;
  --surface:#1C1D21;
  --surface-2:#27282D;
  --muted:#A5A6AB;
  --border:#3A3B41;
  --danger:#FB7185;
  --success:#16B57F;
  --review:#F0A93A;
  --nav-bg:rgba(18,19,22,.88);
  --footer-bg:#0C0D10;
  --footer-text:#9A9BA1;
  --footer-border:rgba(255,255,255,.08);
  --glow-teal:rgba(18,160,147,.24);
  --glow-violet:rgba(139,111,214,.20);
  --depth-shadow:0 22px 56px -28px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body{overflow-x:hidden;margin:0;background:
  radial-gradient(ellipse 80% 50% at 0% -10%, var(--glow-teal), transparent 55%),
  radial-gradient(ellipse 70% 45% at 100% 0%, var(--glow-violet), transparent 50%),
  var(--paper);
  color:var(--ink);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background .18s ease,color .18s ease;text-wrap:pretty}
h1,h2,h3{font-family:"Plus Jakarta Sans",Inter,sans-serif;line-height:1.1;margin:0;text-wrap:balance}
a{color:var(--accent-ink)}
img,svg{max-width:100%}

.container{max-width:1160px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.container{padding:0 40px}}
section{padding:clamp(56px,9vw,112px) 0}

.eyebrow{font-family:"JetBrains Mono",monospace;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:14px}

.nav{position:sticky;top:0;z-index:20;background:var(--nav-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);transition:background .18s ease,border-color .18s ease}
.nav .container{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.wordmark{
  font-family:"Plus Jakarta Sans",Inter,sans-serif;
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.25rem;
  letter-spacing:-.01em;
  color:var(--primary);
  text-decoration:none;
  line-height:1;
}
.nav-links{display:none;gap:28px;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:.95rem}
.nav-links a.btn,.nav-links a.btn-primary{color:#fff;font-weight:600}
.nav-links a.btn-secondary{color:var(--ink)}
/* The header rule above outranks .btn-secondary:hover, so the hover fill needs its text color here too (it read ink on ink). */
.nav-links a.btn-secondary:hover,.nav-links a.btn-secondary:focus-visible{color:var(--paper)}
/* The full header row needs about 810px (logo, six links, the demo button, the theme toggle); below that, the menu. */
@media(min-width:840px){.nav-links{display:flex}}
.nav-mobile-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:none;font-size:1.5rem;cursor:pointer;color:var(--primary)}
@media(min-width:840px){.nav-mobile-toggle{display:none}#mobile-menu.open{display:none}}
#mobile-menu{display:none;flex-direction:column;gap:16px;padding:20px 24px 28px;border-bottom:1px solid var(--border)}
#mobile-menu.open{display:flex}
#mobile-menu a{color:var(--ink);text-decoration:none;font-weight:500}
#mobile-menu a.btn,#mobile-menu a.btn-primary{color:#fff;font-weight:600}
.nav-links a.nav-cta{padding:10px 20px}
.nav-links .nav-login a.nav-cta{padding:10px 16px}
/* The extra Log in button only fits the header row from 1000px; below that it would push the row off screen. */
.nav-links .nav-login{display:none}
@media(min-width:1000px){.nav-links .nav-login{display:list-item}}
#mobile-menu a.mobile-login{font-weight:700}
#mobile-menu a.mobile-cta{color:var(--accent-ink);font-weight:700}
#mobile-menu .theme-toggle{align-self:flex-start}

/* Brand logo: one fixed square, opacity-swapped themes, sized to wordmark
   cap-height so the seal and KORLEA read as one centered lockup. */
.brand-logo-wrap{
  position:relative;
  display:block;
  width:28px;height:28px;
  flex-shrink:0;line-height:0;
  overflow:hidden;
}
.brand-logo-wrap:has(.brand-logo--sm){width:24px;height:24px}
.brand-logo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
}
.brand-logo-dark{opacity:0}
[data-theme="dark"] .brand-logo-light{opacity:0}
[data-theme="dark"] .brand-logo-dark{opacity:1}

/* Theme toggle */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .15s ease,border-color .15s ease;flex-shrink:0}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.95rem;padding:14px 24px;border-radius:10px;text-decoration:none;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease,box-shadow .15s ease;border:1.5px solid transparent}
.btn:hover{transform:translateY(-1px)}
/* Solid fill (no gradient): transparent borders on gradients leave a bright fringe on the right edge in dark mode. */
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 28px -14px rgba(15,118,110,.55)}
.btn-primary:hover{background:var(--accent-ink);border-color:var(--accent-ink);filter:none}
/* Dark chrome: button fill stays AA teal so white label stays ≥4.5:1. */
[data-theme="dark"] .btn-primary{background:#0F766E;border-color:#0F766E;color:#fff}
[data-theme="dark"] .btn-primary:hover{background:#0B5B55;border-color:#0B5B55}
.btn-secondary{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-secondary:hover{background:var(--ink);color:var(--paper)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
/* Buttons get a matching radius so the focus ring doesn't look like a side fringe. */
a.btn:focus-visible{border-radius:10px}

.hero{padding-top:clamp(64px,10vw,120px)}
/* Two rows, one per sentence, sized to the copy column so the first never wraps (7.6cqw: the line is 12.4 em wide at 95%). Phones get a third row. */
.hero-copy{container-type:inline-size}
.hero h1{font-size:clamp(2rem,7.6cqw,3.6rem);font-weight:800;letter-spacing:-.02em;max-width:none;white-space:nowrap}
.pbr{display:none}
@media(max-width:599px){.pbr{display:inline}}
.hero .lead{font-size:clamp(1.15rem,1.8vw,1.35rem);color:var(--muted);max-width:60ch;margin-top:24px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

.strip{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.strip .grid-3{margin-top:0}
.strip p{font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:1.05rem;color:var(--primary)}

.grid-3{display:grid;grid-template-columns:1fr;gap:24px;margin-top:40px}
@media(min-width:860px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.grid-2{display:grid;grid-template-columns:1fr;gap:24px;margin-top:40px}
@media(min-width:768px){.grid-2{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:var(--depth-shadow)}
[data-theme="dark"] .card,[data-theme="dark"] .step,[data-theme="dark"] details,[data-theme="dark"] .contact-card,[data-theme="dark"] .contact-mini{box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 28px -16px rgba(0,0,0,.55)}
.card h3{font-size:1.375rem;font-weight:600;margin-bottom:8px}
.card ul{padding-left:18px;margin:16px 0;color:var(--muted)}
.card ul li{margin-bottom:6px}

h2{font-size:clamp(1.9rem,3.5vw,2.75rem);font-weight:700;max-width:24ch}
.section-head{max-width:640px}
.section-head .body-muted{margin-top:16px}
.badge + h3{margin-top:10px}
/* breathing room so the card grid never crowds a wrapping heading above it */
.section-head + .grid-2,.section-head + .grid-3{margin-top:64px}
p.body-muted{color:var(--muted)}

/* step numbers (how it works) */
.steps{counter-reset:s;display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px}
@media(min-width:860px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 20px}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.step h3{font-size:1.05rem;margin:10px 0 6px}
.step p{margin:0;font-size:.9rem;color:var(--muted)}

.badge{display:inline-block;background:var(--violet);color:#fff;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:4px 10px;border-radius:20px;margin-bottom:12px}
[data-theme="dark"] .badge{background:#5B3FA6;color:#fff}
.badge-muted{background:#3A4643;color:#fff}
[data-theme="dark"] .badge-muted{background:#3A3B41;color:#F0EEE9}
.pricing-note{color:var(--muted);font-size:.9rem;margin-top:24px}

/* faq: hover accent is violet (the supporting color), so it reads as a
   distinct interaction from the teal-led buttons/links elsewhere on the page */
details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin-bottom:12px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
details:hover{border-color:var(--violet);box-shadow:0 12px 26px -18px rgba(91,63,166,.22)}
[data-theme="dark"] details:hover{box-shadow:0 12px 26px -18px rgba(0,0,0,.55)}
summary{font-weight:600;cursor:pointer;font-family:"Plus Jakarta Sans",sans-serif}
details p{color:var(--muted);margin-top:12px;margin-bottom:0}

/* final CTA */
.cta-band{background:var(--footer-bg);color:#fff;text-align:center;transition:background .18s ease}
.cta-band h2{color:#fff;max-width:none;margin:0 auto}
.cta-band p{color:rgba(255,255,255,.72);max-width:50ch;margin:16px auto 32px}
.cta-band .eyebrow{color:#5eead4}

/* contact */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:40px;margin-top:40px}
@media(min-width:860px){.contact-wrap{grid-template-columns:1.1fr .9fr}}
.contact-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;transition:background .18s ease,border-color .18s ease}
/* Contact page: the side card under the direct inbox. */
.contact-aside hr{border:none;border-top:1px solid var(--border);margin:24px 0}
.contact-aside h3{font-size:1.1rem}
.contact-card .big-link{font-family:"JetBrains Mono",monospace;font-size:1.15rem;color:var(--accent-ink);text-decoration:none;display:inline-block;margin:8px 0 20px}
/* About: "The name" strip. The word split into its two halves, each with what it stands for. */
.name-wrap{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
@media(min-width:900px){.name-wrap{grid-template-columns:1.25fr .75fr;gap:64px}}
.name-copy p{max-width:60ch;margin:18px 0 0}
.name-copy p + p{margin-top:14px}
.name-split{display:flex;justify-content:center;margin:0}
.name-part{padding:0 clamp(18px,3vw,32px);text-align:center}
.name-part + .name-part{border-left:1px solid var(--border)}
.name-part dt{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;font-size:clamp(3.25rem,7vw,5.25rem);line-height:1;letter-spacing:-.02em;color:var(--violet-ink)}
.name-part:first-child dt{color:var(--accent-ink)}
.name-part dd{margin:14px 0 0;font-family:"JetBrains Mono",monospace;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.contact-wrap-about{gap:24px}
@media(min-width:640px){.contact-wrap-about{grid-template-columns:1fr 1fr}.contact-family--wide{grid-column:1 / -1}}
@media(min-width:860px){.contact-family--wide .platform-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}}
.contact-card--compact,.contact-family--wide{padding:28px 32px}
.contact-card--compact .big-link{margin:6px 0 10px}
.contact-card--compact p{margin:0}
.contact-card--compact .eyebrow{margin-bottom:10px}
/* About: "The Veskyra family" panel, the same pattern as the platform panel
   on veskyra.com/contact: one row per sister platform with its badge, its
   name in its own color and one line on what it does. Colors are veskyra.com's
   per-platform tokens; the row border takes the platform color on hover. */
:root,[data-theme="light"]{--reskyr-accent:#E8541A;--reskyr-ink:#B8420F;--kyrvec-accent:#3360C9;--ryskra-accent:#1F4037;--valkred-accent:#2C5A45}
[data-theme="dark"]{--reskyr-accent:#F2794F;--reskyr-ink:#F2794F;--kyrvec-accent:#5B8AE0;--ryskra-accent:#E6BC42;--valkred-accent:#8FC3A8}
.contact-family > p{font-size:.92rem;margin:0 0 18px}
.platform-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.platform-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;background:var(--paper);transition:border-color .15s ease,transform .15s ease}
.platform-row:hover{transform:translateY(-1px)}
.platform-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fam-badge{width:32px;height:32px;flex-shrink:0;display:block}
.fam-badge-dark{display:none}
[data-theme="dark"] .fam-badge-light{display:none}
[data-theme="dark"] .fam-badge-dark{display:block}
.platform-row-name{display:block;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:.98rem;line-height:1.25}
.platform-row-line{display:block;font-size:.85rem;line-height:1.4;color:var(--muted)}
/* Reskyr's text shade (its own site's --accent-ink): the brand orange is too light for text on paper. */
.row-reskyr .platform-row-name{color:var(--reskyr-ink)}
.row-kyrvec .platform-row-name{color:var(--kyrvec-accent)}
.row-ryskra .platform-row-name{color:var(--ryskra-accent)}
.row-valkred .platform-row-name{color:var(--valkred-accent)}
.platform-row.row-reskyr:hover{border-color:var(--reskyr-accent)}
.platform-row.row-kyrvec:hover{border-color:var(--kyrvec-accent)}
.platform-row.row-ryskra:hover{border-color:var(--ryskra-accent)}
.platform-row.row-valkred:hover{border-color:var(--valkred-accent)}

footer{background:var(--footer-bg);color:var(--footer-text);padding:56px 0 32px;transition:background .18s ease}
footer .wordmark{color:#fff}
footer a{color:var(--footer-text)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-head{color:var(--footer-text);font-family:"JetBrains Mono",monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--footer-border);font-size:.85rem;color:var(--footer-text);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.footer-bottom a{color:var(--footer-text)}
.family-strip{display:flex;align-items:center;gap:8px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.85rem}
.family-strip a{color:#fff;text-decoration:none}

.nav-links a.active,#mobile-menu a.active{color:var(--accent-ink);font-weight:700}

/* sub-page hero */
.page-hero{position:relative;overflow:hidden;padding-top:clamp(48px,8vw,88px);padding-bottom:8px}
@media (max-width:599px){.page-hero{padding-bottom:28px}}
/* the signature teal-lead/violet-support gradient wash, as the sub-page
   hero's ambient glow (teal from the top-left, violet from the right) */
.page-hero::before{
  content:"";position:absolute;inset:-80px;z-index:0;
  background:radial-gradient(circle at 12% 0%, var(--glow-teal), transparent 50%),
             radial-gradient(circle at 100% 35%, var(--glow-violet), transparent 55%);
  pointer-events:none
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.1rem,4.5vw,3rem);font-weight:800;letter-spacing:-.02em;max-width:22em}
.page-hero .lead{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:64ch;margin-top:18px}

/* About: large theme-swapped seal (512 source) so ring text stays readable */
.about-hero{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(28px,5vw,48px);
}
@media(min-width:900px){
  .about-hero{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:56px;
  }
  .about-hero-copy{flex:1;min-width:0;max-width:38rem}
}
.about-seal{margin:0;flex-shrink:0;text-align:center}
.about-seal-wrap{
  position:relative;
  display:block;
  width:min(72vw,280px);
  height:min(72vw,280px);
  margin:0 auto;
  line-height:0;
}
@media(min-width:900px){
  .about-seal-wrap{width:320px;height:320px}
}
.about-seal-img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
}
.about-seal-dark{opacity:0}
[data-theme="dark"] .about-seal-light{opacity:0}
[data-theme="dark"] .about-seal-dark{opacity:1}

/* feature comparison table */
.compare-table{width:100%;border-collapse:collapse;min-width:640px;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.compare-table th,.compare-table td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--border);font-size:.92rem}
.compare-table th{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;color:var(--primary);background:var(--surface-2)}
.compare-table td:first-child,.compare-table th:first-child{text-align:left;font-weight:600;color:var(--ink)}
.compare-table tr:last-child td{border-bottom:none}
/* the recommended column is highlighted (not last-child) */
.compare-table th.rec,.compare-table td.rec{background:rgba(15,118,110,.07)}
.compare-table th.rec{color:var(--accent-ink)}
.compare-table td.rec{color:var(--ink);font-weight:600}
[data-theme="dark"] .compare-table th.rec,[data-theme="dark"] .compare-table td.rec{background:rgba(18,160,147,.12)}
.table-scroll{overflow-x:auto}
.rec-badge{display:inline-block;background:var(--accent);color:#fff;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px;margin-left:8px;vertical-align:middle}
[data-theme="dark"] .rec-badge{background:#0F766E;color:#fff}

.contact-mini{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.contact-mini p{margin:0;max-width:46ch;color:var(--muted)}
.contact-mini .btn{flex-shrink:0}

@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

/* ============================================================
   Homepage hero: two-column, brand visual, ambient depth
   ============================================================ */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-140px;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 4% 6%, var(--glow-teal), transparent 46%),
             radial-gradient(circle at 96% 24%, var(--glow-violet), transparent 52%);
}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center}
@media(min-width:980px){.hero-grid{grid-template-columns:1.25fr .75fr;gap:48px}}

/* Brand emblem visual (decorative, echoes the logo mark) */
.hero-visual{position:relative;display:none;width:100%;max-width:440px;aspect-ratio:1/1;margin-inline:auto}
@media(min-width:980px){.hero-visual{display:block}}
.hero-visual .emblem{width:100%;height:100%;display:block;color:var(--border);filter:drop-shadow(0 26px 60px rgba(15,118,110,.16))}
[data-theme="dark"] .hero-visual .emblem{filter:drop-shadow(0 26px 70px rgba(0,0,0,.55))}
.hero-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:9px 15px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.83rem;color:var(--ink);box-shadow:0 12px 30px -14px rgba(17,24,39,.30);white-space:nowrap}
[data-theme="dark"] .hero-chip{box-shadow:0 14px 34px -14px rgba(0,0,0,.62)}
.hero-chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hero-chip.c1{top:5%;left:-4%}
.hero-chip.c2{top:31%;right:-6%}
.hero-chip.c3{bottom:26%;left:-6%}
.hero-chip.c4{bottom:4%;right:2%}

/* Competency rings (home brand emblem). Start empty so delay never flashes full. */
.emblem .ctrack{fill:none;stroke:var(--border);stroke-width:14;opacity:.55}
.emblem .cring{
  fill:none;stroke-width:14;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation-duration:3.2s;animation-timing-function:cubic-bezier(.33,.08,.2,1);
  animation-fill-mode:both;
}
/* Teal-only rings: product accent, not a rainbow of brand colors */
.emblem .cring.r1{stroke:#0F766E;animation-name:cfill-r1;animation-delay:.35s}
.emblem .cring.r2{stroke:#0B5B55;animation-name:cfill-r2;animation-delay:.7s}
.emblem .cring.r3{stroke:#12A093;animation-name:cfill-r3;animation-delay:1.05s}
.emblem .cring.r4{stroke:#0F766E;animation-name:cfill-r4;animation-delay:1.4s;opacity:.85}
@keyframes cfill-r1{from{stroke-dashoffset:100}to{stroke-dashoffset:18}}
@keyframes cfill-r2{from{stroke-dashoffset:100}to{stroke-dashoffset:34}}
@keyframes cfill-r3{from{stroke-dashoffset:100}to{stroke-dashoffset:12}}
@keyframes cfill-r4{from{stroke-dashoffset:100}to{stroke-dashoffset:40}}
@media (prefers-reduced-motion: reduce){
  .emblem .cring{animation:none}
  .emblem .cring.r1{stroke-dashoffset:18}
  .emblem .cring.r2{stroke-dashoffset:34}
  .emblem .cring.r3{stroke-dashoffset:12}
  .emblem .cring.r4{stroke-dashoffset:40}
}

/* Product-style mastery bars (Features preview; matches learner app chrome) */
.preview-bars{
  max-width:520px;margin:40px auto 0;padding:28px 28px 24px;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  box-shadow:var(--depth-shadow);
}
.preview-bars .pb-title{
  font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px;
}
.preview-bars .pb-row{display:grid;grid-template-columns:minmax(7.5rem,max-content) 1fr 2.6rem;gap:12px;align-items:center;margin-bottom:14px}
.preview-bars .pb-row:last-child{margin-bottom:0}
.preview-bars .pb-label{font-size:.86rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-bars .pb-track{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
@keyframes barfill{from{width:0}to{width:var(--w)}}
/* Home "For group access" preview: how many people in the group sit at each
   level, per competency, as the employer portal draws it (same four levels and
   colors as poc.allotment.tsx). Levels, never percentages or scores, since the
   employer never sees scores. The whole stack sweeps in as one bar. */
.preview-bars.levels .pb-row{grid-template-columns:9.5rem 1fr}
.preview-bars .pb-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:-6px 0 18px;font-size:.78rem;color:var(--muted)}
.preview-bars .pb-legend span{display:inline-flex;align-items:center;gap:6px}
.preview-bars .pb-legend .pb-seg{width:10px;height:10px;border-radius:2px}
.preview-bars .pb-stack{display:flex;height:100%;width:0;--w:100%}
.preview-bars .pb-seg{display:block;height:100%}
.preview-bars .pb-seg.new{background:#C9C5BC}
.preview-bars .pb-seg.practicing{background:#F0B429}
.preview-bars .pb-seg.proficient{background:#3E9C7F}
.preview-bars .pb-seg.mastered{background:#0F766E}
.preview-bars.is-visible .pb-stack,
.preview-bars:not(.reveal-ready) .pb-stack{animation:barfill 2.8s cubic-bezier(.33,.08,.2,1) forwards}
.preview-bars.is-visible .pb-stack.b1,.preview-bars:not(.reveal-ready) .pb-stack.b1{animation-delay:.25s}
.preview-bars.is-visible .pb-stack.b2,.preview-bars:not(.reveal-ready) .pb-stack.b2{animation-delay:.55s}
.preview-bars.is-visible .pb-stack.b3,.preview-bars:not(.reveal-ready) .pb-stack.b3{animation-delay:.85s}
.preview-bars.is-visible .pb-stack.b4,.preview-bars:not(.reveal-ready) .pb-stack.b4{animation-delay:1.15s}
@media (prefers-reduced-motion: reduce){.preview-bars .pb-stack{animation:none;width:100%}}

.cta-band .cta-sub{color:rgba(255,255,255,.72);max-width:42ch;margin:16px auto 0;line-height:1.55}
.closing-note{margin-top:36px;max-width:54ch;color:var(--muted);font-size:1.05rem;line-height:1.7}
.footer-blurb{color:var(--footer-text);margin-top:12px;line-height:1.55}
.footer-note{font-size:.9rem;line-height:1.5}
.social-icons{display:flex;gap:14px;margin-top:16px}
.social-icons a{color:var(--footer-text);display:inline-flex}
.social-icons a:hover{color:#fff}
.social-icons svg{width:18px;height:18px}

/* ============================================================
   Pillars: carded, iconed (replaces the bare text strip)
   ============================================================ */
.pillars-section{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:34px 0}
.pillars{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:560px){.pillars{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--border);border-radius:14px;padding:18px;text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.pillar:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 14px 30px -20px rgba(15,118,110,.4)}
[data-theme="dark"] .pillar:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.pillar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pillar-ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(15,118,110,.10);color:var(--accent)}
[data-theme="dark"] .pillar-ic{background:rgba(18,160,147,.16)}
.pillar-ic svg{width:20px;height:20px}
.pillar-t{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:1rem;margin:1px 0 0;color:var(--ink)}
.pillar-d{color:var(--muted);font-size:.86rem;line-height:1.45;margin:3px 0 0}

/* card icon chip (why / feature cards) */
.card-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:rgba(15,118,110,.10);color:var(--accent);margin-bottom:18px}
[data-theme="dark"] .card-ic{background:rgba(18,160,147,.16)}
.card-ic svg{width:23px;height:23px}

.nav.scrolled{box-shadow:0 8px 24px -18px rgba(17,24,39,.25)}
[data-theme="dark"] .nav.scrolled{box-shadow:0 8px 24px -18px rgba(0,0,0,.6)}

/* scroll reveal: motion only (no opacity hide). Opacity:0 made axe
   mis-measure near-white text contrast on not-yet-revealed pillars. */
[data-reveal].reveal-ready{transform:translateY(18px);transition:transform .5s ease}
[data-reveal].reveal-ready.is-visible{transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal].reveal-ready{transform:none;transition:none}
}

.pricing-anchor{font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 8px}
.trust-note{max-width:64ch;font-size:.95rem;color:var(--muted);line-height:1.55}

/* Footer stays dark in either theme. */
footer .brand-logo-light{opacity:0}
footer .brand-logo-dark{opacity:1}

/* Desktop line breaks the copy asks for. On narrow screens the text just wraps, so nothing is forced. */
.dbr{display:none}
@media (min-width:1000px){
  .dbr{display:inline}
  #why .section-head,#mastery .section-head,#access .section-head,#platforms .section-head,#for-learners .section-head,#product-preview .section-head{max-width:900px}
  h2.one-line{max-width:none}
  #access .section-head h2,#mastery .section-head h2,#for-learners .section-head h2,#product-preview .section-head h2{white-space:nowrap}
}

.contact-mini p.cta-wide{max-width:none}

/* The demo box sits close under the section before it, not a full section of space away from its text. */
section:has(+ #contact-cta){padding-bottom:clamp(24px,4vw,48px)}
#contact-cta{padding-top:0}
/* After a shaded strip the demo box needs its own space, or it sits on the strip's edge. */
.strip:has(+ #contact-cta){padding-bottom:clamp(48px,6vw,80px)}
.strip + #contact-cta{padding-top:clamp(48px,6vw,80px)}
.contact-mini p{align-self:center}

/* Tablet widths are too narrow for the forced desktop breaks, so they only apply from 1100px. */
@media (min-width:1000px) and (max-width:1099px){.dbr{display:none}}

/* Demo box on phones: the line breaks only between its two halves (.cta-line). Each half stays whole,
   the side padding eases a little, and the text scales down on the narrowest phones so the
   longer half still fits. Below 360px there isn't room, so it wraps naturally. */
@media (max-width:600px){
  .contact-mini{padding:28px 22px}
  .contact-mini p.cta-wide{font-size:max(14px,min(17px,calc((100vw - 92px) / var(--cta-fit,17.5))))}
}
/* --cta-fit is the longer half's width at 17px divided by 17 (plus a little room). Pricing's first half is longer. */
.contact-mini p.cta-long{--cta-fit:19.4}
@media (min-width:360px){.cta-line{white-space:nowrap}}
/* The Learners closing note is two sentences on two lines, "Providers" starting the second. Each stays on one line once
   there is room for the longer one (about 610px); narrower screens wrap each sentence on its own, balanced so no word sits
   alone. */
.closing-note--two{max-width:none}
.closing-note--two .cta-line{display:block}
@media (max-width:679px){.closing-note--two .cta-line{white-space:normal;text-wrap:balance}}
.nowrap{white-space:nowrap}
/* A page hero whose content sits in the middle of its band, as much space below as above (For Learners and Pricing). */
.page-hero.page-hero--even{padding-bottom:clamp(48px,8vw,88px)}
.page-hero--even .container>:last-child{margin-bottom:0}
/* Home's "Individuals or groups" drawing: the three channels and the app they lead to. */
.illus-channels .ch-node{fill:var(--surface);stroke:var(--border);stroke-width:1.5}
.illus-channels .ch-t{font-size:14px;fill:var(--ink)}
.illus-channels .ch-s{font-size:10px;letter-spacing:.08em;fill:var(--muted)}
.illus-channels .ch-l{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:2 5;stroke-linecap:round}
.illus-channels .ch-on{fill:var(--accent);fill-opacity:.08;stroke:var(--accent);stroke-width:1.6}
/* Home's "Individuals or groups" drawing: once in view each channel lights in turn, and 0.7 s later a dot is added to the
   app (three in all). One steady beat, 1.1 s apart; the dotted arrows stay still. Plays once. Reduced motion shows the end
   state. */
.illus-channels .cf{opacity:0}
.illus-channels.is-visible .cf,.illus-channels:not(.reveal-ready) .cf{animation:ch-in .4s ease-out var(--in) both}
@keyframes ch-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.illus-channels .cf{animation:none!important;opacity:1}}
/* Product's level list: once in view every row starts at Not started, then one steady beat every 0.65 s (from 0.5 s): each
   beat fills the next quarter on every ring still filling, and a row's label changes from Not started to its level on the beat
   after its ring finishes (Mastered gets its check on the last beat, 3.1 s). Plays once. Reduced motion shows the levels as
   they end. */
/* The level rings (drawing and legend), the names and the level chips. */
.illus-levels .gl-on,.illus-levels .lf{stroke:var(--accent)}
.illus-levels .gl-off{stroke:var(--accent);stroke-opacity:.28}
.illus-levels .nm{font-size:14px;fill:var(--ink)}
.illus-levels .lv{font-size:12px;fill:var(--accent-ink)}
.illus-levels .chip{fill:var(--accent);fill-opacity:.1}
.illus-levels .rule{stroke:var(--border)}
.illus-levels .lf{opacity:0}
.illus-levels .lv-to{opacity:0}
.illus-levels.is-visible .lf,.illus-levels:not(.reveal-ready) .lf{animation:lv-in .45s ease-out var(--in) both}
.illus-levels.is-visible .lv-to,.illus-levels:not(.reveal-ready) .lv-to{animation:lv-in .45s ease-out var(--in) both}
.illus-levels.is-visible .lv-from,.illus-levels:not(.reveal-ready) .lv-from{animation:lv-out .3s ease-in var(--in) forwards}
@keyframes lv-in{from{opacity:0}to{opacity:1}}
@keyframes lv-out{from{opacity:1}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.illus-levels .lf,.illus-levels .lv-to,.illus-levels .lv-from{animation:none!important}.illus-levels .lf,.illus-levels .lv-to{opacity:1}.illus-levels .lv-from{opacity:0}}
/* Learners' question card: once in view it plays one short Learn session and stops. Question 3 right, question 4 a miss
   (the chosen answer in rose, never red, the right one shown with "Not yet: why A is right"), question 5 right; the bar steps
   from 3 to 5 of 10. About 2 seconds a question, no loop. Reduced motion shows question 5 answered, still. */
.illus-quiz{--qc-miss:#A8455C}
.illus-quiz .qc-t{font-size:11px;fill:var(--muted)}
.illus-quiz .qc-chip{fill:var(--violet);fill-opacity:.12}
.illus-quiz .qc-chipt{font-size:12px;fill:var(--violet-ink)}
.illus-quiz .qc-q{fill:var(--ink);fill-opacity:.78}
.illus-quiz .qc-opt{fill:none;stroke:var(--border);stroke-width:1.2}
.illus-quiz .qc-on{fill:var(--accent);fill-opacity:.1;stroke:var(--accent);stroke-width:1.6}
.illus-quiz .qc-l{font-size:12px;fill:var(--muted)}
.illus-quiz .qc-lon{fill:var(--accent-ink)}
.illus-quiz .qc-bar{fill:var(--muted);fill-opacity:.3}
.illus-quiz .qc-baron{fill:var(--accent-ink);fill-opacity:.65}
.illus-quiz .qc-dot{fill:var(--accent)}
.illus-quiz .qc-why{fill:var(--violet);fill-opacity:.08}
.illus-quiz .qc-whyt{font-size:12px;fill:var(--violet-ink)}
.illus-quiz .qc-wl{fill:var(--ink);fill-opacity:.35}
.illus-quiz .qc-track{fill:var(--border)}
.illus-quiz .qc-fill{fill:var(--accent)}
.illus-quiz .qc-miss{fill:var(--qc-miss);fill-opacity:.08;stroke:var(--qc-miss);stroke-width:1.6}
.illus-quiz .qc-lmiss,.illus-quiz .qc-dotmiss{fill:var(--qc-miss)}
.illus-quiz .qc-barmiss{fill:var(--qc-miss);fill-opacity:.5}
[data-theme="dark"] .illus-quiz{--qc-miss:#E89AAD}
.illus-quiz .qf,.illus-quiz .qa,.illus-quiz .qp{transform-box:fill-box}
.illus-quiz .qp{transform-origin:0 50%}
.illus-quiz .qa,.illus-quiz .qp,.illus-quiz .q4,.illus-quiz .q5{opacity:0}
.illus-quiz.is-visible .qa,.illus-quiz:not(.reveal-ready) .qa{animation:qc-pop .3s ease-out var(--in) both}
.illus-quiz.is-visible .qa-why,.illus-quiz:not(.reveal-ready) .qa-why{animation-name:qc-rise}
.illus-quiz.is-visible .qp,.illus-quiz:not(.reveal-ready) .qp{animation:qc-grow .35s ease-out var(--in) both}
.illus-quiz.is-visible .q3,.illus-quiz:not(.reveal-ready) .q3{animation:qc-out .3s ease-in var(--out) forwards}
.illus-quiz.is-visible .q4,.illus-quiz:not(.reveal-ready) .q4{animation:qc-in .3s ease-out var(--in) both,qc-out .3s ease-in var(--out) forwards}
.illus-quiz.is-visible .q5,.illus-quiz:not(.reveal-ready) .q5{animation:qc-in .3s ease-out var(--in) both}
@keyframes qc-pop{from{opacity:0}to{opacity:1}}
@keyframes qc-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes qc-grow{from{opacity:0;transform:scaleX(.8)}to{opacity:1;transform:none}}
@keyframes qc-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes qc-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-16px)}}
@media(prefers-reduced-motion:reduce){.illus-quiz .qf,.illus-quiz .qa,.illus-quiz .qp{animation:none!important;transform:none!important}.illus-quiz .q3,.illus-quiz .q4{opacity:0!important}.illus-quiz .q5,.illus-quiz .q5 .qa,.illus-quiz .qp{opacity:1!important}}

/* ── Elevated pass (2026-10-17): the product's card language on the public site.
   One faded brand wash per hero (never wallpaper), drawings made from the site's own
   tokens instead of screenshots, and a section for learners. No gradient text. */
.illus{display:block;width:100%;height:auto}
.illus text{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700}
.illus .t-mono{font-family:"JetBrains Mono",monospace;font-weight:500;letter-spacing:.06em}

/* Hero: three branded study cards, one app. Drawn, not screenshots. */
.hero-stack{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:52/44}
.hero-stack .illus{position:absolute;inset:0;overflow:visible}
/* Product's card stack: when the panel comes into view the three cards deal out of one neat pile into their fan, then the front
   card keeps studying: the next answer is checked, the bar moves and 7 OF 20 becomes 8 OF 20, then it resets. Calm, no floating. */
.hero-stack .hdeal{transform-box:fill-box;transform-origin:50% 50%}
.illus-panel.reveal-ready:not(.is-visible) .hero-stack .hdeal{opacity:0}
.illus-panel.is-visible .hero-stack .hdeal,.illus-panel:not(.reveal-ready) .hero-stack .hdeal{animation:hdeal .9s cubic-bezier(.2,.75,.25,1) both}
.hero-stack .c1 .hdeal{--dx:0px;--dy:24px;--dr:0deg;animation-delay:.05s!important}
.hero-stack .c2 .hdeal{--dx:44px;--dy:72px;--dr:6deg;animation-delay:.22s!important}
.hero-stack .c3 .hdeal{--dx:-40px;--dy:46px;--dr:-7deg;animation-delay:.36s!important}
@keyframes hdeal{from{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}to{opacity:1;transform:none}}
.hero-stack .r2chk,.hero-stack .cnt8{opacity:0}
.hero-stack .pfill{transform-box:fill-box;transform-origin:0 50%}
.illus-panel.is-visible .hero-stack .r2bg,.illus-panel:not(.reveal-ready) .hero-stack .r2bg{animation:r2bg 3s ease-in-out 1.6s both}
.illus-panel.is-visible .hero-stack .r2bar,.illus-panel:not(.reveal-ready) .hero-stack .r2bar{animation:r2bar 3s ease-in-out 1.6s both}
.illus-panel.is-visible .hero-stack .r2chk,.illus-panel.is-visible .hero-stack .cnt8,
.illus-panel:not(.reveal-ready) .hero-stack .r2chk,.illus-panel:not(.reveal-ready) .hero-stack .cnt8{animation:show2 3s ease-in-out 1.6s both}
.illus-panel.is-visible .hero-stack .cnt7,.illus-panel:not(.reveal-ready) .hero-stack .cnt7{animation:hide2 3s ease-in-out 1.6s both}
.illus-panel.is-visible .hero-stack .pfill,.illus-panel:not(.reveal-ready) .hero-stack .pfill{animation:pfill 3s ease-in-out 1.6s both}
@keyframes r2bg{0%,40%{fill-opacity:.16}66%,100%{fill-opacity:.92}}
@keyframes r2bar{0%,40%{fill:#fff}66%,100%{fill:#2C756A}}
@keyframes show2{0%,46%{opacity:0}70%,100%{opacity:1}}
@keyframes hide2{0%,46%{opacity:1}70%,100%{opacity:0}}
@keyframes pfill{0%,44%{transform:scaleX(1)}76%,100%{transform:scaleX(1.1)}}
.hero-caption{margin:18px auto 0;max-width:520px;text-align:center;color:var(--muted);font-size:.9rem}
@media(prefers-reduced-motion:reduce){.hero-stack .hdeal,.hero-stack .r2bg,.hero-stack .r2bar,.hero-stack .r2chk,.hero-stack .cnt7,.hero-stack .cnt8,.hero-stack .pfill{animation:none!important;opacity:1}.hero-stack .r2chk,.hero-stack .cnt8{opacity:0}}

/* Section drawings sit in a soft panel so they read as one object. */
.illus-panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:clamp(18px,3vw,32px);box-shadow:var(--depth-shadow);margin-top:40px}
[data-theme="dark"] .illus-panel{box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 28px -16px rgba(0,0,0,.55)}
/* Smaller panels: the card stack on Product, the level list on Product, the study card on Learners (centered). */
.illus-stack{max-width:560px}
.illus-stack .hero-stack{max-width:440px;aspect-ratio:45/37}
.illus-compact{max-width:560px}
.illus-center{margin-left:auto;margin-right:auto}
.illus-compact .lvl-legend{gap:10px 16px;font-size:.875rem}
.illus-compact .lvl-legend li{gap:6px}
.illus-compact .lvl-legend svg{width:18px;height:18px}
.illus-first{margin:0 auto 32px}

/* Levels legend under the competency map (the product's five level names). */
.lvl-legend{display:flex;flex-wrap:wrap;gap:12px 22px;margin:20px 0 0;padding:0;list-style:none;font-size:.95rem;color:var(--ink)}
.lvl-legend li{display:inline-flex;align-items:center;gap:8px}
.lvl-legend svg{width:20px;height:20px;flex-shrink:0}

/* The employer promise: the same list, twice. */
.promise{display:grid;grid-template-columns:1fr;gap:16px;margin-top:40px;position:relative}
@media(min-width:768px){.promise{grid-template-columns:1fr auto 1fr;align-items:stretch}}
.promise-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px 26px;box-shadow:var(--depth-shadow)}
[data-theme="dark"] .promise-card{box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 28px -16px rgba(0,0,0,.55)}
.promise-card .eyebrow{margin-bottom:8px}
.promise-card h3{font-size:1.15rem;margin-bottom:12px}
.promise-card ul{margin:0;padding-left:0;list-style:none;color:var(--muted)}
.promise-card li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--border)}
.promise-card li:first-child{border-top:0}
.promise-card li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:.55em}
.promise-link{display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:"JetBrains Mono",monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px}
.promise-link span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.promise-link svg{width:22px;height:22px;color:var(--violet)}
@media(max-width:767px){.promise-link{padding:0}.promise-link svg{transform:rotate(90deg)}}

/* For learners, on the home page: tiles with a quiet tint, the same radius as the app's. */
.learner-tiles{display:grid;grid-template-columns:1fr;gap:20px;margin-top:40px}
@media(min-width:860px){.learner-tiles{grid-template-columns:repeat(3,1fr)}}
.ltile{position:relative;border-radius:20px;padding:28px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--depth-shadow);overflow:hidden}
[data-theme="dark"] .ltile{box-shadow:0 1px 0 rgba(255,255,255,.03),0 12px 28px -16px rgba(0,0,0,.55)}
.ltile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--glow-teal),transparent 55%);pointer-events:none}
.ltile.v::before{background:linear-gradient(135deg,var(--glow-violet),transparent 55%)}
.ltile>*{position:relative}
.ltile h3{font-size:1.2rem;margin-bottom:8px}
.ltile p{margin:0;color:var(--muted)}
.ltile .ltile-ic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--surface-2);color:var(--accent-ink);margin-bottom:14px}
.ltile .ltile-ic svg{width:20px;height:20px}
.section-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* The private demo page (korlea.com/demo, src/demoPages.ts): the site's frame and faded tiles, a stage for the video
   playing now with what it covers, and the four videos as tiles like the app's. */
.demo-section{padding:clamp(28px,4vw,48px) 0}
.demo-section.demo-tight{padding-top:8px}
.demo-section.demo-end{padding-bottom:clamp(56px,8vw,96px)}
.demo-narrow{max-width:520px}
.demo-wide{width:100%}
.demo-small{font-size:.9rem;margin:16px 0 0}
.demo-error{color:var(--danger);font-size:.9rem;margin:0}
.demo-h2{font-size:clamp(1.35rem,2.4vw,1.75rem);font-weight:700;margin:10px 0 8px;max-width:none}
.demo-access{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:600;font-size:.85rem;color:var(--ink)}
.demo-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.demo-stage{display:grid;grid-template-columns:1fr;gap:24px;padding:clamp(16px,2.4vw,24px)}
@media(min-width:1000px){.demo-stage{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);align-items:start}}
.demo-screen{display:block;width:100%;aspect-ratio:16/9;border-radius:14px;background:#0C0D10;border:1px solid var(--border)}
.demo-screen--soon{display:flex;align-items:center;justify-content:center;background:var(--surface-2)}
.demo-screen--soon p{margin:0;color:var(--muted);font-weight:600}
.demo-about{padding:4px 4px 8px}
.demo-about .body-muted{margin:0}
.demo-tile-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.demo-chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:.75rem;background:rgba(15,118,110,.10);color:var(--accent-ink)}
[data-theme="dark"] .demo-chip{background:rgba(18,160,147,.16)}
.demo-len{font-family:"JetBrains Mono",monospace;font-size:.78rem;color:var(--muted)}
.demo-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.demo-points li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:.95rem;line-height:1.45}
.demo-points svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--accent)}
.demo-tiles{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:560px){.demo-tiles{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.demo-tiles{grid-template-columns:repeat(4,1fr)}}
.demo-tile{position:relative;display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--border);background:var(--surface);overflow:hidden;text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.demo-tile::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--glow-teal),transparent 60%);pointer-events:none;z-index:1}
.demo-tile:nth-child(even)::before{background:linear-gradient(135deg,var(--glow-violet),transparent 60%)}
.demo-tile:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 14px 30px -20px rgba(15,118,110,.4)}
[data-theme="dark"] .demo-tile:hover{box-shadow:0 14px 30px -18px rgba(0,0,0,.6)}
.demo-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.demo-tile.is-current{border:2px solid var(--accent)}
.demo-thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--surface-2)}
.demo-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.demo-thumb-blank{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--glow-teal),var(--glow-violet))}
.demo-play{position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
[data-theme="dark"] .demo-play{background:#0F766E}
.demo-play svg{width:16px;height:16px;margin-left:2px}
.demo-tile-body{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 16px}
.demo-tile-title{font-family:"Plus Jakarta Sans",sans-serif;font-weight:700;font-size:1.05rem;color:var(--ink)}
.demo-try{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
@media(min-width:1000px){.demo-try{grid-template-columns:1.1fr 1.2fr auto}}
.demo-try .body-muted{margin:0}
.demo-views{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.demo-views li{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:.92rem;color:var(--muted)}
.demo-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.demo-foot .demo-small{margin:0}
.demo-foot form{margin:0}

/* Privacy and Terms: one readable column. */
.legal-page{padding-top:48px;padding-bottom:80px;max-width:720px}
.legal-page h1,.legal-page h2{font-size:1.75rem;line-height:1.2}