/* "90% look": the page at 100% zoom reads like the old 90% browser zoom (sleeker, less bulky).
   One override file, loaded last. To undo: delete its <link> in index.html.
   Type, spacing and row heights scale to ~0.9 at every width. Only desktop (>=1200px) also narrows the
   column and slims the demo bezel, because wider side gaps are a desktop-only problem.
   The demo/walkthrough windows keep their inner sizes (they replicate the real extension UI). */

/* ---------- all widths: type + spacing tokens (0.9) ---------- */
:root{
  --text-sm:13px;--text-base:14.5px;--text-lg:17px;--text-xl:22px;--text-2xl:27px;--text-display:45px;
  --leading-label:15px;--leading-snug:20px;--leading-body:23px;--leading-display:52px;
  --space-section:108px;
}
/* ---------- design library (Paper p-B-0): 7 type roles, surface radii, fluid values ---------- */
:root{
  --t90-display:45px;--t90-display-lh:52px;      /* hero, Features and Privacy headings (Instrument Serif) */
  --t90-section:27px;--t90-section-lh:32px;      /* feature beat titles, Install title, footer title */
  --t90-card:17px;--t90-card-lh:20px;
  --t90-sub:14.5px;--t90-sub-lh:20px;
  --t90-body:14.5px;--t90-body-lh:23px;
  --t90-small:13px;--t90-small-lh:18px;
  --t90-micro:11px;--t90-micro-lh:14px;          /* floor: nothing smaller */
  --r90-control:8px;--r90-tile:12px;
  /* fluid 390 -> 1440: min + (max - min) * (viewport - 390) / 1050, held at both ends */
  --r90-window:clamp(12px,calc(12px + (100vw - 390px) * .0038095),16px);
  --r90-frame:clamp(20px,calc(20px + (100vw - 390px) * .0038095),24px);
  --fl-bezel:clamp(7px,calc(7px + (100vw - 390px) * .00095238),8px);   /* phone 7, tablet/desktop 8 */
  --fl-control:clamp(32px,calc(32px + (100vw - 390px) * .0038095),36px);
  --fl-section:clamp(40px,calc(40px + (100vw - 390px) * .022857),64px);   /* fluid section spacing 40 -> 64 */
  --fl-gap:48px;   /* header-to-content gap: 48 tablet/desktop, 28 phone (below) */
  --fl-frame-pad:clamp(20px,calc(20px + (100vw - 390px) * .026667),48px);
  --fl-chart:clamp(230px,calc(230px + (100vw - 390px) * .161905),400px);
}
@media (max-width:1199px){:root{--t90-display:38px;--t90-display-lh:44px;--t90-section:25px;--t90-section-lh:30px}}
@media (max-width:599px){:root{--t90-display:34px;--t90-display-lh:40px;--t90-section:23px;--t90-section-lh:28px}}
.hero-title,.features__title,.privacy__title{font-size:var(--t90-display);line-height:var(--t90-display-lh)}
.fnow__title,.install__title,.footer__title{font-size:var(--t90-section);line-height:var(--t90-section-lh)}
.btn{height:var(--fl-control)}
.features,.privacy__inner,.install__inner{padding-block:var(--fl-section)}
.features__inner{gap:var(--fl-gap)}
.install__card{border-radius:var(--r90-frame);padding:var(--fl-frame-pad)}
.demo-inner{--bz:var(--fl-bezel);--dw-r:var(--r90-window);--bz-r:calc(var(--r90-window) + var(--fl-bezel))}   /* bezel outer radius = window radius + bezel */
.demo-chart{height:var(--fl-chart)}
@media (min-width:600px){.demo-body{height:var(--fl-chart)}}   /* tablet: body must follow the chart box (was fixed 420, left a blank band under the volume bars) */
.win,.fstage{border-radius:var(--r90-window)}
.step__btn,.store__icon{border-radius:var(--r90-tile)}
.store__btn,.done__btn,.dbtn,.demo-chips .dchip,.fstage .fchip,.fstage .atk{border-radius:var(--r90-control)}
:root{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5'/%3E%3C/svg%3E")}

/* hero: padding 32, gap 16 (values in css/hero.css); CTA button look in css/tokens.css */
.hero-sub{line-height:22.4px}

/* facts strip */
.facts{padding:48px 16px;gap:24px}   /* Facts 48 / 48 */
.facts__line,.facts__title{line-height:20px}
.facts__text{line-height:15px}

/* features */
.features__pill,.privacy__pill{line-height:15px}
.features__sub{line-height:20px}
.fnav{font-size:14.5px;line-height:20px}
.fdesc{line-height:18px}

/* privacy */
.privacy__inner{gap:var(--fl-gap)}
.privacy__col h3{line-height:20px}

/* install (tablet + desktop shared look; phone has its own block below) */
@media (min-width:600px){
  .install__card{gap:36px}
  .step__num{display:flex;align-items:center;justify-content:center;height:32px;font-size:16px;line-height:20px}   /* centre = title line centre (6px pad + 10) */
  .step[data-state="active"] .step__num{height:20px}   /* active row has no top pad: centre = 10 */
  /* done tick: clean drawn check, sized to the 15px step title (replaces the heavy text glyph) */
  .step[data-state="done"] .step__num .chk{display:block;width:14px;height:14px;font-size:0;line-height:0;background:var(--st-ok);
    -webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
  /* browser mock: no grey panel behind the window, smaller icon/tick/button */
  .stage{background:transparent;padding:0}
  .store{padding:22px;gap:12px}
  .store__row{gap:14px}
  .store__icon{width:44px;height:44px}
  .store__icon svg{width:39px;height:44px}
  .store__meta b{font-size:16px;line-height:20px}
  .store__meta span{font-size:12px;line-height:16px}
  .store__btn{padding:6px 12px;font-size:12px;line-height:16px}
  /* sanity pass: tighter card, steps and browser mock (desktop/pinned) */
  .install--compact .install__card{padding:32px 48px;gap:24px}
  .install__body{grid-template-columns:minmax(0,1fr) 520px;gap:48px}   /* mock is a 16:10 screen: 520 wide, 36+40+250 tall */
  .steps{gap:2px}
  .step__btn{padding:12px;gap:12px}
  .step[data-state="active"] .step__btn{padding:11px}
  .step__main{gap:4px}
  .step[data-state="active"] .step__desc{font-size:13px;line-height:19px}
  .win__bar{height:36px}.dots{height:36px}.tab{height:28px}
  .win__url{height:40px}.url{height:28px}
  .win__view{height:250px}
  .skel{height:6px}
  .hint{padding:6px 10px;border-radius:6px;font-size:12px;line-height:16px}
  .step__ttl{font-size:15px;line-height:20px}
  .store__meta b{font-size:17px}
}
.install__eyebrow{line-height:18px}

/* footer */
.footer__inner{padding-top:94px;padding-bottom:54px}
.footer__col{gap:36px}
.footer__title{line-height:32px}
.footer__k,.row dt{line-height:18px}
.row{min-height:50px}
.footer__cta{line-height:21px}

/* ---------- desktop (>=1200px): narrower column ---------- */
/* First screen: no font size changes with window height. On short windows the hero spacing and then the chart box give way.
   --o = how many px the page is too tall for the window; --d = the part the hero spacing can absorb (max 70). */
@media (min-width:1200px){
  :root{--container-wide:1080px;--o:max(0px,calc(864px - 100vh));--o:max(0px,calc(864px - 100svh));--d:clamp(0px,var(--o),70px)}
  .hero-inner{padding-block:max(12px,calc(32px - var(--d) * .2))}
  .demo-body,.demo-chart{height:max(330px,calc(var(--fl-chart) - clamp(0px,calc(var(--o) - var(--d) * .4),70px)))}
}

/* ---------- tablet (601-900px) ---------- */
/* amber outlines in the mock: thin and softer */
.url{border-width:1px;border-color:color-mix(in srgb,var(--color-accent) 75%,transparent)}
.install[data-current="3"] .url{border-color:var(--st-line)}
.hint{border-color:color-mix(in srgb,var(--color-accent) 60%,transparent)}
.install[data-current="3"] .puz{border-width:1px}
.pinbtn{border-color:color-mix(in srgb,var(--color-accent) 70%,transparent)}

/* ---------- tablet (601-900px): stage on top, steps below; keep the tablet card layout ---------- */
@media (min-width:600px) and (max-width:1199px){
  .install__card{gap:32px}
  .install--compact .install__card{padding:24px 28px;gap:24px}
  .install__body{grid-template-columns:1fr;gap:24px}
  .stage{max-width:520px;width:100%;margin-inline:auto}
}

/* ---------- phone (<=600px) ---------- */
@media (max-width:599px){
  :root{--fl-gap:28px}
  .facts{padding:48px 16px;gap:24px}
  .stage{width:100%;padding:0;border:0;border-radius:0;background:transparent}   /* full width: it used to be sized by the message line */
  .install__body>.stage{margin-bottom:4px}
  .step__num{font-size:20px;line-height:24px}
  .step[data-state="done"] .step__num .chk{display:block;width:12px;height:12px;font-size:0;line-height:0;background:var(--st-ok);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
  .footer__inner{padding-top:64px;padding-bottom:44px}
}

/* ---------- Install step 4 mock: Scout panel, clean and minimal (all widths) ---------- */
.story4__total{padding:0;border-radius:0;background:none}
.story4__dots{gap:4px}
.story4__dots i{width:6px;height:6px;border-radius:50%}

/* step 4 end state: no "You're all set" line under the chart (owner 2026-10-28); the window keeps its full outline */
.story4__msg,.done__msg{display:none}

/* ---------- QA fixes (2026-10-29, owner yes: F1-F8) ---------- */

/* F1: very short desktop windows: handled in the desktop block above (hero spacing, then the chart box down to 330px). */

/* F5: nothing under 11px */
.demo-chips .dchip .mk,.sp-section,.fstage .tag-auto,.fstage .hbadge,.sp-badge{font-size:11px}

/* F6: balanced headings (no lone last word like "after.") */
.features__title,.privacy__title,.install__title{text-wrap:balance}

/* F3 + F8: touch targets >= 30px on tablet and phone, same look (hit area grows, drawing does not) */
@media (max-width:1199px){
  .nav__brand{min-height:32px}
  .q-periods button{display:flex;align-items:center;justify-content:center;min-width:30px;min-height:32px}
  .sp-rate button{width:30px;height:30px}
  .scout-panel .sp-links .sp-link{padding-block:8px!important;margin-block:-8px!important}
  .footer__cta,.row__links a,.row dd>a{display:inline-block;padding-block:8px;margin-block:-8px}
  .tour-trigger{display:inline-block;padding-block:7px;margin-block:-7px}
  .fdot{width:30px;height:30px;margin-inline:-6px}
  .fdot.is-active{width:30px;margin-inline:-2px}
}
@media (max-width:599px){
  .demo-tools button{min-height:32px}
  .demo-tools button[data-tool="clear"]{min-width:32px}
  .sp-handle{height:30px;margin-top:-14px;margin-bottom:-8px}
  .sp-rate button{width:32px;height:32px}
}

/* F2 + F7: smallest phones (<= 340px). Quote row fits "+0.03%"; the Install URL no longer touches the pill edge. */
@media (max-width:340px){
  .demo-quote{padding-inline:10px}
  .q-left{gap:6px}
  .q-sym,.q-price{font-size:14px}
  .q-chg{font-size:11px}
  .q-periods{gap:0}
  .q-periods button{min-width:30px;padding-inline:4px}
  .url{padding-inline:10px 14px}
  .url__txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* F4: tablet Install note sits over the card title, arrow pointing down at it (it used to point at the empty card corner) */
@media (min-width:600px) and (max-width:1199px){
  .callout-slot.callout-slot--install{justify-content:flex-start;padding-left:29px;padding-right:0}   /* callouts.css is injected by js after this file: extra class to win */
  .callout-slot.callout-slot--install .callout{margin-left:0}
}

/* Item 9: Features dashboard beat on tablet/phone. The four percentage columns left only 12% for SNAPSHOTS, so it was clipped.
   Tablet: columns re-split to fit all five. Phone: "Last updated" is dropped (there is no room for five columns). */
@media (max-width:1199px){
  .fstage .dc--t{width:20%}
  .fstage .dc--s{width:14%}
  .fstage .dc--n{width:18%}
  .fstage .dc--u{width:22%}
  .fstage .dc--c{flex:1 1 0;min-width:0;text-align:right}
}
@media (max-width:599px){
  .fstage .dc--u{display:none}
  .fstage .dc--t{width:30%}
  .fstage .dc--s{width:22%}
  .fstage .dc--n{width:24%}
}

/* ---------- Layout tiers + hero (owner 2026-10-30) ----------
   phone <= 599 | tablet layout 600-1199 (content cap 730, set in tokens.css) | desktop >= 1200 (column 1080 above).
   --line-gutter = distance from the page edge to a column line. Phone: lines sit at x 8 / 382, OUTSIDE the 16px content gutter.
   --content-gutter = where text/cards start on phone (16px). Use it, not --line-gutter, for phone content width. */
.page{--content-gutter:var(--line-gutter)}
@media (max-width:599px){
  .page{--line-gutter:8px;--content-gutter:16px}
  .demo-inner{width:calc(100% - 32px - 2 * var(--bz))}   /* bezel outer edge on the 16px gutter: 358 wide at 390 */
}
/* hero hand note ("take a quick tour"): in the tablet tier it sits in its own strip above the chart, right aligned.
   callouts.css only does that up to 900px and loads after this file, so two classes win. Phone: 28px from the right. */
@media (min-width:600px) and (max-width:1199px){
  .callout-slot.callout-slot--hero{position:static;display:flex;align-items:flex-start;justify-content:flex-end;height:74px;padding-right:24px;bottom:auto;right:auto;--co-arrow:60px}
  .callout-slot.callout-slot--hero .callout{align-self:flex-start;margin-left:auto;margin-top:0}
}
@media (max-width:599px){
  .callout-slot.callout-slot--hero{height:69px;padding-right:28px;--co-arrow:62px}
}