/* ==========================================================================
   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-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; }

/* 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); }

/* ---------- 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); }