/* ==========================================================================
   Sugoi Audio — lese-inspired theme (AirCheck pages)
   Extracted from the CEO-approved products/aircheck-lese-demo.html.
   Single source of truth for tokens + components. Edit here, not per-page.
   ========================================================================== */
:root {
  --peri:      #7e86ad;
  --peri-lo:   #6d7599;
  --page:      #eceef6;
  --page-2:    #f6f7fb;
  --dark:      #182125;
  --dark-2:    #202b30;
  --dark-line: #2f3a40;
  --ink:       #1b242a;
  --ink-2:     #58616c;
  --lav-text:  #bbc1e9;
  --line:      #dde0ee;
  --blue:      #2997ff;   /* AirCheck brand blue */

  --spectrum: linear-gradient(135deg,#4aeadc 0%,#9778d1 20%,#cf2aba 40%,#ee2c82 60%,#fb6962 80%,#fef84c 100%);
  --g-sky:    linear-gradient(135deg,#a9d6ff 0%,#6aa8f2 60%,#4158d0 100%);
  --g-purple: linear-gradient(135deg,#ffceec 0%,#9896f0 100%);
  --g-mint:   linear-gradient(135deg,#caf880 0%,#71ce7e 100%);
  --g-teal:   linear-gradient(135deg,#fff5cb 0%,#b6e3d4 50%,#33a7b5 100%);
  --g-coral:  linear-gradient(135deg,#ffd0b0 0%,#ff907e 100%);

  --maxw: 1120px;
  --display: "MuseoModerno", "Noto Sans TC", system-ui, sans-serif;
  --body:    "Comfortaa", "Noto Sans TC", system-ui, sans-serif;
  --body-read: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", sans-serif;
}
:where(body.lese *) { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; margin:0; }
body.lese {
  margin:0;
  background: var(--page); color: var(--ink);
  font-family: var(--body); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; overflow-x:hidden;
}
body.lese a { color:inherit; text-decoration:none; }
body.lese::selection { background:#ee2c82; color:#fff; }
body.lese .wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
body.lese h1, body.lese h2, body.lese h3, body.lese .display { font-family:var(--display); font-weight:700; letter-spacing:-0.01em; line-height:1.1; }
body.lese .grad-text { background:var(--spectrum); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
body.lese .eyebrow { display:inline-block; font-family:var(--display); font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--peri-lo); background:rgba(126,134,173,.14); border-radius:999px; padding:7px 17px; }
body.lese .hero-copy .eyebrow { color:#fff; background:rgba(255,255,255,.14); }

/* demo banner */
body.lese .demobar { background:var(--dark); color:var(--lav-text); font-size:12.5px; text-align:center; padding:8px 16px; }
body.lese .demobar b { color:#fff; }

/* NAV */
body.lese header.nav { position:sticky; top:0; z-index:50; background:#8b93b7; border-bottom:1px solid rgba(255,255,255,.22); }
body.lese .nav-inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
body.lese .brand { display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:18px; color:#fff; }
body.lese .brand img { height:34px; width:auto; }
body.lese .nav-links { display:flex; align-items:center; gap:24px; font-size:14px; font-weight:500; color:rgba(255,255,255,.82); }
body.lese .nav-links a:hover { color:#fff; }
body.lese .nav-cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:14px; padding:10px 20px; border-radius:999px; background:#fff; color:var(--ink); transition:transform .16s ease; }
body.lese .nav-cta:hover { transform:translateY(-1px); }
/* mobile hamburger nav — hidden on desktop; shown inside the 900px media query. Built at runtime by src/js/mobile-nav.js */
body.lese .burger { display:none; }

/* HERO */
body.lese .hero { background:var(--peri); position:relative; padding-bottom:clamp(30px,5vw,64px); }
body.lese .hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(20px,4vw,48px); padding-top:clamp(28px,4vw,58px); }
body.lese .hero-copy { color:#fff; max-width:640px; }
body.lese .hero-copy .eyebrow { color:rgba(255,255,255,.82); }
body.lese .hero h1 { font-size:clamp(65px,11.9vw,130px); font-weight:800; color:#fff; line-height:.92; margin-top:12px; }
body.lese .hero .sub { font-family:var(--display); font-weight:700; font-size:clamp(21px,2.7vw,31px); margin-top:8px; color:#fff; }
body.lese .hero .sub .grad-text { display:inline; }
body.lese .hero .lede { color:rgba(255,255,255,.9); max-width:38ch; margin-top:18px; font-size:15.5px; }
body.lese .price-rail { display:flex; align-items:center; gap:14px; margin-top:28px; flex-wrap:wrap; }
body.lese .price { font-family:var(--display); font-size:28px; font-weight:700; color:#fff; }
body.lese .price .old { font-size:16px; color:rgba(255,255,255,.6); text-decoration:line-through; margin-right:6px; font-weight:400; }
body.lese .pill-eb { font-family:var(--display); font-size:12px; font-weight:600; background:var(--g-mint); color:#153; padding:4px 11px; border-radius:999px; }
body.lese .btn { display:inline-flex; align-items:center; gap:9px; padding:14px 26px; border-radius:999px; font-family:var(--display); font-weight:600; font-size:16px; cursor:pointer; border:none; transition:transform .16s ease, box-shadow .2s ease; }
body.lese .btn:active { transform:translateY(1px); }
body.lese .btn-primary { background:var(--dark); color:#fff; box-shadow:0 14px 30px -14px rgba(24,33,37,.8); }
body.lese .btn-primary:hover { transform:translateY(-2px); }
body.lese .btn-light { background:#fff; color:var(--ink); box-shadow:0 14px 30px -16px rgba(24,33,37,.5); }
body.lese .btn-light:hover { transform:translateY(-2px); }
body.lese .badges { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
body.lese .badge { display:inline-flex; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.85); font-weight:500; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:5px 13px; }
body.lese .badge .dot { width:7px; height:7px; border-radius:50%; background:#6fffac; }

/* hero media frame */
/* video source is portrait 448x848; junk strip (white bar + gray) starts
   ~y=740. Gentle crop: ~10px off each side/top, bottom cut just below the
   card at y≈740 via the 448/766 box. Measured, not eyeballed. */
body.lese .hero-media { border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.28); box-shadow:0 40px 80px -40px rgba(24,33,37,.9); background:#f4f4f6; aspect-ratio:448/766; max-width:530px; justify-self:center; width:100%; }
body.lese .hero-media video, body.lese .hero-media img { display:block; width:105%; height:auto; margin-left:-2.5%; margin-top:-2.5%; }

/* SECTIONS */
body.lese section.block { padding:clamp(56px,8vw,96px) 0; }
body.lese .section-head { max-width:640px; }
body.lese .section-head h2 { font-size:clamp(30px,5vw,50px); margin-top:10px; }
body.lese .section-head p { margin-top:14px; color:var(--ink-2); font-size:15.5px; }
body.lese .center { text-align:center; margin-left:auto; margin-right:auto; }

/* highlights pastel cards */
body.lese .highlights { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.lese .hcard { border-radius:24px; padding:28px; min-height:220px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; color:var(--ink); box-shadow:0 22px 46px -30px rgba(24,33,37,.4); }
body.lese .hcard.a { background:var(--g-sky); } .hcard.b { background:var(--g-purple); } .hcard.c { background:var(--g-teal); }
body.lese .hcard .ic { position:absolute; top:24px; left:26px; color:rgba(24,33,37,.82); }
body.lese .hcard h3 { font-size:21px; }
body.lese .hcard p { margin-top:7px; font-size:13.5px; color:rgba(24,33,37,.72); }

/* old-way cost cards */
body.lese .costs { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
body.lese .cost { background:var(--page-2); border:1px solid var(--line); border-radius:24px; padding:32px; }
body.lese .cost h3 { font-size:22px; }
body.lese .cost p { color:var(--ink-2); margin-top:8px; }
body.lese .cost .warn { margin-top:18px; background:linear-gradient(135deg,#ffe2dc,#ffd0b0); color:#8a2a12; border-radius:14px; padding:14px 16px; font-size:13.5px; }

/* feature row (alternating) */
body.lese .frow { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,52px); align-items:center; }
body.lese .frow + .frow { margin-top:36px; }
body.lese .frow.rev .txt { order:2; }
body.lese .frow .txt h3 { font-size:clamp(24px,3.4vw,34px); }
body.lese .frow .txt p { color:var(--ink-2); margin-top:12px; }
body.lese .frow .txt ul { list-style:none; margin-top:16px; }
body.lese .frow .txt li { display:flex; gap:10px; padding:7px 0; font-size:14px; }
body.lese .frow .txt li svg { color:var(--blue); flex-shrink:0; margin-top:4px; }
/* naked media: no frame box — just the image itself, rounded + soft shadow.
   width-driven sizing so portrait shots stay large and legible */
body.lese .frow .media { display:flex; align-items:center; justify-content:center; }
body.lese .frow .media video, body.lese .frow .media img { display:block; width:100%; max-width:430px; height:auto; border-radius:18px; box-shadow:0 24px 50px -32px rgba(24,33,37,.45); }
/* 3-col system requirements */
body.lese .sysreq { margin-top:44px; display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:20px; align-items:start; }
body.lese .reqcard { background:var(--page-2); border:1px solid var(--line); border-radius:22px; padding:28px; }
body.lese .reqcard h3 { font-size:19px; margin-bottom:14px; }
body.lese .reqcard ul { list-style:none; }
body.lese .reqcard li { padding:8px 0; border-top:1px solid var(--line); font-size:14px; color:var(--ink-2); }
body.lese .reqcard li:first-child { border-top:none; }
body.lese .rq-label { font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--peri-lo); margin:16px 0 6px; }
body.lese .rq-label:first-of-type { margin-top:4px; }
body.lese .rq-p { font-size:14px; color:var(--ink-2); }
body.lese .rq-small { font-size:12.5px; line-height:1.8; }
body.lese .rq-note { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--peri-lo); }

/* competitor comparison */
body.lese .cmp-modes { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
body.lese .mode { background:rgba(41,151,255,.07); border:1px solid rgba(41,151,255,.25); border-radius:22px; padding:26px; }
body.lese .mode .head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
body.lese .mode .mic { color:var(--ink); display:grid; place-items:center; flex-shrink:0; }
body.lese .mode .mic svg { width:26px; height:26px; }
body.lese .mode h4 { font-family:var(--display); font-weight:700; font-size:17px; }
body.lese .mode .sub { font-size:13px; color:var(--ink-2); }
body.lese .mode .kv { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(41,151,255,.15); font-size:14px; }
body.lese .mode .kv .k { color:var(--ink-2); }
body.lese .mode .kv .v { font-family:var(--display); font-weight:600; color:var(--blue); }
body.lese .mode .kv .v.ok { color:#1a9a55; }
body.lese .cmp-scroll { margin-top:24px; background:var(--page-2); border:1px solid var(--line); border-radius:22px; overflow-x:auto; }
body.lese .cmp { width:100%; min-width:800px; border-collapse:collapse; font-size:14px; }
body.lese .cmp th { text-align:left; padding:16px 20px; font-family:var(--display); font-weight:700; font-size:13.5px; border-bottom:1px solid var(--line); background:#fff; }
body.lese .cmp td { padding:16px 20px; border-top:1px solid var(--line); color:var(--ink-2); vertical-align:top; }
body.lese .cmp td .s { display:block; font-size:12px; color:var(--peri-lo); margin-top:2px; }
body.lese .cmp tr.hl { background:rgba(41,151,255,.08); }
body.lese .cmp tr.hl td { color:var(--ink); }
body.lese .cmp tr.hl td:first-child { box-shadow:inset 4px 0 0 var(--blue); font-family:var(--display); font-weight:700; }
body.lese .cmp .p-big { font-family:var(--display); font-weight:700; font-size:18px; color:var(--blue); }
body.lese .cmp .ok { color:#1a9a55; font-family:var(--display); font-weight:600; }
body.lese .cmp .warn { color:#c47c10; font-family:var(--display); font-weight:600; }
body.lese .cmp .ctr { text-align:center; }
body.lese .disclaimer { margin-top:22px; font-size:11.5px; color:var(--peri-lo); line-height:1.7; max-width:860px; margin-left:auto; margin-right:auto; text-align:center; }

/* support */
body.lese .support-card { text-align:center; }
body.lese .support-card p { color:var(--ink-2); margin-top:14px; font-size:16px; }
body.lese .support-card a.mail { display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-family:var(--display); font-weight:700; font-size:19px; color:var(--blue); transition:transform .16s ease; }
body.lese .support-card a.mail:hover { transform:translateX(3px); }

/* need-help guide card — light, matches page style */
body.lese .helpcard { margin-top:44px; background:var(--page-2); border:1px solid var(--line); border-radius:26px; padding:clamp(36px,5vw,52px); text-align:center; color:var(--ink); }
body.lese .helpcard h3 { font-size:clamp(22px,3vw,30px); }
body.lese .helpcard p { color:var(--ink-2); margin-top:8px; font-size:14.5px; }
body.lese .helpcard .row { display:flex; justify-content:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
body.lese .helpcard .hbtn { display:inline-flex; align-items:center; gap:7px; padding:11px 22px; border-radius:999px; font-family:var(--display); font-weight:600; font-size:14px; border:1px solid var(--line); color:var(--ink); background:#fff; transition:transform .16s ease, border-color .16s ease; }
body.lese .helpcard .hbtn:hover { transform:translateY(-1px); border-color:var(--peri); }
body.lese .helpcard .hbtn.hl { background:var(--blue); border-color:var(--blue); color:#fff; }

/* streaming mini feature cards */
body.lese .mini-grid { margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
body.lese .mini { background:var(--page-2); border:1px solid var(--line); border-radius:18px; padding:22px 18px; text-align:center; }
body.lese .mini .mic { color:var(--ink); display:grid; place-items:center; margin:0 auto 12px; }
body.lese .mini .mic svg { width:28px; height:28px; }
body.lese .mini h4 { font-family:var(--display); font-weight:600; font-size:14.5px; }
body.lese .mini p { font-size:12.5px; color:var(--ink-2); margin-top:4px; }

/* crop box for shots with ragged edges (e.g. ui-mobile.png: half-cut
   Re-scan button at bottom y>805, 15px left margin). Measured values. */
body.lese .crop-box { width:100%; max-width:430px; border-radius:18px; overflow:hidden; box-shadow:0 24px 50px -32px rgba(24,33,37,.45); }
body.lese .frow .media .crop-box img { width:106.3%; max-width:none; margin-left:-3.6%; border-radius:0; box-shadow:none; }
body.lese .crop-mobile { aspect-ratio:415/788; }
body.lese .tag-new { font-family:var(--display); font-size:11px; font-weight:700; background:var(--spectrum); color:#182125; padding:3px 10px; border-radius:999px; margin-left:10px; vertical-align:middle; }

/* specs */
body.lese .specs { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.lese .spec { background:var(--page-2); border:1px solid var(--line); border-radius:22px; padding:28px; }
body.lese .spec .ic { color:var(--ink); margin-bottom:12px; }
body.lese .spec .ic svg { width:26px; height:26px; }
body.lese .spec .k { font-family:var(--display); font-weight:600; font-size:14px; color:var(--peri-lo); }
body.lese .spec .v { margin-top:6px; font-size:14px; color:var(--ink-2); }

/* faq */
body.lese .faq { margin-top:44px; border-radius:24px; overflow:hidden; border:1px solid var(--line); background:var(--page-2); }
body.lese details { border-top:1px solid var(--line); }
body.lese details:first-child { border-top:none; }
body.lese summary { list-style:none; cursor:pointer; padding:22px 26px; font-family:var(--display); font-weight:600; font-size:16px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
body.lese summary::-webkit-details-marker { display:none; }
body.lese summary .plus { color:var(--blue); flex-shrink:0; transition:transform .2s ease; }
body.lese details[open] summary .plus { transform:rotate(45deg); }
body.lese details .a { padding:0 26px 22px; color:var(--ink-2); font-size:14px; max-width:70ch; }

/* CTA */
body.lese .cta { margin-top:44px; position:relative; overflow:hidden; border-radius:30px; background:var(--dark); color:#fff; padding:clamp(44px,7vw,80px); text-align:center; isolation:isolate; }
body.lese .cta::before { content:""; position:absolute; z-index:-1; inset:-40%; background:var(--spectrum); filter:blur(120px); opacity:.34; }
body.lese .cta h2 { font-size:clamp(32px,6vw,58px); }
body.lese .cta p { color:var(--lav-text); margin:14px auto 0; max-width:46ch; font-size:15px; }
body.lese .cta .price-rail { justify-content:center; margin-top:28px; }
body.lese .cta .btn-primary { background:var(--spectrum); color:#182125; }

/* footer */
body.lese footer { padding:56px 0 40px; }
body.lese .foot-grid { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:22px; }
body.lese .foot-brand .brand { color:var(--ink); margin-bottom:12px; }
body.lese .foot-brand p { color:var(--ink-2); font-size:13.5px; max-width:32ch; }
body.lese .foot-social { display:flex; flex-direction:column; gap:10px; margin-top:16px; font-size:13.5px; }
body.lese .foot-social a { display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); }
body.lese .foot-social a:hover { color:var(--ink); }
body.lese .foot-social svg { width:20px; height:20px; flex:0 0 auto; }
body.lese .foot-col h4 { font-family:var(--display); font-weight:700; font-size:15px; margin-bottom:12px; }
body.lese .foot-col a { display:block; color:var(--ink-2); font-size:13.5px; padding:5px 0; }
body.lese .foot-col a:hover { color:var(--ink); }
body.lese .foot-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:44px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-2); font-size:12.5px; flex-wrap:wrap; gap:12px; }

/* footer newsletter — sits as the right-hand block, in line with the link columns */
body.lese .foot-top { display:flex; align-items:flex-start; gap:40px; }
body.lese .foot-top .foot-grid { flex:1 1 auto; }
body.lese .foot-news { flex:0 0 300px; padding:20px 22px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.6); box-shadow:0 18px 40px -30px rgba(24,33,37,.35); }
body.lese .foot-news h4 { font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); margin-bottom:8px; }
body.lese .foot-news p { color:var(--ink-2); font-size:13px; margin-bottom:12px; }
body.lese .foot-news form { display:flex; flex-direction:column; gap:8px; }
body.lese .foot-news input[type=email] { width:100%; padding:11px 15px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); font-size:14px; }
body.lese .foot-news input[type=email]:focus { outline:none; border-color:var(--peri); }
body.lese .foot-news .fn-hp { position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
body.lese .foot-news button { width:100%; padding:11px 20px; border:0; border-radius:999px; background:var(--ink); color:#fff; font-family:var(--display); font-weight:600; font-size:14px; cursor:pointer; transition:transform .16s ease, opacity .16s ease; }
body.lese .foot-news button:hover { transform:translateY(-1px); }
body.lese .foot-news button:disabled { opacity:.55; cursor:default; transform:none; }
body.lese .foot-news .news-status { font-size:12.5px; margin:2px 0 0; min-height:1.1em; color:var(--ink-2); }
body.lese .foot-news .news-status.ok { color:#1a613f; }
body.lese .foot-news .news-status.err { color:#b3402f; }
@media (max-width:900px) { body.lese .foot-top { flex-direction:column; gap:32px; } body.lese .foot-news { flex-basis:auto; max-width:360px; } }

/* data-dense zones use a plain readable sans — Comfortaa is for short
   marketing copy only; tables / lists / long answers strain in it */
.cmp, .cmp td, .cmp td .s,
.reqcard ul, .reqcard li, .rq-p, .rq-small, .rq-note,
.faq .a, .disclaimer,
.mode .kv .k, .mode .sub,
body.lese .frow .txt li, body.lese .spec .v {
  font-family: var(--body-read);
  font-weight: 500;
  color: #3f4a55;
}
body.lese .cmp td { font-size:15px; }
body.lese .cmp td .s { font-size:13px; color:#6b7684; font-weight:400; }
body.lese .rq-small { font-size:13.5px; }
body.lese .rq-note, body.lese .disclaimer { color:#6b7684; font-weight:400; }
body.lese .faq .a { font-size:15px; line-height:1.75; }

@media (max-width:900px) {
  body.lese .nav-links { display:none; }
  /* keep only the burger + language toggle on mobile — drop the Buy CTA (too distracting) */
  body.lese .nav-cta { display:none; }
  body.lese .burger { display:inline-flex; align-items:center; justify-content:center; background:none; border:0; padding:8px; margin:0 -4px 0 4px; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  body.lese #mobile-menu { display:block; background:#8b93b7; border-top:1px solid rgba(255,255,255,.22); }
  body.lese #mobile-menu[hidden] { display:none; }
  body.lese #mobile-menu a { display:block; padding:14px 22px; font-size:15px; font-weight:500; color:rgba(255,255,255,.9); border-bottom:1px solid rgba(255,255,255,.12); }
  body.lese #mobile-menu a:last-child { border-bottom:0; }
  body.lese #mobile-menu a:hover { color:#fff; background:rgba(255,255,255,.08); }
  body.lese .hero-grid, body.lese .costs, body.lese .frow, body.lese .highlights, body.lese .specs, body.lese .sysreq, body.lese .cmp-modes { grid-template-columns:1fr; }
  body.lese .mini-grid { grid-template-columns:1fr 1fr; }
  body.lese .frow.rev .txt { order:0; }
  body.lese .foot-grid { grid-template-columns:1fr 1fr; }
  body.lese .foot-brand { grid-column:1 / -1; }
}
@media (max-width:560px) { .foot-grid { grid-template-columns:1fr; } }

/* hero "already purchased" pill */
body.lese .hero-dl { display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-size:12.5px; font-weight:500; color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:7px 15px; transition:color .16s ease, border-color .16s ease; }
body.lese .hero-dl:hover { color:#fff; border-color:rgba(255,255,255,.65); }

/* nav language toggle pill */
body.lese .lang-toggle { display:inline-flex; align-items:center; font-family:var(--display); font-size:13px; font-weight:600; color:#fff; background:rgba(255,255,255,.16); border-radius:999px; padding:10px 18px; transition:background .16s ease, transform .16s ease; }
body.lese .lang-toggle:hover { background:rgba(255,255,255,.26); transform:translateY(-1px); }

/* ==========================================================================
   Added for hybrid-eq-mcp-bridge-website-mockup (2026-08-22)
   New reusable vocabulary: video-stage w/ timestamp label overlay,
   numbered-step badge, lightweight icon-list, persona cards, two-track
   pricing split, teaser strip, generic placeholder box.
   Kept here (not page-scoped) per design.md Decision 2/4 — reusable if
   Sugoi AI later surfaces on other plugin pages.
   ========================================================================== */

/* video-stage: placeholder-first video slot + timestamp label overlay pills.
   Real <video> can be dropped in later (object-fit:cover keeps the frame);
   until then the .video-stage-ph placeholder fills the frame. */
body.lese .video-stage { position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(24,33,37,.4); aspect-ratio:16/10; background:linear-gradient(135deg,#dfe3f0 0%,#eceef6 100%); }
body.lese .video-stage.tall { aspect-ratio:448/766; max-width:460px; margin:0 auto; }
body.lese .video-stage video { display:block; width:100%; height:100%; object-fit:cover; }
body.lese .video-stage-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; padding:24px; color:var(--peri-lo); }
body.lese .video-stage-ph svg { opacity:.45; }
body.lese .video-stage-ph .ph-label { font-family:var(--body-read); font-size:12.5px; line-height:1.6; max-width:34ch; font-weight:600; }
body.lese .video-stage .label-pill { position:absolute; transform:translate(-50%,-50%) scale(.92); font-family:var(--display); font-size:12px; font-weight:700; background:rgba(24,33,37,.88); color:#fff; padding:6px 13px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; white-space:nowrap; z-index:2; }
body.lese .video-stage .label-pill.is-active { opacity:1; transform:translate(-50%,-50%) scale(1); }
body.lese .video-stage .vs-clock { position:absolute; bottom:12px; right:14px; font-family:var(--display); font-size:11px; font-weight:700; color:rgba(24,33,37,.42); background:rgba(255,255,255,.7); border-radius:999px; padding:3px 10px; z-index:2; }

/* small static clip placeholder (no timeline) — feature-step videos */
body.lese .clip-ph { position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; background:var(--page-2); border:1px solid var(--line); box-shadow:0 24px 50px -32px rgba(24,33,37,.45); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:22px; color:var(--peri-lo); }
body.lese .clip-ph svg { opacity:.4; }
body.lese .clip-ph .ph-label { font-family:var(--body-read); font-size:12px; line-height:1.6; max-width:30ch; font-weight:600; }

/* generic labeled placeholder box (screenshots, avatars-at-scale, etc.) */
body.lese .ph-box { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px; border-radius:20px; border:1.5px dashed var(--line); background:var(--page-2); color:var(--peri-lo); font-family:var(--body-read); font-size:12.5px; font-weight:600; line-height:1.6; min-height:200px; }

/* numbered-step badge — Kiyome pattern, adapted for .frow */
body.lese .frow .step-head { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
body.lese .step-num { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--dark); color:#fff; font-family:var(--display); font-weight:700; font-size:15px; flex-shrink:0; }
body.lese .frow .step-head h3 { margin:0; }

/* lightweight icon-list (spec-parity treatment — no video, no numbered steps) */
body.lese .icon-list { margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
body.lese .icon-list .il-item { display:flex; align-items:center; gap:10px; background:var(--page-2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-family:var(--body-read); font-size:13.5px; font-weight:600; color:#3f4a55; }
body.lese .icon-list .il-item svg { flex-shrink:0; color:var(--blue); }
@media (max-width:900px) { body.lese .icon-list { grid-template-columns:1fr 1fr; } }

/* hero teaser strip (name-only anchors, no explanation/pricing) */
body.lese .teaser-strip { margin-top:24px; display:flex; gap:10px; flex-wrap:wrap; }
body.lese .teaser-strip a { display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-size:13px; font-weight:600; color:#fff; border:1px solid rgba(255,255,255,.32); border-radius:999px; padding:8px 16px; transition:background .16s ease, transform .16s ease; }
body.lese .teaser-strip a:hover { background:rgba(255,255,255,.16); transform:translateY(-1px); }

/* persona gallery cards */
body.lese .persona-grid { margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
body.lese .p-card { background:var(--page-2); border:1px solid var(--line); border-radius:24px; padding:28px 24px; text-align:center; }
/* dashed ring flags these as placeholder avatars (initials only, no portrait
   art yet) — see placeholder-media audit in tasks.md §4.3 */
body.lese .p-avatar { width:74px; height:74px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:21px; color:#fff; border:2px dashed rgba(255,255,255,.6); box-sizing:border-box; }
body.lese .p-avatar.a { background:var(--g-sky); } .p-avatar.b { background:var(--g-purple); } .p-avatar.c { background:var(--g-mint); }
body.lese .p-avatar.d { background:var(--g-teal); } .p-avatar.e { background:var(--g-coral); } .p-avatar.f { background:linear-gradient(135deg,#FF6B35,#F7931E); }
body.lese .p-card h4 { font-size:18px; }
body.lese .p-card .p-spec { margin-top:5px; font-family:var(--body-read); font-size:12.5px; color:var(--peri-lo); font-weight:600; }
body.lese .p-card .p-tag { margin-top:12px; font-family:var(--body-read); font-size:13px; color:#3f4a55; font-style:italic; }
@media (max-width:900px) { body.lese .persona-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { body.lese .persona-grid { grid-template-columns:1fr; } }

/* small persona preview chips (Hybrid EQ AI-transition teaser — 2-3 only) */
body.lese .persona-preview { display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
body.lese .persona-preview .pp-chip { display:flex; align-items:center; gap:10px; background:var(--page-2); border:1px solid var(--line); border-radius:999px; padding:7px 16px 7px 7px; }
body.lese .persona-preview .pp-avatar { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:12.5px; color:#fff; flex-shrink:0; border:1.5px dashed rgba(255,255,255,.6); box-sizing:border-box; }
/* pp-avatar variants: .p-avatar.<x> selectors don't match .pp-avatar.<x>, so
   these chips had white initials on a transparent (light) ground = invisible. */
body.lese .persona-preview .pp-avatar.a { background:var(--g-sky); }
body.lese .persona-preview .pp-avatar.b { background:var(--g-purple); }
body.lese .persona-preview .pp-avatar.c { background:var(--g-mint); }
body.lese .persona-preview .pp-avatar.d { background:var(--g-teal); }
body.lese .persona-preview .pp-avatar.e { background:var(--g-coral); }
body.lese .persona-preview .pp-avatar.f { background:linear-gradient(135deg,#FF6B35,#F7931E); }
body.lese .persona-preview .pp-name { font-family:var(--body-read); font-size:12.5px; font-weight:700; color:var(--ink); }

/* two-track pricing split: pay-as-you-go column vs. highlighted subscription column */
body.lese .pricing-split { margin-top:44px; display:grid; grid-template-columns:1fr auto 1fr; gap:28px; align-items:stretch; }
body.lese .pricing-col { display:flex; flex-direction:column; }
body.lese .pricing-col .pc-label { font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--peri-lo); text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; }
body.lese .pack-list { display:flex; flex-direction:column; gap:14px; flex:1; }
body.lese .pack-card { background:var(--page-2); border:1px solid var(--line); border-radius:18px; padding:20px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
body.lese .pack-card .pk-credits { font-family:var(--body-read); font-size:13px; color:#3f4a55; font-weight:600; }
body.lese .pack-card .pk-price { font-family:var(--display); font-weight:700; font-size:20px; color:var(--ink); }
body.lese .sub-card { flex:1; position:relative; background:var(--dark); color:#fff; border-radius:22px; padding:34px 28px; display:flex; flex-direction:column; justify-content:center; box-shadow:0 30px 60px -30px rgba(24,33,37,.55); isolation:isolate; overflow:hidden; }
body.lese .sub-card::before { content:""; position:absolute; z-index:-1; inset:-60%; background:var(--spectrum); filter:blur(100px); opacity:.28; }
body.lese .sub-card .sub-badge { display:inline-block; align-self:flex-start; background:var(--spectrum); color:#182125; font-family:var(--display); font-weight:700; font-size:11.5px; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
body.lese .sub-card .sub-price { font-family:var(--display); font-weight:700; font-size:32px; }
body.lese .sub-card .sub-desc { margin-top:6px; font-family:var(--body-read); font-size:13.5px; color:var(--lav-text); }
body.lese .sub-card .sub-fine { margin-top:16px; padding-top:14px; border-top:1px solid var(--dark-line); font-family:var(--body-read); font-size:12px; color:var(--lav-text); line-height:1.7; }
body.lese .pricing-or { display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:13px; color:var(--peri-lo); }
@media (max-width:900px) { body.lese .pricing-split { grid-template-columns:1fr; } body.lese .pricing-or { padding:4px 0; } }

/* smart-EQ contrast: orange "accent" variant of .cost (right-hand card) */
body.lese .cost.accent { background:linear-gradient(140deg,#fff2e8,#ffe1c8); border-color:rgba(255,107,53,.34); }
body.lese .cost.accent .warn { background:linear-gradient(135deg,#FF6B35,#F7931E); color:#fff; }

/* currently-supported-plugin pair cards (mcp-bridge Section 6) */
body.lese .plugin-pair { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
body.lese .plugin-pair .pp-card { background:var(--page-2); border:1px solid var(--line); border-radius:22px; padding:28px; }
body.lese .plugin-pair .pp-card h3 { font-size:19px; }
body.lese .plugin-pair .pp-card p { margin-top:8px; font-family:var(--body-read); font-size:13.5px; color:#3f4a55; }
body.lese .plugin-pair .pp-card a.pp-link { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--blue); }
@media (max-width:700px) { body.lese .plugin-pair { grid-template-columns:1fr; } }

/* quote-style positioning-statement paragraph (Section 2 "Why") */
body.lese .quote-block { margin-top:24px; max-width:70ch; }
body.lese .quote-block p { font-family:var(--body-read); font-size:16.5px; line-height:1.85; color:#3f4a55; }
body.lese .quote-block p + p { margin-top:18px; }
body.lese .quote-block .pull { font-family:var(--display); font-weight:700; font-size:clamp(20px,2.6vw,27px); color:var(--ink); border-left:3px solid var(--blue); padding-left:18px; margin:26px 0; line-height:1.35; }

/* ---------- shared nav Products dropdown (used on product/doc pages) ---------- */
.nav-dd { position: relative; }
.nav-dd > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd .dd-panel { position: absolute; top: 100%; left: -14px; padding-top: 12px; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; z-index: 60; }
.nav-dd:hover .dd-panel { opacity: 1; visibility: visible; }
.nav-dd .dd-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; min-width: 190px; padding: 8px; box-shadow: 0 22px 46px -26px rgba(24,33,37,.45); }
header.nav .nav-dd .dd-card a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--ink-2) !important; font-size: 14px; font-weight: 500; transition: background .14s ease, color .14s ease; }
.nav-dd .dd-card a:hover { background: var(--page); color: var(--ink); }

/* ---------- Sugoi AI (mcp-bridge) sakura variant ----------
   Mirrors the chat panel's DEFAULT theme, lifted verbatim from the shipped
   chat bundle's token map (WebUIChat/dist/chat-bundle.js, theme key `sakura`
   — resolved by `He(r){return pn[r??"sakura"]}`, so this is what a user sees
   on first open; `wasurenagusa` is the opt-in blue alternative behind the
   🌸 toggle, persisted to localStorage["sugoi-chat-theme"]).
     panelBg     #fef4f4   headerBg    #f8e8e8   sessionBarBg #f5e6e6
     inputAreaBg #f8eded   bubble/card #ffffff   border       #e8d3d1
     ink         #4a3636   dim         #a39090   faint        #c4a8a8
     action      #8b6f9e (purple)      icon grad #b28fce -> #c9a1cc -> #e8a1a0
   Page layering reuses the panel's own stack: hero = sessionBar, even bands =
   inputArea, odd bands = panel, cards = bubble white. */
body.sugoiai-sakura {
  --page:   #FDF6F6;
  --page-2: #FFFFFF;
  --line:   #E8D3D1;
  --ink:    #4A3636;
  --ink-2:  #7A6060;   /* mid-tone: #a39090 is too faint for body copy on a light ground */
  --dark:   #4A3636;
  --dark-2: #5C4545;
  --peri:   #F5E6E6;   /* hero ground = chat session bar */
  --peri-lo:#8B6F9E;   /* eyebrow ink = chat action purple */
  --blue:   #8B6F9E;   /* accent purple replaces AirCheck blue */
  --sakura-grad: linear-gradient(135deg,#B28FCE 0%,#C9A1CC 52%,#E8A1A0 100%);
}

/* hero flips from white-on-periwinkle to ink-on-rose */
body.sugoiai-sakura .hero-copy,
body.sugoiai-sakura .hero h1,
body.sugoiai-sakura .hero .sub { color:var(--ink); }
body.sugoiai-sakura .hero .lede { color:var(--ink-2); max-width:46ch; }
body.sugoiai-sakura .hero-copy .eyebrow { color:var(--peri-lo); background:rgba(178,143,206,.14); }
body.sugoiai-sakura .badge { color:var(--ink-2); border-color:#DEC6C4; }
body.sugoiai-sakura .badge .dot { background:#7AB648; }   /* chat connectedColor */

/* the chat panel's own icon gradient carries the display type */
body.sugoiai-sakura .grad-text {
  background:var(--sakura-grad);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* nav mirrors the chat panel header */
body.sugoiai-sakura header.nav { background:#F8E8E8; border-bottom:1px solid var(--line); }
body.sugoiai-sakura .brand { color:var(--ink); }
body.sugoiai-sakura .nav-links { color:var(--ink-2); }
body.sugoiai-sakura .nav-links a:hover { color:var(--ink); }
body.sugoiai-sakura .nav-cta { background:linear-gradient(135deg,#FF6B35 0%,#F7931E 100%); color:#FFF6EF; }
@media (max-width:900px) {
  body.sugoiai-sakura #mobile-menu { background:#F8E8E8; border-top:1px solid var(--line); }
  body.sugoiai-sakura #mobile-menu a { color:var(--ink-2); border-bottom:1px solid var(--line); }
  body.sugoiai-sakura #mobile-menu a:hover { color:var(--ink); background:rgba(178,143,206,.08); }
}

/* alternating bands, same mechanism as the Hybrid EQ page */
body.sugoiai-sakura > section.block { border-top:1px solid rgba(74,54,54,.07); }
body.sugoiai-sakura > section.block:nth-of-type(even) { background:#F8EDED; }  /* chat inputAreaBg */

/* persona avatars: AirCheck's sky/mint/teal gradients read as a different brand
   next to the rose ground — retint across the chat panel's own purple->pink arc */
body.sugoiai-sakura .p-avatar.a { background:linear-gradient(135deg,#B28FCE,#8B6F9E); }
body.sugoiai-sakura .p-avatar.b { background:linear-gradient(135deg,#C9A1CC,#B28FCE); }
body.sugoiai-sakura .p-avatar.c { background:linear-gradient(135deg,#E8A1A0,#C9A1CC); }
body.sugoiai-sakura .p-avatar.d { background:linear-gradient(135deg,#D8A6B8,#A87E9E); }
body.sugoiai-sakura .p-avatar.e { background:linear-gradient(135deg,#F0B49A,#E8A1A0); }
body.sugoiai-sakura .p-avatar.f { background:linear-gradient(135deg,#FF6B35,#F7931E); }

/* media placeholders + spectrum glow off the cool palette */
body.sugoiai-sakura .video-stage { background:linear-gradient(135deg,#F0DCDA 0%,#FDF6F6 100%); box-shadow:0 40px 80px -44px rgba(74,54,54,.32); }
body.sugoiai-sakura .video-stage .label-pill { background:rgba(74,54,54,.88); }
body.sugoiai-sakura .clip-ph { box-shadow:0 24px 50px -34px rgba(74,54,54,.34); }
body.sugoiai-sakura .cta::before { background:var(--sakura-grad); opacity:.34; }
body.sugoiai-sakura .sub-card::before { background:var(--sakura-grad); opacity:.30; }

/* Sugoi AI unpublished product preview. Preserve the sakura palette and type. */
body.sugoiai-sakura .ai-preview-note { padding:10px 24px; text-align:center; font-size:12px; color:var(--ink-2); background:var(--page-2); border-bottom:1px solid var(--line); }
body.sugoiai-sakura .ai-preview-note a { margin-left:8px; text-decoration:underline; text-underline-offset:3px; }
body.sugoiai-sakura .brand { flex-shrink:0; }
body.sugoiai-sakura .nav-links { gap:18px; }
body.sugoiai-sakura section[id] { scroll-margin-top:90px; }
body.sugoiai-sakura .hero-grid > * { min-width:0; }
body.sugoiai-sakura .hero h1 { font-size:clamp(48px,7.3vw,90px); }
body.sugoiai-sakura .hero .sub { font-size:clamp(24px,2.7vw,33px); line-height:1.3; margin-top:24px; }
body.sugoiai-sakura .hero .grad-text { background-image:linear-gradient(135deg,#76558F,#9C5067); }
body.sugoiai-sakura .hero .badges { flex-wrap:wrap; }
body.sugoiai-sakura .ai-hero-media { margin:0; }
body.sugoiai-sakura .video-stage-ph { background:linear-gradient(180deg,#F5E6E6,#FDF6F6); }
body.sugoiai-sakura .ai-media-caption { margin-top:14px; text-align:center; color:var(--ink-2); font-size:12px; }
body.sugoiai-sakura .ai-centered-head { text-align:center; max-width:720px; margin:0 auto; }
body.sugoiai-sakura .ai-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:36px; }
body.sugoiai-sakura .ai-detail-card { background:var(--page-2); border:1px solid var(--line); border-radius:22px; padding:clamp(24px,3vw,34px); }
body.sugoiai-sakura .ai-kicker { display:block; margin-bottom:14px; color:#76558F; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
body.sugoiai-sakura .ai-detail-card h3 { font-size:25px; line-height:1.25; max-width:24ch; }
body.sugoiai-sakura .ai-detail-card p { margin-top:16px; font-family:var(--body-read); color:var(--ink-2); font-size:14px; line-height:1.8; }
body.sugoiai-sakura .ai-detail-card .ai-card-note { border-top:1px solid var(--line); padding-top:14px; font-size:12.5px; }
body.sugoiai-sakura .ai-persona-note { max-width:84ch; margin:22px auto 0; color:var(--ink-2); text-align:center; font-family:var(--body-read); font-size:12.5px; line-height:1.8; }
body.sugoiai-sakura .persona-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:28px; }
body.sugoiai-sakura .ai-more-personas { margin-top:24px; padding:32px 24px; text-align:center; border:1px dashed var(--line); border-radius:18px; background:var(--page-2); }
body.sugoiai-sakura .ai-more-personas h3 { font-family:var(--display); font-size:clamp(30px,4vw,44px); line-height:1.2; color:var(--ink); }
body.sugoiai-sakura .ai-more-personas p { margin-top:14px; font-size:17px; line-height:1.6; }
body.sugoiai-sakura .ai-more-personas .ai-more-detail { max-width:60ch; margin:10px auto 0; font-size:13px; color:var(--ink-2); }
body.sugoiai-sakura .p-card { display:flex; flex-direction:column; align-items:center; padding:24px 20px; }
body.sugoiai-sakura .p-card[id],
body.sugoiai-sakura .ai-revenue-note[id] { scroll-margin-top:90px; }
body.sugoiai-sakura .p-avatar.ai-portrait { display:block; width:96px; height:96px; margin-bottom:12px; object-fit:cover; border:1px solid var(--line); background:var(--page-2); }
body.sugoiai-sakura .p-card h3 { font-size:19px; line-height:1.4; }
body.sugoiai-sakura .ai-persona-meta { margin-top:6px; font-family:var(--body-read); color:var(--ink-2); font-size:12px; line-height:1.6; }
body.sugoiai-sakura .p-card .p-spec { margin-top:10px; color:#76558F; }
body.sugoiai-sakura .ai-specialties { width:100%; margin-top:18px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; }
body.sugoiai-sakura .ai-specialties ul { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:10px 0 0; }
body.sugoiai-sakura .ai-specialties li { max-width:100%; padding:6px 10px; border:1px solid #d7c3df; border-radius:999px; background:#f3eaf6; color:#644278; font-family:var(--body-read); font-size:12px; font-weight:600; line-height:1.5; }
body.sugoiai-sakura .ai-persona-story { margin-top:16px; text-align:left; font-family:var(--body-read); color:var(--ink-2); font-size:13.5px; line-height:1.7; }
body.sugoiai-sakura .ai-bio-label { display:block; margin-bottom:6px; font-family:var(--display); color:var(--ink); font-weight:700; font-size:12px; }
body.sugoiai-sakura .ai-persona-focus { margin:12px 0 16px; text-align:left; font-family:var(--body-read); color:var(--ink-2); font-size:13.5px; line-height:1.7; }
body.sugoiai-sakura .ai-prompt { padding-top:16px; border-top:1px solid var(--line); text-align:left; font-family:var(--body-read); font-size:13px; line-height:1.8; color:var(--ink); }
body.sugoiai-sakura .p-card .ai-prompt { margin-top:auto; padding-top:12px; width:100%; }
body.sugoiai-sakura .ai-prompt span { display:block; margin-bottom:6px; font-family:var(--display); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#76558F; }
body.sugoiai-sakura .ai-note { margin-top:22px; color:var(--ink-2); font-size:12.5px; line-height:1.8; }
body.sugoiai-sakura .ai-revenue-note { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:center; gap:28px; margin-top:34px; padding:30px; border:1px solid var(--line); border-radius:22px; background:#F5E6E6; }
body.sugoiai-sakura .ai-revenue-note h3 { font-size:24px; line-height:1.3; }
body.sugoiai-sakura .ai-revenue-note p { font-family:var(--body-read); font-size:14px; line-height:1.8; color:var(--ink-2); }
body.sugoiai-sakura .ai-context-proof { padding:clamp(44px,5vw,64px) 0; }
body.sugoiai-sakura .ai-context-proof .ai-context-proof-inner { min-width:0; }
body.sugoiai-sakura .ai-context-proof .ai-centered-head { max-width:680px; }
body.sugoiai-sakura .ai-context-proof .ai-context-equation { display:flex; align-items:stretch; gap:20px; margin-top:30px; min-width:0; }
body.sugoiai-sakura .ai-context-proof .ai-context-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; flex:1 1 auto; min-width:0; list-style:none; }
body.sugoiai-sakura .ai-context-proof .ai-context-inputs li,
body.sugoiai-sakura .ai-context-proof .ai-context-result { position:relative; min-width:0; padding:20px 18px; border:1px solid #9C7780; border-radius:16px; background:#FFFFFF; color:var(--ink); }
body.sugoiai-sakura .ai-context-proof .ai-context-inputs li { display:flex; flex-direction:column; justify-content:flex-start; gap:8px; }
body.sugoiai-sakura .ai-context-proof .ai-context-inputs strong,
body.sugoiai-sakura .ai-context-proof .ai-context-result strong { display:block; font-family:var(--display); font-size:15px; line-height:1.3; color:var(--ink); }
body.sugoiai-sakura .ai-context-proof .ai-context-inputs li > span:not(.ai-context-plus),
body.sugoiai-sakura .ai-context-proof .ai-context-result > span { display:block; font-family:var(--body-read); font-size:13px; line-height:1.65; color:#5C4545; overflow-wrap:anywhere; }
body.sugoiai-sakura .ai-context-proof .ai-context-plus { position:absolute; z-index:1; top:50%; left:-7px; display:grid; place-items:center; width:24px; height:24px; transform:translate(-50%,-50%); border-radius:50%; background:#FDF6F6; color:#76558F; font-family:var(--display); font-size:20px; line-height:1; }
body.sugoiai-sakura .ai-context-proof .ai-context-arrow { flex:0 0 auto; align-self:center; display:grid; place-items:center; width:32px; color:#76558F; font-family:var(--display); font-size:28px; line-height:1; }
body.sugoiai-sakura .ai-context-proof .ai-context-result { flex:0 1 230px; align-self:center; }
body.sugoiai-sakura .ai-context-proof .ai-context-result strong { color:#4A3636; }
body.sugoiai-sakura .frow .clip-ph { width:100%; max-width:430px; }
body.sugoiai-sakura .ai-media-index { font-family:var(--display); font-size:44px; font-weight:600; color:#9C778C; }
body.sugoiai-sakura .frow .ai-step-note { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); color:var(--ink-2); font-size:13px; }
body.sugoiai-sakura .ai-credit-strip { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; margin-top:32px; padding:26px; border:1px solid var(--line); border-radius:20px; background:var(--page-2); }
body.sugoiai-sakura .ai-credit-strip strong { display:block; font-family:var(--display); font-size:18px; color:var(--ink); }
body.sugoiai-sakura .ai-credit-strip span { display:block; margin-top:8px; font-family:var(--body-read); font-size:12.5px; line-height:1.8; color:var(--ink-2); }
body.sugoiai-sakura .pack-card .pk-credits,
body.sugoiai-sakura .plugin-pair .pp-card p { color:var(--ink-2); }
body.sugoiai-sakura .plugin-pair .pp-card .ai-prompt { margin-top:20px; color:var(--ink); }
body.sugoiai-sakura .sub-card .sub-badge { background:var(--sakura-grad); color:var(--ink); }
body.sugoiai-sakura .ai-price-period { font-size:14px; font-weight:600; color:var(--lav-text); }
body.sugoiai-sakura .faq .a a { text-decoration:underline; text-underline-offset:3px; }
body.sugoiai-sakura .nav-dd:focus-within .dd-panel { opacity:1; visibility:visible; }
body.sugoiai-sakura :is(a, button, summary, input, [tabindex]):focus-visible { outline:3px solid #76558F; outline-offset:4px; }
@media (max-width:1100px) and (min-width:901px) {
  body.sugoiai-sakura .nav-links { gap:11px; font-size:12px; }
  body.sugoiai-sakura .nav-cta { font-size:12px; padding:10px 14px; }
}
@media (max-width:900px) {
  body.sugoiai-sakura .persona-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.sugoiai-sakura .burger { color:var(--ink); min-width:44px; min-height:44px; }
  body.sugoiai-sakura .ai-context-proof .ai-context-equation { flex-direction:column; gap:18px; }
  body.sugoiai-sakura .ai-context-proof .ai-context-inputs { grid-template-columns:1fr; gap:26px; }
  body.sugoiai-sakura .ai-context-proof .ai-context-inputs li + li .ai-context-plus { top:-14px; left:50%; transform:translate(-50%,-50%); }
  body.sugoiai-sakura .ai-context-proof .ai-context-arrow { width:auto; height:28px; transform:rotate(90deg); }
  body.sugoiai-sakura .ai-context-proof .ai-context-result { width:100%; flex-basis:auto; align-self:stretch; }
}
@media (max-width:560px) {
  body.sugoiai-sakura .persona-grid,
  body.sugoiai-sakura .ai-revenue-note,
  body.sugoiai-sakura .ai-detail-grid,
  body.sugoiai-sakura .ai-credit-strip { grid-template-columns:1fr; }
  body.sugoiai-sakura .hero .btn { max-width:100%; font-size:14px; padding:14px 18px; }
  body.sugoiai-sakura .ai-preview-note a { display:inline-block; }
  body.sugoiai-sakura .cta .price-rail { flex-wrap:wrap; }
}

/* ---------- Hybrid EQ warm variant ----------
   Mirrors the ACTUAL plugin UI palette, verified against SugoiProQ3
   Source/UI/index.html (the single WebUI source CMake packages into
   BinaryData, WEBUI_SOURCE_DIR at CMakeLists.txt:68):
     body            #E9E2D8   (warm sand shell)
     .topbar         #F0EBE3   / border-bottom #D9CFBF
     panels          #F4F0E9 · #FBF7EF
     ink             #3A322B   / secondary #6B5D4F / muted #857A6B
     lines           #D9CFBF · #C9BFB2
     ANALOG active   linear-gradient(135deg,#FF6B35,#F7931E) on #E9E2D8 ink
   The plugin stacks three warm levels (shell -> panel -> lightest); the page
   reuses that same layering: hero = shell, page = panel, cards = lightest.
   Per-product theming incl. nav follows existing site convention
   (cf. body.kiyome-warm / body.curva-steel nav overrides).
   Structure/components untouched — colour only. */
body.hybrideq-warm {
  --page:   #F4F0E9;   /* plugin panel level */
  --page-2: #FBF7EF;   /* plugin lightest level */
  --line:   #D9CFBF;
  --ink:    #3A322B;
  --ink-2:  #6B5D4F;
  --dark:   #3A322B;   /* warm brown replaces the cool #182125 */
  --dark-2: #4A4038;
  --peri:   #E9E2D8;   /* hero ground = plugin shell colour */
  --peri-lo:#8A6A3C;   /* eyebrow ink: warm, reads on a sand ground */
  --blue:   #3A6EA5;   /* plugin's MODERN voicing blue */
  --sat-gradient: linear-gradient(135deg,#FF6B35 0%,#F7931E 100%);
}

/* hero: light warm ground, so every white-on-periwinkle rule flips to warm ink */
body.hybrideq-warm .hero-copy,
body.hybrideq-warm .hero h1,
body.hybrideq-warm .hero .sub { color:var(--ink); }
body.hybrideq-warm .hero .lede { color:var(--ink-2); max-width:46ch; }  /* 3 beats: modern EQ / analog / talk to it — 38ch stacked them too tall */
body.hybrideq-warm .hero-copy .eyebrow { color:var(--peri-lo); background:rgba(255,107,53,.12); }
body.hybrideq-warm .hero-media { border-color:var(--line); box-shadow:0 40px 80px -44px rgba(58,50,43,.42); background:var(--page-2); }
body.hybrideq-warm .hero-dl { color:var(--ink-2); border-color:var(--line); }
body.hybrideq-warm .hero-dl:hover { color:var(--ink); border-color:#B9A98F; }

/* hero chips/badges were white-on-periwinkle — flip to warm ink on the sand ground */
body.hybrideq-warm .teaser-strip a { color:var(--ink); border-color:#C9BFB2; background:rgba(255,255,255,.45); }
body.hybrideq-warm .teaser-strip a:hover { background:#FFF; border-color:#FF6B35; }
body.hybrideq-warm .badge { color:var(--ink-2); border-color:#C9BFB2; }
body.hybrideq-warm .badge .dot { background:#6BA57E; }  /* plugin --meter-fill, not the neon mint */

/* persona chips: retint the cool AirCheck gradients to the plugin's warm accents */
body.hybrideq-warm .persona-preview .pp-avatar.a { background:linear-gradient(135deg,#C08457,#8A6A3C); }
body.hybrideq-warm .persona-preview .pp-avatar.b { background:linear-gradient(135deg,#4B7F83,#3A6EA5); }
body.hybrideq-warm .persona-preview .pp-avatar.persona-portrait { display:block; object-fit:cover; border:1px solid var(--line); background:var(--page-2); }

/* brand orange gradient replaces AirCheck's rainbow spectrum */
body.hybrideq-warm .grad-text {
  background:var(--sat-gradient);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* media placeholders carried a cool blue-grey gradient / dark cool pills */
body.hybrideq-warm .video-stage { background:linear-gradient(135deg,#E5DCCC 0%,#F4F0E9 100%); box-shadow:0 40px 80px -44px rgba(58,50,43,.38); }
body.hybrideq-warm .video-stage .label-pill { background:rgba(58,50,43,.88); }
body.hybrideq-warm .video-stage .vs-clock { color:rgba(58,50,43,.5); background:rgba(255,255,255,.78); }
body.hybrideq-warm .clip-ph { box-shadow:0 24px 50px -34px rgba(58,50,43,.4); }

/* alternating section banding — same mechanism Curva uses
   (body.curva-steel > section:nth-of-type(even) { background:#e3ecf5 }).
   Curva's step is ~5 RGB units off its ground; #F0EBE3 sits the same
   distance under #F4F0E9 and is the plugin's own topbar colour, so the
   banding stays subtle instead of reading as stripes. Hero keeps the
   deeper #E9E2D8 shell tone so it still anchors the top of the page. */
body.hybrideq-warm > section.block { border-top:1px solid rgba(58,50,43,.07); }
body.hybrideq-warm > section.block:nth-of-type(even) { background:#F0EBE3; }

/* comparison table: cool blue highlight -> warm orange; 5 columns need more room */
body.hybrideq-warm .cmp { min-width:960px; }
body.hybrideq-warm .cmp th .s { display:block; font-size:11.5px; font-weight:500; color:var(--ink-2); margin-top:2px; }
body.hybrideq-warm .cmp tr.hl { background:rgba(255,107,53,.09); }
body.hybrideq-warm .cmp tr.hl td:first-child { box-shadow:inset 4px 0 0 #FF6B35; }
body.hybrideq-warm .cmp .p-big { color:var(--ink); }
body.hybrideq-warm .cmp tr.hl .p-big { color:#C2521F; }

/* rainbow-spectrum glow behind the CTA card -> warm orange bloom */
body.hybrideq-warm .cta::before { background:radial-gradient(circle at 50% 50%,#FF6B35 0%,#F7931E 45%,transparent 72%); opacity:.30; }

/* nav mirrors the plugin's topbar rather than the periwinkle site chrome */
body.hybrideq-warm header.nav { background:#F0EBE3; border-bottom:1px solid var(--line); }
body.hybrideq-warm .brand { color:var(--ink); }
body.hybrideq-warm .nav-links { color:var(--ink-2); }
body.hybrideq-warm .nav-links a:hover { color:var(--ink); }
body.hybrideq-warm .nav-cta { background:var(--sat-gradient); color:#FFF6EF; }

/* Hybrid EQ product-preview additions. Keep type and color tokens shared. */
body.hybrideq-warm .hq-preview-note { padding:10px 24px; text-align:center; font-size:12px; color:var(--ink-2); background:var(--page-2); border-bottom:1px solid var(--line); }
body.hybrideq-warm .hq-preview-note a { margin-left:8px; text-decoration:underline; text-underline-offset:3px; }
body.hybrideq-warm .nav-links { gap:18px; }
body.hybrideq-warm .brand { flex-shrink:0; }
body.hybrideq-warm .hero-grid > * { min-width:0; }
body.hybrideq-warm section[id] { scroll-margin-top:90px; }
body.hybrideq-warm .hero h1 { font-size:clamp(60px,8.5vw,104px); }
body.hybrideq-warm .hero .sub { font-size:clamp(22px,2.35vw,29px); line-height:1.35; margin-top:20px; }
body.hybrideq-warm .hq-media-caption { text-align:center; margin-top:14px; font-size:12px; color:var(--ink-2); }
body.hybrideq-warm .frow .clip-ph { width:100%; max-width:430px; }
body.hybrideq-warm .hq-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:32px; }
body.hybrideq-warm .hq-detail-card { padding:clamp(22px,3vw,34px); border:1px solid var(--line); border-radius:20px; background:var(--page-2); }
body.hybrideq-warm .hq-kicker { display:block; color:#9B461E; font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:14px; }
body.hybrideq-warm .hq-detail-card h3 { font-size:25px; line-height:1.2; max-width:22ch; }
body.hybrideq-warm .hq-detail-card p { margin-top:16px; color:var(--ink-2); }
body.hybrideq-warm .hq-detail-card .hq-example { padding-top:16px; border-top:1px solid var(--line); font-size:13px; }
body.hybrideq-warm .hq-note { color:var(--ink-2); font-size:13px; line-height:1.8; margin-top:22px; max-width:90ch; }
body.hybrideq-warm .hq-style-list { margin-top:22px; }
body.hybrideq-warm .hq-style-list > div { display:grid; grid-template-columns:85px minmax(0,1fr); gap:14px; padding:9px 0; border-top:1px solid var(--line); font-size:13px; }
body.hybrideq-warm .hq-style-list dt { font-family:var(--display); font-weight:700; }
body.hybrideq-warm .hq-style-list dd { color:var(--ink-2); }
body.hybrideq-warm .hq-workflow { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:40px; }
body.hybrideq-warm .hq-workflow li { border-top:2px solid var(--line); padding-top:20px; }
body.hybrideq-warm .hq-step-index { display:block; font-family:var(--display); font-weight:700; font-size:32px; color:#A84F24; margin-bottom:16px; }
body.hybrideq-warm .hq-workflow h3 { font-size:20px; line-height:1.25; }
body.hybrideq-warm .hq-workflow p { margin-top:12px; color:var(--ink-2); font-size:13px; }
body.hybrideq-warm .hq-table-caption { text-align:left; padding:14px 18px; color:var(--ink-2); font-size:12px; background:var(--page-2); }
body.hybrideq-warm .disclaimer a { text-decoration:underline; text-underline-offset:3px; }
body.hybrideq-warm :is(a, button, summary, input, [tabindex]):focus-visible { outline:3px solid #3A6EA5; outline-offset:4px; }
@media (max-width:1100px) and (min-width:901px) {
  body.hybrideq-warm .nav-links { gap:11px; font-size:12px; }
  body.hybrideq-warm .nav-cta { font-size:12px; padding:10px 14px; }
}
@media (max-width:900px) {
  body.hybrideq-warm .hq-workflow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
  body.hybrideq-warm .burger { color:var(--ink); min-width:44px; min-height:44px; }
}
@media (max-width:560px) {
  body.hybrideq-warm .hq-detail-grid,
  body.hybrideq-warm .hq-workflow,
  body.hybrideq-warm .icon-list { grid-template-columns:1fr; }
  body.hybrideq-warm .hero .btn { max-width:100%; font-size:15px; padding:14px 20px; }
  body.hybrideq-warm .hq-preview-note a { display:inline-block; }
}
@media (max-width:900px) {
  body.hybrideq-warm #mobile-menu { background:#F0EBE3; border-top:1px solid var(--line); }
  body.hybrideq-warm #mobile-menu a { color:var(--ink-2); border-bottom:1px solid var(--line); }
  body.hybrideq-warm #mobile-menu a:hover { color:var(--ink); background:rgba(255,107,53,.07); }
}
/* Actual product screenshots: preserve the captured pixels and aspect ratio. */
body:is(.hybrideq-warm, .sugoiai-sakura) .product-gui { width:100%; min-width:0; margin:0; }
body:is(.hybrideq-warm, .sugoiai-sakura) .product-gui-link { display:block; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--page-2); box-shadow:0 12px 32px rgba(38,30,26,.08); }
body:is(.hybrideq-warm, .sugoiai-sakura) .product-gui img { display:block; width:100%; height:auto; }
body:is(.hybrideq-warm, .sugoiai-sakura) .frow .product-gui img { max-width:none; border-radius:0; box-shadow:none; }
body:is(.hybrideq-warm, .sugoiai-sakura) .product-gui figcaption { margin-top:12px; color:var(--ink-2); font-size:12px; line-height:1.65; text-align:center; }
body:is(.hybrideq-warm, .sugoiai-sakura) .product-gui-wide { max-width:1000px; margin:36px auto 0; }
body.hybrideq-warm .frow .product-gui { max-width:490px; }
body.hybrideq-warm .frow [data-gui-capture="HQ-04"] { max-width:360px; }
body.sugoiai-sakura .product-gui.ai-hero-media { max-width:336px; justify-self:center; }
body.sugoiai-sakura .product-gui-portrait { max-width:290px; margin:0 auto; }
body:is(.hybrideq-warm, .sugoiai-sakura) .gui-pending { width:100%; max-width:430px; padding:30px 24px; border:1px dashed var(--line); border-radius:12px; color:var(--ink-2); text-align:center; font-size:12px; line-height:1.7; }