/* Hero stylesheet — ported verbatim from the approved mockup (artifact a242873f).
   Do not restyle: typography, spacing, contrast and palette are the approved design. */

/* Self-hosted OFL faces (ADR: never a CDN). The approved mockup linked Google Fonts;
   the same families are served from /assets/fonts here. */
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-latin-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-latin-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-latin-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"IBM Plex Serif";src:url("/assets/fonts/ibm-plex-serif-latin-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"IBM Plex Serif";src:url("/assets/fonts/ibm-plex-serif-latin-700.woff2") format("woff2");font-weight:700;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");font-weight:500;font-display:swap;}


  :root{
    --evergreen:#123B2A; --pine:#1C5940; --sprout:#3FA36C; --lime:#D8F26E;
    --night:#08140E; --night-2:#0D2018;
    --surface:#FAF9F4; --raised:#FFFFFF; --sunken:#F1EFE6;
    --line:#DFDCCF; --line-strong:#C6C2B0;
    --text:#14201A; --muted:#5A6660; --subtle:#7C877F; --on-dark:#F4F7F2;
    --ok:#1C7A4B; --ok-soft:#E6F4EC; --danger:#A32B1E; --danger-soft:#FBE9E6;
    --shadow-1:0 1px 2px rgba(20,32,26,.06);
    --shadow-2:0 8px 26px rgba(20,32,26,.11);
    --shadow-3:0 22px 54px -20px rgba(18,59,42,.4);
    --motion:180ms; --motion-slow:520ms;
    --ease:cubic-bezier(.2,.6,.3,1); --ease-out:cubic-bezier(.16,1,.3,1);
    --display:"IBM Plex Serif",Georgia,serif;
    --body:"IBM Plex Sans",system-ui,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,monospace;
    /* The brand mark (inline SVG in the topbar) is authored with the app shell's --color-*
       token names. The app shell serves those from app.css; the hero document loads tokens.css
       first (§D1), which defines --color-paper/sprout/lime as var() references — no raw hex
       here. Guarded by hero-mark-visible.test.ts. */
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --surface:#0C1512; --raised:#131E19; --sunken:#101A16;
      --line:#25332C; --line-strong:#35463D;
      --text:#E9EFEA; --muted:#A7B4AC; --subtle:#7E8C84;
      --sprout:#4FBE80; --pine:#8FD3AE;
      --ok:#5FD08A; --ok-soft:#123023; --danger:#E88B7E; --danger-soft:#331916;
      --shadow-1:0 1px 2px rgba(0,0,0,.5);
      --shadow-2:0 8px 26px rgba(0,0,0,.5);
      --shadow-3:0 22px 54px -20px rgba(0,0,0,.75);
    }
  }
  :root[data-theme="dark"]{
    --surface:#0C1512; --raised:#131E19; --sunken:#101A16;
    --line:#25332C; --line-strong:#35463D;
    --text:#E9EFEA; --muted:#A7B4AC; --subtle:#7E8C84;
    --sprout:#4FBE80; --pine:#8FD3AE;
    --ok:#5FD08A; --ok-soft:#123023; --danger:#E88B7E; --danger-soft:#331916;
    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 8px 26px rgba(0,0,0,.5);
    --shadow-3:0 22px 54px -20px rgba(0,0,0,.75);
  }

  *{box-sizing:border-box;}
  body{margin:0; background:var(--surface); color:var(--text);
    font-family:var(--body); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;}
  .display{font-family:var(--display); font-weight:700; letter-spacing:-.025em;}

  /* ══ ARABIC TYPOGRAPHY ═════════════════════════════════
     Arabic is cursive: letters join. Tracking forces gaps between joined letters and
     breaks the word. Uppercase means nothing in Arabic and mangles any Latin inside it.
     A Latin mono face has no Arabic glyphs and falls back mid-string.
     So in RTL: no tracking anywhere, no uppercase, no mono — without exception.  */
  [dir="rtl"]{font-family:"IBM Plex Sans Arabic",var(--body); line-height:1.95;}
  [dir="rtl"] *{letter-spacing:normal !important; text-transform:none !important;}
  [dir="rtl"] .display,
  [dir="rtl"] .kicker, [dir="rtl"] .eyebrow, [dir="rtl"] .lbl, [dir="rtl"] .frame-label,
  [dir="rtl"] .ring-cap, [dir="rtl"] .st, [dir="rtl"] .kk, [dir="rtl"] .mono,
  [dir="rtl"] .hf-item b, [dir="rtl"] .tm, [dir="rtl"] .vl, [dir="rtl"] .ring-num,
  [dir="rtl"] .brand{font-family:"IBM Plex Sans Arabic",var(--body);}
  [dir="rtl"] .display{font-weight:700;}
  [dir="rtl"] h1.hero-h{line-height:1.35;}
  [dir="rtl"] h2{line-height:1.4;}
  [dir="rtl"] .th h3{line-height:1.4;}
  [dir="rtl"] .kicker, [dir="rtl"] .eyebrow, [dir="rtl"] .lbl,
  [dir="rtl"] .frame-label, [dir="rtl"] .st, [dir="rtl"] .kk, [dir="rtl"] .ring-cap{font-size:12.5px;}

  .shell{max-width:1120px; margin:0 auto; padding-inline:clamp(18px,4.5vw,44px);}

  /* ══ HERO ══════════════════════════════════════════════ */
  .hero{
    position:relative; overflow:hidden; isolation:isolate;
    background:
      radial-gradient(1100px 620px at 78% 8%, rgba(63,163,108,.30), transparent 62%),
      radial-gradient(760px 520px at 12% 92%, rgba(216,242,110,.13), transparent 60%),
      linear-gradient(168deg, var(--night) 0%, #0B1C14 46%, var(--night-2) 100%);
    color:var(--on-dark);
    padding-block:clamp(28px,5vw,60px) clamp(58px,8vw,108px);
    border-end-start-radius:34px; border-end-end-radius:34px;
  }
  #growth{position:absolute; inset:0; inline-size:100%; block-size:100%; z-index:0; opacity:.92;}
  .hero .shell{position:relative; z-index:1;}

  .topbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    padding-block-end:clamp(30px,5vw,56px);}
  .brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:17px;}
  /* The mark stands on its own — no tile, no gradient plate. Owner-selected 22 Aug. */
  .brand .glyph{inline-size:32px; block-size:32px; display:grid; place-items:center;}
  .brand .glyph svg{inline-size:32px; block-size:32px;}
  .topbar .sp{flex:1 1 auto;}
  .ghost{
    font:inherit; font-size:13.5px; cursor:pointer; color:var(--on-dark);
    background:rgba(244,247,242,.07); border:1px solid rgba(244,247,242,.2);
    border-radius:8px; padding:7px 13px;
    transition:background var(--motion) var(--ease), border-color var(--motion) var(--ease), transform var(--motion) var(--ease);
  }
  .ghost:hover{background:rgba(244,247,242,.14); border-color:var(--lime); transform:translateY(-1px);}
  .ghost:focus-visible, .cta:focus-visible, .flip input:focus-visible + .card3d{
    outline:2px solid var(--lime); outline-offset:3px;
  }

  .kicker{
    display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--lime); background:rgba(216,242,110,.09);
    border:1px solid rgba(216,242,110,.26); border-radius:99px; padding:6px 14px;
  }
  .kicker .pulse{inline-size:6px; block-size:6px; border-radius:50%; background:var(--lime);
    animation:pulse 2.4s var(--ease) infinite; flex:none;}
  @keyframes pulse{0%,100%{opacity:1; scale:1;} 50%{opacity:.35; scale:.7;}}

  h1.hero-h{margin:0; font-size:clamp(40px,7.2vw,84px); line-height:1.04; max-inline-size:16ch; text-wrap:balance;}
  h1.hero-h .em{color:var(--lime); position:relative; display:inline-block;}
  h1.hero-h .em::after{
    content:""; position:absolute; inset-inline:0; inset-block-end:.05em; block-size:3px;
    background:linear-gradient(90deg,var(--lime),transparent); border-radius:4px;
    transform-origin:left center; animation:underline 1.1s .75s var(--ease-out) both;
  }
  [dir="rtl"] h1.hero-h .em::after{transform-origin:right center;
    background:linear-gradient(270deg,var(--lime),transparent);}
  @keyframes underline{from{scale:0 1; opacity:0;} to{scale:1 1; opacity:1;}}

  .hero-sub{margin:24px 0 0; font-size:clamp(17px,2.05vw,20px); line-height:1.55;
    color:rgba(244,247,242,.82); max-inline-size:46ch;}
  [dir="rtl"] .hero-sub{line-height:1.85;}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center;}
  .cta{
    font:inherit; font-size:15.5px; font-weight:600; cursor:pointer;
    border-radius:14px; padding:14px 26px; border:1px solid transparent;
    display:inline-flex; align-items:center; gap:10px;
    transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), background var(--motion) var(--ease);
  }
  .cta.solid{background:var(--lime); color:var(--night); box-shadow:0 10px 30px -10px rgba(216,242,110,.6);}
  .cta.solid:hover{transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(216,242,110,.75);}
  .cta.line{background:transparent; color:var(--on-dark); border-color:rgba(244,247,242,.3);}
  .cta.line:hover{transform:translateY(-2px); border-color:var(--lime);}
  .cta svg{inline-size:17px; block-size:17px;}
  [dir="rtl"] .cta svg{scale:-1 1;}

  .hero-foot{margin-top:clamp(38px,6vw,68px); padding-top:22px;
    border-top:1px solid rgba(244,247,242,.14);
    display:flex; flex-wrap:wrap; gap:14px 40px;}
  .hf-item{display:flex; align-items:center; gap:10px; font-size:15px; color:rgba(244,247,242,.8);}
  .hf-item svg{inline-size:17px; block-size:17px; color:var(--lime); flex:none;}

  .fade{opacity:0; translate:0 18px; animation:rise .9s var(--ease-out) both;}
  .d1{animation-delay:.05s} .d2{animation-delay:.16s} .d3{animation-delay:.28s}
  .d4{animation-delay:.4s} .d5{animation-delay:.54s}
  @keyframes rise{to{opacity:1; translate:0 0;}}

  /* ══ SECTIONS ══════════════════════════════════════════ */
  section{padding-block:clamp(50px,7.5vw,92px);}
  .sec-head{max-inline-size:60ch; margin-bottom:clamp(24px,4vw,42px);}
  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--sprout); margin:0 0 12px;}
  h2{margin:0; font-size:clamp(26px,3.8vw,40px); line-height:1.14; text-wrap:balance;}
  .sec-sub{margin:16px 0 0; font-size:clamp(16px,1.9vw,18.5px); color:var(--muted); max-inline-size:54ch;}

  .thesis{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(288px,1fr));}
  .th{border-radius:20px; padding:clamp(22px,3vw,34px); border:1px solid var(--line);
    background:var(--raised); box-shadow:var(--shadow-1);
    display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;}
  .th.old{opacity:.85;}
  .th.new{border-color:var(--sprout); box-shadow:var(--shadow-3);}
  .th .lbl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--subtle);}
  .th.new .lbl{color:var(--sprout);}
  .th h3{margin:0; font-size:clamp(22px,2.7vw,30px); line-height:1.18; letter-spacing:-.015em;}
  .th p{margin:0; color:var(--muted); font-size:15.5px;}
  .th .bars{display:flex; gap:5px; margin-top:6px;}
  .th .bars i{block-size:6px; flex:1; border-radius:99px; background:var(--sunken);}
  .th.old .bars i:nth-child(-n+4){background:var(--line-strong);}
  .th.new .bars i:nth-child(-n+4){background:linear-gradient(90deg,var(--pine),var(--sprout));}
  .th.new::after{content:""; position:absolute; inset-block-start:-40%; inset-inline-end:-30%;
    inline-size:60%; block-size:150%; border-radius:50%;
    background:radial-gradient(circle, rgba(63,163,108,.14), transparent 70%);}

  .lab-grid{display:grid; gap:clamp(16px,2.6vw,26px); grid-template-columns:1.25fr 1fr; align-items:start;}
  @media (max-width:820px){.lab-grid{grid-template-columns:1fr;}}
  .frame{background:var(--sunken); border:1px solid var(--line); border-radius:20px; padding:clamp(16px,2.4vw,24px);}
  .frame-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--subtle); margin:0 0 14px; display:flex; align-items:center; gap:8px;}
  .frame-label .dotlive{inline-size:6px; block-size:6px; border-radius:50%; background:var(--sprout);
    animation:pulse 2s var(--ease) infinite; flex:none;}
  .checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;}
  .check{display:flex; align-items:center; gap:12px; background:var(--raised); border:1px solid var(--line);
    border-radius:14px; padding:13px 15px; font-size:15px; opacity:.4;
    transition:opacity var(--motion-slow) var(--ease), background var(--motion-slow) var(--ease),
               border-color var(--motion-slow) var(--ease);}
  .check .mark{inline-size:20px; block-size:20px; border-radius:50%; flex:none;
    border:1.7px solid var(--line-strong); display:grid; place-items:center;
    transition:border-color var(--motion) var(--ease), background var(--motion) var(--ease);}
  .check .mark svg{inline-size:11px; block-size:11px; opacity:0; transition:opacity var(--motion) var(--ease);}
  .check .lb{flex:1 1 auto; min-width:0;}
  .check.running{opacity:1;}
  .check.running .mark{border-color:var(--sprout); border-inline-end-color:transparent; animation:spin .7s linear infinite;}
  .check.pass{opacity:1; background:var(--ok-soft); border-color:color-mix(in srgb,var(--sprout) 45%,var(--line));}
  .check.pass .mark{border-color:var(--ok); background:var(--ok);} .check.pass .mark svg{opacity:1; stroke:var(--raised);}
  .check.fail{opacity:1; background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 45%,var(--line));}
  .check.fail .mark{border-color:var(--danger); background:var(--danger);} .check.fail .mark svg{opacity:1; stroke:var(--raised);}
  @keyframes spin{to{rotate:1turn;}}
  .verdict{margin-top:14px; border-radius:14px; padding:15px 17px; display:flex; align-items:center; gap:13px;
    background:var(--raised); border:1px solid var(--line); opacity:0; translate:0 10px;
    transition:opacity var(--motion-slow) var(--ease), translate var(--motion-slow) var(--ease-out),
               background var(--motion-slow) var(--ease), border-color var(--motion-slow) var(--ease);}
  .verdict.show{opacity:1; translate:0 0;}
  .verdict.win{background:var(--ok-soft); border-color:var(--sprout);}
  .verdict .sd{inline-size:32px; block-size:32px; flex:none; color:var(--sprout);}
  .verdict.win .sd{animation:sprout .75s var(--ease-out) both;}
  @keyframes sprout{0%{scale:.5;opacity:0;rotate:-14deg;}60%{scale:1.1;opacity:1;rotate:3deg;}100%{scale:1;opacity:1;rotate:0;}}
  .verdict b{display:block; font-size:15.5px;} .verdict span{font-size:14px; color:var(--muted);}

  .mastery{background:var(--raised); border:1px solid var(--line); border-radius:20px;
    padding:clamp(20px,3vw,30px); box-shadow:var(--shadow-1);
    display:flex; flex-direction:column; gap:18px; align-items:center; text-align:center;}
  .ring-wrap{position:relative; inline-size:186px; block-size:186px;}
  .ring-wrap svg{inline-size:100%; block-size:100%; transform:rotate(-90deg);}
  [dir="rtl"] .ring-wrap svg{transform:rotate(-90deg) scaleY(-1);}
  .rt{stroke:var(--sunken);}
  .rf{stroke-linecap:round; transition:stroke-dashoffset 950ms var(--ease-out);}
  .r-app{stroke:var(--sprout);} .r-th{stroke:var(--pine); opacity:.5;}
  .ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;}
  .ring-num{font-size:40px; font-weight:600; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
  .ring-cap{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--subtle);}
  .legend{display:flex; flex-direction:column; gap:11px; inline-size:100%;}
  .lg{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:15px;}
  .lg .nm{display:flex; align-items:center; gap:9px;}
  .dot{inline-size:9px; block-size:9px; border-radius:50%; flex:none;}
  .lg .vl{font-family:var(--mono); font-size:14px; color:var(--muted); font-variant-numeric:tabular-nums;}
  .lg-note{font-size:13.5px; color:var(--subtle); margin:0;}

  .team{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(186px,1fr));}
  .mem{background:var(--raised); border:1px solid var(--line); border-radius:14px; padding:17px;
    display:flex; flex-direction:column; gap:8px;
    transition:transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), border-color var(--motion) var(--ease);}
  .mem:hover{transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--sprout);}
  .mem .ic{inline-size:32px; block-size:32px; border-radius:8px; display:grid; place-items:center;
    background:var(--sunken); color:var(--pine);}
  .mem .ic svg{inline-size:17px; block-size:17px;}
  .mem h4{margin:0; font-size:15px; font-weight:600;}
  .mem p{margin:0; font-size:13.5px; color:var(--muted);}
  .mem .st{font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase;
    padding:2px 7px; border-radius:4px; align-self:flex-start; margin-top:2px;}
  .st.live{background:var(--ok-soft); color:var(--ok);}
  .st.soon{background:var(--sunken); color:var(--subtle);}

  .close-grid{display:grid; gap:clamp(18px,3vw,34px); grid-template-columns:1fr auto; align-items:center;}
  @media (max-width:760px){.close-grid{grid-template-columns:1fr;}}
  .flip{display:block; perspective:1200px; cursor:pointer; inline-size:min(330px,100%);}
  .flip input{position:absolute; opacity:0; inline-size:1px; block-size:1px;}
  .card3d{position:relative; block-size:196px; transform-style:preserve-3d; transition:transform 640ms var(--ease-out);}
  .flip input:checked + .card3d{transform:rotateY(180deg);}
  [dir="rtl"] .flip input:checked + .card3d{transform:rotateY(-180deg);}
  .face{position:absolute; inset:0; backface-visibility:hidden; border-radius:20px; padding:22px;
    border:1px solid var(--line); background:var(--raised); box-shadow:var(--shadow-2);
    display:flex; flex-direction:column; justify-content:center; gap:10px;}
  .face .kk{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--subtle);}
  .face .tr{font-size:19px; font-weight:600; line-height:1.38;}
  .face.back{transform:rotateY(180deg); background:var(--evergreen); color:var(--on-dark); border-color:var(--evergreen);}
  [dir="rtl"] .face.back{transform:rotateY(-180deg);}
  .face.back .kk{color:var(--lime);} .face.back .df{font-size:16px; line-height:1.6;}

  .final{background:linear-gradient(150deg, var(--evergreen), #0F2E20 60%, var(--night));
    color:var(--on-dark); border-radius:20px; padding:clamp(30px,5vw,58px);
    text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
    box-shadow:var(--shadow-3);}
  .final h2{max-inline-size:17ch;}
  .final p{margin:0; color:rgba(244,247,242,.8); max-inline-size:46ch; font-size:17.5px;}

  footer{padding-block:32px 58px; color:var(--subtle); font-size:13.5px;
    display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
    border-top:1px solid var(--line); margin-top:16px;}
  footer .mono{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;}

  .reveal{opacity:0; translate:0 20px; transition:opacity 640ms var(--ease), translate 640ms var(--ease-out);}
  .reveal.in{opacity:1; translate:0 0;}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:1ms !important; transition-duration:1ms !important;
      animation-iteration-count:1 !important;}
    .fade{opacity:1; translate:none;}
  }

/* Skip link — app.css is not loaded on this document, so the rule lives here.
   Off-screen until focused; visible and high-contrast when keyboard-reached. */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:99;
  background:var(--lime);color:#0B1C14;font-family:var(--body);font-weight:600;
  padding:10px 16px;border-radius:0 0 8px 0;text-decoration:none;}
.skip:focus{inset-inline-start:0;}

/* ARABIC + MONO — the last word on source order.
   A Latin mono face has no Arabic glyphs, so Arabic set in it falls back to whatever the
   OS happens to have. The RTL reset near the top of this file is overridden later by more
   specific rules (.mem .st, .lbl, .kk), which put nine Arabic strings back into IBM Plex
   Mono. This block is last so it wins, and apps/web/test/rtl-mono.test.ts fails if a new
   mono-setting class is added without being listed here. */
[dir="rtl"] .eyebrow,
[dir="rtl"] .frame-label,
[dir="rtl"] .kicker,
[dir="rtl"] .kk,
[dir="rtl"] .lbl,
[dir="rtl"] .mono,
[dir="rtl"] .ring-cap,
[dir="rtl"] .st,
[dir="rtl"] .vl{font-family:"IBM Plex Sans Arabic",var(--body) !important;}