/* ============================================================
   CROSS-BROWSER TYPOGRAPHY LOCK
   ------------------------------------------------------------
   Every font in this app is rem-based, driven by ONE knob:
   --app-font-size. Change that single value to scale ALL text
   identically in Chrome, Edge, Firefox and Safari. Because the
   value is absolute, browser "default font size" settings can no
   longer shift the layout. Browser zoom (Ctrl +/-) still works.
   No text may be smaller than 14px (0.875rem) — browser minimum
   font size cannot be overridden by CSS, so we stay above it.
   ============================================================ */
:root{ --app-font-size:16px; }
:root, html{
  font-size:var(--app-font-size) !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
body{
  font-size:1rem !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* ---------- optional colour-pipeline compensation ----------
   0 = off. Lifts the whole page uniformly so darker GPU/colour
   pipelines match the reference rendering. Try .008–.025.
   Lives above all UI, ignores clicks. */
:root{ --tone-lift:0; }
body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:rgba(255,255,255,var(--tone-lift));
}

/* ============================================================
   PROMPTFORGE — dark glass design system
   ============================================================ */
/* ---------- self-hosted premium typeface: Geist + Geist Mono ---------- */
@font-face{
  font-family:"Geist"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Geist"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  color-scheme: dark;
  --bg:#0A0A0B;
  --white:#F4F4F5;
  --text:rgba(244,244,245,.88);
  /* glows tinted to each element's own colour (currentColor resolves per element) */
  --glow-soft:0 0 7px color-mix(in srgb, currentColor 9%, transparent), 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
  --glow-strong:0 0 9px color-mix(in srgb, currentColor 13%, transparent), 0 0 1px color-mix(in srgb, currentColor 20%, transparent);
  --text-56:rgba(244,244,245,.70);
  --text-38:rgba(244,244,245,.62);
  --text-26:rgba(244,244,245,.56);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.06);
  --good:#7ee2a0;
  --warn:#ffcf7a;
  --radius:24px;
  --radius-sm:14px;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --maxw:1140px;
  /* 8px spacing scale */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-weight:400; line-height:1.6;
  text-shadow:0 0 12px rgba(255,255,255,.05), 0 0 1px rgba(255,255,255,.12);
  text-shadow:var(--glow-soft);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(255,255,255,.9); color:#0A0A0B}
h1,h2,h3,h4{font-weight:560; line-height:1.08; letter-spacing:-.01em}
.mono{font-family:var(--font-mono)}
.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}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; color:inherit; background:none; border:none; text-shadow:0 0 12px rgba(255,255,255,.05), 0 0 1px rgba(255,255,255,.12); text-shadow:var(--glow-soft)}
button, input, textarea, select{text-shadow:0 0 12px rgba(255,255,255,.05), 0 0 1px rgba(255,255,255,.12); text-shadow:var(--glow-soft)}
/* headings + primary text get the fuller glow so sub-text reads as sub-text */
h1,h2,h3,h4,h5,h6, b, strong, .brand, .wallet-title, .adv-title, .price-name, .card-title, .stat .v, .row-title, .mf-models{text-shadow:0 0 16px rgba(255,255,255,.11), 0 0 1px rgba(255,255,255,.22); text-shadow:var(--glow-strong)}
:focus-visible{outline:2px solid rgba(255,255,255,.8); outline-offset:2px; border-radius:6px}
img{max-width:100%}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s3)}

/* ---------- labels / eyebrows ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--text-38); display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--text-26); display:inline-block}

/* ============================ NAV ============================ */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(10,10,11,.4);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
  transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
.nav.is-hidden{transform:translateY(-100%)}
/* the Shares full-screen preview hides the nav too (same slide-up) */
body.shv-lb-open .nav{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.nav-inner{max-width:var(--maxw); margin:0 auto; height:72px; padding:0 var(--s3); display:flex; align-items:center; gap:var(--s3)}
.brand{display:flex; align-items:baseline; gap:1px; font-size:1.3125rem; font-weight:600; letter-spacing:-.03em; color:rgba(244,244,245,.88); text-decoration:none}
.brand-thin{font-weight:300; color:rgba(244,244,245,.88)}
.brand-dot{width:9px; height:9px; border-radius:50%; background:var(--white); box-shadow:0 0 12px rgba(255,255,255,.7); flex:none}
.nav-links{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-links a{font-size:0.9375rem; color:var(--text-56); transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  font-size:0.875rem; color:var(--text-56); padding:9px 18px; border-radius:999px;
  border:1px solid rgba(255,255,255,.42); transition:all .2s;
}
.nav-cta:hover{color:var(--text); border-color:var(--white); background:rgba(255,255,255,.05)}
@media(max-width:840px){.nav-links a:not(.nav-cta){display:none}}

/* ============================ HERO ============================ */
.hero{position:relative; min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; text-align:center}
#hero-scene canvas{display:block; width:100%; height:100%}
/* hero-fade removed — it rendered as a hard black band once the mist became
   a fixed page-wide background. The mist now flows without a divider. */
.hero-inner{position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s4); max-width:820px; min-height:92vh; padding:160px var(--s3) 80px}
.hero-wordmark{
  font-size:clamp(4rem,12vw,9.375rem); font-weight:560; letter-spacing:-.045em; line-height:.95;
  color:rgba(244,244,245,.88); text-shadow:0 0 16px rgba(255,255,255,.11), 0 0 1px rgba(255,255,255,.22); text-shadow:var(--glow-strong), 0 0 28px color-mix(in srgb, currentColor 8%, transparent);
}
.hero-wordmark .thin{font-weight:270; font-size:1em; color:rgba(244,244,245,.45); text-shadow:var(--glow-strong)}
.hero-tagline{font-size:clamp(1.0625rem,2vw,1.375rem); font-weight:380; letter-spacing:.6px; color:var(--text-56); max-width:52ch; text-wrap:pretty}

/* hero glass prompt box (signature component) */
.hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:var(--s2)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 28px; border-radius:999px; font-size:0.96875rem; font-weight:480;
  letter-spacing:.01em; transition:all .2s ease; text-decoration:none; white-space:nowrap;
}
.btn-primary{background:var(--white); color:#0A0A0B; border:1px solid var(--white)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 40px -12px rgba(255,255,255,.25)}
.btn-primary:active{transform:translateY(0) scale(.98)}
.btn-ghost{background:transparent; color:var(--text-56); border:1px solid rgba(255,255,255,.42)}
.btn-ghost:hover{color:var(--text); border-color:var(--white); background:rgba(255,255,255,.05)}
.btn-ghost:active{transform:scale(.98)}
.hero-scroll{margin-top:var(--s6); color:var(--text-26); font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.3em; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.hero-scroll{animation:none}}

/* ---------- hero precision-geometry arc — a solid band filling the strip
   between the nav and the headline ---------- */
.curve-wrapper{position:absolute; top:0; left:0; right:0; height:200px; z-index:2; pointer-events:none; background:radial-gradient(ellipse 30% 220px at 50% 0%, rgba(208,208,208,.10), transparent 100%)}
.curve-svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.ambient-glow-horizontal{position:absolute; top:70px; left:50%; transform:translateX(-50%); width:70%; height:120px; background:radial-gradient(ellipse at center, rgba(208,208,208,.16), transparent 70%); filter:blur(24px)}
.ambient-glow-center{position:absolute; top:50px; left:50%; transform:translateX(-50%); width:40%; height:150px; background:radial-gradient(ellipse at center, rgba(208,208,208,.22), transparent 70%); filter:blur(40px)}
@media(max-width:760px){.curve-wrapper{height:130px}}

/* ============================ SECTIONS ============================ */
section{padding:var(--s7) 0; position:relative}
/* view wrappers are layout containers for the single-page router — no padding,
   so the hero starts flush under the nav (no dead band above it). */
section.view{padding:0}

/* ── Page-wide background (mist + ambient glow) shared by EVERY view ──
   The mist canvas is fixed at z-index:0. Views sit above it so the landing's
   animated background also shows behind the Studio and account pages — without
   touching any of their inner colors, controls, or settings. */
#hero-scene{position:fixed; inset:0; z-index:0; pointer-events:none}
.hero-fade{display:none} /* was a hard black band; the mist flows without it */
body > .curve-wrapper{position:fixed; top:0; left:0; right:0; height:200px; z-index:1; pointer-events:none}
.view{position:relative; z-index:2}
.section-head{max-width:640px; margin-bottom:var(--s6)}
.section-head h2{font-size:clamp(1.875rem,4.4vw,2.875rem); font-weight:520; letter-spacing:-.02em; margin:var(--s3) 0 var(--s2)}
.section-head p{color:var(--text-56); font-size:1.03125rem; text-wrap:pretty}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* ---------- research: quiet list ---------- */
.research{border-top:1px solid var(--line-soft)}
.research-row{
  display:grid; grid-template-columns:72px 1.1fr 1.6fr; gap:var(--s4); align-items:baseline;
  padding:var(--s4) 0; border-bottom:1px solid var(--line-soft); transition:background .2s, padding .2s;
}
.research-row:hover{background:var(--glass); padding-left:var(--s2); padding-right:var(--s2)}
.research-num{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-26); letter-spacing:.1em}
.research-row h3{font-size:1.375rem; font-weight:520; letter-spacing:-.01em}
.research-venue{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); letter-spacing:.04em; margin-top:6px}
.research-row p{font-size:0.9375rem; color:var(--text-56); margin:0; text-wrap:pretty}
.research-row p b{color:var(--text); font-weight:480}
@media(max-width:820px){.research-row{grid-template-columns:48px 1fr; } .research-row p{grid-column:2}}

/* ---------- principles (the "how") ---------- */
.principles{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
@media(max-width:960px){.principles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.principles{grid-template-columns:1fr}}
.principle{padding-top:var(--s3); border-top:1px solid var(--line)}
.principle .p-num{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-26); letter-spacing:.12em}
.principle h4{font-size:1.125rem; font-weight:520; margin:var(--s2) 0 var(--s1)}
.principle p{font-size:0.875rem; color:var(--text-56); margin:0}
.principle .p-src{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-26); letter-spacing:.06em; display:block; margin-top:var(--s2); text-transform:uppercase}

/* ============================ GENERATOR / STUDIO ============================ */
#app{scroll-margin-top:80px}
.gen-shell{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) brightness(.7); backdrop-filter:blur(20px) brightness(.7);
  overflow:hidden; /* clip inner panels to the rounded corners — clean edge, no sharp notch */
  margin-bottom:70px; /* room for the option bar that hangs below */
}

/* ---------- Studio tabs (independent sessions) ----------
   Browser-style strip that sits OUTSIDE and above the Studio box, like window
   tabs: the tabs touch the box top and the active one merges with it. Each tab
   keeps its own brief, configuration and result; only the active one renders. */
.studio-tabs{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:6px; height:40px; box-sizing:border-box;
  padding:0 14px 0 34px;                            /* 34px left: tabs sit in from the box edge */
  margin-bottom:-1px;                               /* the tabs cover the box's top border */
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
}
.studio-tabs::-webkit-scrollbar{display:none}
.studio-tab{
  display:inline-flex; align-items:center; gap:8px; height:34px; max-width:210px; flex:0 0 auto;
  padding:0 8px 0 11px; border:1px solid var(--line-soft); border-bottom:0;
  border-radius:9px 9px 0 0; background:rgba(255,255,255,.03); color:var(--text-38);
  font-family:inherit; font-size:0.8125rem; cursor:pointer; transition:background .18s,color .18s;
}
.studio-tab:hover{color:var(--text-56)}
.studio-tab.is-on{background:rgba(255,255,255,.09); color:var(--text); border-color:var(--line)}
.studio-tab .dot{width:9px; height:9px; border-radius:50%; flex:none}
.studio-tab .t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.studio-tab .x{
  width:18px; height:18px; flex:none; display:grid; place-items:center; border-radius:5px;
  color:var(--text-26); font-size:0.9375rem; line-height:1;
}
.studio-tab .x:hover{background:rgba(255,255,255,.12); color:var(--text)}
.studio-tab-add{
  width:30px; height:30px; flex:none; margin:0 0 4px 2px; border-radius:8px;
  border:1px solid var(--line-soft); background:rgba(255,255,255,.03); color:var(--text-38);
  font-family:inherit; font-size:1.0625rem; line-height:1; cursor:pointer;
}
.studio-tab-add:hover:not(:disabled){color:var(--text); background:rgba(255,255,255,.09)}
.studio-tab-add:disabled{opacity:.35; cursor:not-allowed}
/* per-tab generation state: spinner while this tab forges, green dot when a
   result finished in the background (cleared as soon as you look at it) */
.studio-tab .spin{width:11px; height:11px; flex:none; border-radius:50%;
  border:1.5px solid var(--text-26); border-top-color:var(--text); animation:stb-spin .7s linear infinite}
@keyframes stb-spin{to{transform:rotate(360deg)}}
.studio-tab .done{width:7px; height:7px; flex:none; border-radius:50%; background:var(--good);
  box-shadow:0 0 0 2px rgba(126,226,160,.18)}
.studio-tab.is-done .t{color:var(--text-56)}
/* The studio is a viewport-height region; the controls panel adapts inside it
   so the page never grows a scrollbar for the studio. */
.gen-body{
  display:grid; grid-template-columns:auto 34px 1fr; align-items:stretch;
  /* slightly smaller studio box so it fits at 100% browser zoom */
  /* the tab strip takes its own 42px, so the total Studio height is unchanged */
  height:min(calc(66vh - 42px), 598px); transition:grid-template-columns .3s ease;
}
.gen-body.collapsed{grid-template-columns:0 34px 1fr}

/* controls — fluid width, adapts to ANY screen height.
   The brief field stretches to fill leftover space, so the panel always sits
   flush (no gap, no page scroll). On short screens everything compresses. */
.controls{
  /* wider so the panel fills the left area instead of leaving a dead strip */
  width:clamp(360px, 34vw, 520px); max-width:88vw; box-sizing:border-box;
  padding:var(--s4) var(--s3) var(--s3); border-right:1px solid var(--line-soft); background:rgba(0,0,0,.2);
  overflow-y:auto; overflow-x:hidden; height:100%;
  display:flex; flex-direction:column;
  transition:margin-left .3s ease, opacity .25s ease;
}
.gen-body.collapsed .controls{margin-left:-410px; opacity:0; pointer-events:none}

/* fields stay compact and even */
.controls .field{margin-bottom:var(--s2); flex:none}
.controls .field-label{margin-bottom:8px}

/* the BRIEF field gets a fixed comfortable height; the panel scrolls internally
   if content is taller than the studio box — so nothing overlaps. */
.controls .field:first-child{flex:none; display:flex; flex-direction:column}
.controls .field:first-child textarea{min-height:96px; max-height:140px; resize:none}

/* note pinned to the bottom */
.controls .gen-note{margin-top:auto; padding-top:var(--s2)}

/* compress progressively on shorter screens so the panel always fits */
@media(max-height:820px){
  .controls .field{margin-bottom:var(--s2)}
  .controls{padding:var(--s3) var(--s2) var(--s2)}
  .controls .field:first-child textarea{min-height:80px}
}
@media(max-height:680px){
  .controls .field{margin-bottom:var(--s1)}
  .controls .field-label{margin-bottom:6px}
  .controls{padding:var(--s2) var(--s2) var(--s1)}
  .seg button{padding:8px 6px; font-size:0.875rem}
  .toggle{padding:6px 11px; font-size:0.875rem}
  .gen-note{font-size:0.875rem}
  .controls .field:first-child textarea{min-height:56px}
}

@media(max-width:1000px){
  .gen-body{grid-template-columns:1fr; height:auto}
  .controls{width:100%; max-width:100%; height:auto; border-right:none; border-bottom:1px solid var(--line-soft)}
  .controls .field:first-child textarea{min-height:96px}
  #goal, #context{max-height:none}
  .gen-body.collapsed .controls{margin-left:0; margin-top:-8px; opacity:0; pointer-events:none; display:none}
  .controls-rail{display:none}
}

/* collapse rail */
.controls-rail{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:rgba(0,0,0,.25); border:none; border-right:1px solid var(--line-soft);
  color:var(--text-38); cursor:pointer; transition:color .2s, background .2s; padding:0;
}
.controls-rail:hover{color:var(--text); background:var(--glass-2)}
.controls-rail .rail-icon{font-family:var(--font-mono); font-size:0.9375rem; transition:transform .3s ease; line-height:1}
.gen-body.collapsed .controls-rail .rail-icon{transform:rotate(180deg)}
.controls-rail .rail-text{
  font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:.01em; text-transform:uppercase;
  writing-mode:vertical-rl; transform:rotate(180deg); color:var(--text-26);
}
.controls-rail:hover .rail-text{color:var(--text-56)}

/* output */
.output{padding:var(--s4); overflow-y:auto; overflow-x:hidden; height:100%; min-width:0}
.output::-webkit-scrollbar{width:6px}.output::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px}
/* empty state fills the available space so the message sits centered */
.output-empty{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:var(--s3); color:var(--text-26)}

/* LANDSCAPE: only applied by JS when a long prompt is present.
   Lets the result use the available width instead of a narrow column. */
.output.landscape .prompt-doc, .output.landscape .studio-doc{max-width:none}
.studio-doc{transition:max-width .3s ease}

/* ============================================================
   IMMERSIVE WORKFLOW panel (Rozo-Torres & Sarmiento 2024)
   elicited assumptions + co-creation variants + evaluation criteria
   ============================================================ */
.immersive-panel{display:flex; flex-direction:column; gap:12px; margin-bottom:14px}
.elicited{
  border:1px dashed var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  font-size:0.875rem; color:var(--text-56); background:rgba(0,0,0,.2); line-height:1.6;
}
.elicited .el-title{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-38); margin-bottom:8px}
.elicited .el-item{display:flex; gap:8px; margin-top:3px}
.elicited .el-item b{color:var(--text); font-weight:520; min-width:92px; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em}
.variants-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media(max-width:640px){.variants-row{grid-template-columns:1fr}}
.variant-card{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px;
  background:rgba(0,0,0,.25); cursor:pointer; transition:border-color .2s, background .2s; position:relative;
}
.variant-card:hover{border-color:var(--text-38); background:var(--glass-2)}
.variant-card.selected{border-color:var(--white); background:var(--glass-2); box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.variant-card .v-angle{font-size:0.875rem; font-weight:520; color:var(--text); margin-bottom:5px}
.variant-card .v-tag{position:absolute; top:12px; right:12px; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-26); border:1px solid var(--line); border-radius:99px; padding:2px 8px}
.variant-card.selected .v-tag{color:#0A0A0B; background:var(--white); border-color:var(--white)}
.variant-card .v-preview{font-size:0.875rem; color:var(--text-38); line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.eval-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.eval-row .eval-label{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-38)}
.eval-row .eval-chip{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-56); border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:rgba(0,0,0,.2)}

/* assessor (Liu et al.) — score + justification */
.assess-box{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:13px 15px;
  background:rgba(0,0,0,.25);
}
.assess-top{display:flex; align-items:center; gap:12px}
.assess-score{font-size:1.625rem; font-weight:560; color:var(--text); letter-spacing:-.02em; line-height:1}
.assess-score small{font-size:0.875rem; color:var(--text-38); font-weight:400}
.assess-bar{flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.assess-fill{height:100%; background:var(--white); border-radius:99px; transition:width .5s ease}
.assess-refined{
  font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.06em; color:var(--good);
  border:1px solid rgba(126,226,160,.35); border-radius:999px; padding:4px 10px; white-space:nowrap;
}
.assess-just{font-size:0.875rem; color:var(--text-56); line-height:1.55; margin-top:9px; font-weight:400}

/* ============================================================
   RESEARCH-30 OPTIMIZATION PANEL (papers 1-30)
   Dark-glass, matches the Studio. Quiet + monospace accents.
   ============================================================ */
.opt-panel{
  margin:0 0 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(0,0,0,.30); backdrop-filter:blur(10px); overflow:hidden;
}
.opt-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 15px; border-bottom:1px solid var(--line-soft);
}
.opt-panel-title{font-size:0.875rem; font-weight:560; color:var(--text); letter-spacing:-.01em}
.opt-panel-sub{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); letter-spacing:.06em; font-weight:400; margin-left:8px}
.opt-panel-x{background:none; border:none; color:var(--text-38); font-size:1.25rem; line-height:1; cursor:pointer; padding:0 4px}
.opt-panel-x:hover{color:var(--text)}
.opt-actions{display:flex; flex-wrap:wrap; gap:8px; padding:13px 15px; border-bottom:1px solid var(--line-soft)}
.opt-act{
  font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-56);
  background:var(--glass); border:1px solid var(--line); border-radius:999px; padding:7px 13px;
  cursor:pointer; transition:all .2s;
}
.opt-act:hover{color:var(--text); border-color:var(--text-38); background:var(--glass-2)}
.opt-act.busy{opacity:.5; pointer-events:none}
.opt-result{padding:15px; font-size:0.875rem; color:var(--text-56); line-height:1.6; font-weight:400; max-height:340px; overflow:auto}
.opt-placeholder{color:var(--text-38); font-size:0.875rem}
.opt-loading{display:flex; align-items:center; gap:10px; color:var(--text-38); font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.05em}
.opt-spin{width:12px; height:12px; border:1.5px solid var(--text-26); border-top-color:var(--text); border-radius:50%; animation:optspin .8s linear infinite}
@keyframes optspin{to{transform:rotate(360deg)}}
/* rubric gauge */
.opt-gauge{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.opt-gauge-num{font-size:1.625rem; font-weight:560; color:var(--text); letter-spacing:-.02em; line-height:1}
.opt-gauge-num small{font-size:0.875rem; color:var(--text-38); font-weight:400}
.opt-gauge-bar{flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.opt-gauge-fill{height:100%; background:var(--white); border-radius:99px}
/* generic list + chips + provenance */
.opt-list{display:flex; flex-direction:column; gap:9px; margin:4px 0}
.opt-item{border:1px solid var(--line-soft); border-radius:10px; padding:10px 12px; background:rgba(0,0,0,.22)}
.opt-item .t{font-size:0.875rem; color:var(--text); font-weight:480; line-height:1.45}
.opt-item .d{font-size:0.875rem; color:var(--text-38); margin-top:4px; line-height:1.5}
.opt-fail{color:#e2a07e}
.opt-pass{color:var(--good)}
.opt-chips{display:flex; flex-wrap:wrap; gap:7px; margin:6px 0}
.opt-chip2{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-56); border:1px solid var(--line); border-radius:999px; padding:4px 10px; background:var(--glass)}
.opt-chip2.acc{color:var(--good); border-color:rgba(126,226,160,.35)}
.opt-chip2.roll{color:#e2a07e; border-color:rgba(226,160,126,.3)}
.opt-swap{display:flex; gap:9px; margin-top:12px}
.opt-btn{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; border-radius:9px; padding:8px 13px; cursor:pointer; transition:all .2s; border:1px solid var(--line)}
.opt-btn.primary{background:var(--white); color:#0A0A0B; border-color:var(--white); font-weight:600}
.opt-btn.ghost{background:transparent; color:var(--text-56)}
.opt-btn.ghost:hover{color:var(--text)}
.opt-prov{margin-top:12px; padding-top:10px; border-top:1px dashed var(--line-soft); display:flex; flex-direction:column; gap:6px}
.opt-prov-row{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.03em; color:var(--text-38); line-height:1.5}
.opt-prov-row b{color:var(--text-56); font-weight:600}
.opt-note{font-size:0.875rem; color:var(--text-38); font-style:italic; margin-top:8px}




/* ============================================================
   BOTTOM OPTION BAR (Persona / Target model / Context / Forge)
   Floated on the studio's bottom edge — overlapping the border,
   so there's no separate rectangular band/space.
   ============================================================ */
.gen-shell{position:relative}
/* wrapper holds the shell + the floating bar, so the bar anchors to the box bottom */
.studio-stack{position:relative}
/* The chips as one rounded pill, placed cleanly BELOW the studio box —
   no full-width band behind them. */
.opt-bar{
  position:absolute; left:50%; top:100%; transform:translate(-50%, 12px); z-index:30;
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:7px 9px; border-radius:999px;
  background:var(--glass); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(20px) brightness(.7); backdrop-filter:blur(20px) brightness(.7);
  box-shadow:0 18px 50px -14px rgba(0,0,0,.8);
  max-width:calc(100vw - 32px);
}
/* each chip is its own pill inside the bar */
.opt-chip{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:transparent; border:1px solid transparent; border-radius:999px;
  padding:8px 13px; font-size:0.875rem; color:var(--text-56); transition:all .2s;
}
.opt-chip:hover{color:var(--text); border-color:var(--line); background:var(--glass-2)}
.opt-chip .opt-k{font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:.01em; text-transform:none; color:var(--text-26)}
.opt-chip .opt-v{color:var(--text); font-weight:480}
.opt-chip.active{border-color:rgba(255,255,255,.4); background:var(--glass-2); color:var(--text)}
.opt-chip.forge{
  background:var(--white); color:#0A0A0B; border:1px solid var(--white);
  font-weight:560; padding:9px 18px; display:inline-flex; align-items:center; gap:9px;
  transition:padding .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* Forge loading state: collapse to a centered spinner circle (no text) */
.opt-chip.forge.loading{
  padding:9px; width:40px; height:40px; justify-content:center; border-radius:999px;
}
.opt-chip.forge.loading svg, .opt-chip.forge.loading span{display:none}
.opt-chip.forge.loading::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(0,0,0,.25); border-top-color:#0A0A0B;
  animation:rot .7s linear infinite;
}
@keyframes rot{to{transform:rotate(360deg)}}
.opt-chip.forge:hover{transform:translateY(-1px); box-shadow:0 12px 32px -10px rgba(255,255,255,.25); color:#0A0A0B}
.opt-chip.forge:active{transform:scale(.98)}
@media(max-width:720px){
  .opt-bar{position:static; transform:none; flex-wrap:wrap; justify-content:center; margin-top:12px}
  .opt-chip.forge{width:100%; justify-content:center}
}

/* popovers for the bottom-bar options */
.opt-anchor{position:relative; display:inline-flex}
.opt-pop{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%);
  z-index:70; width:218px; max-width:88vw;
  background:#141416; border:1px solid var(--line); border-radius:13px; padding:9px;
  box-shadow:0 28px 70px -18px rgba(0,0,0,.9); display:none;
}
.opt-pop.open{display:block; animation:popInCentered .16s cubic-bezier(.2,.9,.3,1.2)}
.opt-pop-title{font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:.01em; text-transform:none; color:var(--text-56); margin-bottom:9px}
.opt-pop .seg{grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:11px}
.opt-pop .seg button{padding:7px 5px; font-size:0.875rem}
.opt-pop .seg button small{font-size:0.875rem}
.opt-pop select{width:100%}
.opt-pop textarea{width:100%; min-height:70px; font-size:0.875rem; padding:9px 11px}
.opt-pop .model-item{padding:8px 10px; font-size:0.875rem}
#pop-kg{width:340px}
#pop-kg textarea{min-height:100px; font-family:var(--font-mono); font-size:0.875rem; line-height:1.6}
.kg-hint{font-size:0.875rem; color:var(--text-26); margin-top:9px; font-weight:400}

/* custom-KG improve note (Li et al.) */
.kg-create{color:var(--text); border-color:var(--text-38)}
.kg-note{
  font-size:0.875rem; color:var(--text-56); line-height:1.55; font-weight:400;
  border:1px dashed var(--line); border-radius:var(--radius-sm); padding:11px 14px;
  background:rgba(0,0,0,.2); margin-bottom:14px;
}
.kg-note b{color:var(--text); font-weight:520}
@media(prefers-reduced-motion:reduce){.opt-pop{animation:none}}
.field-label{display:flex; align-items:baseline; gap:8px; font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:.01em; text-transform:none; color:var(--text-56); margin-bottom:12px}
.field-label .req{color:var(--text)}
.field-hint{font-size:0.875rem; color:var(--text-26); font-weight:400; text-transform:none; letter-spacing:0; margin-left:auto; font-family:var(--font-sans)}
textarea, input[type=text], select{
  width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:14px 16px; font-family:var(--font-sans); font-size:0.9375rem; font-weight:400;
  transition:border-color .2s, box-shadow .2s, background .2s; resize:vertical;
}
textarea::placeholder, input::placeholder{color:var(--text-26)}
textarea:focus, input:focus, select:focus{outline:none; border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.45); box-shadow:0 0 0 3px rgba(255,255,255,.08)}
textarea{min-height:96px; line-height:1.6}
select{appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--text-38) 50%), linear-gradient(135deg, var(--text-38) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size:5px 5px; background-repeat:no-repeat; cursor:pointer}

/* segmented */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:16px; padding:6px}
.seg button{
  background:transparent; border:1px solid transparent; color:var(--text-56); border-radius:9px;
  padding:8px 6px; font-size:0.875rem; font-weight:420; letter-spacing:.01em; transition:all .2s; line-height:1.25;
}
.seg button small{display:block; font-family:var(--font-sans); font-size:0.875rem; color:var(--text-26); letter-spacing:.01em; margin-top:2px; font-weight:400}
.seg button.active{background:var(--white); color:#0A0A0B; font-weight:560}
.seg button.active small{color:rgba(0,0,0,.62)}
.seg button:not(.active):hover{color:var(--text); background:var(--glass-2)}

/* toggles */
.toggles{display:flex; flex-wrap:wrap; gap:8px}
.toggle{
  font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:.01em; color:var(--text-56);
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:999px; padding:6px 12px; transition:all .2s;
  display:inline-flex; align-items:center; gap:6px;
}
.toggle.active{color:var(--text); border-color:rgba(255,255,255,.5); background:var(--glass-2)}
.toggle:hover{border-color:var(--text-38)}

/* ---------- Explore more (advanced techniques, dropdown menu) ---------- */
.explore{position:relative; margin-top:var(--s2)}
.explore-toggle{display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid var(--line-soft); border-radius:999px; padding:6px 14px; color:var(--text-38); font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:.01em; cursor:pointer; transition:all .2s}
.explore-toggle:hover{color:var(--text); border-color:var(--text-38)}
.explore-caret{transition:transform .2s}
.explore-toggle[aria-expanded="true"] .explore-caret{transform:rotate(180deg)}
/* the dropdown menu — a vertical list that opens ABOVE the button */
.explore-menu{position:absolute; bottom:calc(100% + 6px); left:0; z-index:40; min-width:220px; background:#141416; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.6); padding:6px; display:flex; flex-direction:column}
.explore-item{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; text-align:left; background:none; border:none; padding:10px 14px; font-family:var(--font-sans); font-size:0.875rem; color:var(--text-56); border-radius:9px; cursor:pointer; transition:all .15s; font-weight:400}
.explore-item:hover{background:var(--glass-2); color:var(--text)}
.explore-item.active{color:var(--text)}
.explore-item.active::after{
  content:""; flex:none; width:13px; height:13px; background:var(--good);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 6.6'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 6.6'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  animation:pinCheck .22s cubic-bezier(.2,.9,.3,1.5);
}
@keyframes pinCheck{from{opacity:0; transform:scale(.6)}to{opacity:1; transform:none}}
.explore-pin{border-top:1px solid var(--line-soft); margin-top:6px; padding:9px 14px 8px; font-size:0.875rem; color:var(--text-38)}
.explore-pin-label{display:flex; align-items:center; gap:9px; cursor:pointer; font-weight:400; user-select:none; transition:color .18s}
.explore-pin-label:hover{color:var(--text-56)}
.explore-pin-label input{position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none}
.pin-box{
  flex:none; position:relative; width:15px; height:15px; border-radius:4.5px;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.explore-pin-label:hover .pin-box{border-color:var(--text-38)}
.pin-box::after{
  content:""; position:absolute; inset:0; background:#0A0A0B;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.4l4.6 4.6L19 6.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.4l4.6 4.6L19 6.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  transform:scale(0); transition:transform .2s cubic-bezier(.2,.9,.3,1.5);
}
.explore-pin-label input:checked + .pin-box{
  background:rgba(244,244,245,.9); border-color:rgba(244,244,245,.9);
  box-shadow:0 0 0 2px rgba(255,255,255,.05), 0 0 10px rgba(255,255,255,.09);
}
.explore-pin-label input:checked + .pin-box::after{transform:scale(1)}
.explore-pin-label input:focus-visible + .pin-box{box-shadow:0 0 0 3px rgba(255,255,255,.16)}

/* ---------- target-model dropdown (same style as Explore more) ---------- */
.model-menu{display:flex; flex-direction:column; gap:2px}
.model-item{display:block; width:100%; text-align:left; background:none; border:none; padding:8px 11px; font-family:var(--font-sans); font-size:0.875rem; color:var(--text-56); border-radius:9px; cursor:pointer; transition:all .15s; font-weight:400}
.model-item:hover{background:var(--glass-2); color:var(--text)}
.model-item.active{color:var(--text); background:rgba(255,255,255,.06)}
.model-item.active::after{
  content:""; float:right; width:12px; height:12px; margin:2px 0 0 8px; background:var(--good);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 6.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 6.6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  animation:pinCheck .22s cubic-bezier(.2,.9,.3,1.5);
}

.generate-btn{
  width:100%; background:var(--white); color:#0A0A0B; border:none; border-radius:16px;
  padding:18px; font-size:1.03125rem; font-weight:560; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:11px; transition:transform .2s, box-shadow .2s, opacity .2s;
}
.generate-btn:hover:not(:disabled){transform:translateY(-2px); box-shadow:0 18px 44px -14px rgba(255,255,255,.3)}
.generate-btn:active:not(:disabled){transform:scale(.98)}
.generate-btn:disabled{opacity:.4; cursor:not-allowed}
.generate-btn .spin{width:16px; height:16px; border:2px solid rgba(0,0,0,.25); border-top-color:#0A0A0B; border-radius:50%; animation:rot .7s linear infinite; display:none}
.generate-btn.loading .spin{display:block}
.generate-btn.loading .bolt{display:none}
@keyframes rot{to{transform:rotate(360deg)}}
.gen-note{margin-top:12px; font-size:0.875rem; color:var(--text-26); text-align:center; font-family:var(--font-mono); letter-spacing:.02em}

.output-empty .ring{width:88px; height:88px; border-radius:50%; border:1px dashed var(--line); display:grid; place-items:center; color:var(--text-38)}
.output-empty p{max-width:36ch; font-size:0.875rem; font-weight:400; text-wrap:pretty}
.result{display:none}
.result.show{display:block; animation:fadeUp .4s ease}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.result.show{animation:none}}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.tab{
  background:transparent; border:none; border-bottom:2px solid transparent; color:var(--text-38);
  font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.05em; padding:12px 14px; transition:color .2s, border-color .2s;
}
.tab:hover{color:var(--text-56)}
.tab.active{color:var(--text); border-bottom-color:var(--text)}
/* Studio result tabs: compact + sans. The base .tab above is the mono/tracked variant
   (still used by the Shares tabs); here we want plain UI text and a tighter bar. */
#result .tabs{gap:1px; margin-bottom:0}   /* pages.css adds margin-bottom:var(--s3) to .tabs */
#result .tab{font-family:var(--font-sans); font-size:0.875rem; font-weight:420; letter-spacing:0; padding:4px 8px}
#result .tab:hover{color:var(--text-56)}
/* pull the pane content (prompt / structured / yaml) up under the tabs */
#result .tab-pane{padding:10px 2px var(--s3)}
#result #pane-studio{padding-top:28px}   /* the prompt box wanted more air than Structured/YAML */
#result .code-toolbar{margin-bottom:8px}
.tab-pane{display:none; padding:var(--s3) 2px}
.tab-pane.active{display:block; animation:fadeUp .3s ease}
@media(prefers-reduced-motion:reduce){.tab-pane.active{animation:none}}

/* structured prompt blocks */
.prompt-doc{display:flex; flex-direction:column; gap:14px}
.pblock{border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:rgba(0,0,0,.25)}
.pblock-head{display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--glass); border-bottom:1px solid var(--line-soft);
  font-family:var(--font-sans); font-size:0.875rem; font-weight:500; letter-spacing:0; text-transform:none; text-shadow:none}
.pblock-head .key{color:var(--text)}
.pblock-head .psrc{margin-left:auto; color:var(--text-26); font-size:0.875rem; letter-spacing:.08em}
.pblock-body{padding:16px 18px; font-size:0.875rem; line-height:1.65; color:var(--text); white-space:pre-wrap; font-weight:400}
.pblock-body .vble{color:var(--text); font-family:var(--font-mono); font-size:0.875rem; background:var(--glass-2); padding:1px 6px; border-radius:5px; border:1px solid var(--line)}

/* code */
.code{background:rgba(0,0,0,.4); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; font-family:var(--font-mono); font-size:0.875rem; line-height:1.65; color:rgba(244,244,245,.8); white-space:pre; overflow-x:auto; tab-size:2}
.code .k{color:var(--text)} .code .s{color:rgba(244,244,245,.6)} .code .c{color:var(--text-26); font-style:italic} .code .n{color:rgba(244,244,245,.75)}
.code-toolbar{display:flex; justify-content:flex-end; margin-bottom:12px; gap:8px}
.copy-btn{
  font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-56);
  background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:9px; padding:8px 14px; transition:all .2s;
  display:inline-flex; align-items:center; gap:8px;
}
.copy-btn svg{width:14px; height:14px; flex:none; display:block}

/* one segmented tool strip: actions, then copy */
.tool-group{display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:rgba(0,0,0,.3)}
.tool-group .copy-btn{border:0; border-radius:0; background:none; padding:8px 14px}
.tool-group .copy-btn + .copy-btn,
.tool-group .copy-btn + .copy-ico{border-left:1px solid var(--line-soft)}
.tool-group .copy-ico{border:0; border-radius:0; width:38px; height:auto; padding:0; display:grid; place-items:center}
.tool-group .copy-btn:hover,
.tool-group .copy-ico:hover{background:rgba(255,255,255,.05); color:var(--text)}
.copy-btn:hover{color:var(--text); border-color:var(--text-38)}
.copy-btn.copied{color:var(--good); border-color:var(--good)}
/* icon-only copy control (small + quiet) */
.copy-ico{display:inline-grid; place-items:center; width:24px; height:24px; padding:0; background:none; border:none;
  color:var(--text-26); cursor:pointer; border-radius:5px; transition:color .15s, background .15s; flex:none}
.copy-ico:hover{color:var(--text); background:rgba(255,255,255,.06)}
.copy-ico.copied{color:#8FB2FF}
.copy-ico svg{width:14px; height:14px; display:block}

/* provenance */
.prov{display:flex; flex-direction:column; gap:12px}
.prov-item{display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; background:rgba(0,0,0,.25)}
.prov-badge{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.06em; color:#0A0A0B; background:var(--white); border-radius:7px; padding:5px 9px; font-weight:600; white-space:nowrap}
.prov-badge.b2,.prov-badge.b3,.prov-badge.b4{background:rgba(244,244,245,.72)}
.prov-what{font-size:0.875rem; color:var(--text); font-weight:480}
.prov-why{font-size:0.875rem; color:var(--text-38); margin-top:3px; font-weight:400}
.prov-src{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-26); text-align:right; letter-spacing:.04em; max-width:150px; line-height:1.4}

/* model fit */
.modelfit{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:600px){.modelfit{grid-template-columns:1fr}}
.mf-card{border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; background:rgba(0,0,0,.25)}
.mf-card.rec{border-color:rgba(255,255,255,.4); background:var(--glass)}
.mf-tag{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-26)}
.mf-card.rec .mf-tag{color:var(--text)}
.mf-models{font-size:1.1875rem; font-weight:560; margin:8px 0 6px; letter-spacing:-.01em}
.mf-card p{font-size:0.875rem; color:var(--text-56); margin:0; font-weight:400}
.mf-note{grid-column:1/-1; font-size:0.875rem; color:var(--text-26); font-family:var(--font-mono); letter-spacing:.02em; padding-top:6px}

/* ============================================================
   PROMPT STUDIO (interactive slots)
   ============================================================ */
.studio-wrap{display:flex; flex-direction:column; gap:16px}
.studio-status{display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-38); padding:0 2px 12px; text-shadow:none}
.studio-status .pip{width:11px; height:11px; flex:none; display:block; color:var(--text-26)}
.studio-status.live .pip{color:var(--good)}
.studio-status.demo .pip{color:var(--warn)}
.studio-status .spacer{margin-left:auto}
.studio-status button{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); background:transparent; border:0; padding:0; letter-spacing:.04em; cursor:pointer; transition:color .2s; text-shadow:none}
.studio-status button:hover{color:var(--text)}
.studio-status button:disabled{opacity:.4; cursor:default}
.studio-status button svg{width:12px; height:12px; display:block; flex:none}

.studio-doc{
  border:1px solid var(--line); border-radius:var(--radius); background:rgba(0,0,0,.3); padding:32px 34px;
  font-size:1.0625rem; line-height:2.05; color:var(--text); font-weight:400; min-height:200px; position:relative; text-wrap:pretty;
}
.studio-doc.loading::after{content:""; position:absolute; inset:0; border-radius:var(--radius); background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.05) 50%, transparent 70%); background-size:200% 100%; animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){.studio-doc.loading::after{animation:none}}
.studio-doc .placeholder{color:var(--text-26); font-size:0.90625rem; font-weight:400}

.slot{
  display:inline; position:relative; cursor:pointer; border-radius:7px; padding:2px 7px; margin:0 1px;
  background:var(--glass-2); color:var(--text); border-bottom:1.5px dashed rgba(255,255,255,.4);
  transition:background .2s, box-shadow .2s; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.slot:hover{background:rgba(255,255,255,.14); box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.slot.active{background:var(--white); color:#0A0A0B; border-bottom-color:transparent}
.slot::after{content:"▾"; font-size:max(0.875rem,.68em); margin-left:6px; opacity:.5; font-family:var(--font-mono)}
.slot.active::after{opacity:.9}
.slot .slot-kind{font-family:var(--font-mono); font-size:max(0.875rem,.54em); letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.25); padding:2px 6px; border-radius:5px; margin-right:6px; vertical-align:middle; opacity:.8}
.slot.active .slot-kind{background:rgba(0,0,0,.15)}
.regen-note{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); letter-spacing:.03em; display:flex; align-items:center; gap:8px}
.regen-note .dotpulse{width:7px;height:7px;border-radius:50%;background:var(--white);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}

/* slot popover */
.slot-pop{position:absolute; z-index:90; width:340px; max-width:88vw; background:#141416; border:1px solid var(--line); border-radius:16px; box-shadow:0 32px 80px -20px rgba(0,0,0,.9); overflow:hidden; animation:popIn .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{opacity:0; transform:translateY(8px) scale(.97)}to{opacity:1; transform:none}}
@keyframes popInCentered{from{opacity:0; transform:translateX(-50%) translateY(8px) scale(.97)}to{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.slot-pop{animation:none}}
.slot-pop-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line-soft); background:var(--glass)}
.slot-pop-head .kind{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:4px 10px}
.slot-pop-head .lbl{font-size:0.875rem; font-weight:520; color:var(--text)}
.slot-pop-head .x{margin-left:auto; background:transparent; border:none; color:var(--text-38); font-size:1.1875rem; line-height:1; padding:2px 7px; border-radius:7px}
.slot-pop-head .x:hover{color:var(--text); background:var(--glass-2)}
.slot-pop-opts{max-height:250px; overflow-y:auto; padding:8px}
.slot-pop-opts::-webkit-scrollbar{width:7px}.slot-pop-opts::-webkit-scrollbar-thumb{background:var(--line); border-radius:7px}
.opt{display:block; width:100%; text-align:left; background:transparent; border:1px solid transparent; color:var(--text-56); font-size:0.875rem; padding:10px 12px; border-radius:10px; transition:all .15s; line-height:1.4; font-weight:400}
.opt:hover{background:var(--glass-2); color:var(--text); border-color:var(--line)}
.opt.sel{background:rgba(255,255,255,.12); color:var(--text); border-color:rgba(255,255,255,.3)}
.opt.sel::before{content:"✓ "; font-family:var(--font-mono)}
.opt.loading-opts{color:var(--text-26); text-align:center; font-family:var(--font-mono); font-size:0.875rem; cursor:default}
.opt.loading-opts:hover{background:transparent; border-color:transparent}
.slot-pop-custom{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line-soft)}
.slot-pop-custom input{flex:1; background:rgba(0,0,0,.3); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 13px; font-size:0.875rem; font-family:var(--font-sans)}
.slot-pop-custom input:focus{outline:none; border-color:rgba(255,255,255,.5); box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.slot-pop-custom button{background:var(--white); color:#0A0A0B; border:none; border-radius:10px; padding:0 17px; font-weight:560; font-size:0.875rem; transition:transform .15s}
.slot-pop-custom button:hover{transform:translateY(-1px)}
.slot-pop-foot{display:flex; gap:8px; padding:11px 12px; border-top:1px solid var(--line-soft); background:var(--glass)}
.slot-pop-foot button{flex:1; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-56); background:transparent; border:1px solid var(--line); border-radius:9px; padding:8px 10px; transition:all .2s}
.slot-pop-foot button:hover{color:var(--text); border-color:var(--text-38)}
.slot-pop-foot button:disabled{opacity:.4; cursor:default}

.studio-prov{display:flex; flex-wrap:wrap; gap:8px}
.studio-prov .pv{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-56); border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:rgba(0,0,0,.25)}
.studio-prov .pv b{color:var(--text); font-weight:600}

/* ---------- free-form Studio editing (double-click word / select phrase) ---------- */
.studio-doc.editable{cursor:text}
.studio-doc .w{border-radius:5px; padding:0 1px; transition:background .15s, box-shadow .15s}
.studio-doc .w:hover{background:rgba(255,255,255,.10); box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.studio-doc .w.editing{background:var(--white); color:#0A0A0B}
.studio-doc ::selection{background:rgba(255,255,255,.28); color:#fff}
.studio-hint{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-26); letter-spacing:.04em; margin-top:2px}
.studio-hint b{color:var(--text-56); font-weight:600}

/* inline word editor (contenteditable span) */
.w-edit{
  display:inline-block; min-width:24px; background:var(--white); color:#0A0A0B;
  border-radius:6px; padding:1px 7px; outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.18);
  font:inherit; white-space:nowrap;
}

/* floating edit toolbar for selections */
.edit-bar{
  position:absolute; z-index:95; display:flex; gap:6px; align-items:center;
  background:#141416; border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.9); animation:popIn .16s cubic-bezier(.2,.9,.3,1.2);
}
.edit-bar button{
  font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.03em; color:var(--text-56);
  background:transparent; border:1px solid var(--line); border-radius:8px; padding:7px 12px; transition:all .18s; white-space:nowrap;
}
.edit-bar button:hover{color:var(--text); border-color:var(--text-38); background:var(--glass-2)}
.edit-bar button.primary{background:var(--white); color:#0A0A0B; border-color:var(--white); font-weight:600}
.edit-bar button.primary:hover{transform:translateY(-1px)}
.edit-bar .sel-preview{
  max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:0.875rem; color:var(--text-38); padding:0 6px; font-style:italic;
}
@media(prefers-reduced-motion:reduce){.edit-bar{animation:none}}


/* ---------- docs ---------- */
.docs-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media(max-width:900px){.docs-grid{grid-template-columns:1fr}}
.doc-card{border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); background:var(--glass); display:flex; flex-direction:column; gap:12px; transition:border-color .2s, background .2s}
.doc-card:hover{border-color:var(--text-38); background:var(--glass-2)}
.doc-card h4{font-size:1.0625rem; font-weight:520}
.doc-card p{font-size:0.875rem; color:var(--text-56); margin:0; flex:1; font-weight:400}
.doc-card .dl{font-family:var(--font-mono); font-size:0.875rem; color:var(--text); text-decoration:none; letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px}
.doc-card .dl:hover{text-decoration:underline}

/* ---------- roadmap ---------- */
.roadmap{border-top:1px solid var(--line-soft)}
.rm-row{display:grid; grid-template-columns:120px 1fr auto; gap:var(--s4); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--line-soft)}
.rm-phase{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); letter-spacing:.16em; text-transform:uppercase}
.rm-row.now .rm-phase{color:var(--text)}
.rm-what{font-size:0.9375rem; color:var(--text)}
.rm-what small{display:block; color:var(--text-38); font-size:0.875rem; font-weight:400; margin-top:2px}
.rm-status{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.06em; padding:5px 12px; border-radius:999px; border:1px solid var(--line); color:var(--text-38); white-space:nowrap}
.rm-row.now .rm-status{border-color:rgba(255,255,255,.4); color:var(--text)}
@media(max-width:640px){.rm-row{grid-template-columns:1fr; gap:8px}}

/* ---------- pricing ---------- */
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
@media(max-width:900px){.pricing{grid-template-columns:1fr}}
.price-card{border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4); background:var(--glass); display:flex; flex-direction:column; position:relative; transition:transform .25s, border-color .25s}
.price-card:hover{transform:translateY(-4px)}
.price-card.featured{border-color:rgba(255,255,255,.45); background:var(--glass-2)}
.price-flag{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--white); color:#0A0A0B; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.1em; padding:5px 14px; border-radius:999px; text-transform:uppercase; font-weight:600}
.price-name{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-56)}
.price-amount{font-size:2.75rem; font-weight:560; margin:var(--s3) 0 6px; letter-spacing:-.02em}
.price-amount span{font-size:0.9375rem; color:var(--text-38); font-weight:400}
/* pay-as-you-go amount is editable: same type as the price, underlined */
.price-input{width:3.4ch; font:inherit; color:inherit; background:transparent; border:0; border-bottom:1px dashed var(--text-38); padding:0; margin:0; text-align:left; letter-spacing:inherit; border-radius:0; -moz-appearance:textfield; appearance:textfield}
.price-input:focus{outline:none; border-bottom-color:var(--text)}
.price-input::-webkit-outer-spin-button,.price-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.price-desc{font-size:0.875rem; color:var(--text-38); margin-bottom:var(--s3); font-weight:400}
.price-list{list-style:none; padding:0; margin:0 0 var(--s4); display:flex; flex-direction:column; gap:12px; flex:1}
.price-list li{font-size:0.875rem; color:var(--text-56); padding-left:22px; position:relative; font-weight:400}
.price-list li::before{content:"→"; position:absolute; left:0; color:var(--text); font-family:var(--font-mono)}
.price-list li.na{color:var(--text-26)}
.price-list li.na::before{content:"·"; color:var(--text-26)}
.price-card .btn{justify-content:center}

/* ---------- pricing comparison table (design: Pricing Tier Comparison) ---------- */
.compare{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); overflow:hidden; margin:0 0 var(--s5); backdrop-filter:blur(10px)}

/* ---------- Frosted-glass landing boxes — same recipe as the Studio shell ──
   Matches .gen-shell: blur(20px) brightness(.7) over the page-wide mist, so the
   landing panels frost the animated background exactly like the Studio does. */
.adv-shell, .topics-shell, .price-card, .compare{
  background:var(--glass);
  -webkit-backdrop-filter:blur(20px) brightness(.7);
  backdrop-filter:blur(20px) brightness(.7);
}
.compare-row{display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; align-items:center; border-top:1px solid var(--line-soft)}
.compare-row:first-child{border-top:none}
.compare-row > span{padding:13px 18px; font-size:0.875rem; text-align:center; color:var(--text-56); font-weight:400}
.compare-row .compare-feat{text-align:left; color:var(--text-56)}
.compare-head{background:rgba(0,0,0,.25)}
.compare-head > span{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-38); font-weight:600}
.compare-head .compare-feat{color:var(--text-38)}
.compare-row .yes{color:var(--text); font-weight:480}
.compare-row .na{color:var(--text-26)}
.compare-row:hover{background:rgba(255,255,255,.02)}
@media(max-width:640px){.compare-row > span{padding:11px 10px; font-size:0.875rem}}

/* ---------- account chip (nav) ---------- */
.account-chip{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--line); border-radius:999px; padding:4px 12px 4px 4px; background:var(--glass); transition:border-color .2s}
.account-chip:hover{border-color:var(--text-38)}
.account-avatar{width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:var(--glass-2); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none; color:var(--text-38)}
.account-avatar svg{width:15px; height:15px}
.account-avatar img{width:100%; height:100%; object-fit:cover; display:block}
.account-avatar img[hidden]{display:none}
.account-name{font-size:0.875rem; color:var(--text-56); font-weight:430; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:.01em}
.account-caret{color:var(--text-38); font-size:0.625rem; line-height:1}
.nav-login{font-size:0.875rem; color:var(--text-56); padding:9px 18px; border-radius:999px; border:1px solid var(--line); background:var(--glass); transition:all .2s; white-space:nowrap}
.nav-login:hover{color:var(--text); border-color:var(--text-38); background:var(--glass-2)}

/* ---------- account dropdown menu (shared, nav.js) ---------- */
.account-menu{position:absolute; top:calc(100% + 10px); right:0; min-width:190px; background:#0E0E10; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 18px 50px rgba(0,0,0,.5); padding:6px; z-index:300}
.account-menu-item{display:block; padding:9px 14px; font-size:0.875rem; color:var(--text-56); border-radius:9px; font-weight:400; white-space:nowrap}
.account-menu-item:hover{background:var(--glass-2); color:var(--text)}
.account-menu-sep{height:1px; background:var(--line-soft); margin:6px 8px}

/* ---------- auth modal (Studio gate) ---------- */
.auth-modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(6,6,7,.6); backdrop-filter:blur(8px)}
.auth-card{position:relative; width:100%; max-width:308px; border:1px solid var(--line); border-radius:var(--radius); background:#0E0E10; padding:16px; box-shadow:0 24px 80px rgba(0,0,0,.5)}
.auth-x{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--text-38); font-size:1.625rem; line-height:1; cursor:pointer}
.auth-x:hover{color:var(--text)}
.auth-head{margin-bottom:10px}
.auth-title{font-size:1rem; font-weight:560; letter-spacing:-.02em}
.auth-sub{font-size:0.875rem; color:var(--text-38); margin-top:3px; font-weight:400}
.auth-tabs{display:flex; gap:var(--s2); border-bottom:1px solid var(--line); margin-bottom:14px}
.auth-tab{background:none; border:none; border-bottom:2px solid transparent; padding:8px 4px; color:var(--text-38); font-size:0.875rem; font-weight:420; cursor:pointer}
.auth-tab.active{color:var(--text); border-bottom-color:var(--text)}
.auth-error{border:1px solid rgba(226,160,126,.35); background:rgba(226,160,126,.08); color:#e2a07e; font-size:0.875rem; border-radius:10px; padding:10px 13px; margin-bottom:var(--s3); font-weight:400}
.auth-form{display:flex; flex-direction:column; gap:6px}
.auth-name-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:228px; margin:0 auto}
.auth-name-row .auth-input{padding:6px 9px; font-size:0.875rem}
@media(max-width:480px){.auth-name-row{grid-template-columns:1fr}}
.auth-label{font-size:0.875rem; color:var(--text-56); margin-top:8px; font-weight:420}
.auth-label .opt{color:var(--text-26); font-weight:400; font-size:0.875rem}
.auth-input{background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--text); font-size:0.875rem; font-family:inherit; font-weight:400; width:100%}
.auth-input:focus{outline:none; border-color:var(--text-38)}
.auth-submit{margin-top:10px; width:100%; justify-content:center}
.auth-submit[disabled]{opacity:.6; pointer-events:none}

/* Google Sign-In (auth modal) */
.auth-or{display:flex; align-items:center; gap:12px; color:var(--text-26); font-size:0.875rem; font-family:var(--font-mono); letter-spacing:.1em; text-transform:uppercase; margin:16px 0 12px}
.auth-or::before,.auth-or::after{content:""; flex:1; height:1px; background:var(--line-soft)}
.google-btn{display:flex; justify-content:center; min-height:40px}
.google-btn iframe{margin:0 auto}

/* ---------- OUR ADVANTAGE (compact comparison) ---------- */
.adv-shell{position:relative; max-width:1092px; margin:0 auto; padding:24px; background:rgba(255,255,255,.02); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
.adv-head{max-width:54ch; margin-bottom:var(--s2)}
.adv-eyebrow{font-family:var(--font-mono); font-size:0.875rem; font-weight:600; letter-spacing:.14em; color:var(--text-38); text-transform:uppercase}
.adv-title{font-size:clamp(1.5rem,3vw,1.875rem); font-weight:600; letter-spacing:-.02em; margin:8px 0}
.adv-sub{font-size:0.875rem; color:var(--text-56); line-height:1.6; font-weight:400}
.adv-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
@media(max-width:760px){.adv-grid{grid-template-columns:1fr}}
/* desktop: the two comparison wallets share one connected background */
@media(min-width:761px){
  .adv-grid{gap:0}
  .adv-grid > .adv-wallet:first-child{border-top-right-radius:0; border-bottom-right-radius:0; border-right:none}
  .adv-grid > .adv-wallet:last-child{border-top-left-radius:0; border-bottom-left-radius:0; border-left:none}
}
/* landscape wallet: image stack left; header+prompt and list connected on the right */
.adv-wallet{border:1px solid var(--line-soft); border-radius:var(--radius); background:rgba(255,255,255,.02); padding:16px;
  display:grid; grid-template-columns:1.1fr 0.9fr; grid-template-rows:auto 1fr; row-gap:0; column-gap:12px; align-items:stretch}
.wallet-media{grid-column:1; grid-row:2; display:flex; flex-direction:column; justify-content:center; min-width:0}
.adv-wallet-our{background:rgba(255,255,255,.045); border-color:var(--line)}
/* 7-shaped boxes — frosted (faint seam line known; to be fixed later) */
.wallet-intro, .wallet-list-box{
  padding:18px; margin:0;
  border:1px solid var(--line);
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(20px) brightness(.45);
  backdrop-filter:blur(20px) brightness(.45);
}
.wallet-intro{grid-column:1/-1; grid-row:1; border-radius:var(--radius) var(--radius) 0 var(--radius); border-bottom:none}
.wallet-list-box{grid-column:2; grid-row:2; position:relative; border-radius:0 0 var(--radius) var(--radius); border-top:none}
/* fillet: smooths the inner corner — same frosted material, tucked 1px under */
.wallet-list-box::before{content:""; position:absolute; left:-12px; top:-1px; width:13px; height:13px; background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(20px) brightness(.45); backdrop-filter:blur(20px) brightness(.45); -webkit-mask-image:radial-gradient(circle at 0% 100%, transparent 11px, #000 12px); mask-image:radial-gradient(circle at 0% 100%, transparent 11px, #000 12px); pointer-events:none}
.wallet-intro .wallet-prompt{margin-bottom:0}

/* Mirrored composition — PromptDistill wallet only: media right, list left.
   The 7-shape junction (intro bar + leg) is flipped with its fillet; the
   right-hand wallet keeps the original orientation. Desktop only, so the
   <=700px single-column stack is untouched. */
@media (min-width:701px){
  .adv-wallet-our{grid-template-columns:0.9fr 1.1fr}
  .adv-wallet-our .wallet-media{grid-column:2}
  .adv-wallet-our .wallet-list-box{grid-column:1; border-left:1px solid var(--line); border-right:none}
  .adv-wallet-our .wallet-intro{border-radius:var(--radius) var(--radius) var(--radius) 0}
  .adv-wallet-our .wallet-fillet{left:auto; right:-12px; clip-path:path("M 12 0 A 12 12 0 0 0 0 12 L 0 0 Z")}
}
.wallet-list-box .adv-list{margin-top:0; padding-top:0; border-top:none}
.wallet-head{display:flex; align-items:center; gap:10px; margin-bottom:var(--s2)}
.wallet-title{font-size:0.9375rem; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:9px}
.wallet-count{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-38); border:1px solid var(--line-soft); border-radius:999px; padding:3px 9px; white-space:nowrap; margin-left:auto}
.wallet-stack{position:relative; flex:1; min-height:190px; margin-bottom:14px}
.wallet-card{position:absolute; inset:0 0 auto 0; height:auto; aspect-ratio:16/9; display:block; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#0d0e11; text-align:left; cursor:pointer; transform-origin:50% 100%; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, border-color .25s ease, box-shadow .35s ease}
.wallet-card[data-depth="0"]{z-index:3; transform:translateY(38px)}
.wallet-card[data-depth="1"]{transform:translateY(72px) scale(.97); opacity:.72}
.wallet-card[data-depth="2"]{transform:translateY(106px) scale(.94); opacity:.46}
.wallet-card[data-depth="0"]:hover{transform:translateY(34px) scale(1.006); border-color:rgba(255,255,255,.32); box-shadow:0 20px 44px -20px rgba(0,0,0,.85)}
.wallet-shot{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-26); background:linear-gradient(160deg,#191b20,#0d0e11 72%)}
.wallet-shot::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:26px 26px}
.wallet-shot::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.08),transparent 45%)}
.wallet-ph{position:relative; z-index:1; opacity:.65}
.wallet-ph-label{position:absolute; left:13px; bottom:12px; z-index:1; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-26)}
.wallet-chip{position:absolute; left:12px; top:12px; z-index:2; font-size:0.875rem; font-weight:500; color:var(--text-56); background:rgba(10,10,11,.72); border:1px solid var(--line-soft); border-radius:999px; padding:5px 11px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.adv-wallet-our .wallet-chip{color:var(--text)}
.wallet-shot img{position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover}
.wallet-shot:has(img) .wallet-ph,
.wallet-shot:has(img) .wallet-ph-label{display:none}
/* animated example loaders mounted in the card */
.wallet-loader{position:absolute; inset:0; z-index:1; display:block; overflow:hidden; transition:opacity .3s ease}
.wallet-loader .ldr-stage{transform:scale(.86)}
.wallet-empty .wallet-loader{opacity:0; pointer-events:none}
.wallet-shot:has(.wallet-loader) .wallet-ph,
.wallet-shot:has(.wallet-loader) .wallet-ph-label{display:none}
.wallet-dots{display:flex; align-items:center; gap:7px}
@media(max-width:700px){
  .adv-wallet{grid-template-columns:1fr; row-gap:var(--s2)}
  .wallet-intro, .wallet-media, .wallet-list-box{grid-column:auto; grid-row:auto}
  .wallet-intro{border-radius:var(--radius)}
  .wallet-list-box{border-radius:var(--radius); border-top:1px solid var(--line)}
  .wallet-list-box::before{display:none}
  .wallet-stack{flex:none; aspect-ratio:16/9; min-height:0; margin-bottom:16px}
  .wallet-card{inset:0; top:0; aspect-ratio:auto; transform:none}
  .wallet-card[data-depth="0"]{transform:none}
  .wallet-card[data-depth="1"]{transform:translateY(9px) scale(.965); opacity:.6}
  .wallet-card[data-depth="2"]{transform:translateY(18px) scale(.93); opacity:.32}
}
.wallet-dot{width:6px; height:6px; border-radius:999px; background:rgba(244,244,245,.18); padding:0; transition:width .3s ease, background .3s ease}
.wallet-dot:hover{background:rgba(244,244,245,.42)}
.wallet-dot.is-on{width:18px; background:var(--white)}
/* full-screen preview button on the wallet */
.wallet-expand{margin-left:auto; flex:none; width:26px; height:26px; padding:0; border-radius:50%; border:1px solid var(--line-soft); background:rgba(255,255,255,.03); color:var(--text-38); display:flex; align-items:center; justify-content:center; transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease}
.wallet-expand:hover{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.07)}
.wallet-expand:active{transform:scale(.92)}
.wallet-expand svg{width:13px; height:13px; display:block}
/* full-screen image lightbox */
.lightbox{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:5vh 5vw; background:rgba(6,6,7,.82); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; transition:opacity .3s ease}
.lightbox.is-open{opacity:1}
.lightbox-stage{display:flex; align-items:center; justify-content:center; width:100%; transform:scale(.97); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lightbox.is-open .lightbox-stage{transform:none}
.lightbox-stage img{max-width:100%; max-height:82vh; border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.6); display:block}
.lightbox-ph{position:relative; width:min(1000px,90vw); aspect-ratio:16/9; border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg,#191b20,#0d0e11 72%); display:flex; align-items:center; justify-content:center; color:var(--text-26)}
.lightbox-loader{position:relative; width:min(1000px,90vw); aspect-ratio:16/9; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:linear-gradient(160deg,#191b20,#0d0e11 72%); box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox-loader::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:32px 32px}
.lightbox-loader.is-empty{background:linear-gradient(160deg,#141519,#0d0e11 72%)}
.lightbox-ph::before{content:""; position:absolute; inset:0; border-radius:inherit; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:32px 32px}
.lightbox-ph svg{position:relative; width:54px; height:54px; opacity:.5}
.lightbox-chip{position:absolute; left:18px; top:18px; font-size:0.875rem; font-weight:500; color:var(--text-56); background:rgba(10,10,11,.72); border:1px solid var(--line-soft); border-radius:999px; padding:7px 14px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lightbox-close{position:absolute; top:18px; right:22px; width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:rgba(0,0,0,.4); color:var(--text-56); font-size:1.5rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:color .2s ease, border-color .2s ease, background .2s ease}
.lightbox-close:hover{color:var(--text); border-color:var(--text-38); background:rgba(0,0,0,.6)}
/* comparison list under each wallet */
.adv-list{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line-soft); list-style:none; display:flex; flex-direction:column; gap:12px}
.adv-item{display:flex; gap:11px; align-items:flex-start}
.adv-ico{flex:none; width:19px; height:19px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:1px}
.adv-ico-yes{background:rgba(244,244,245,.92); color:#0A0A0B}
.adv-ico-no{border:1px solid var(--line); color:var(--text-38)}
.adv-item-text{display:flex; flex-direction:column}
.adv-item-text b{font-size:0.875rem; font-weight:500; color:var(--text)}
.adv-wallet:not(.adv-wallet-our) .adv-item-text b{color:var(--text-56)}
.adv-item-text span{font-size:0.875rem; color:var(--text-38); margin-top:3px; line-height:1.5}
/* unified prompt (above the images) — quiet quote, no label */
/* prompt quote — sub-text: dimmer tone, glow tinted to its own colour */
.wallet-prompt{margin:0 0 var(--s2); font-size:0.875rem; line-height:1.6; font-weight:400; color:var(--text-56)}
/* integrated prompt swap button (svg icon, top-right) */
.wallet-swap{flex:none; margin-left:auto; width:28px; height:28px; padding:0; border-radius:50%; border:1px solid var(--line-soft); background:rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; color:var(--text-38); transition:color .25s ease, border-color .25s ease, background .25s ease, transform .2s ease}
.wallet-swap:hover{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.07)}
.wallet-swap:active{transform:scale(.92)}
.wallet-swap svg{width:15px; height:15px; display:block; transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.wallet-swap[aria-checked="true"] svg{transform:rotate(180deg)}
.wallet-prompt[hidden]{display:none}
.wallet-prompt:not([hidden]){animation:promptFade .3s ease}
@keyframes promptFade{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.wallet-swap svg{transition:none} .wallet-prompt:not([hidden]){animation:none}}
.adv-foot{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--line-soft); font-size:0.875rem; color:var(--text-38); line-height:1.6; text-align:center; font-weight:400}
/* the scroll pill (shared with the topics slider) */
.adv-pill{position:absolute; right:14px; bottom:22px; width:33px; height:98px; background:#1e2025; border:1px solid rgba(255,255,255,.08); border-radius:9999px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:8px 4px; box-shadow:0 6px 20px rgba(0,0,0,.5); z-index:5}
.adv-pill-arrow{background:none; border:none; color:var(--text-38); display:flex; align-items:center; justify-content:center; width:22px; height:22px; cursor:pointer; padding:0}
.adv-pill-arrow:hover{color:var(--text)}
.adv-pill-arrow:disabled{opacity:.3; cursor:default}
.adv-pill-thumb{width:22px; height:38px; background:#f3f4f6; border-radius:9999px; box-shadow:0 2px 5px rgba(0,0,0,.35); transition:transform .45s ease, background .2s; cursor:pointer; pointer-events:auto}
.adv-pill-thumb:hover{background:#ffffff}
@media(max-width:640px){.adv-shell{padding:28px 20px} .adv-pill{display:none}}

/* ---------- section scroll-navigation pill (reuses the template's pill) ---------- */
#scrollPill{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:90; width:38px; padding:9px 5px;
  background:rgba(0,0,0,.36);
  -webkit-backdrop-filter:blur(20px) brightness(.5);
  backdrop-filter:blur(20px) brightness(.5);
  border:1px solid var(--line-soft); border-radius:9999px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.75)}
#scrollPill .sp-arrow{background:none; border:none; color:var(--text-38); width:22px; height:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; transition:color .2s}
#scrollPill .sp-arrow:hover{color:var(--text)}
#scrollPill .sp-arrow:disabled{opacity:.25; cursor:default}
#scrollPill .sp-track{display:flex; flex-direction:column; gap:7px; align-items:center; padding:3px 0}
#scrollPill .sp-dot{width:6px; height:6px; border-radius:999px; background:rgba(244,244,245,.26); border:none; padding:0; cursor:pointer; transition:height .3s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease}
#scrollPill .sp-dot:hover{background:rgba(244,244,245,.5)}
#scrollPill .sp-dot.on{height:18px; background:var(--white); box-shadow:0 0 12px rgba(255,255,255,.45)}
@media(max-width:760px){#scrollPill{display:none}}

/* ---------- studio header art (wordmark + brush line) ---------- */
.studio-head{text-align:center; margin-bottom:var(--s5)}
.studio-head .eyebrow{justify-content:center}
.studio-art, .pricing-art, .api-art{max-width:720px; margin:var(--s3) auto 0}
.studio-art svg, .pricing-art svg, .api-art svg{display:block; width:100%; height:auto; overflow:visible}
/* overflow:visible lets the soft radial glow inside the art SVGs fade out
   naturally past the viewBox instead of being clipped by the SVG viewport,
   which left a hard horizontal edge under the arc. Colours/gradients unchanged. */
.studio-art text, .pricing-art text, .api-art text{font-family:var(--font-sans); font-weight:600}
.studio-art .sh-mark, .pricing-art .sh-mark, .api-art .sh-mark{transform-origin:22px 22px; animation:shSpin 26s linear infinite}
@keyframes shSpin{to{transform:rotate(360deg)}}
.studio-art .sh-float, .pricing-art .sh-float, .api-art .sh-float{animation:shFloat 7s ease-in-out infinite}
.studio-art .sh-float:nth-of-type(2), .pricing-art .sh-float:nth-of-type(2), .api-art .sh-float:nth-of-type(2){animation-delay:-3.5s}
@keyframes shFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.studio-art .sh-cursor, .pricing-art .sh-cursor, .api-art .sh-cursor{animation:shBlink 1.3s steps(1) infinite}
@keyframes shBlink{0%,55%{opacity:1}56%,100%{opacity:.2}}
@media(prefers-reduced-motion:reduce){.studio-art .sh-float,.studio-art .sh-cursor,.pricing-art .sh-float,.pricing-art .sh-cursor,.api-art .sh-float,.api-art .sh-cursor{animation:none}}

/* ---------- section brand (between advantage and topics): engraved wordmark ---------- */
.section-brand{position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; margin:-34px 0; pointer-events:none; user-select:none; text-align:center}
.sb-glow{position:absolute; top:50%; left:50%; width:min(900px,82vw); height:300px; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center, rgba(208,208,208,.09), transparent 70%)}
.sb-word{position:relative; font-size:clamp(3.625rem,10vw,8.25rem); font-weight:600; letter-spacing:-.055em; line-height:.95;
  background:linear-gradient(100deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.26) 42%, rgba(255,255,255,.08) 62%);
  background-size:240% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sbShine 11s ease-in-out infinite}
.sb-word span{font-weight:300}
@keyframes sbShine{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.sb-curve{display:block; width:min(1180px,94vw); height:58px; margin-top:-14px}
@media(prefers-reduced-motion:reduce){.sb-word{animation:none}}

/* ---------- topic slider (browse everything via the pill) ---------- */
.topics-shell{position:relative; max-width:980px; margin:0 auto; padding:var(--s4); background:rgba(255,255,255,.02); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
/* topics showcase — big animated stage + hover/focus topic list (no slider) */
.topics-showcase{display:grid; grid-template-columns:1.02fr .98fr; gap:var(--s4); align-items:center}
@media(max-width:880px){.topics-showcase{grid-template-columns:1fr; gap:var(--s3)}}

.topics-stage{position:relative; aspect-ratio:320/200; border:1px solid var(--line-soft); border-radius:var(--radius); background:rgba(0,0,0,.35); overflow:hidden}
.topics-stage::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:22px 22px}
.stage-defs{position:absolute; width:0; height:0; overflow:hidden}
.stage-grain{position:absolute; inset:0; width:100%; height:100%; opacity:.05; pointer-events:none}
.stage-pane{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .45s ease; pointer-events:none}
.stage-pane.is-on{opacity:1; transform:none}
.stage-pane svg{width:88%; height:auto; max-height:88%}
.a-draw{stroke-dasharray:120; stroke-dashoffset:0}
.stage-pane.is-on .a-draw{animation:stageDraw .9s ease}
@keyframes stageDraw{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
.a-pop{transform-box:fill-box; transform-origin:center}
.stage-pane.is-on .a-pop{animation:stagePop .55s cubic-bezier(.2,.9,.3,1.3) .18s both}
@keyframes stagePop{from{opacity:0; transform:scale(.5)}to{opacity:1; transform:none}}
.a-lift{transform-box:fill-box}
.stage-pane.is-on .a-lift{animation:stageLift .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes stageLift{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

.topics-side{display:flex; flex-direction:column; gap:var(--s3)}
.topics-list{display:flex; flex-direction:column; gap:6px}
.topic-row{display:flex; align-items:flex-start; gap:14px; text-align:left; width:100%;
  padding:15px 14px; border:1px solid transparent; border-radius:var(--radius-sm);
  transition:background .25s ease, border-color .25s ease}
.topic-row:hover{background:rgba(255,255,255,.03)}
.topic-row.is-on{background:rgba(255,255,255,.05); border-color:var(--line)}
.row-ico{flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  color:var(--text-38);
  transition:color .25s ease}
.topic-row.is-on .row-ico{color:var(--text)}
.row-ico svg{width:22px; height:22px; display:block}
.row-body{display:block}
.row-kicker{display:block; font-size:0.875rem; font-weight:500; color:var(--text-38)}
.row-title{display:block; font-size:1rem; font-weight:560; letter-spacing:-.012em; line-height:1.3; margin-top:2px; color:var(--text)}
.row-desc{display:block; font-size:0.875rem; color:var(--text-38); line-height:1.55; margin-top:0; max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s ease, opacity .3s ease, margin-top .3s ease}
.topic-row.is-on .row-desc{max-height:150px; opacity:1; margin-top:6px}

.topics-ctas{display:flex}

/* ---------- FAQ (panel hugging the “Everything, in one place” box) ---------- */
#topics{padding-bottom:var(--s2)}                 /* the FAQ panel follows closely */
#topics .wrap{padding-bottom:0}                  /* …and the landing wrap doesn't add a gap */
#faq .wrap{padding-top:0}
.faq-section{padding:0 0 var(--s7)}
.faq-shell{position:relative; max-width:820px; margin:0 auto; padding:var(--s3); background:rgba(255,255,255,.02);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden}
.faq-head{max-width:620px; margin:0 auto var(--s3); text-align:center}
.faq-title{font-size:clamp(1.1875rem,2.2vw,1.4375rem); font-weight:520; letter-spacing:-.02em; color:var(--text); margin:0 0 6px}
.faq-sub{color:var(--text-56); font-size:0.875rem; margin:0; text-wrap:pretty}
.faq-acc{display:flex; flex-direction:column}
.faq-item{border-top:1px solid var(--line-soft)}
.faq-item:first-child{border-top:none}
.faq-item summary{display:flex; align-items:baseline; gap:12px; padding:13px 12px; margin:0 -12px; border-radius:9px;
  cursor:pointer; list-style:none; color:var(--text); font-size:1rem; font-weight:520; letter-spacing:-.01em;
  transition:background .2s, color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary:hover{background:rgba(255,255,255,.03)}
.faq-item[open] summary{background:rgba(255,255,255,.04)}
.faq-item.is-closing summary{background:rgba(255,255,255,0)}
/* chevron — a single rule chain, never filled */
.faq-ico{position:relative; width:14px; height:14px; flex:none; margin-left:auto}
.faq-ico::after{display:none}
.faq-ico::before{content:""; position:absolute; left:3px; top:2px; width:8px; height:8px; background:none;
  border-right:2px solid var(--text-38); border-bottom:2px solid var(--text-38);
  transform:rotate(45deg); transform-origin:center; transition:transform .18s ease, border-color .15s}
.faq-item summary:hover .faq-ico::before{border-color:var(--text)}
.faq-item[open] .faq-ico::before{border-color:var(--text); transform:rotate(-135deg)}
.faq-item.is-closing .faq-ico::before{border-color:var(--text-38); transform:rotate(45deg)}
.faq-body{overflow:hidden}
.faq-body-in{padding:16px 12px 16px}
.faq-a{color:var(--text-56); font-size:0.9375rem; line-height:1.55; margin:0}
.faq-a b{color:var(--text-56); font-weight:520}
.faq-a a{color:var(--text); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .18s}
.faq-a a:hover{border-bottom-color:var(--text)}
.topic-cta{display:none}
.topic-cta.is-on{display:inline-flex}

@media(prefers-reduced-motion:reduce){
  .stage-pane, .topic-row, .row-ico, .row-desc{transition:none}
  .stage-pane.is-on .a-draw, .stage-pane.is-on .a-pop, .stage-pane.is-on .a-lift{animation:none}
}

/* ---------- footer ---------- */
footer{margin-top:var(--s6)}
/* footer as a frosted box — same blur as the landing panels but a much darker
   mood (deeper dim + dark tint) so it reads as the quiet, heavy base of the page */
footer .wrap{
  border:1px solid var(--line); border-radius:var(--radius);
  background:rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(20px) brightness(.45);
  backdrop-filter:blur(20px) brightness(.45);
  padding:var(--s5) var(--s4) var(--s4);
}
.foot-grid{display:grid; grid-template-columns:1.4fr auto auto auto; gap:var(--s4); padding-right:120px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{font-size:0.875rem; color:var(--text-38); max-width:38ch; font-weight:400; margin:var(--s2) 0 0}
.foot-col h5{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-56); margin:0 0 var(--s2)}
.foot-col a{display:block; font-size:0.875rem; color:var(--text-38); text-decoration:none; margin-bottom:11px; transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-col a.is-soon{display:flex; align-items:center; gap:8px; color:var(--text-26); cursor:default; pointer-events:none}
.foot-col .soon{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-26); border:1px solid var(--line-soft); border-radius:999px; padding:2px 7px; white-space:nowrap}
.foot-refs{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-26); line-height:1.8; border-top:1px solid var(--line-soft); margin-top:var(--s5); padding-top:var(--s3)}
.foot-refs b{color:var(--text-56)}
.copyright{font-size:0.875rem; color:var(--text-26); margin-top:var(--s3); font-weight:400}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}

/* toast */
.toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(80px); z-index:120;
  background:var(--white); color:#0A0A0B; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.03em;
  padding:13px 22px; border-radius:999px; box-shadow:0 18px 44px -10px rgba(0,0,0,.6);
  opacity:0; transition:transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s; pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0); opacity:1}