/* ================================================================
   RESIZR — theme layer
   Loaded after resizr.css, so it wins on the cascade.

   The base stylesheet is dark-first and token-driven, and it already
   remaps every token under [data-theme="light"]. Rather than rewrite
   5,000 lines, this layer does three things:

     1. Replaces both palettes — warm paper for light, warm black for
        dark. No blue-grey slate, no pure #fff, no pure #000.
     2. Removes the decoration: gradient text, gradient buttons, glow
        shadows, backdrop blur, the scrolling marquee.
     3. Tightens type and geometry — lighter weights, smaller radii,
        hairline borders, one accent used sparingly.

   Set --accent in Settings and everything follows it.
   ================================================================ */

/* ---------- palette: light (default) ---------- */
[data-theme="light"]{
  --void:#FBFAF7;        /* page — warm paper, not blue-grey */
  --void2:#FFFFFF;       /* raised card */
  --panel:#FFFFFF;
  --surface:#FFFFFF;
  --paper:#F4F2EC;       /* recessed / inset */
  --cloud:#1A1A17;       /* text — warm near-black, not #000 */
  --ink:#1A1A17;
  --muted-d:#5E5D55;     /* solid, not alpha: alpha drifts per surface */
  --muted-l:#84837A;
  --line-d:#E5E3DB;      /* hairline */
  --line-l:#D6D3C9;      /* stronger divider */
  --ok:#12684F;
}

/* ---------- palette: dark ---------- */
[data-theme="dark"]{
  --void:#121211;
  --void2:#1A1A18;
  --panel:#1F1F1C;
  --surface:#1A1A18;
  --paper:#262622;
  --cloud:#EDEBE4;
  --ink:#EDEBE4;
  --muted-d:#A3A199;
  --muted-l:#8B8981;
  --line-d:rgba(255,255,255,.10);
  --line-l:rgba(255,255,255,.16);
  --ok:#5BC79E;
}

/* ---------- typography ----------
   Bricolage Grotesque has real character; it doesn't need 800 weight
   shouting to prove it. Lighter weights, tighter tracking. */
h1,h2,h3,h4{font-weight:560;letter-spacing:-.021em;line-height:1.12}
h1{letter-spacing:-.028em;line-height:1.06}
.hero h1{font-size:clamp(2rem,4.4vw,3.05rem)}
.hero .lede{font-size:clamp(1rem,1.5vw,1.16rem);color:var(--muted-d);max-width:56ch;line-height:1.6}
.section h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.prose{font-size:16.5px;line-height:1.72}
.prose h2{font-size:1.35rem;margin-top:2.2em;letter-spacing:-.018em}

/* Numbers, units and file sizes belong in the mono face — this is a
   tool about exact dimensions, so the measurements should look exact. */
.units-strip b,.rz-thumb-dim,.rz-thumb-size,.rz-item-dim,.rz-dims,.rz-cap,
.rz-meta,.rz-hint,.rz-pdf-pn,.rz-badge{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- no gradient text ---------- */
.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--accent)}
.card .stat{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--cloud);font-weight:560;font-size:38px;
  font-family:var(--mono);letter-spacing:-.03em}
.rz-thumb-info{background:rgba(0,0,0,.55)}

/* ---------- buttons: flat, no glow ---------- */
.btn{font-weight:520;border-radius:9px;padding:13px 22px;font-size:15.5px;
  transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn:active{transform:none}
.btn.sm{border-radius:8px;padding:9px 15px;font-size:14px}
.btn.primary{background:var(--accent);color:#fff;box-shadow:none;border:1px solid var(--accent)}
.btn.primary:hover{background:var(--accent-ink,var(--accent));border-color:var(--accent-ink,var(--accent));box-shadow:none}
.btn.line{border:1px solid var(--line-l);background:transparent;color:var(--cloud)}
.btn.line:hover{background:var(--paper);border-color:var(--muted-l)}
.nav-cta{background:var(--accent)!important;color:#fff!important;font-weight:520}
.nav-cta:hover{background:var(--accent-ink,var(--accent))!important;transform:none}
.rz-btn-primary{background:var(--accent);border:1px solid var(--accent);box-shadow:none;font-weight:520}
.rz-btn-primary:hover{background:var(--accent-ink,var(--accent));box-shadow:none}

/* ---------- nav: solid, hairline, no blur ---------- */
.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--void);
  border-bottom:1px solid var(--line-d)}
[data-theme="light"] .nav{background:var(--void);border-bottom-color:var(--line-d)}
[data-theme="dark"] .nav{background:var(--void);border-bottom-color:var(--line-d)}
.logo{font-weight:560;letter-spacing:-.02em}
.nav-links a{font-weight:450}
.nav-links a:hover,.nav-links a.active{background:var(--paper);color:var(--cloud)}
.bottom-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--void);
  border-top:1px solid var(--line-d)}

/* ---------- cards: hairline, no lift, no glow ---------- */
.card,.hubcard,.rz-panel,.faq details{border-radius:10px;border:1px solid var(--line-d);
  background:var(--void2);box-shadow:none}
.card{padding:22px}
.hubcard{padding:20px}
.card:hover,.hubcard:hover{transform:none;border-color:var(--muted-l);background:var(--void2)}
.card h3,.hubcard h3{font-size:17px;font-weight:540;letter-spacing:-.015em}
.card p,.hubcard p{font-size:14.5px;color:var(--muted-d);line-height:1.55}
.card .ico{width:36px;height:36px;border-radius:8px;background:var(--paper);
  border:1px solid var(--line-d);margin-bottom:14px}
.card .ico svg{width:18px;height:18px;stroke:var(--accent);stroke-width:1.6}
.hubcard .go{color:var(--accent);font-weight:450}

/* ---------- eyebrow / section tags: quieter ---------- */
.eyebrow{font-size:11.5px;letter-spacing:.1em;color:var(--muted-d);
  border:1px solid var(--line-d);background:transparent;padding:6px 12px;border-radius:6px}
.eyebrow .g{width:5px;height:5px;box-shadow:none;background:var(--ok)}
.sec-tag{font-size:11.5px;letter-spacing:.1em;color:var(--muted-d)}
.crumbs{font-size:12.5px;color:var(--muted-l)}
.crumbs a:hover{color:var(--accent)}

/* ---------- the scrolling marquee is decoration, not information ---------- */
.marq{display:none}

/* ---------- form controls ---------- */
.rz-inp,.rz-field input,.rz-field select{border-radius:8px;border:1px solid var(--line-l);
  background:var(--surface);font-family:var(--mono);font-variant-numeric:tabular-nums}
.rz-inp:focus,.rz-field input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.rz-optbtn,.rz-preset{border-radius:7px;font-weight:450}
.rz-optbtn.on,.rz-preset.on,.rz-seg .on{background:var(--accent);border-color:var(--accent);color:#fff}
.rz-drop{border-radius:10px;border:1.5px dashed var(--line-l);background:var(--paper)}
.rz-drop:hover{border-color:var(--accent);background:var(--paper)}

/* ---------- misc restraint ---------- */
.band{padding:76px 0;background:var(--paper);border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d)}
.ad-label{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted-l)}
.ad-ph{background:var(--paper);border:1px dashed var(--line-l);color:var(--muted-l)}
.rz-sticky{background:var(--void);border-top:1px solid var(--line-d);backdrop-filter:none}
.faq summary{font-weight:520}
footer{border-top:1px solid var(--line-d);background:var(--void)}
.foot-grid h4{font-weight:540;font-size:14px;letter-spacing:0}
.foot-base{color:var(--muted-l);font-size:13px}
.rz-gsearch-panel{border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.09)}
[data-theme="dark"] .rz-gsearch-panel{box-shadow:0 6px 24px rgba(0,0,0,.5)}

/* Motion: shorter, and only where it communicates something. */
.reveal{transform:translateY(10px);transition:opacity .42s ease,transform .42s ease}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}