/* ============================================================================
   Frame — light theme  (theme-light.css)

   A full visual replacement of the dark/neon look, delivered as a final
   override layer. Nothing in the HTML or the JavaScript changes, so every
   heading, canonical, schema block and generator behaviour is untouched — only
   the paint changes.

   Load order on every page:
     frame.css -> content.css -> studio-ux.css -> theme-light.css
     -> frame-navigation-v3.css -> inline nav critical
   ========================================================================= */

/* ---------------------------------------------------------------- palette */
:root{
  /* neutrals */
  --bg:#FFFFFF;
  --canvas:#F6F7F9;              /* page tint behind cards */
  --surface:#FFFFFF;
  --surface-2:#F6F7F9;
  --border:#E4E7EC;
  --border-soft:#EEF0F3;
  --ink:#101828;
  --ink-soft:#475467;
  --ink-dim:#8A93A3;

  /* restrained accents */
  --gold:#B47714;                /* brand amber, darkened for AA contrast */
  --gold-soft:#FDF6E9;
  --gold-glow:transparent;
  --laser:#0E7C66;               /* success / confirm */
  --laser-soft:#E7F5F1;
  --confirm:#0E7C66;
  --accent:#2C5FF6;              /* primary action blue */
  --accent-soft:#EEF3FF;

  --radius:10px;
  --radius-lg:14px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-md:0 4px 12px rgba(16,24,40,.07);
}

/* the old dark-on-light inversion is no longer needed */
.light-section{
  --surface:#FFFFFF;--border:#E4E7EC;--border-soft:#EEF0F3;
  --ink:#101828;--ink-soft:#475467;--ink-dim:#8A93A3;
  --gold:#B47714;--gold-soft:#FDF6E9;--gold-glow:transparent;
  --laser:#0E7C66;--laser-soft:#E7F5F1;--confirm:#0E7C66;
  background:transparent;
}

/* ------------------------------------------------------------ typography */
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.6;letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand,.cz-title,.card h3,.template-name,.trust-label{
  font-family:'Manrope','Inter',system-ui,sans-serif!important;
  letter-spacing:-0.021em;color:var(--ink);
}
h1{font-weight:800;}
h2,h3{font-weight:700;}
.eyebrow,.now-creating,.res-label,.shape-group-label,.quick-style-label,
.social-logo-label,.footer-copy,.static-footer,.preview-note,.cz-head-note,
.crumbs,.meter-label,.meter-note,.grad-note,.demo-caption,.trust-label{
  font-family:'Inter',system-ui,sans-serif!important;
  letter-spacing:0!important;text-transform:none!important;
}
.eyebrow{
  font-size:12px;font-weight:600;color:var(--gold);
  background:var(--gold-soft);border:1px solid #F2E4C8;
  padding:5px 11px;border-radius:999px;
}
.field > label,.controls .field > label{
  font-family:'Inter',system-ui,sans-serif!important;
  font-size:13px!important;font-weight:600!important;color:var(--ink)!important;
  letter-spacing:0!important;text-transform:none!important;margin-bottom:6px!important;
}
/* the little gold dot before every label added visual noise */
.field > label::before,.field > label::after{display:none!important;}

/* --------------------------------------------------- kill the neon layer */
.aurora,.ray-burst,.ray-ring,.sparkle,.overlay-rays,.overlay-sparkles,
.scanline,.ribbon{display:none!important;}
.hero,.strip,.types,.templates,.spotlight,.health,.compare,.faq,.trust-bar{
  background:transparent!important;
}
*{text-shadow:none!important;}
.studio,.card,.template-card,.demo-card,.frame,.health-drop,.logo-zone,
.type-cell,.faq-item,.cz,.rel-card,.contact-card,.value-item{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ------------------------------------------------------------- structure */
.wrap{max-width:1120px;}
.hero{padding:44px 0 30px;}
.hero-head h1{font-size:clamp(30px,4.2vw,46px);line-height:1.12;margin:16px 0 10px;}
.hero-head .hero-tagline{color:var(--ink-soft);font-weight:600;}
.hero-head .hero-tagline .accent,.hero-head h1 .accent{
  background:none!important;-webkit-background-clip:initial!important;
  background-clip:initial!important;color:var(--gold)!important;
}
.hero-head > p{color:var(--ink-soft);}
.hero-badge{
  background:#FFF!important;border:1px solid var(--border)!important;
  color:var(--ink-soft)!important;box-shadow:var(--shadow-sm)!important;
  border-radius:999px;font-weight:500;animation:none!important;
}
.hero-badge:hover{transform:none!important;box-shadow:var(--shadow)!important;}

.strip-head h2{font-size:clamp(22px,2.8vw,30px);}
.strip{padding:44px 0;}

/* ---------------------------------------------------------- the workbench */
.studio{
  background:var(--surface)!important;border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;box-shadow:var(--shadow-md)!important;
  overflow:visible!important;
}
.controls,.customize{border-right-color:var(--border-soft)!important;}
.preview{background:var(--surface-2)!important;border-radius:0 var(--radius-lg) var(--radius-lg) 0;}
@media(max-width:900px){
  .preview{border-radius:0;background:var(--surface-2)!important;
    border-top:1px solid var(--border-soft)!important;border-bottom:1px solid var(--border-soft)!important;}
}
.now-creating{color:var(--ink-dim);font-size:13px;}
.now-creating strong{color:var(--ink);font-weight:600;}

/* inputs */
input[type="text"],input[type="url"],input[type="email"],input[type="tel"],
input[type="number"],textarea,select,.res-select,.grad-select{
  background:#FFF!important;border:1px solid var(--border)!important;
  color:var(--ink)!important;border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;font-family:inherit!important;font-size:14px!important;
  transition:border-color .15s,box-shadow .15s!important;
}
input::placeholder,textarea::placeholder{color:#A5ADBB!important;}
input:focus,textarea:focus,select:focus,.res-select:focus{
  outline:none!important;border-color:var(--accent)!important;
  box-shadow:0 0 0 3px var(--accent-soft)!important;
}

/* type selector */
.type-tabs{border-bottom:0;}
.type-tab{
  background:#FFF!important;border:1px solid var(--border)!important;
  color:var(--ink-soft)!important;border-radius:8px!important;
  font-family:inherit!important;font-weight:500!important;box-shadow:none!important;
}
.type-tab:hover{border-color:#CBD2DC!important;color:var(--ink)!important;}
.type-tab.active{
  background:var(--ink)!important;border-color:var(--ink)!important;
  color:#FFF!important;font-weight:600!important;
}
.type-tab-more{border-style:dashed!important;color:var(--accent)!important;border-color:#BFD0FF!important;background:var(--accent-soft)!important;}

/* type grid cards */
.type-cell{
  background:#FFF!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow-sm)!important;
  color:var(--ink-soft)!important;
}
.type-cell:hover{border-color:#CBD2DC!important;box-shadow:var(--shadow)!important;transform:none!important;}
.type-cell.selected{border-color:var(--accent)!important;background:var(--accent-soft)!important;color:var(--ink)!important;}
.type-cell .glyph{color:var(--ink)!important;}

/* buttons */
.download-btn{
  background:var(--accent)!important;color:#FFF!important;border:0!important;
  border-radius:var(--radius)!important;font-family:inherit!important;
  font-weight:600!important;font-size:15px!important;letter-spacing:0!important;
  box-shadow:0 1px 2px rgba(44,95,246,.3)!important;text-transform:none!important;
}
.download-btn:hover{background:#1E4FDD!important;transform:none!important;}
.generate-btn{
  background:#FFF!important;color:var(--ink)!important;
  border:1px solid var(--border)!important;border-radius:var(--radius)!important;
  font-family:inherit!important;font-weight:500!important;font-size:14px!important;
  box-shadow:var(--shadow-sm)!important;text-transform:none!important;
}
.generate-btn:hover{border-color:#CBD2DC!important;background:#FCFCFD!important;}
.style-tab,.quick-cat,.template-cats button,.preset-swatch{
  background:#FFF!important;border:1px solid var(--border)!important;
  color:var(--ink-soft)!important;border-radius:8px!important;font-family:inherit!important;
}
.style-tab.active,.quick-cat.active,.template-cats button.active{
  background:var(--ink)!important;color:#FFF!important;border-color:var(--ink)!important;
}
.shape-btn{
  background:#FFF!important;border:1px solid var(--border)!important;
  color:var(--ink-soft)!important;border-radius:8px!important;
}
.shape-btn.active{background:var(--accent-soft)!important;border-color:var(--accent)!important;color:var(--accent)!important;}

/* preview card */
.frame{
  background:#FFF!important;border:1px solid var(--border)!important;
  border-radius:var(--radius-lg)!important;box-shadow:var(--shadow)!important;
}
.frame::before,.frame::after,.frame-inner::before,.frame-inner::after{display:none!important;}
.preview-note{color:var(--ink-dim)!important;}
.res-select{width:100%;}

/* logo + upload zones */
.logo-zone,.health-drop,.qc-drop{
  background:var(--surface-2)!important;border:1px dashed var(--border)!important;
  border-radius:var(--radius)!important;
}
.logo-zone:hover,.health-drop:hover,.qc-drop:hover{border-color:var(--accent)!important;background:var(--accent-soft)!important;}
.logo-zone-icon{background:#FFF!important;border:1px solid var(--border)!important;color:var(--accent)!important;}
.meter-track{background:var(--border-soft)!important;}
.meter-fill{background:var(--laser)!important;}

/* accordions */
.cz{background:#FFF!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-sm)!important;}
.cz[open]{border-color:#D6DBE3!important;}
.cz > summary:hover{background:var(--surface-2);border-radius:var(--radius);}
.cz-title{font-size:14px;font-weight:650;}
.cz-hint{color:var(--ink-dim);}
.cz-chev{color:var(--ink-dim);}
.cz-head{border-top-color:var(--border-soft)!important;font-size:15px;}
.transparent-toggle{color:var(--ink-soft)!important;font-family:inherit!important;
  font-size:13.5px!important;letter-spacing:0!important;text-transform:none!important;}

/* generic cards / sections */
.card,.template-card,.demo-card,.rel-card,.contact-card,.value-item,
.health-results,.trust-item,.qc-row,.qc-overall{
  background:#FFF!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow-sm)!important;
}
.card:hover,.template-card:hover,.rel-card:hover{box-shadow:var(--shadow)!important;transform:none!important;border-color:#D6DBE3!important;}

/* FAQ rows — was previously caught by the shared "generic cards" selector
   above, which added a white/rounded/shadowed card background but no
   left/right padding (the base frame.css rule only gives .faq-item
   `padding:24px 0`, vertical only). With zero horizontal padding, the
   question text sat flush against the rounded corners, so the curve read
   as a stray white sliver poking out from under the text on the left edge.
   Fixing it here as its own rule, not the shared card selector, so it
   can carry the horizontal padding a card never needed. */
.faq-item{
  background:#FFF!important;border:1px solid var(--border)!important;
  border-radius:var(--radius)!important;box-shadow:var(--shadow-sm)!important;
  padding:20px 22px!important;margin-bottom:10px!important;
}
.faq-item:last-child{margin-bottom:0!important;}
.faq-q{font-family:'Manrope',sans-serif!important;font-weight:650!important;color:var(--ink)!important;}
.faq-a p{color:var(--ink-soft)!important;padding-left:0!important;padding-right:0!important;}
.table-wrap,.data-table{background:#FFF;}
.data-table th{color:var(--ink-dim)!important;text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;font-size:12.5px!important;}
.data-table td{border-bottom-color:var(--border-soft)!important;color:var(--ink-soft)!important;}
.tip{background:var(--gold-soft)!important;border:1px solid #F2E4C8!important;border-left:3px solid var(--gold)!important;}

/* prose */
.prose p,.prose li,.static-main p,.static-main li{color:var(--ink-soft);}
.prose a,.static-main a{color:var(--accent)!important;}
.prose h2{font-size:clamp(20px,2.6vw,26px);}
.steps li::before{background:var(--accent-soft)!important;border-color:#BFD0FF!important;color:var(--accent)!important;}

/* footers */
footer,.static-footer,.page-foot,.foot-nav{
  background:var(--surface-2)!important;border-top:1px solid var(--border)!important;
  color:var(--ink-dim)!important;
}
.footer-links a,.page-foot a,.static-footer a,.foot-col a{color:var(--ink-soft)!important;}
.footer-links a:hover,.page-foot a:hover,.foot-col a:hover{color:var(--accent)!important;}
.foot-col b{color:var(--ink-dim)!important;text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;font-size:12.5px!important;}

/* overlay */
.generate-overlay{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(3px)!important;}
.overlay-status{color:var(--ink)!important;font-family:inherit!important;}
.overlay-progress-track{background:var(--border)!important;}
.overlay-progress-fill{background:var(--accent)!important;}
.overlay-mark{border-color:var(--accent)!important;}

/* status colours */
.hc-pass,.yes{color:var(--laser)!important;}
.hc-warn,.no{color:#B54708!important;}
.qc-pass{background:var(--laser-soft)!important;color:var(--laser)!important;}
.qc-warn{background:#FEF6E7!important;color:#B54708!important;}
.qc-fail{background:#FEF3F2!important;color:#B42318!important;}
.qc-na{background:var(--surface-2)!important;color:var(--ink-dim)!important;}
.qc-pass-bg{background:var(--laser-soft)!important;border-color:#B6E3D8!important;}
.qc-warn-bg{background:#FEF6E7!important;border-color:#F5D9A6!important;}
.qc-fail-bg{background:#FEF3F2!important;border-color:#FDA29B!important;}
.qc-code{background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--ink-soft)!important;}

/* scroll progress */
.scroll-progress{background:var(--accent)!important;height:2px!important;}

/* ============================== GLOBAL HEADER ==============================
   Smaller, lighter, sticky. Structure and JS hooks are unchanged. */
.nav{
  background:rgba(255,255,255,.88)!important;
  backdrop-filter:saturate(180%) blur(12px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(12px)!important;
  border-bottom:1px solid var(--border)!important;
  padding:0 24px!important;height:58px!important;
  box-shadow:none!important;
}
.nav.scrolled{box-shadow:var(--shadow-sm)!important;background:rgba(255,255,255,.94)!important;}
.brand{font-size:16px!important;font-weight:800!important;color:var(--ink)!important;gap:8px!important;}
.brand-mark{
  width:20px!important;height:20px!important;border:0!important;
  background:var(--ink)!important;border-radius:5px!important;transition:none!important;
}
.brand-mark::after{
  top:5px!important;left:5px!important;right:5px!important;bottom:5px!important;
  background:var(--gold)!important;border-radius:2px!important;
}
.brand:hover .brand-mark{transform:none!important;}
.nav-links{gap:26px!important;font-size:14px!important;}
.nav-links a,.nav-drop-btn{color:var(--ink-soft)!important;font-weight:500!important;font-size:14px!important;}
.nav-links a:hover,.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{color:var(--ink)!important;}
.nav-links a::after,.nav-drop-btn::after{background:var(--accent)!important;}
.nav-drop-btn .caret{color:var(--ink-dim)!important;}
.nav-cta{
  background:var(--accent)!important;color:#FFF!important;border:0!important;
  font-family:'Inter',sans-serif!important;font-weight:600!important;font-size:13.5px!important;
  padding:9px 16px!important;border-radius:8px!important;letter-spacing:0!important;
  box-shadow:0 1px 2px rgba(44,95,246,.3)!important;
}
.nav-cta:hover{background:#1E4FDD!important;transform:none!important;}

/* dropdown panel */
.nav-drop-menu{
  background:#FFF!important;border:1px solid var(--border)!important;
  border-radius:12px!important;box-shadow:0 12px 28px rgba(16,24,40,.12)!important;
  padding:16px 18px!important;
}
.ndm-col b{
  color:var(--ink-dim)!important;text-transform:none!important;letter-spacing:0!important;
  font-family:'Inter',sans-serif!important;font-size:12px!important;font-weight:600!important;
  border-bottom-color:var(--border-soft)!important;
}
.ndm-col a{color:var(--ink-soft)!important;font-size:13.5px!important;}
.ndm-col a:hover{background:var(--surface-2)!important;color:var(--ink)!important;}

/* hamburger + mobile sheet */
.hamburger span{background:var(--ink)!important;}
.mobile-menu{background:rgba(255,255,255,.98)!important;backdrop-filter:blur(8px)!important;}
.mobile-menu > a,.mm-toggle{color:var(--ink)!important;font-family:'Manrope',sans-serif!important;font-size:18px!important;}
.mm-toggle .caret{color:var(--ink-dim)!important;}
.mm-sub a{color:var(--ink-soft)!important;border-left-color:var(--border)!important;}
.mobile-menu-cta{background:var(--accent)!important;color:#FFF!important;}
.crumbs a{color:var(--ink-dim)!important;}
.crumbs a:hover{color:var(--accent)!important;}
.crumbs [aria-current]{color:var(--ink-soft)!important;}

/* static (legal) pages */
.static-page,.static-main{background:transparent!important;}
.static-main h1{color:var(--ink)!important;}
.static-main h1 em{background:none!important;-webkit-background-clip:initial!important;
  background-clip:initial!important;color:var(--gold)!important;font-style:normal;}
.guide-hero h1 .accent{background:none!important;-webkit-background-clip:initial!important;
  background-clip:initial!important;color:var(--gold)!important;}
.submit-btn{background:var(--accent)!important;color:#FFF!important;border:0!important;
  font-family:'Inter',sans-serif!important;font-weight:600!important;border-radius:8px!important;}

/* ===================== TYPOGRAPHY SWEEP =====================
   The old design used Archivo + IBM Plex Mono in dozens of places. Rather than
   chase each one, reset everything to Inter and re-apply Manrope to headings.
   Icons are inline SVG, so nothing depends on a font family. */
body,body *{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif!important;}
h1,h2,h3,h4,h5,.brand,.cz-title,.faq-q,.card h3,.template-name,
.static-main h1,.guide-hero h1,.qc-label,.overlay-status,.mobile-menu > a,.mm-toggle{
  font-family:'Manrope','Inter',system-ui,sans-serif!important;
}
/* mono was also carrying letter-spacing + uppercase in a lot of spots */
.eyebrow,.now-creating,.type-tab,.hero-badge,.res-label,.quick-cat,.quick-style-label,
.shape-group-label,.social-logo-label,.preview-note,.trust-label,.footer-copy,
.static-footer,.page-foot,.foot-col a,.crumbs,.meter-label,.meter-note,
.template-use,.demo-caption,.demo-badge,.grad-note,.cz-hint,.cz-head-note,.qc-status{
  letter-spacing:0!important;text-transform:none!important;
}

/* ===================== HERO: tighter, balanced ===================== */
.hero{padding:36px 0 26px!important;}
.hero-head{max-width:760px;}
.hero-head h1{font-size:clamp(28px,3.6vw,40px)!important;line-height:1.14!important;margin:14px 0 8px!important;}
.hero-head .hero-tagline{
  font-size:clamp(16px,1.8vw,19px)!important;font-weight:600!important;
  color:var(--ink-soft)!important;margin:0 0 10px!important;max-width:none!important;
}
.hero-head > p{font-size:15px!important;max-width:560px;margin-bottom:0!important;}
.hero-badges{gap:8px!important;margin:16px 0 22px!important;}
.hero-badge{padding:7px 13px!important;font-size:13px!important;}
.hero-badge svg{width:14px;height:14px;}

/* ===================== SECTION RHYTHM ===================== */
.strip{padding:40px 0!important;}
.strip-head{margin-bottom:22px!important;}
.strip-head h2{margin-top:6px;}
.trust-bar{padding:18px 0!important;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.trust-item{box-shadow:none!important;background:transparent!important;border:0!important;}

/* ===================== FINAL POLISH ===================== */
/* right column: fill the full height behind the sticky preview */
@media(min-width:901px){
  .studio{
    background:linear-gradient(to right,
      var(--surface) 0 calc(100% - 372px),
      var(--surface-2) calc(100% - 372px) 100%)!important;
  }
  .preview{background:transparent!important;border-left:1px solid var(--border-soft);}
}

/* secondary buttons: neutral, not gold-outlined */
.logo-zone-btn,.static-back,.template-use,.logo-remove{
  color:var(--ink)!important;border:1px solid var(--border)!important;
  background:#FFF!important;font-weight:500!important;font-size:13px!important;
  border-radius:8px!important;box-shadow:var(--shadow-sm)!important;
}
.logo-zone-btn:hover,.static-back:hover,.template-use:hover{border-color:#CBD2DC!important;background:#FCFCFD!important;}

/* small section captions: quiet grey, no gold dots */
.social-logo-label,.quick-style-label,.res-label,.shape-group-label,.meter-label{
  color:var(--ink-dim)!important;font-size:12.5px!important;font-weight:500!important;
}
.social-logo-label svg,.social-logo-label::before,
.quick-style-label::before,.res-label::before{display:none!important;}

/* colour swatch chips */
.swatch-item{background:#FFF!important;border:1px solid var(--border)!important;border-radius:8px!important;}
.swatch-item span{color:var(--ink-soft)!important;}
input[type="color"]{border:1px solid var(--border)!important;border-radius:6px!important;background:#FFF!important;}

/* preview supporting text */
.quick-style-label,.preview-note{text-align:center;}
.res-row{gap:6px;}

/* focus visibility across the whole UI */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent)!important;outline-offset:2px!important;border-radius:6px;
}

/* swatch chips: the border was clipping their labels — keep them borderless */
.swatch-item{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;}
.swatch-item span{color:var(--ink-soft)!important;font-size:13px!important;}
.swatches{gap:18px!important;}

/* shape row labels sit next to their pickers, so they need normal weight */
.shape-group-label{color:var(--ink)!important;font-size:13.5px!important;font-weight:500!important;}

/* no gradient text anywhere — flat, legible accent instead */
.accent,.hero-tagline .accent,.guide-hero .hero-tagline .accent,
.hero-head .hero-tagline .accent,.static-main h1 em{
  background:none!important;background-image:none!important;
  -webkit-background-clip:initial!important;background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;color:var(--gold)!important;
}
/* guide/article rhythm */
.guide-hero{padding:26px 0 6px!important;}
.guide-hero h1{font-size:clamp(28px,3.6vw,42px)!important;margin:12px 0 8px!important;}
.guide-hero .hero-tagline{font-size:clamp(16px,1.9vw,20px)!important;margin:0 0 10px!important;}
.guide-lead{font-size:15.5px!important;color:var(--ink-soft)!important;}
.prose{padding:34px 0 16px!important;}
.prose h2{margin:34px 0 12px!important;}
.prose h2:first-of-type{margin-top:0!important;}
.prose h3{margin:22px 0 8px!important;}
.related{padding:20px 0 56px!important;}

/* the last of the uppercase micro-labels */
.static-main .stat span,.static-main .field label,.static-main .eyebrow,
.data-table th,.foot-col b,.field label{
  text-transform:none!important;letter-spacing:0!important;
}
.static-main .stat span{color:var(--ink-dim)!important;font-size:13px!important;}
.static-main .stat strong,.static-main .stat b{color:var(--ink)!important;}
.static-main .callout,.static-main .value-item,.static-main .contact-card{
  background:#FFF!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-sm)!important;
}
.static-main .updated{color:var(--ink-dim)!important;}

/* ============================================================================
   HERO GRADIENT BAND
   A teal -> blue wash behind the header and hero. The header is transparent
   while it sits on the band and turns solid white once .scrolled is applied
   (frame.js already toggles that past 20px), so it stays readable over the
   white content below.
   ========================================================================= */
:root{
  --grad-a:#3ECFC6;   /* teal, top */
  --grad-b:#2B93C6;   /* blue, bottom */
}

.hero{position:relative;isolation:isolate;padding-top:86px!important;}
.hero::before{
  content:'';position:absolute;z-index:-1;
  left:0;right:0;
  top:-58px;                      /* reach up behind the header */
  bottom:-56px;                   /* run just past the workbench */
  background:linear-gradient(170deg,var(--grad-a) 0%,var(--grad-b) 100%);
}
/* soften the hand-off into the white page below */
/* long, soft hand-off into the white page below */
.hero::after{
  content:'';position:absolute;z-index:-1;
  left:0;right:0;
  bottom:-56px;height:190px;
  background:linear-gradient(180deg,
    rgba(43,147,198,0) 0%,
    rgba(43,147,198,.55) 45%,
    var(--bg) 100%);
}

/* Header over the band.
   Scoped with :has() so ONLY pages that actually render the gradient get the
   transparent header — guides, checker and legal pages keep the white bar.
   Where :has() is unsupported the white header simply stays, which still reads
   fine on the gradient.
   (Note: .nav is position:sticky but html has overflow-x:hidden, which disables
   sticky, so the header scrolls away with the band. No .scrolled repaint needed.) */
body:has(.hero) .nav{
  background:transparent!important;border-bottom:1px solid rgba(255,255,255,.25)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;}
body:has(.hero) .nav .brand{color:#08272F!important;}
body:has(.hero) .nav .brand-mark{background:#08272F!important;}
body:has(.hero) .nav .brand-mark::after{background:#EAF7F5!important;}
body:has(.hero) .nav-links a,
body:has(.hero) .nav-drop-btn{color:#0C3945!important;font-weight:600!important;}
body:has(.hero) .nav-links a:hover,
body:has(.hero) .nav-drop-btn:hover,
body:has(.hero) .nav-drop.open .nav-drop-btn{color:#04191F!important;}
body:has(.hero) .nav-links a::after,
body:has(.hero) .nav-drop-btn::after{background:#08272F!important;}
body:has(.hero) .nav-drop-btn .caret{color:#08272F!important;}
body:has(.hero) .nav .nav-cta{background:#08272F!important;color:#FFF!important;
  box-shadow:0 1px 3px rgba(0,0,0,.2)!important;}
body:has(.hero) .nav .nav-cta:hover{background:#04191F!important;}
body:has(.hero) .hamburger span{background:#08272F!important;}

/* hero content sitting on the band */
.hero-head .eyebrow{
  background:rgba(255,255,255,.9)!important;border:1px solid rgba(255,255,255,.6)!important;
  color:#0B4A57!important;
}
.hero-head h1{color:#08272F!important;}
.hero-head .hero-tagline{color:#0C3D49!important;}
.hero-head .hero-tagline .accent{color:#FFF!important;}
.hero-head > p{color:#12464F!important;}
.hero-badge{
  background:rgba(255,255,255,.92)!important;border:1px solid rgba(255,255,255,.65)!important;
  color:#0E3A45!important;box-shadow:0 1px 2px rgba(0,0,0,.06)!important;
}

/* the workbench lifts off the band */
.studio{box-shadow:0 14px 40px rgba(6,32,40,.18)!important;}

/* pages without a hero keep the plain white header */
.crumbs{position:relative;z-index:1;}

@media(max-width:900px){
  .hero{padding-top:76px!important;}
  .hero::before{top:-58px;bottom:-40px;}
  .hero::after{bottom:-40px;height:70px;}
}

/* ============================================================================
   REVIEW ROUND 1
   ========================================================================= */

/* 1 — STICKY HEADER
   .nav already declares position:sticky;top:0 but html/body carried
   overflow-x:hidden, which silently disables sticky. The gradient no longer
   uses 100vw, so that guard is no longer needed. */
html,body{overflow-x:visible!important;}
.nav{position:sticky!important;top:0!important;z-index:120!important;}

/* solid header once it leaves the gradient */
body:has(.hero) .nav.scrolled{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--border)!important;
  backdrop-filter:saturate(180%) blur(12px)!important;
  -webkit-backdrop-filter:saturate(180%) blur(12px)!important;
  box-shadow:var(--shadow-sm)!important;
}
body:has(.hero) .nav.scrolled .brand{color:var(--ink)!important;}
body:has(.hero) .nav.scrolled .brand-mark{background:var(--ink)!important;}
body:has(.hero) .nav.scrolled .brand-mark::after{background:var(--gold)!important;}
body:has(.hero) .nav.scrolled .nav-links a,
body:has(.hero) .nav.scrolled .nav-drop-btn{color:var(--ink-soft)!important;font-weight:500!important;}
body:has(.hero) .nav.scrolled .nav-links a:hover,
body:has(.hero) .nav.scrolled .nav-drop-btn:hover{color:var(--ink)!important;}
body:has(.hero) .nav.scrolled .nav-links a::after,
body:has(.hero) .nav.scrolled .nav-drop-btn::after{background:var(--accent)!important;}
body:has(.hero) .nav.scrolled .nav-drop-btn .caret{color:var(--ink-dim)!important;}
body:has(.hero) .nav.scrolled .nav-cta{background:var(--accent)!important;}
body:has(.hero) .nav.scrolled .hamburger span{background:var(--ink)!important;}
/* non-gradient pages: keep the plain white bar, just add a shadow on scroll */
.nav.scrolled{box-shadow:var(--shadow-sm)!important;}

/* 2 — BREADCRUMB CONTRAST on the gradient */
body:has(.hero) .crumbs{color:#0E3A45!important;}
body:has(.hero) .crumbs a{color:#0B4A57!important;font-weight:500!important;}
body:has(.hero) .crumbs a:hover{color:#04191F!important;}
body:has(.hero) .crumbs [aria-current]{color:#08272F!important;font-weight:600!important;}
body:has(.hero) .crumbs span{color:rgba(8,39,47,.45)!important;}

/* 3 — HERO SPACING: tighter, more even rhythm */
.hero{padding-top:64px!important;padding-bottom:22px!important;}
.hero-head .eyebrow{margin-bottom:2px;}
.hero-head h1{margin:12px 0 6px!important;}
.hero-head .hero-tagline{margin:0 0 12px!important;line-height:1.35!important;}
.hero-head > p{line-height:1.6!important;}
.hero-badges{margin:20px 0 26px!important;}

/* 4 — WIDER WORKBENCH */
.hero .wrap,.types .wrap,.strip .wrap{max-width:1280px!important;}
@media(min-width:901px){
  .studio{grid-template-columns:minmax(0,1fr) 400px!important;}
  .controls,.customize{padding-left:34px!important;padding-right:34px!important;}
  .studio{background:linear-gradient(to right,
    var(--surface) 0 calc(100% - 400px),
    var(--surface-2) calc(100% - 400px) 100%)!important;}
}

/* 5 — DESIGN accordion (moved out of the preview panel) */
.cz[data-cz="design"] .quick-style{width:100%;}
.cz[data-cz="design"] .quick-cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px;justify-content:flex-start;}
.cz[data-cz="design"] .quick-swatches{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-start;}
.preview .quick-style{display:none;}

/* The gradient must start at the very top of the page. On the homepage the
   hero sits directly under the 58px header; on the dedicated pages a 38px
   breadcrumb row sits between them. One variable covers both. */
:root{--band-top:58px;}
body:has(.crumbs){--band-top:96px;}
.hero::before{top:calc(-1 * var(--band-top))!important;}

/* breadcrumbs sit on the band, so give them room to breathe */
body:has(.hero) .crumbs{padding-top:16px!important;padding-bottom:2px!important;}
body:has(.hero) .hero{padding-top:34px!important;}

/* The nav element itself was capped at 1180px, so once it turned solid the
   white bar stopped short of the viewport edges. Make the element full-bleed
   and centre its contents with padding instead — no 100vw, so no scrollbar
   overflow now that overflow-x is visible. Also aligns it to the 1280px grid. */
.nav{
  max-width:none!important;
  padding-left:max(32px,calc((100% - 1280px)/2 + 32px))!important;
  padding-right:max(32px,calc((100% - 1280px)/2 + 32px))!important;
}
@media(max-width:760px){
  .nav{padding-left:20px!important;padding-right:20px!important;}
}

/* Removing overflow-x:hidden exposed two real overflows that it had been
   masking: the edge-to-edge scroll rows (negative margins) and the reveal
   animations' translateX. Clip them at the content wrapper instead — .nav
   lives outside every .wrap, so its sticky positioning is unaffected. */
.wrap,.static-main,.qc-wrap{overflow-x:clip;}
@supports not (overflow:clip){.wrap,.static-main,.qc-wrap{overflow-x:hidden;}}

/* ============================================================================
   REVIEW ROUND 2
   ========================================================================= */

/* 9 — CLOSED ACCORDION MUST COLLAPSE COMPLETELY
   Measured bug: a closed <details> kept its .cz-body laid out (up to 204px of
   reserved height) because the theme's display:block beat the UA rule for the
   closed state. Force it off, and strip the summary's bottom padding so a
   closed row is exactly the summary height. */
details.cz:not([open]) > .cz-body{display:none!important;height:0!important;
  padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;}
details.cz:not([open]){padding-bottom:0!important;}
details.cz > summary{margin:0!important;}
.cz-body > *:last-child{margin-bottom:0!important;}

/* 8 — BIGGER, CLEARER DROPDOWN ARROWS */
.cz-chev{
  font-size:0!important;width:20px;height:20px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:6px;color:var(--ink-soft)!important;
  transition:transform .22s ease,background .18s ease;
}
.cz-chev::before{
  content:'';width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
}
.cz > summary:hover .cz-chev{background:var(--surface-2);color:var(--ink)!important;}
.cz[open] > summary .cz-chev{transform:rotate(180deg);}

/* 1 — HEADER: one clean line, even spacing, less height */
.nav{height:56px!important;}
/* NOTE: scoped to desktop. An unscoped display:flex!important here would beat
   the @media(max-width:760px){.nav-links{display:none}} rule and spill the
   desktop links into the mobile header. */
@media(min-width:761px){
  .nav-links{gap:0!important;display:flex!important;align-items:center!important;}
  .nav-links > a,.nav-links > .nav-drop{
    display:inline-flex!important;align-items:center!important;
    height:34px;padding:0 13px!important;border-radius:7px;
  }
}
.nav-links > a:hover{background:rgba(255,255,255,.28)!important;}
body:has(.hero) .nav.scrolled .nav-links > a:hover{background:var(--surface-2)!important;}
.nav-links a::after,.nav-drop-btn::after{display:none!important;}   /* underline replaced by the pill */
.nav-drop-btn{height:34px;padding:0!important;gap:5px!important;}
.nav-drop-btn .caret{font-size:9px!important;opacity:.8;}
.nav .brand{gap:9px!important;}
.nav .nav-cta{height:36px!important;padding:0 16px!important;display:inline-flex!important;align-items:center!important;}

/* 3 + 4 — COMPACT FIRST SCREEN, less empty turquoise */
body:has(.hero) .crumbs{padding-top:12px!important;padding-bottom:0!important;}
body:has(.hero) .hero{padding-top:22px!important;padding-bottom:0!important;}
.hero-head .eyebrow{font-size:11.5px;padding:4px 10px;}
.hero-head h1{margin:10px 0 4px!important;}
.hero-head .hero-tagline{margin:0 0 8px!important;}
.hero-head > p{margin-bottom:0!important;}
.hero-badges{margin:14px 0 20px!important;}
.hero::before{bottom:-28px!important;}
.hero::after{bottom:-28px!important;height:150px!important;}
.trust-bar{padding:14px 0!important;}

/* 2 — CONTRAST on the turquoise band */
body:has(.hero) .hero-head > p{color:#0B3540!important;}
body:has(.hero) .hero-head .hero-tagline{color:#08272F!important;}
body:has(.hero) .hero-badge{color:#0B3540!important;}

/* 10 — LEFT PANEL: stronger hierarchy, tighter rhythm */
.cz-head{font-size:15.5px!important;font-weight:700!important;padding:14px 0 9px!important;}
.controls .field > label{font-size:13px!important;font-weight:600!important;color:#1F2937!important;}
.cz-title{font-size:14px!important;font-weight:650!important;}
.cz-hint{font-size:12px!important;color:var(--ink-dim)!important;}
.cz{border-radius:10px!important;margin-bottom:7px!important;}
.cz > summary{padding:10px 13px!important;min-height:42px!important;}
.cz-body{padding:2px 13px 13px!important;}
.now-creating{margin-bottom:12px!important;}

/* 11 — RIGHT PANEL: focused output column */
.preview{gap:14px!important;}
.preview .frame{max-width:250px!important;}
.res-label{margin-bottom:5px!important;}
.preview-note{font-size:11.5px!important;line-height:1.5!important;max-width:280px;}

/* 2b — the current breadcrumb carried opacity:.5, which was dimming it well
   past the colour we set. Restore full opacity and dim only the separators. */
.crumbs [aria-current]{opacity:1!important;}
body:has(.hero) .crumbs [aria-current]{color:#0A3039!important;}

/* helper / secondary text was #8A93A3 — about 2.9:1 on white, under AA.
   #5B6473 lands near 5:1 and still reads as quiet secondary text. */
:root{--ink-dim:#5B6473;}
.cz-hint,.preview-note,.cz-head-note,.res-label,.social-logo-label,
.quick-style-label,.meter-label,.foot-col b,.data-table th,.crumbs{
  color:#5B6473!important;
}
.now-creating{color:#5B6473!important;}

/* Styles / Templates: keep the four categories on one row and the presets tidy */
.cz[data-cz="design"] .quick-cats{gap:6px!important;margin-bottom:11px!important;}
.cz[data-cz="design"] .quick-cat{padding:6px 12px!important;font-size:12.5px!important;}
.cz[data-cz="design"] .quick-swatches{gap:8px!important;}
.cz[data-cz="design"] .quick-swatch{width:56px!important;height:56px!important;border-radius:8px!important;}

/* ============================================================================
   SITE-WIDE HEADER — final, authoritative sizing
   Supersedes the scattered .nav/.brand rules above (kept there for history;
   this block wins the cascade because it loads last). One header, every page:
   taller two-line brand lockup with the qrcode-frame.com domain subtitle,
   wider nav-link spacing, and a 900px (not 760px) hamburger cutoff so the
   longer nav row never wraps on small laptops/tablets. Loaded by every page
   via theme-light.css, so no page needs its own header override file. */
.nav{
  height:auto!important;min-height:68px!important;
  padding-top:13px!important;padding-bottom:13px!important;
  display:flex!important;align-items:center!important;
}
.nav .brand{align-items:center!important;gap:11px!important;}
.brand-mark{width:23px!important;height:23px!important;border-radius:6px!important;}
.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1.15;gap:1px;}
.brand-name{font-family:'Manrope',sans-serif;font-size:19px!important;font-weight:800!important;letter-spacing:-.01em;}
.brand-domain{
  font-family:'Inter',sans-serif;font-size:10.5px;font-weight:500;
  letter-spacing:.02em;color:var(--ink-soft);opacity:.75;
}
body:has(.hero) .nav .brand-domain{color:rgba(8,39,47,.62)!important;}
body:has(.hero) .nav.scrolled .brand-domain{color:var(--ink-soft)!important;opacity:.75;}
.nav .nav-links{margin-left:40px;align-items:center!important;gap:28px!important;}
.nav .nav-cta{align-self:center!important;}
@media (max-width:900px){
  .nav{min-height:58px!important;padding-top:12px!important;padding-bottom:12px!important;}
  .brand-name{font-size:16.5px!important;}
  .brand-domain{font-size:9.5px;}
  .nav-links{display:none!important;}
  .nav-cta{display:none!important;}
  .hamburger{display:flex!important;}
}

/* ==========================================================================
   UI cleanup — phase 1 (low-risk pass). Kept together at the end of the one
   stylesheet every page loads, so it can be reviewed or reverted as a unit.
   ========================================================================== */

/* 1. Content is always readable. The .reveal/.flip-in/.slide-* classes used to
   be scroll-scrubbed from opacity 0; they're now pinned fully visible (this
   also beats any inline opacity a script may still write). */
.reveal,.flip-in,.slide-left,.slide-right{opacity:1!important;transform:none!important;will-change:auto!important;}

/* 7. No decorative scroll-progress bar. */
.scroll-progress{display:none!important;}

/* 3. "Generate fresh code" re-rendered the same deterministic code behind a
   staged loading overlay; clearing a design is already "Clear · use plain
   style". Hidden (not removed) so frame.js's existing listener stays valid. */
.preview #generateBtn{display:none!important;}

/* 5. Display headings: tight leading so two-line headings read as one unit. */
h2,.strip-head h2{line-height:1.15;}

/* 2. Button hierarchy while no QR exists (.studio.qr-empty is set by
   renderQR): the page's own Generate button leads, Download steps back. Once
   a valid code renders the class drops and Download is the primary action. */
.studio.qr-empty #fieldsHost .generate-btn{
  background:var(--accent)!important;color:#FFF!important;border-color:var(--accent)!important;
  font-weight:600!important;box-shadow:0 1px 2px rgba(44,95,246,.3)!important;
}
.studio.qr-empty #fieldsHost .generate-btn:hover{background:#1E4FDD!important;border-color:#1E4FDD!important;}
.studio.qr-empty .preview .download-btn{
  background:#FFF!important;color:var(--ink-soft)!important;
  border:1px solid var(--border)!important;box-shadow:none!important;
}
.studio.qr-empty .preview .download-btn:hover{background:#FCFCFD!important;box-shadow:none!important;}

/* 4. Empty preview: a faint three-finder outline and one line of direction.
   Purely decorative CSS — nothing here is a scannable or downloadable code. */
.qr-empty-state{display:none;}
.studio.qr-empty .qr-empty-state{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:22px;
  text-align:center;pointer-events:none;background:#FFF;
}
.studio.qr-empty .qr-empty-state::before{
  content:"";width:84px;height:84px;box-sizing:border-box;padding:9px;
  border:1.5px dashed #CBD2DC;border-radius:12px;
  background:
    linear-gradient(#E4E7EC,#E4E7EC) left top/22px 22px no-repeat,
    linear-gradient(#E4E7EC,#E4E7EC) right top/22px 22px no-repeat,
    linear-gradient(#E4E7EC,#E4E7EC) left bottom/22px 22px no-repeat;
  background-origin:content-box;
}
.studio.qr-empty .qr-empty-state span{
  max-width:220px;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink-soft);
}

/* 6. Mobile hero pills wrap instead of running off the edge in a hidden
   horizontal scroller. */
@media (max-width:900px){
  .hero .hero-badges{
    flex-wrap:wrap!important;overflow:visible!important;
    margin-left:0!important;margin-right:0!important;padding:0!important;
  }
  .hero .hero-badge{flex:0 0 auto;}
}
/* Non-interactive labels, so a compact size on small phones is safe; keeps
   the three pills to two rows instead of a tall stack. */
@media (max-width:430px){
  .hero .hero-badge{font-size:12px!important;padding:6px 11px!important;gap:6px;}
  .hero .hero-badge svg{width:13px;height:13px;}
}
@media (max-width:380px){
  .hero .hero-badges{gap:6px!important;}
  .hero .hero-badge{font-size:11.5px!important;padding:6px 9px!important;gap:5px;}
}