/* ============================================================
   Meet Claude — Younium field guide
   Page styles. Built on Younium Design System tokens
   (colors_and_type.css). Cairo + dark-blue/turquoise.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  color:var(--fg-2);
  background:var(--bg-app);
  line-height:var(--lh-relaxed);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ----- accent system (tweakable) ----- */
:root{
  --accent:var(--yn-turquoise);
  --accent-deep:var(--yn-turquoise-700);
  --accent-soft:var(--yn-turquoise-50);
  --accent-100:var(--yn-turquoise-100);
  --hero-grad:var(--grad-dark-turquoise);
  --cta-grad:var(--grad-dark-turquoise);
  --maxw:1200px;
}
:root[data-accent="blue"]{
  --accent:var(--yn-blue);
  --accent-deep:var(--yn-blue-700);
  --accent-soft:var(--yn-blue-50);
  --accent-100:var(--yn-blue-100);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--fg-1);text-wrap:balance}
.accent{color:var(--accent)}
em.em{font-style:italic;color:var(--accent);font-weight:var(--fw-bold)}
.mono{font-family:var(--font-sans);font-size:var(--fs-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:500}

/* eyebrow — numbered, mono, blue */
.eyebrow-num{display:inline-flex;align-items:center;gap:10px;color:var(--yn-blue);font-family:var(--font-sans);
  font-size:var(--fs-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:500;margin-bottom:18px}
.eyebrow-num::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}

/* ============================================================
   NAV
   ============================================================ */
nav{position:sticky;top:0;z-index:200;background:rgba(247,248,250,0.82);backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border-1)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--fg-1)}
.brand .mark{height:26px;width:auto;display:block}
.brand .x{color:var(--yn-grey-400);font-weight:var(--fw-regular)}
.navlinks{display:flex;gap:2px}
.navlinks a{color:var(--fg-3);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-wide);white-space:nowrap;
  padding:8px 11px;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.navlinks a:hover{color:var(--fg-1);background:var(--bg-muted)}
@media(max-width:1160px){.navlinks{display:none}}

/* ============================================================
   HERO
   ============================================================ */
header{position:relative;background:var(--hero-grad);color:var(--fg-inverse);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;min-height:calc(100dvh - 64px);
  padding:clamp(56px,7vh,96px) 0 clamp(48px,6vh,88px)}
header::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,0.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.06) 1px,transparent 1px);
  background-size:56px 56px;mask-image:radial-gradient(circle at 75% 25%,#000,transparent 70%)}
header .wrap{position:relative;z-index:1;width:100%}
.hero-layout{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center}
@media(max-width:960px){.hero-layout{grid-template-columns:1fr;gap:44px}}
.hero-copy{animation:riseIn .8s var(--ease-standard) both}
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-100);font-family:var(--font-sans);
  font-size:var(--fs-xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;font-weight:500;margin-bottom:22px}
.hero-eyebrow::before{content:"";width:28px;height:2px;background:var(--accent);border-radius:2px}
h1.title{font-size:clamp(2.5rem,5.4vw,4.2rem);font-weight:var(--fw-xbold);line-height:1.05;letter-spacing:var(--tracking-tight);color:#fff}
h1.title em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);color:rgba(255,255,255,0.82);max-width:580px;margin-top:24px;font-weight:var(--fw-regular)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-meta{margin-top:clamp(34px,5vh,56px);display:flex;gap:0;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,0.18);padding-top:26px}
.hero-meta div{padding-right:42px;margin-right:42px;border-right:1px solid rgba(255,255,255,0.14)}
.hero-meta div:last-child{border-right:none;margin-right:0;padding-right:0}
.hero-meta .n{display:block;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.9rem;color:var(--accent);line-height:1}
.hero-meta .l{display:block;font-size:var(--fs-sm);color:rgba(255,255,255,0.66);margin-top:8px;max-width:180px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:var(--radius-pill);
  font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--tracking-wide);cursor:pointer;
  border:1.5px solid transparent;transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.btn svg{width:17px;height:17px}
.btn-primary{background:#fff;color:var(--yn-dark-blue);border-color:#fff}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.5)}
.btn-ghost:hover{background:rgba(255,255,255,0.12);border-color:#fff}
/* on light bg */
.btn-solid{background:var(--intent-primary);color:#fff;border-color:var(--intent-primary)}
.btn-solid:hover{background:var(--intent-primary-hover);border-color:var(--intent-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-line{background:var(--bg-surface);color:var(--fg-1);border-color:var(--border-2)}
.btn-line:hover{border-color:var(--accent);color:var(--accent-deep);transform:translateY(-2px)}

/* ----- chat demo window ----- */
.chat-demo{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);overflow:hidden;animation:riseIn .9s .12s var(--ease-standard) both}
.floatwrap{animation:floaty 6.5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.cd-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--border-1);background:var(--bg-sunken)}
.cd-dot{width:11px;height:11px;border-radius:50%}
.cd-dot:nth-child(1){background:var(--yn-red)}.cd-dot:nth-child(2){background:var(--yn-yellow)}.cd-dot:nth-child(3){background:var(--yn-turquoise)}
.cd-title{margin-left:10px;font-family:var(--font-sans);font-size:11px;letter-spacing:0.08em;color:var(--fg-3);text-transform:uppercase}
.cd-body{padding:24px 22px;min-height:360px;display:flex;flex-direction:column;gap:16px}
.cd-row{display:flex}
.cd-row.user{justify-content:flex-end}
.cd-bubble{max-width:88%;padding:13px 17px;font-size:var(--fs-sm);line-height:1.55;border-radius:var(--radius-lg)}
.cd-row.user .cd-bubble{background:var(--yn-dark-blue);color:#fff;border-bottom-right-radius:var(--radius-xs)}
.cd-asst{background:var(--bg-sunken);border:1px solid var(--border-1);color:var(--fg-1);border-bottom-left-radius:var(--radius-xs)}
.cd-asst b{color:var(--accent-deep)}
.cd-cursor::after{content:"▍";color:var(--accent);margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ============================================================
   SECTIONS
   ============================================================ */
section{padding:clamp(72px,9vw,118px) 0;position:relative}
.alt{background:var(--bg-surface)}
.sec-head{max-width:880px;margin-bottom:56px}
.sec-head h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:var(--tracking-tight)}
.sec-head h2 em{font-style:italic;color:var(--accent)}
.sec-head p{font-size:var(--fs-md);color:var(--fg-2);margin-top:20px;max-width:640px;line-height:var(--lh-relaxed)}

/* dark section */
.dark{background:var(--yn-dark-blue);color:rgba(255,255,255,0.82);position:relative;overflow:hidden}
.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 85% 0%,rgba(84,182,190,0.16),transparent 70%)}
.dark .wrap{position:relative;z-index:1}
.dark .sec-head h2{color:#fff}
.dark .sec-head h2 em{color:var(--accent)}
.dark .sec-head p{color:rgba(255,255,255,0.7)}
.dark .eyebrow-num{color:var(--accent-100)}

/* ----- analogy cards (01) ----- */
.analogy{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.analogy{grid-template-columns:1fr}}
.acard{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:34px 30px;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.alt .acard{background:var(--bg-app)}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.acard .num{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.05rem;color:#fff;
  background:var(--accent);width:40px;height:40px;display:grid;place-items:center;border-radius:50%;margin-bottom:22px;
  box-shadow:0 0 0 5px var(--accent-soft)}
.acard .num svg{width:21px;height:21px;stroke-width:2}
.acard h3{font-size:1.4rem;font-weight:var(--fw-bold);margin-bottom:12px;line-height:1.2}
.acard p{color:var(--fg-2);font-size:var(--fs-base)}
.acard p em{font-style:italic;color:var(--fg-1);font-weight:var(--fw-medium)}

/* ----- steps (02 / investigation) ----- */
.steps{display:flex;flex-direction:column;gap:12px}
.step{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  padding:30px clamp(24px,3vw,40px);display:grid;grid-template-columns:64px 1fr;gap:26px;align-items:start;
  box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.alt .step{background:var(--bg-app)}
.step:hover{transform:translateX(4px);box-shadow:var(--shadow-md);border-color:var(--accent-100)}
.step .idx{font-family:var(--font-display);font-weight:var(--fw-xbold);font-size:2.4rem;color:var(--accent);line-height:1;
  border-right:2px solid var(--border-1);padding-right:18px;height:100%}
.step h3{font-size:1.32rem;font-weight:var(--fw-bold);margin-bottom:8px}
.step p{color:var(--fg-2);max-width:720px}
.step p em{font-style:italic;color:var(--fg-1)}
.step .tag{display:inline-block;margin-top:16px;font-family:var(--font-sans);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--accent-deep);background:var(--accent-soft);padding:5px 12px;border-radius:var(--radius-pill)}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:12px}.step .idx{border-right:none;padding-right:0;font-size:2rem}}

/* dark variant of steps */
.dark .step{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);box-shadow:none}
.dark .step:hover{border-color:var(--accent);background:rgba(255,255,255,0.06)}
.dark .step h3{color:#fff}
.dark .step p{color:rgba(255,255,255,0.74)}
.dark .step .idx{border-right-color:rgba(255,255,255,0.14)}
.dark .step .tag{background:rgba(84,182,190,0.16);color:var(--accent-100)}

/* ----- two-panel scorecard (03) ----- */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:860px){.twocol{grid-template-columns:1fr}}
.panel{padding:36px 32px;border-radius:var(--radius-lg);border:1px solid var(--border-1);background:var(--bg-surface);box-shadow:var(--shadow-sm)}
.alt .panel{background:var(--bg-app)}
.panel.good{border-color:rgba(63,167,117,0.4);background:rgba(63,167,117,0.05)}
.panel.care{border-color:rgba(241,187,62,0.5);background:var(--yn-yellow-50)}
.panel h3{font-size:1.45rem;font-weight:var(--fw-bold);display:flex;align-items:center;gap:13px;margin-bottom:22px}
.panel h3 .mk{width:34px;height:34px;border-radius:var(--radius-md);display:grid;place-items:center;color:#fff;flex-shrink:0}
.panel h3 .mk svg{width:19px;height:19px}
.panel.good .mk{background:var(--intent-success)}
.panel.care .mk{background:var(--yn-yellow)}
.panel ul{list-style:none}
.panel li{padding:14px 0;border-bottom:1px solid var(--border-1);font-size:var(--fs-base);color:var(--fg-2)}
.panel li:last-child{border-bottom:none}
.panel li b{color:var(--fg-1);font-weight:var(--fw-bold)}

/* ----- vs ChatGPT (04) ----- */
.callout{border-radius:var(--radius-md);padding:18px 22px;margin-bottom:30px;font-size:var(--fs-base);color:var(--fg-2);
  background:var(--accent-soft);border:1px solid var(--accent-100)}
.callout b{color:var(--fg-1)}
.callout.warn{background:var(--yn-yellow-50);border-color:rgba(241,187,62,0.45)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:860px){.cmp{grid-template-columns:1fr}}
.cmp-col{border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:34px 30px;background:var(--bg-surface);box-shadow:var(--shadow-sm)}
.cmp-col.claude{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--shadow-md)}
.cmp-col .tag{display:inline-block;font-family:var(--font-sans);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:var(--radius-pill);color:#fff;font-weight:500}
.cmp-col .sub{font-size:var(--fs-sm);color:var(--fg-3);margin:16px 0 8px;font-style:italic}
.cmp-col ul{list-style:none}
.cmp-col li{padding:15px 0;border-bottom:1px solid var(--border-1);font-size:var(--fs-sm);color:var(--fg-2);line-height:1.55}
.cmp-col li:last-child{border-bottom:none}
.cmp-col li b{color:var(--fg-1);display:block;margin-bottom:4px;font-weight:var(--fw-bold);font-size:var(--fs-base)}

/* ----- tabs (05 use cases) ----- */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.tab{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-sm);letter-spacing:var(--tracking-wide);
  padding:11px 20px;border:1px solid rgba(255,255,255,0.22);background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.7);
  cursor:pointer;border-radius:var(--radius-pill);transition:all var(--dur-fast) var(--ease-standard)}
.tab:hover{color:#fff;border-color:var(--accent)}
.tab.active{background:var(--accent);border-color:var(--accent);color:var(--yn-dark-blue)}
.tabpanel{display:none}
.tabpanel.active{display:block;animation:fade .4s var(--ease-standard)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.uc-grid{grid-template-columns:1fr}}
.uc{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);padding:26px 24px;border-radius:var(--radius-lg);
  transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),background var(--dur-base) var(--ease-standard)}
.uc:hover{transform:translateY(-4px);border-color:var(--accent);background:rgba(255,255,255,0.06)}
.uc h4{font-size:1.2rem;font-weight:var(--fw-bold);margin-bottom:10px;color:#fff}
.uc p{color:rgba(255,255,255,0.72);font-size:var(--fs-sm);line-height:1.55}
.uc p em{font-style:italic;color:#fff}
.uc .chip{display:inline-block;margin-top:16px;font-family:var(--font-sans);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-100)}

/* ----- recipe block (05) ----- */
.recipe{margin-top:48px;border:1px solid var(--accent);border-radius:var(--radius-xl);padding:40px clamp(26px,4vw,44px);
  background:rgba(84,182,190,0.07)}
.recipe .rh{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.75rem);
  font-weight:var(--fw-bold);color:#fff;margin-bottom:12px}
.recipe .rh .star{color:var(--accent);display:grid;place-items:center}
.recipe .rh .star svg{width:24px;height:24px}
.recipe .rsub{color:rgba(255,255,255,0.74);margin-bottom:32px;max-width:720px}
.recipe-steps{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:800px){.recipe-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.recipe-steps{grid-template-columns:1fr}}
.rstep{padding:0 26px;border-right:1px solid rgba(255,255,255,0.14)}
.rstep:first-child{padding-left:0}
.rstep:nth-child(4),.rstep:last-child{border-right:none}
@media(max-width:800px){.rstep{padding:0 26px 22px;border-right:none}.rstep:nth-child(odd){padding-left:0}.rstep:nth-child(2){border-left:1px solid rgba(255,255,255,0.14)}}
@media(max-width:520px){.rstep{padding:20px 0!important;border-left:none!important;border-bottom:1px solid rgba(255,255,255,0.14)}.rstep:first-child{padding-top:0!important}.rstep:last-child{border-bottom:none}}
.rstep .rn{font-family:var(--font-sans);font-size:11px;letter-spacing:0.1em;color:var(--accent);margin-bottom:10px;font-weight:500}
.rstep h5{font-family:var(--font-sans);font-size:var(--fs-base);font-weight:var(--fw-bold);color:#fff;margin-bottom:7px}
.rstep p{font-size:var(--fs-sm);color:rgba(255,255,255,0.7);line-height:1.55}
.rstep a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.recipe .payoff{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.14);font-size:var(--fs-base);color:rgba(255,255,255,0.92)}
.recipe .payoff b{color:var(--accent)}
.recipe .dlrow{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.dl-btn{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-sm);background:var(--accent);color:var(--yn-dark-blue);
  border:1.5px solid var(--accent);padding:13px 22px;border-radius:var(--radius-pill);cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);display:inline-flex;align-items:center;gap:9px}
.dl-btn svg{width:17px;height:17px}
.dl-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.dl-note{font-size:var(--fs-sm);color:rgba(255,255,255,0.6);max-width:320px}

/* ----- toolkit surfaces (06) ----- */
.surfaces{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:28px}
@media(max-width:920px){.surfaces{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.surfaces{grid-template-columns:1fr}}
.surface{border:1px solid var(--border-1);background:var(--bg-surface);padding:28px 24px;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.alt .surface{background:var(--bg-app)}
.surface:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.surface .badge{align-self:flex-start;font-family:var(--font-sans);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--radius-pill);margin-bottom:18px;color:#fff;font-weight:500}
.surface h4{font-size:1.3rem;font-weight:var(--fw-bold);margin-bottom:9px}
.surface p{font-size:var(--fs-sm);color:var(--fg-2);flex-grow:1;line-height:1.55}
.surface .for{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--border-1);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);color:var(--accent-deep);letter-spacing:0.02em;text-transform:uppercase}
.models3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:780px){.models3{grid-template-columns:1fr}}

/* highlight flag */
.yn-flag{background:var(--accent-soft);border:1px solid var(--accent-100);border-radius:var(--radius-md);
  padding:20px 24px;margin-top:16px;font-size:var(--fs-base);color:var(--fg-1)}
.yn-flag b{color:var(--accent-deep)}
.note-block{border-radius:var(--radius-md);padding:24px 26px;margin-top:16px}
.note-block.green{background:rgba(63,167,117,0.07);border:1px solid rgba(63,167,117,0.35)}
.note-block.clay{background:var(--yn-yellow-50);border:1px solid rgba(241,187,62,0.45)}
.note-block .lbl{font-family:var(--font-display);font-size:1.1rem;font-weight:var(--fw-bold)}
.note-block.green .lbl{color:var(--intent-success)}
.note-block p{margin-top:9px;color:var(--fg-2);font-size:var(--fs-base)}
.note-block p b{color:var(--fg-1)}
.note-block.clay .mono{color:var(--accent-deep);display:block}
.note-block.clay .quote{margin-top:12px;color:var(--fg-2);font-size:var(--fs-base);font-style:italic}

.feat-head{font-family:var(--font-display);font-size:1.6rem;font-weight:var(--fw-bold);margin:56px 0 10px;color:var(--fg-1)}
.feat-sub{color:var(--fg-2);max-width:640px;margin-bottom:30px;font-size:var(--fs-md)}
.feat-sub b{color:var(--fg-1)}

/* feature cards (skills / scheduled) */
.feat-card{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg);padding:32px 30px;box-shadow:var(--shadow-sm)}
.alt .feat-card{background:var(--bg-app)}
.feat-card .num{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--radius-md);
  background:var(--accent-soft);color:var(--accent-deep);margin-bottom:20px}
.feat-card .num svg{width:22px;height:22px}
.feat-card h3{font-size:1.4rem;font-weight:var(--fw-bold);margin-bottom:12px}
.feat-card p{color:var(--fg-2);font-size:var(--fs-base)}
.feat-card p em{font-style:italic;color:var(--fg-1)}
.cap{font-size:var(--fs-sm);color:var(--fg-3);margin-top:10px;font-style:italic}

/* pausable gifs */
.gif-wrap{position:relative;margin-top:18px;line-height:0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-1)}
.gif-wrap .gif{width:100%;display:block}
.gif-wrap canvas.gif-frame{position:absolute;inset:0;width:100%;height:100%;display:block}
.gif-toggle{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:none;
  background:rgba(17,33,52,0.7);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background var(--dur-fast),transform var(--dur-fast);z-index:2}
.gif-toggle svg{width:17px;height:17px}
.gif-toggle:hover{background:rgba(17,33,52,0.92);transform:scale(1.06)}

/* ----- connectors (07) ----- */
.conns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px}
.conn{display:flex;align-items:center;gap:11px;border:1px solid var(--border-1);background:var(--bg-surface);
  padding:12px 18px;border-radius:var(--radius-md);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--fg-1);
  box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.alt .conn{background:var(--bg-app)}
.conn:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.conn .ic{width:30px;height:30px;border-radius:var(--radius-sm);display:grid;place-items:center;background:#fff;border:1px solid var(--border-1);flex-shrink:0}
.conn .ic img{width:20px;height:20px;display:block;border-radius:3px}
.conn.more{border-style:dashed;color:var(--fg-3);font-weight:var(--fw-semibold)}

/* prompt box (dark) */
.prompt-box{background:var(--yn-dark-blue);color:#fff;padding:34px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,0.08)}
.alt .prompt-box,.start .prompt-box{box-shadow:var(--shadow-lg)}
.prompt-box .mono{color:var(--accent-100);margin-bottom:18px;display:block}
.prompt-line{font-family:var(--font-sans);font-size:var(--fs-sm);line-height:1.7;color:rgba(255,255,255,0.88);
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,0.1)}
.prompt-line:last-child{border:none}
.prompt-line .bad{color:var(--accent-100);text-decoration:line-through;opacity:0.55}
.prompt-line .arrow{color:var(--intent-success)}
.prompt-line .good{color:#fff}
.prompt-box .after{margin-top:20px;font-family:var(--font-sans);font-size:var(--fs-sm);color:rgba(255,255,255,0.74)}
.prompt-box .after b{color:var(--accent)}
.prompt-box .fine{margin-top:16px;font-family:var(--font-sans);font-size:var(--fs-xs);color:rgba(255,255,255,0.55)}
.prompt-box .pat{margin-top:22px;font-family:var(--font-sans);font-size:var(--fs-sm);color:rgba(255,255,255,0.62)}
.prompt-box .pat b{color:var(--accent)}

/* ----- before / after (08 dark) ----- */
.ba{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.ba{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ba{grid-template-columns:1fr}}
.ba-card{border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:26px 24px;background:rgba(255,255,255,0.04);
  transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.ba-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.ba-card h4{font-size:1.22rem;font-weight:var(--fw-bold);color:#fff;margin-bottom:18px}
.ba-line{display:flex;gap:12px;padding:13px 0}
.ba-line+.ba-line{border-top:1px solid rgba(255,255,255,0.1)}
.ba-tag{flex-shrink:0;font-family:var(--font-sans);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:var(--radius-pill);height:fit-content;margin-top:2px;font-weight:500}
.ba-tag.b{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.55)}
.ba-tag.a{background:var(--accent);color:var(--yn-dark-blue)}
.ba-line p{font-size:var(--fs-sm);color:rgba(255,255,255,0.8);line-height:1.5}
.ba-line.before p{color:rgba(255,255,255,0.55)}
.ba-time{margin-top:16px;font-size:var(--fs-sm);color:var(--accent-100);font-weight:var(--fw-bold);display:flex;align-items:center;gap:7px}
.ba-time svg{width:15px;height:15px}

/* ----- getting started (09) ----- */
.start{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
@media(max-width:860px){.start{grid-template-columns:1fr;gap:40px}}
.start ol{list-style:none;counter-reset:s}
.start ol li{counter-increment:s;position:relative;padding:0 0 28px 60px}
.start ol li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;width:40px;height:40px;
  background:var(--accent);color:var(--yn-dark-blue);font-family:var(--font-display);font-weight:var(--fw-bold);
  border-radius:var(--radius-md);display:grid;place-items:center;font-size:var(--fs-sm)}
.start ol li::after{content:"";position:absolute;left:19px;top:42px;bottom:4px;width:2px;background:var(--border-1)}
.start ol li:last-child::after{display:none}
.start ol li h4{font-size:1.2rem;font-weight:var(--fw-bold);margin-bottom:6px}
.start ol li p{color:var(--fg-2);font-size:var(--fs-base)}

/* ----- accordion (10 myths) ----- */
.acc{border-top:1px solid var(--border-2)}
.acc-item{border-bottom:1px solid var(--border-2)}
.acc-q{width:100%;text-align:left;background:transparent;border:none;cursor:pointer;padding:26px 4px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:var(--font-display);
  font-size:clamp(1.1rem,2vw,1.4rem);font-weight:var(--fw-bold);color:var(--fg-1);transition:color var(--dur-fast)}
.acc-q:hover{color:var(--accent-deep)}
.acc-q .pm{flex-shrink:0;width:36px;height:36px;border:1.5px solid var(--border-2);border-radius:50%;display:grid;place-items:center;
  transition:transform var(--dur-slow) var(--ease-standard),background var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.acc-q .pm svg{width:18px;height:18px}
.acc-item.open .acc-q .pm{transform:rotate(135deg);background:var(--accent);border-color:var(--accent);color:#fff}
.acc-a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-standard)}
.acc-a p{padding:0 4px 28px;color:var(--fg-2);max-width:780px;font-size:var(--fs-base)}
.acc-a p em{font-style:italic;color:var(--fg-1)}

/* ----- CTA ----- */
.cta{text-align:center;background:var(--cta-grad);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 18% 82%,rgba(255,255,255,0.12),transparent 42%),radial-gradient(circle at 82% 18%,rgba(0,0,0,0.16),transparent 48%)}
.cta .wrap{position:relative;z-index:1}
.cta h2{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:var(--fw-xbold);max-width:900px;margin:0 auto;color:#fff;line-height:1.1;letter-spacing:var(--tracking-tight)}
.cta h2 em{font-style:italic;color:var(--accent-100)}
.cta p{font-size:var(--fs-md);color:rgba(255,255,255,0.85);max-width:580px;margin:24px auto 38px}
.cta-btns{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.cta .tail{margin:32px auto 0;font-size:var(--fs-base);color:rgba(255,255,255,0.9);max-width:560px}
.cta .tail b{color:#fff}

/* ----- footer ----- */
footer{background:var(--yn-dark-blue);color:rgba(255,255,255,0.6);padding:40px 0;font-size:var(--fs-sm)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
footer .brand .mark{height:24px}
footer a{color:var(--accent);font-weight:var(--fw-semibold)}

/* ----- reveal ----- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-standard),transform .7s var(--ease-standard)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.floatwrap{animation:none}}

/* motion off (Tweaks) */
body.no-anim .reveal{opacity:1;transform:none;transition:none}
body.no-anim .hero-copy,body.no-anim .chat-demo{animation:none;opacity:1}
body.no-anim .floatwrap{animation:none}

/* surface availability line — allow an inline icon */
.surface .for{display:flex;align-items:center;gap:7px}
.surface .for svg{width:14px;height:14px;flex-shrink:0}

/* ============================================================
   CONTEXT & USAGE (07) — on dark
   ============================================================ */
.cu-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:8px}
@media(max-width:820px){.cu-cards{grid-template-columns:1fr}}
.cu-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:28px 26px;
  transition:transform var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.cu-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.cu-ic{width:44px;height:44px;border-radius:var(--radius-md);background:rgba(84,182,190,0.16);color:var(--accent-100);
  display:grid;place-items:center;margin-bottom:18px}
.cu-ic svg{width:22px;height:22px}
.cu-card h4{font-size:1.25rem;font-weight:var(--fw-bold);color:#fff;margin-bottom:10px}
.cu-card p{font-size:var(--fs-sm);color:rgba(255,255,255,0.74);line-height:1.6}
.cu-card p em{font-style:italic;color:#fff}

/* shared interactive shell */
.cu-demo,.cu-usage{border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-xl);background:rgba(255,255,255,0.04);
  padding:clamp(26px,3.5vw,40px);margin-top:24px}
.cu-demo-head h3{font-size:clamp(1.4rem,3vw,1.7rem);font-weight:var(--fw-bold);color:#fff;margin-bottom:10px}
.cu-demo-head p{font-size:var(--fs-base);color:rgba(255,255,255,0.74);max-width:760px;line-height:1.6}

/* interactive 1 layout */
.cu-demo-body{display:grid;grid-template-columns:0.78fr 1fr;gap:32px;margin-top:30px;align-items:stretch}
@media(max-width:760px){.cu-demo-body{grid-template-columns:1fr;gap:26px}}
.cu-window{position:relative;border:1px solid rgba(255,255,255,0.16);border-radius:var(--radius-lg);background:rgba(17,33,52,0.5);
  padding:36px 18px 18px;display:flex;align-items:flex-end;min-height:300px;overflow:hidden}
.cu-window-cap{position:absolute;top:13px;left:16px;font-family:var(--font-sans);font-size:10px;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(255,255,255,0.5)}
.cu-stack{display:flex;flex-direction:column-reverse;gap:4px;width:100%}
.cu-seg{height:14px;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  animation:cuGrow .32s var(--ease-standard) both;transform-origin:left}
@keyframes cuGrow{from{opacity:0;transform:scaleX(0.15)}to{opacity:1;transform:none}}
.cu-fullline{position:absolute;left:0;right:0;top:34px;border-top:1px dashed rgba(241,187,62,0.65);opacity:0;
  transition:opacity .3s;pointer-events:none}
.cu-fullline span{position:absolute;right:10px;top:5px;font-size:10px;color:var(--yn-yellow);letter-spacing:0.07em;text-transform:uppercase}
.cu-window.near .cu-fullline{opacity:1}

.cu-readout{display:flex;flex-direction:column;gap:14px}
.cu-turn{font-family:var(--font-display);font-weight:var(--fw-xbold);font-size:2.4rem;color:#fff;line-height:1}
.cu-turn span{color:var(--accent)}
.cu-metric{display:flex;flex-direction:column;gap:3px;padding:11px 0;border-top:1px solid rgba(255,255,255,0.1)}
.cu-metric .cu-lbl{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.cu-metric .cu-val{font-size:var(--fs-md);color:#fff;font-weight:var(--fw-semibold)}
.cu-metric .cu-val span{color:var(--accent)}
.cu-bars{padding-top:4px}
.cu-bars-lbl{font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.5);display:block;margin-bottom:9px}
.cu-barrow{display:flex;align-items:flex-end;gap:5px;height:60px}
.cu-bar{flex:1;min-width:5px;background:linear-gradient(180deg,var(--accent),var(--accent-deep));border-radius:3px 3px 0 0;
  animation:cuBar .3s var(--ease-standard) both;transform-origin:bottom}
@keyframes cuBar{from{transform:scaleY(0);opacity:0}to{transform:none;opacity:1}}
.cu-bar.last{background:var(--yn-yellow)}
.cu-warn{font-size:var(--fs-sm);color:var(--yn-yellow);line-height:1.5;background:rgba(241,187,62,0.1);
  border:1px solid rgba(241,187,62,0.3);border-radius:var(--radius-md);padding:0 14px;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .3s,max-height .35s,padding .35s,margin .35s;margin:0}
.cu-warn.show{opacity:1;max-height:120px;padding:12px 14px}

.cu-demo-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.cu-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-bold);
  font-size:var(--fs-sm);padding:11px 20px;border-radius:var(--radius-pill);cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease-standard),background var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),opacity var(--dur-base)}
.cu-btn svg{width:16px;height:16px}
.cu-btn.primary{background:var(--accent);color:var(--yn-dark-blue);border-color:var(--accent)}
.cu-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.cu-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,0.4)}
.cu-btn.ghost:hover{background:rgba(255,255,255,0.1);border-color:#fff}
.cu-btn:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none}

/* interactive 2: usage budget */
.cu-usage-body{margin-top:28px}
.cu-models{display:inline-flex;gap:5px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-pill);padding:5px;margin-bottom:28px;flex-wrap:wrap}
.cu-model{font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:rgba(255,255,255,0.7);
  background:transparent;border:none;cursor:pointer;padding:8px 22px;border-radius:var(--radius-pill);
  display:flex;flex-direction:column;align-items:center;gap:1px;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.cu-model small{font-size:10px;font-weight:var(--fw-regular);letter-spacing:0.05em;text-transform:uppercase;opacity:0.7}
.cu-model:hover{color:#fff}
.cu-model.active{background:var(--accent);color:var(--yn-dark-blue)}
.cu-gauges{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-bottom:22px}
@media(max-width:680px){.cu-gauges{grid-template-columns:1fr;gap:22px}}
.cu-gauge-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.cu-gauge-top span:first-child{font-weight:var(--fw-bold);color:#fff;font-size:var(--fs-base)}
.cu-pct{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:1.3rem;color:var(--accent);transition:color .3s}
.cu-track{height:16px;border-radius:var(--radius-pill);background:rgba(255,255,255,0.1);overflow:hidden}
.cu-fill{height:100%;width:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  transition:width .5s var(--ease-standard),background .3s}
.cu-fill.week{background:linear-gradient(90deg,var(--yn-blue),var(--yn-blue-700))}
.cu-fill.low{background:linear-gradient(90deg,var(--yn-yellow),#d99a1e)}
.cu-fill.empty{background:var(--yn-red)}
.cu-reset-note{display:block;margin-top:8px;font-size:var(--fs-xs);color:rgba(255,255,255,0.5)}
.cu-usage-msg{font-size:var(--fs-base);color:rgba(255,255,255,0.82);margin-bottom:20px;line-height:1.55;min-height:1.55em}
.cu-usage-msg b{color:var(--accent)}

/* dark-section overrides for moved model cards / feature heads (08) */
.dark .surface{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12);box-shadow:none}
.dark .surface:hover{border-color:var(--accent);background:rgba(255,255,255,0.06)}
.dark .surface h4{color:#fff}
.dark .surface p{color:rgba(255,255,255,0.74)}
.dark .surface .for{color:var(--accent-100);border-top-color:rgba(255,255,255,0.14)}
.dark .feat-head{color:#fff}
.dark .feat-sub{color:rgba(255,255,255,0.74)}
.dark .feat-sub b{color:#fff}
.dark .callout{background:rgba(84,182,190,0.12);border-color:rgba(84,182,190,0.3);color:rgba(255,255,255,0.82)}
.dark .callout b{color:#fff}

/* hero scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--font-sans);font-size:11px;letter-spacing:var(--tracking-wider);text-transform:uppercase;
  font-weight:var(--fw-semibold);color:rgba(255,255,255,0.6);transition:color var(--dur-base) var(--ease-standard)}
.scroll-cue:hover{color:#fff}
.scroll-cue-icon{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,255,255,0.3);
  display:grid;place-items:center;color:var(--accent-100);animation:scrollBob 2s var(--ease-standard) infinite}
.scroll-cue:hover .scroll-cue-icon{border-color:var(--accent)}
.scroll-cue-icon svg{width:18px;height:18px}
@keyframes scrollBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media(max-height:720px),(max-width:640px){.scroll-cue{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-cue-icon{animation:none}}

/* ----- Ask Younium (09) ----- */
.ask-yn{background:var(--bg-app);border:1px solid var(--border-1);border-radius:var(--radius-lg);
  padding:26px clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px;max-width:760px}
.ay-q,.ay-a{display:flex;gap:14px;align-items:flex-start}
.ay-q .ay-avatar,.ay-a .ay-mark{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center}
.ay-q .ay-avatar{background:var(--yn-dark-blue);color:#fff}
.ay-q .ay-avatar svg{width:18px;height:18px}
.ay-q p{background:var(--bg-surface);border:1px solid var(--border-1);border-radius:var(--radius-lg);border-top-left-radius:var(--radius-xs);
  padding:13px 17px;font-size:var(--fs-base);color:var(--fg-1);font-weight:var(--fw-semibold)}
.ay-a .ay-mark{background:#fff;border:1px solid var(--border-1);box-shadow:var(--shadow-xs)}
.ay-a .ay-mark img{width:22px;height:22px;display:block}
.ay-a>div{background:var(--accent-soft);border:1px solid var(--accent-100);border-radius:var(--radius-lg);border-top-left-radius:var(--radius-xs);padding:15px 18px}
.ay-a p{font-size:var(--fs-base);color:var(--fg-1);line-height:1.6}
.ay-src{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--accent-100)}
.ay-srclbl{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-3);font-weight:var(--fw-bold)}
.ay-chip{display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--radius-pill);padding:5px 12px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--accent-deep)}
.ay-chip svg{width:13px;height:13px}

/* tweaks mount — never blocks layout */
#tweaks-root{position:fixed;z-index:9000}