/* Jeesonic hub: shared brand theme. One stylesheet for the whole site so every
   product page, the manual and the changelog look the same. Derived from the
   EQ Pro live site (charcoal + amber). Edit here once, every page follows. */

:root{
  --bg:#0f0f11; --bg2:#151518; --panel:#1a1a1e; --panel2:#202024; --line:#2b2b30;
  --text:#ededed; --dim:#9b9b99; --faint:#6b6b69;
  --accent:#e9b949; --accent2:#f3cf72; --amber:#efc04a; --green:#35d15a;
  --violet:#a98cff; --teal:#39c6c6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img{max-width:100%}
.wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.eyebrow{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:600}
.free-tag{display:inline-block; background:rgba(53,209,90,.14); color:#7be29a; border:1px solid rgba(53,209,90,.42);
  border-radius:20px; padding:2px 11px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  margin-right:11px; vertical-align:middle}

/* nav */
nav.bar{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(10px);
  background:rgba(12,15,19,.72); border-bottom:1px solid var(--line)}
nav.bar .row{display:flex; align-items:center; justify-content:space-between; height:62px}
nav.bar .logo{height:24px; width:auto; opacity:.95; display:block}
nav.bar .links{display:flex; gap:26px; align-items:center; font-size:14.5px; color:var(--dim)}
nav.bar .links a:hover{color:var(--text)}
.btn{display:inline-block; font-weight:600; font-size:14.5px; padding:10px 20px; border-radius:9px;
  border:1px solid transparent; cursor:pointer; transition:transform .08s ease, background .15s ease, border-color .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); color:#1c1505}
.btn.primary:hover{background:var(--accent2)}
.btn.ghost{border-color:var(--line); color:var(--text); background:rgba(255,255,255,.02)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent2)}
.btn.sm{padding:8px 16px; font-size:13.5px}

/* hero */
.hero{position:relative; overflow:hidden; padding:88px 0 30px; background:linear-gradient(180deg,#141416,var(--bg))}
.hero .eyebrow{margin-bottom:16px}
.hero h1{font-size:clamp(40px,6vw,68px); line-height:1.02; margin:0 0 10px; letter-spacing:-.5px; font-weight:700}
.hero h1 .grad{color:var(--accent)}
.hero .tagline{font-size:clamp(19px,2.8vw,28px); line-height:1.15; margin:0 0 14px; font-weight:600; letter-spacing:-.2px}
.hero p.sub{font-size:clamp(16px,2vw,19px); color:var(--dim); max-width:660px; margin:0 auto 28px}
.hero .ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.hero .center{text-align:center; max-width:820px; margin:0 auto}
.hero .formats{margin-top:18px; color:var(--faint); font-size:13.5px; letter-spacing:.04em}
.shot{margin:46px auto 0; max-width:1000px; position:relative}
.shot img,.shot video{width:100%; height:auto; display:block; border-radius:14px; border:1px solid var(--line);
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03) inset}

section.block{padding:54px 0}
.sec-head{text-align:center; max-width:680px; margin:0 auto 40px}
.sec-head h2{font-size:clamp(26px,3.4vw,38px); margin:10px 0 10px; letter-spacing:-.4px}
.sec-head p{color:var(--dim); font-size:17px; margin:0}

/* hub release highlights: a stack of headed text sections, no images */
.hl-list{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:30px}
.hl h3{font-size:clamp(19px,2.3vw,24px); margin:0 0 8px; letter-spacing:-.3px}
.hl p{color:var(--dim); font-size:16.5px; line-height:1.55; margin:0}
.hl-more{max-width:720px; margin:34px auto 0; font-size:15px; color:var(--dim)}
.hl-more a{color:var(--accent)} .hl-more a:hover{color:var(--accent2)}

/* alternating deep dives */
.dive{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:46px 0; border-top:1px solid var(--line)}
.dive.rev .txt{order:2}
.dive .txt h2{font-size:clamp(24px,3vw,32px); margin:8px 0 14px; letter-spacing:-.3px}
.dive .txt p{color:var(--dim); font-size:16px; margin:0 0 14px}
.dive ul{margin:0; padding:0; list-style:none}
.dive li{position:relative; padding-left:26px; margin:9px 0; color:var(--text); font-size:15px}
.dive li::before{content:""; position:absolute; left:4px; top:8px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px rgba(233,185,73,.12)}
.dive .media img{width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--line);
  box-shadow:0 30px 80px -36px rgba(0,0,0,.85)}
.dive .media.pad{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px}
.dive .media.pad img{border:none; box-shadow:none; border-radius:8px}

/* spec band */
.spec{background:linear-gradient(180deg,var(--bg2),var(--bg)); border:1px solid var(--line); border-radius:16px; padding:34px}
.spec .cols{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 40px}
.spec .cols div{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px}
.spec .cols .k{color:var(--dim)} .spec .cols .v{color:var(--text); text-align:right; font-weight:500}

/* CTA + newsletter */
.cta{position:relative; overflow:hidden; text-align:center; border:1px solid var(--line); border-radius:20px; padding:56px 28px;
  background:linear-gradient(180deg,var(--panel),var(--bg2))}
.cta h2{font-size:clamp(26px,3.6vw,40px); margin:0 0 12px; letter-spacing:-.4px}
.cta p{color:var(--dim); font-size:17px; margin:0 auto 26px; max-width:560px}
.badges{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:22px}
.badge{border:1px solid var(--line); border-radius:999px; padding:3px 12px; color:var(--dim); font-size:12px; background:rgba(255,255,255,.02)}
.badge b{color:var(--text); font-weight:500}
.notify{margin:34px auto 0; max-width:440px; padding-top:26px; border-top:1px solid var(--line)}
.notify h3{font-size:16px; margin:0 0 4px; font-weight:600}
.notify .sub{color:var(--dim); font-size:14px; margin:0 0 14px}
.signup{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.signup input[type=email]{flex:1 1 240px; min-width:0; background:var(--bg2); border:1px solid var(--line);
  color:var(--text); border-radius:9px; padding:10px 14px; font-size:14.5px; outline:none}
.signup input[type=email]:focus{border-color:var(--accent)}
.signup .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.signup-note{color:var(--faint); font-size:12px; margin:12px 0 0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0}

/* hub landing: product cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; margin-top:8px}
.card{display:block; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel);
  transition:border-color .15s ease, transform .08s ease}
.card:hover{border-color:var(--accent); transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/9; background:var(--bg2); border-bottom:1px solid var(--line); display:block; object-fit:cover; width:100%}
.card .body{padding:18px 20px}
.card .name{font-size:19px; font-weight:600; margin:0 0 6px; letter-spacing:-.2px}
.card .blurb{color:var(--dim); font-size:14.5px; margin:0}
.card .soon{display:inline-block; margin-left:8px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--line); border-radius:999px; padding:1px 8px; vertical-align:middle}

/* prose: manual + long text */
.prose{max-width:820px; margin:0 auto; padding:8px 0 40px}
.prose h1{font-size:clamp(30px,4vw,42px); letter-spacing:-.4px; margin:18px 0 8px}
.prose h2{font-size:25px; letter-spacing:-.2px; margin:34px 0 10px; padding-top:18px; border-top:1px solid var(--line)}
.prose h3{font-size:18px; margin:22px 0 6px}
.prose p{color:var(--dim); margin:0 0 14px}
.prose ul{margin:0 0 16px; padding-left:22px}
.prose ol{margin:0 0 16px; padding-left:26px}
.prose ol li::marker{color:var(--accent); font-weight:600}   /* the numbers key the figure's callouts, so make them findable */
.prose li{color:var(--dim); margin:6px 0}          /* match paragraphs: body text is one colour, not a grey/white mix */
.prose strong{color:var(--text)}                    /* bold is the deliberate white emphasis inside the grey body */
.prose code{background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13px}
.prose a{color:var(--accent2); text-decoration:underline; text-underline-offset:2px}
.prose img{border-radius:10px; border:1px solid var(--line); margin:10px 0}

/* download page */
.dl{max-width:900px; margin:0 auto; padding:8px 0 56px}
.dl-lead{color:var(--dim); font-size:17px; margin:8px 0 0; max-width:640px}
.dl-os{margin:30px 0 0}
.dl-os > h2{font-size:22px; letter-spacing:-.2px; margin:0 0 16px; padding-top:24px; border-top:1px solid var(--line)}
.dl-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.dl-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:22px 22px 24px}
.dl-card-body{flex:1}
.dl-card-head{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.dl-card-head h3{font-size:18px; margin:0; font-weight:600}
.dl-card p{color:var(--dim); font-size:14.5px; line-height:1.6; margin:0 0 20px}
.dl-card p code{background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:12.5px; color:var(--text)}
.dl-card .btn{align-self:flex-start}
.dl-note{display:flex; gap:10px; align-items:flex-start; margin:0 0 20px; padding:11px 13px; font-size:13.5px;
  line-height:1.5; color:var(--text); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:9px; background:var(--bg2); background:color-mix(in srgb, var(--accent) 9%, var(--panel))}
.dl-note strong{color:var(--text)}
.dl-note .ic{flex:none; width:17px; height:17px; margin-top:1px; color:var(--accent)}
.dl-note .ic svg{width:17px; height:17px; display:block}
.dl-older{color:var(--dim); font-size:15px; margin:8px 0}
.dl-older .v{display:inline-block; min-width:52px; color:var(--text); font-weight:600}
.dl-older a{color:var(--accent2)}
.dl-foot{margin:36px 0 0; color:var(--dim); font-size:14px; line-height:1.9; text-align:center}
.dl-foot a{color:var(--accent2)}
@media (max-width:640px){ .dl-grid{grid-template-columns:1fr} }

/* changelog */
.page-head{padding:64px 0 26px}
.page-head h1{font-size:clamp(32px,5vw,46px); margin:10px 0 6px; letter-spacing:-.5px}
.page-head p{color:var(--dim); margin:0; max-width:600px}
.page-head .ver{color:var(--faint); font-size:13.5px; margin-top:8px; letter-spacing:.02em}
.rel{padding:26px 0; border-top:1px solid var(--line)}
.rel h2{font-size:22px; margin:0 0 14px; letter-spacing:-.2px}
.rel h2 .date{color:var(--faint); font-size:14px; font-weight:500; margin-left:8px}
.rel .cat{font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; margin:14px 0 6px}
.rel ul{margin:0 0 4px; padding-left:20px} .rel li{margin:6px 0}
.rel code{background:var(--panel); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:13px}
.rel a{color:var(--accent2); text-decoration:underline}

footer{border-top:1px solid var(--line); margin-top:70px; padding:34px 0; color:var(--faint); font-size:13.5px}
footer .row{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px}
footer .logo{height:20px; opacity:.8} footer a{color:var(--dim)} footer a:hover{color:var(--text)}

/* manual extras: figures, tables, notes inside .prose */
.prose figure{margin:18px 0; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px}
.prose figure img{border:none; margin:0; border-radius:6px}
.prose figcaption{color:var(--dim); font-size:13px; margin-top:10px; text-align:center}
.prose table{border-collapse:collapse; width:100%; margin:16px 0; font-size:14px}
.prose th,.prose td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.prose td{color:var(--dim)}                          /* table body text matches the rest of the prose */
.prose th{color:var(--faint); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.08em}
.prose .note{border-left:3px solid var(--accent); background:rgba(233,185,73,.07);
  padding:10px 16px; border-radius:0 8px 8px 0; margin:16px 0; color:var(--dim)}
.prose figure.inline{max-width:560px}
.prose figure.narrow{max-width:210px; margin-left:auto; margin-right:auto}
/* portrait crops (a meter column): cap the HEIGHT, not the width, or a 142x826 crop scaled to a
   210 px width renders over 1200 px tall. The figure itself stays a normal full-width block: sizing
   it to max-content would size it to the caption's UNWRAPPED width and blow out the grid column. */
.prose figure.tall img{max-height:380px; width:auto; display:block; margin:0 auto}
/* Max + version tags (inline badges from [[max]] / [[since:x.y.z]]), used in the
   manual prose and on the product page. No horizontal margin: the space around
   the source token spaces it evenly between neighbouring words. vertical-align +
   tight line-height centre it. */
.tag{display:inline-block; vertical-align:middle; border-radius:999px;
  font-size:11px; line-height:1.45; white-space:nowrap; position:relative; top:-0.06em}
.tag-max{padding:0 8px; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  color:var(--accent2); background:rgba(233,185,73,.13); border:1px solid rgba(233,185,73,.55)}
.tag-ver{padding:0 8px; font-weight:500; color:var(--faint);
  background:rgba(255,255,255,.02); border:1px solid var(--line)}
/* legal pages (Impressum / Privacy), rendered through the shared chrome */
.prose .box{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px 18px; margin:14px 0}
.prose .meta{color:var(--faint); font-size:13px}
.ph{color:var(--amber)}   /* an unfilled [PLACEHOLDER] in _contact, highlighted */

/* manual: sidebar table of contents + content column */
.manual-wrap{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start}
/* min-width:0 overrides a grid item's default min-width:auto, so a wide child (a long caption, a
   broad table, a code line) can never push this column past the viewport and force a sideways scroll */
.manual-wrap .prose{max-width:none; min-width:0; margin:0; padding:8px 0 50px}
nav.toc{position:sticky; top:80px; align-self:start; padding:8px 0; font-size:13.5px}
nav.toc h4{margin:0 0 10px; color:var(--faint); text-transform:uppercase; letter-spacing:.12em; font-size:11px}
nav.toc ol{margin:0; padding-left:20px}
nav.toc li{margin:4px 0}
nav.toc a{color:var(--dim)}
nav.toc a:hover{color:var(--accent2)}
@media (max-width:880px){ .manual-wrap{grid-template-columns:1fr} nav.toc{display:none} }

/* support: FAQ accordions + contact box */
.support{max-width:860px; margin:0 auto; padding:8px 0 50px}
.support .faq{margin:0 0 40px}
.support .faq h2{font-size:13px; text-transform:uppercase; letter-spacing:.12em; color:var(--faint);
  margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.support details{border:1px solid var(--line); border-radius:10px; margin:0 0 8px; background:var(--panel)}
.support details[open]{background:var(--panel2)}
.support summary{padding:14px 18px; cursor:pointer; font-weight:500; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px; user-select:none}
.support summary::-webkit-details-marker{display:none}
.support summary::after{content:"+"; color:var(--faint); font-size:18px; line-height:1; flex-shrink:0; transition:transform .15s}
.support details[open] summary::after{transform:rotate(45deg)}
.support .answer{padding:0 18px 16px; color:var(--dim); line-height:1.7}
.support .answer p{margin:8px 0} .support .answer p:first-child{margin-top:0}
.support .answer ul{margin:8px 0; padding-left:20px} .support .answer li{margin:4px 0}
.support .answer code{background:var(--panel2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; font-size:12.5px}
.support .answer a{color:var(--accent2); text-decoration:underline}
.contact-box{max-width:860px; margin:0 auto; position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  border-radius:14px; padding:30px 32px}
.contact-box::before{content:""; position:absolute; top:0; bottom:0; left:0; width:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2))}
.contact-box .contact-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.contact-box .icon{flex-shrink:0; display:flex; color:var(--accent)}
.contact-box .icon svg{width:24px; height:24px; display:block}
.contact-box h3{margin:0; font-size:18px; letter-spacing:-.2px}
.contact-box p{margin:0 0 18px; color:var(--dim); max-width:62ch}

@media (max-width:860px){
  .dive{grid-template-columns:1fr; gap:24px}
  .dive.rev .txt{order:0}
  .spec .cols{grid-template-columns:1fr}
  nav.bar .links a:not(.btn){display:none}
}

/* The brand logo in the manual header exists only for print / the shipped PDF, where
   the top nav bar (which carries the logo on screen) is hidden. On screen it is
   redundant with that nav bar, so it stays hidden until the print block turns it on. */
.page-head .head-logo{ display:none }

/* Print / PDF: the manual reads like the web page, minus the site chrome. Used both
   when a reader hits Cmd+P on the manual and when the shipped Manual.pdf is rendered
   from this page with headless Chrome (tools/manual-pdf.sh). Keep the dark look
   (print-color-adjust: exact) and never split a figure across a page. */
@media print{
  :root{ color-scheme:dark }
  *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important }
  /* A uniform margin on EVERY page (only @page can do per-page insets), and a fixed
     full-sheet dark layer underneath so that margin is the same black as the content,
     not white paper reading as a second tone. The fixed layer repeats on every printed
     page and covers the whole sheet, edge to edge, including the @page margin band. */
  @page{ margin:14mm }
  html, body{ background:var(--bg) !important }
  body::before{ content:""; position:fixed; top:0; left:0; right:0; bottom:0;
                background:var(--bg); z-index:-1 }
  nav.bar, footer, nav.toc{ display:none !important }
  /* @page provides the inset, so the wrappers add none of their own. */
  .wrap{ max-width:none !important; padding:0 !important }
  /* Logo top-right of the manual header. */
  .page-head .head-logo{ display:block; height:26px; width:auto; float:right; margin:2px 0 0 18px }
  .page-head{ padding:0 0 8mm !important }
  .manual-wrap{ display:block !important }
  .manual-wrap .prose{ max-width:none; margin:0; padding:0 }
  .prose img{ max-width:100%; height:auto; break-inside:avoid; page-break-inside:avoid }
  .prose figure, .prose p:has(> img){ break-inside:avoid; page-break-inside:avoid }
  .prose h1, .prose h2, .prose h3{ break-after:avoid; page-break-after:avoid }
  .prose h2{ border-top:none; padding-top:0 }
  .prose a{ color:var(--accent2) }
}