/* ============================================================
   I SMART QR — "THE MACHINE" DESIGN SYSTEM
   Loaded AFTER assets/site.css and overrides it at the token
   layer, so all 50 existing pages pick the new look up without
   their markup changing. site.css stays intact: pulling this one
   <link> reverts the whole site.

   The dark base was #07080C — effectively black, and it read as a
   hole rather than a surface. It is now #12151C, 3.1x lighter. That
   costs roughly a tenth of every ratio, so each pair below was
   recomputed rather than carried over; two of them (red and blue as
   text on the raised --ink3) dropped under 4.5 and the accents were
   lifted to compensate.

   Measured on the three dark surfaces (/tmp/claude-0/measure.py):
                       --ink      --ink2     --ink3
     white             18.26      16.87      14.94
     --fog #9AA3B5      7.20       6.65       5.89
     --g   #28E08A     10.54       9.73       8.62
     --r   #FF5F52      6.10       5.63       4.99
     --b   #6E9EFF      6.96       6.42       5.69
     --edge-ui          4.47       4.13       3.66   (needs 3.0)
   On the white label card, --b is a fill colour only. Body text and
   links there use --b-ink #2B62D6 (5.5:1).
   ============================================================ */

:root{
  /* dark stack — a charcoal that reads as a surface, not a void */
  --ink:#12151C; --ink2:#191D26; --ink3:#222733;
  --edge:#2A3040;         /* hairlines, decorative — never a control boundary */
  --edge-ui:#707E9A;      /* control boundaries. Measured against the NEW base:
                             4.47 / 4.13 / 3.66. The previous #5A6782 scored
                             2.63 on the lifted --ink3 and would have failed. */
  --fog:#9AA3B5;          /* lifted with the base to hold 5.89 on --ink3 */

  /* light stack, used by the label card and light sections */
  --paper:#F4F6FA; --card:#FFF; --line:#DFE4ED; --slate:#49536A;

  /* the camera channels: red, green, blue */
  --r:#FF5F52; --g:#28E08A; --b:#6E9EFF;
  --b-ink:#2B62D6;        /* the blue that is legible as text on white */

  --footer-bg:#191D26;    /* the footer now sits ABOVE the page, not below it */
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter Tight",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* remap the tokens the existing 50 pages already consume, so they
     inherit this system without a single markup change */
  --bg:var(--ink); --surface:var(--ink2); --surface-2:var(--ink3);
  --text:#FFFFFF; --text-muted:var(--fog); --border:var(--edge);
  --accent:var(--b); --highlight:var(--g);
  --on-dark:#E7EBF3; --on-dark-muted:var(--fog);
  --display:var(--disp); --fd:var(--disp);
  --body-font:var(--body); --fb:var(--body);
  --mono-font:var(--mono); --fm:var(--mono);
  --radius:14px; --r-sm:10px;
  color-scheme:dark;
}

html{color-scheme:dark}
body{
  background:var(--ink); color:var(--text);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--disp); font-weight:800; letter-spacing:-.035em; line-height:.92; color:var(--text)}
h1{font-size:clamp(2.2rem,1.2rem + 4.4vw,5.2rem); line-height:.9; overflow-wrap:break-word}
h2{font-size:clamp(1.75rem,1.1rem + 2.6vw,3.1rem)}
h3{font-size:clamp(1.1rem,1rem + .6vw,1.45rem); letter-spacing:-.02em}
/* The outlined second line is the signature. It is decoration on top of
   real text, so the text itself is never hidden from a screen reader and
   never disappears in forced-colors mode. */
h1 em,.outline{font-style:normal; display:block; color:transparent;
  -webkit-text-stroke:1.5px var(--text); paint-order:stroke fill}
@media (forced-colors:active){
  h1 em,.outline{color:CanvasText; -webkit-text-stroke:0}
}
p{color:var(--fog)}
.lead,.sub{color:var(--text-muted); font-size:1.05rem}

/* ── the pill ─────────────────────────────────────────────── */
.pill,.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--body); font-size:.79rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--fog);
  border:1px solid var(--edge-ui); border-radius:999px;
  padding:8px 15px; background:rgba(13,16,23,.72);
}
.pill i{width:7px; height:7px; border-radius:2px; display:block}

/* ── sections ─────────────────────────────────────────────── */
.section{background:var(--ink)}
.section--alt{background:var(--ink2); border-block:1px solid var(--edge)}
.section.section--dark{background:#12151C; color:#fff}
.section--light{background:var(--paper); color:#0A0D12}
.section--light h1,.section--light h2,.section--light h3{color:#0A0D12}
.section--light p{color:var(--slate)}

/* ── cards ────────────────────────────────────────────────── */
.card{
  background:var(--ink2); border:1px solid var(--edge);
  border-radius:16px; color:var(--text);
}
.card h3{color:var(--text)}
.card p{color:var(--fog)}

/* ── buttons ──────────────────────────────────────────────── */
.btn,.big,.ghost,.cta{
  font-family:var(--body); font-weight:600; letter-spacing:-.005em;
  border-radius:999px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 26px; cursor:pointer; border:1px solid transparent;
  transition:background .16s, color .16s, border-color .16s;
}
.btn--primary,.big,.cta{background:#fff; color:#12151C; border-color:#fff}
.btn--primary:hover,.big:hover,.cta:hover{background:var(--g); border-color:var(--g); color:#04140C}
.btn--ghost,.ghost{background:transparent; color:var(--text); border-color:var(--edge-ui)}
.btn--ghost:hover,.ghost:hover{background:var(--ink3); border-color:var(--fog)}

/* ── focus: one visible ring everywhere ───────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--g); outline-offset:2px; border-radius:6px;
}

/* ── the readout: the machine's voice ─────────────────────── */
.readout{
  border:1px solid var(--edge); border-radius:16px; background:var(--ink2);
  padding:15px 17px; font-family:var(--mono); font-size:.78rem; color:#B9C2D3;
}
.readout dl{display:grid; grid-template-columns:auto 1fr; gap:7px 16px; margin:0}
.readout dt{color:#7E8899} .readout dd{margin:0; color:#DCE3EF; overflow-wrap:anywhere}

/* ============================================================
   THE LABEL — the white card the code lives on.
   Named for a printed label, which is what it is: the one light
   object on a dark page, the way a label sits on a dark package.
   ============================================================ */
.label{
  background:var(--card); color:#0A0D12;
  border-radius:22px; padding:22px;
  display:grid; gap:14px;
}
.label h1,.label h2,.label h3{color:#0A0D12}
.label p{color:var(--slate)}
.label a{color:var(--b-ink)}
.label .code{display:block}
.label .code svg{width:100%; height:auto; display:block; border-radius:10px}

/* contrast verdict strip */
.label .meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.78rem; color:var(--slate)}
.label .ratio{font-weight:600; color:#0A0D12; font-size:.9rem}
.label .verdict{border-radius:999px; padding:5px 11px; font-weight:600; font-size:.74rem}
.label .verdict[data-v="good"]{background:#D8F7E7; color:#06492C}   /* 7.9:1 */
.label .verdict[data-v="ok"]  {background:#FFF0CC; color:#5A4100}   /* 8.1:1 */
.label .verdict[data-v="bad"] {background:#FFE0DC; color:#8A1409}   /* 7.6:1 */
.label .meta small{margin-left:auto; color:var(--slate)}

/* ============================================================
   THE GENERATOR WIDGET
   QRcdr ships Bootstrap markup. Rather than rewrite the PHP, the
   rules below retheme the classes it already emits. Nothing here
   changes behaviour - no display:none on anything the script
   reads, no renamed hooks.
   ============================================================ */

/* tab pills -> the machine's chip row */
.nav-pills{gap:8px; border:0}
.nav-pills .nav-link{
  font-family:var(--body); font-weight:500; font-size:.88rem;
  color:var(--fog); background:var(--ink2);
  border:1px solid var(--edge-ui); border-radius:999px;
  padding:11px 18px; min-height:44px;
  display:inline-flex; align-items:center; gap:8px;
  transition:color .15s, background .15s, border-color .15s;
}
.nav-pills .nav-link:hover{color:var(--text); background:var(--ink3); border-color:var(--fog)}
.nav-pills .nav-link.active{background:#fff; color:#12151C; border-color:#fff}
.nav-pills .nav-link i{opacity:.85}

/* the form side */
.tab-content{
  background:var(--ink2); border:1px solid var(--edge);
  border-radius:18px; padding:clamp(16px,2.2vw,26px); margin-top:18px;
}
.tab-content label,.qrcdr-form label{color:var(--text); font-weight:500; font-size:.9rem}
.form-control,.form-select,
.qrcdr-form input[type=text],.qrcdr-form input[type=url],
.qrcdr-form input[type=email],.qrcdr-form input[type=tel],
.qrcdr-form input[type=number],.qrcdr-form input[type=date],
.qrcdr-form input[type=password],.qrcdr-form textarea,.qrcdr-form select{
  background:var(--ink2); color:var(--text);
  border:1px solid var(--edge-ui); border-radius:12px;
  min-height:46px; padding:11px 14px;
  font-family:var(--body); font-size:.95rem;
}
.form-control::placeholder,.qrcdr-form input::placeholder{color:#6B7488}
.form-control:focus,.qrcdr-form input:focus,.qrcdr-form textarea:focus,.qrcdr-form select:focus{
  border-color:var(--g); box-shadow:none; background:var(--ink); color:#fff;
}
/* native controls inherit the accent rather than being rebuilt */
.qrcdr-form{accent-color:var(--g)}

/* collapsible option groups (COLORS / DESIGN / LOGO / FRAME / OPTIONS) */
.card-header,.accordion-button,.panel-heading{
  background:var(--ink3); color:var(--text); border:0;
  font-family:var(--disp); font-weight:600; letter-spacing:-.01em;
}
.accordion-button:not(.collapsed){background:var(--ink3); color:#fff; box-shadow:none}
.accordion-item{background:transparent; border:1px solid var(--edge); border-radius:14px; overflow:hidden}
.accordion-body{background:var(--ink2)}

/* the result side becomes the label */
.placeresult{
  background:var(--card); color:#0A0D12;
  border:0; border-radius:22px; padding:22px;
}
.placeresult .resultholder{background:#fff; border-radius:12px}
.placeresult .resultholder svg,.placeresult .resultholder img{
  width:100%; height:auto; display:block; border-radius:10px;
}
.placeresult label,.placeresult .form-group label{color:var(--slate)}

/* download buttons: a quiet row of four, not four shouting cards */
.placeresult .btn,.wrapresult .btn,
a[class*="download"],button[class*="download"]{
  background:var(--paper); color:#0A0D12; border:1px solid var(--line);
  border-radius:12px; font-weight:600; min-height:44px;
}
.placeresult .btn:hover,.wrapresult .btn:hover{background:#E6EBF5; border-color:#C4CCDA}
.generate_qrcode{
  background:#12151C!important; color:#fff!important; border:0!important;
  border-radius:999px!important; min-height:50px; font-family:var(--body);
  font-weight:600; letter-spacing:-.005em;
}
.generate_qrcode:hover{background:var(--g)!important; color:#04140C!important}

/* ── header / footer ──────────────────────────────────────── */
.site-header,.top,header.site-header{
  background:rgba(7,8,12,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge);
}
.site-footer,.foot{background:var(--footer-bg); border-top:1px solid var(--edge); color:var(--text)}
.site-footer a,.foot a{color:var(--text-muted)}
.site-footer a:hover,.foot a:hover{color:var(--text)}
.site-footer h3,.foot h3{color:var(--text)}

/* ── the drifting module field behind the hero ────────────────
   Decorative only. It is aria-hidden, it is the one piece of
   non-user-triggered motion on the page, and it stops entirely
   for anyone who asks for reduced motion.                      */
.hero{position:relative; overflow:hidden; background:var(--ink)}
.hero .field{position:absolute; inset:-7%; opacity:.3; pointer-events:none}
.hero .wrap{position:relative; z-index:1}

@media (prefers-reduced-motion:reduce){
  .hero .field{animation:none!important; transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important; transition-duration:.01ms!important}
}

/* ── print: the one place the dark page must not follow ───── */
@media print{
  body,.section,.hero{background:#fff!important; color:#000!important}
  h1,h2,h3{color:#000!important}
  h1 em,.outline{color:#000!important; -webkit-text-stroke:0}
  .hero .field,.site-footer,.nav-pills{display:none!important}
}

/* ============================================================
   CORRECTIONS — found by compositing the real background stack
   on ten pages after the token swap, not by eyeballing.

   The big one: site.css:397 carries
     .btn--primary,.btn--primary:hover{color:#fff!important}
   left over from the earlier contrast remediation. Against the
   machine's white primary button that is white-on-white, 1:1.
   Beaten here with a higher-specificity !important rather than by
   editing site.css, so removing the machine.css <link> still
   reverts the whole site in one move.
   ============================================================ */
.btn.btn--primary,.btn.btn--primary:hover,
a.btn.btn--primary,button.btn.btn--primary{
  background:#fff!important; color:#12151C!important; border-color:#fff!important;
}
.btn.btn--primary:hover,a.btn.btn--primary:hover,button.btn.btn--primary:hover{
  background:var(--g)!important; color:#04140C!important; border-color:var(--g)!important;
}
.btn.btn--primary::after{display:none}   /* the sheen sweep reads as a glitch on a flat white pill */

/* the skip link and the back-to-top button both sat on --accent,
   which is now a mid blue: white on it is 2.9:1 */
.skip{background:#12151C; color:#fff; border:1px solid var(--edge-ui)}
.to-top{background:var(--ink2); color:#fff; border:1px solid var(--edge-ui)}
.to-top span,.to-top svg{color:#fff}
.a11y-fab{background:var(--ink2); color:#fff; border:1px solid var(--edge-ui)}

/* Bootstrap's own components never saw the token layer */
.btn-primary,.btn-primary:hover,.btn-primary:focus{
  background-color:#12151C; border-color:var(--edge-ui); color:#fff;
}
.btn-primary:hover{background-color:var(--ink3)}
.bg-light,.bg-info,.bg-white,.alert,.alert-info,.toast,.toast-body,.toast-header{
  background-color:var(--ink2)!important; color:#D7DCE6!important; border-color:var(--edge)!important;
}
.bg-info p,.alert p,.alert-info{color:#D7DCE6!important}
.text-muted{color:var(--fog)!important}
.close,.btn-close{filter:invert(1) grayscale(1) brightness(1.6)}

/* tab labels: the 9px mobile caption was white on a light pill */
.nav-pills .nav-link span{color:inherit}

/* ── the generator's own stylesheet ───────────────────────────
   css/unify.css scopes its button and tab rules to body.qrcdr with
   !important, specificity (0,2,1). Matching that prefix from a sheet
   that loads after it is what wins; a bare .btn-primary here does
   not, whatever the order.
   (unify.css also reads --accent, which this file remaps to the blue
   --b. White on --b is 3.4:1, which is how SAVE and the active tab
   ended up failing after the token swap.)                        */
body.qrcdr .btn-primary,body.qrcdr .generate_qrcode,
body.qrcdr .btn-primary:focus,body.qrcdr .generate_qrcode:focus{
  background:#12151C!important; border-color:var(--edge-ui)!important; color:#fff!important;
  font-family:var(--body)!important; font-weight:600!important;
  text-transform:none!important; letter-spacing:-.005em!important;
}
body.qrcdr .generate_qrcode{border-radius:999px!important; min-height:50px}
body.qrcdr .btn-primary:hover,body.qrcdr .generate_qrcode:hover{
  background:var(--g)!important; border-color:var(--g)!important; color:#04140C!important;
}

/* the active tab was white text on --b (3.4:1); make it the white pill
   the rest of the system uses */
body.qrcdr .nav-pills .nav-link.active,
body.qrcdr .nav-pills .nav-link.active:hover{
  background:#fff!important; color:#12151C!important; border-color:#fff!important;
}
body.qrcdr .nav-pills .nav-link.active span,
body.qrcdr .nav-pills .nav-link.active i{color:#12151C!important}

/* ── fixes found by looking at the rendered generator ─────────
   The text-contrast sweep passed all of these: white on #07080C is
   20:1. What it cannot see is WCAG 1.4.11 - a control needs 3:1
   against what surrounds it, and a near-black button on a near-black
   panel has no boundary at all. Save is the page's primary action,
   so it takes the system's primary treatment: a white pill.        */
body.qrcdr .generate_qrcode,
body.qrcdr .generate_qrcode:focus{
  background:#FFFFFF!important; color:#12151C!important; border:0!important;
}
body.qrcdr .generate_qrcode:hover{background:var(--g)!important; color:#04140C!important}

/* the result column IS the label - one white object on a dark page */
body.qrcdr .placeresult,
body.qrcdr .col-lg-4 .placeresult{
  background:#FFFFFF!important; color:#0A0D12!important;
  border:0!important; border-radius:22px!important; padding:20px!important;
}
body.qrcdr .placeresult *{border-color:var(--line)}
body.qrcdr .placeresult label,
body.qrcdr .placeresult .form-group label,
body.qrcdr .placeresult small{color:var(--slate)!important}
body.qrcdr .placeresult .resultholder{background:#fff!important; border-radius:12px}

/* QRcdr's own red "Important Note" heading, restyled as the warning it is */
body.qrcdr .placeresult h4,
body.qrcdr .placeresult .text-danger,
body.qrcdr p.bg-info{
  font-family:var(--body)!important; font-size:.84rem!important; font-weight:500!important;
  line-height:1.45!important; text-align:left!important;
  background:#FFF6E0!important; color:#4A3500!important;
  border:1px solid #F0D79A!important; border-radius:12px!important;
  padding:11px 14px!important; margin-top:12px!important;
}

/* the download row sits on the white label, so it needs light-surface
   buttons with a visible 3:1 edge rather than the dark ones */
body.qrcdr .placeresult .btn:not(.generate_qrcode){
  background:#F4F6FA!important; color:#0A0D12!important;
  border:1px solid #C4CCDA!important; border-radius:12px!important;
  min-height:44px; font-weight:600;
}
body.qrcdr .placeresult .btn:not(.generate_qrcode):hover{
  background:#E6EBF5!important; border-color:#9AA6BA!important;
}

/* ── 1.4.11: bind the visible edge to every control ──────────
   site.css and unify.css draw control borders from --border, which
   this file maps to --edge (1.24:1) because --border also draws
   section dividers, where a bright line would be wrong. Controls get
   the edge explicitly instead of brightening every divider on the site.
   Disabled controls are exempt from 1.4.11 and are left alone.       */
body.qrcdr .form-control,body.qrcdr .form-select,
.tab-content input,.tab-content select,.tab-content textarea,
input.form-control,select.form-select,textarea.form-control,
.theme-toggle,.to-top,.a11y-fab,
.btn-outline-primary,.btn-outline-secondary,
.btn--ghost,.ghost,.nav-pills .nav-link:not(.active){
  border:1px solid var(--edge-ui)!important;
}
.btn-outline-primary,.btn-outline-secondary{
  background:var(--ink2)!important; color:#fff!important;
}
.btn-outline-primary:hover,.btn-outline-secondary:hover{
  background:var(--ink3)!important; color:#fff!important; border-color:var(--fog)!important;
}
/* on the white label the edge has to go the other way */
body.qrcdr .placeresult .form-control,
body.qrcdr .placeresult input,
body.qrcdr .placeresult select{
  border:1px solid #9AA6BA!important; background:#fff!important; color:#0A0D12!important;
}

/* unify.css scopes the accordion buttons to body.qrcdr, so an unprefixed
   rule here loses on specificity however many !importants it carries. */
body.qrcdr .btn-outline-primary,body.qrcdr .btn-outline-secondary{
  border:1px solid var(--edge-ui)!important;
  background:var(--ink2)!important; color:#fff!important;
}
body.qrcdr .btn-outline-primary:hover,body.qrcdr .btn-outline-secondary:hover{
  background:var(--ink3)!important; border-color:var(--fog)!important;
}
/* the blog carousel arrows were the last pair with an invisible edge */
.bs-arrow,.bs-arrow.prev,.bs-arrow.next{
  background:var(--ink2); border:1px solid var(--edge-ui); color:#fff;
}
.bs-arrow:hover{background:var(--ink3); border-color:var(--fog)}

/* unify.css line 26 uses body.qrcdr .accordion .btn-outline-primary,
   specificity (0,3,1). Match it exactly or lose. */
body.qrcdr .accordion .btn-outline-primary,body.qrcdr .accordion .btn{
  background:var(--ink2)!important; border:1px solid var(--edge-ui)!important;
  color:#fff!important; font-family:var(--disp)!important;
  text-transform:none!important; letter-spacing:-.01em!important;
  border-radius:12px!important;
}
body.qrcdr .accordion .btn-outline-primary:hover,body.qrcdr .accordion .btn:hover{
  background:var(--ink3)!important; border-color:var(--fog)!important;
}

/* inactive carousel dots sat at --edge, 1.24:1 — the control the viewer
   is meant to click was the one they could not see. The active dot
   stays white and wider, so state is carried by size as well as tone. */
.bs-dots button{background:var(--edge-ui)}
.bs-dots button.on,.bs-dots button[aria-selected="true"]{background:#fff}

/* #malink kept unify.css's --border edge (1.24:1) despite an equal-
   specificity !important later in the cascade. Rather than keep
   bisecting the cascade, this settles it: html body.qrcdr is (0,2,2),
   one element step above unify's (0,2,1), so it wins outright. */
html body.qrcdr .form-control,
html body.qrcdr input[type="text"],
html body.qrcdr input[type="url"],
html body.qrcdr input[type="email"],
html body.qrcdr input[type="tel"],
html body.qrcdr input[type="number"],
html body.qrcdr textarea,
html body.qrcdr select,
html body.qrcdr .form-select{
  border:1px solid var(--edge-ui)!important;
}
html body.qrcdr .placeresult .form-control,
html body.qrcdr .placeresult input,
html body.qrcdr .placeresult select{
  border:1px solid #9AA6BA!important;
}

/* QRcdr dims its disabled Save button to opacity .2, which leaves the
   word unreadable — the viewer cannot tell what the control would do.
   WCAG exempts inactive controls, so this is a usability call, not a
   conformance one: still obviously inert, but legible. */
html body.qrcdr .generate_qrcode:disabled,
html body.qrcdr .generate_qrcode[disabled]{
  opacity:.45!important; background:#C9CFDA!important; color:#2B3242!important;
  cursor:not-allowed;
}

/* "Important Note" shipped as a 30px red <b> in a .text-danger block.
   It is advice about contrast, not an error, so it reads as the warning
   panel the rest of the system uses. */
html body.qrcdr .text-danger{
  display:block; background:#FFF6E0; color:#4A3500!important;
  border:1px solid #F0D79A; border-left:3px solid #C98A00;
  border-radius:12px; padding:12px 15px; margin:14px 0 0;
  text-align:left; font-family:var(--body);
}
html body.qrcdr .text-danger b,
html body.qrcdr .text-danger strong{
  display:block; font-size:.9rem!important; font-weight:700;
  color:#4A3500!important; margin-bottom:3px;
}
html body.qrcdr .text-danger p,
html body.qrcdr .text-center .text-danger ~ p{color:#4A3500!important; font-size:.85rem}

/* ============================================================
   THE HERO — ported from the concept rather than approximated.
   What was missing before: the bokeh module field, the three-point
   ambient glow, sentence-case display type, and a label that holds
   working controls instead of a paragraph.
   ============================================================ */

/* site.css uppercases every heading. The system's display face is set
   in sentence case - "Open the machine", not "OPEN THE MACHINE" - and
   the uppercase transform is most of why the retheme read as the old
   site in new colours. */
h1,h2,h3,h4,.hero h1,.section h2,.sec-head h2{text-transform:none!important}

.hero{position:relative; overflow:hidden; background:var(--ink); isolation:isolate}
.hero .field{position:absolute; inset:-7%; opacity:.3; pointer-events:none; z-index:0}
.hero .field img{width:100%; height:100%; object-fit:cover; display:block}
.hero .glow{position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 46% at 16% 14%, rgba(255,68,56,.17), transparent 70%),
    radial-gradient(54% 44% at 86% 26%, rgba(76,134,255,.20), transparent 70%),
    radial-gradient(46% 40% at 52% 96%, rgba(40,224,138,.13), transparent 70%);
}
/* the old wireframe grid belonged to the previous design */
.hero .hero-grid,.hero .aurora,.hero .gridlines{display:none!important}

.hero-two{position:relative; z-index:1;
  display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(28px,4vw,56px);
  align-items:center; padding-block:clamp(44px,7vw,104px)}
.hero-two h1{margin:22px 0 0; max-width:11ch; letter-spacing:-.035em; line-height:.9}
.hero-two .sub{color:var(--text-muted); font-size:clamp(1rem,1.25vw,1.12rem);
  max-width:46ch; margin-top:20px}
.hero-two .row{display:flex; flex-wrap:wrap; gap:11px; margin-top:28px}

/* the label, with its controls */
.hero-label{max-width:420px; width:100%; justify-self:end;
  border-radius:26px; padding:19px; background:var(--card); color:#0A0D12;
  box-shadow:0 34px 90px rgba(0,0,0,.6)}
.hero-label .code img{width:100%; height:auto; display:block; border-radius:14px}
.hero-label .meta{display:flex; align-items:center; gap:9px; margin-top:14px; flex-wrap:wrap}
.hero-label .ratio{font-family:var(--disp); font-weight:800; font-size:1.02rem;
  color:#12151C; letter-spacing:-.03em}
.hero-label .meta small{margin-left:auto; color:#5E6779; font-size:.72rem}
.hero-label .verdict{font-size:.76rem; font-weight:600; border-radius:999px; padding:5px 11px}
.hero-label .verdict[data-v="good"]{background:#D8F7E7; color:#06492C}

.ctrl{display:flex; gap:7px; margin-top:12px; align-items:center}
.inp{flex:1; min-width:0; display:flex; gap:8px; align-items:center;
  /* #C4CCDA on the white label card is 1.60:1. This pill IS the input's
     visible boundary — the <input> inside it is borderless — so it has
     to clear 3:1 on its own. #7C889C is 3.54:1 on white. */
  background:var(--paper); border:1px solid #7C889C; border-radius:999px; padding:10px 15px}
.inp:focus-within{box-shadow:0 0 0 2px var(--b-ink)}
.inp b{color:#4A5466; font-size:.7rem; font-weight:700; letter-spacing:.02em}
.inp input{flex:1; min-width:0; background:none; border:0; color:#12151C;
  font:500 .88rem/1.2 var(--body); min-height:24px}
.inp input:focus{outline:none}
.heroGo{background:#12151C!important; color:#fff!important; border:0!important;
  border-radius:999px!important; padding:12px 20px!important; min-height:44px;
  font:600 .9rem/1 var(--body)!important}
.heroGo:hover{background:var(--b-ink)!important; color:#fff!important}

/* `1fr` is `minmax(auto, 1fr)`, and that `auto` minimum is the item's
   MIN-CONTENT width. The label card's min-content is about 400px (a
   320px code plus padding), so on a 390px phone the single column
   resolved to 400.34px and 84 elements ran past the right edge —
   clipped silently, because body{overflow-x:hidden} turns an overflow
   into a truncation rather than a scrollbar. minmax(0,1fr) lets the
   track shrink below min-content; min-width:0 lets the children
   follow it. */
.hero-two > *{min-width:0}
@media(max-width:900px){
  .hero-two{grid-template-columns:minmax(0,1fr); gap:30px; padding-block:26px 44px}
  .hero-two h1{max-width:none}
  .hero-label{justify-self:stretch; max-width:none; min-width:0}
  .hero-label .code{min-width:0}
  .hero-label .code img{width:100%; max-width:320px; height:auto}
  .hero-two .row{width:100%}
  .hero-two .row .big,.hero-two .row .ghost{flex:1 1 auto; min-width:0}
}

/* ── the kinds ticker ─────────────────────────────────────────
   The site already ships #belt with exactly the structure the concept
   uses - <b><i style="background:var(--r)"></i>Link</b>, dot plus
   label in the channel colours. It had simply lost its layout to the
   retheme and was running the labels together into one string. I had
   added a second ticker of my own above it; that is removed, because
   two tickers is worse than one unstyled one.                        */
.belt{background:var(--ink2); border-block:1px solid var(--edge);
  overflow:hidden; padding:13px 0;
  /* the markup ships TWO .belt-in tracks so the marquee can loop
     seamlessly; as block children they stacked and left an empty band
     under the row. Laying the belt out as a flex row puts them end to
     end, which is what the -50% translate assumes. */
  display:flex; flex-wrap:nowrap}
.belt-in{display:flex!important; gap:38px; width:max-content; flex:none;
  padding-right:38px;
  animation:beltrun 52s linear infinite}
.belt-in b{display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  color:var(--text-muted); font-size:.86rem; font-weight:500; font-family:var(--body)}
.belt-in i{width:7px; height:7px; border-radius:2px; display:block; flex:none}
@keyframes beltrun{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .belt-in{animation:none; flex-wrap:wrap; width:auto;
    gap:14px 26px; padding-inline:clamp(20px,5vw,64px)}
}

/* ============================================================
   These three were lost when I re-cut the ticker block by string
   index and truncated everything after it. Appending at the end of
   the file now, where nothing downstream can remove them again.
   ============================================================ */

/* unify.css uppercases headings at body.qrcdr h1 (0,2,1) !important.
   The display face is designed for sentence case; the uppercase
   transform was most of why the retheme still read as the old site. */
html body.qrcdr h1,html body.qrcdr h2,html body.qrcdr h3,html body.qrcdr h4,
html body.qrcdr .sec-head h2,html body.qrcdr .hero h1{text-transform:none!important}

/* the hero buttons were stretching to the full column width */
.hero-two .row .big,.hero-two .row .ghost{
  flex:0 0 auto; width:auto; display:inline-flex; align-items:center;
  justify-content:center; padding:15px 27px; border-radius:999px;
  font:600 .96rem/1 var(--body); text-decoration:none; min-height:48px;
}
.hero-two .row .big{background:#fff; color:#12151C; border:0}
.hero-two .row .big:hover{background:var(--g); color:#04140C}
.hero-two .row .ghost{background:transparent; color:var(--text); border:1px solid var(--edge-ui)}
.hero-two .row .ghost:hover{border-color:#fff}

/* the URL field is a light pill; the generic dark input rule was
   painting a second, darker box inside it */
html body.qrcdr .inp input[type="text"],
html body.qrcdr .inp input{
  background:transparent!important; border:0!important; color:#12151C!important;
  padding:0!important; min-height:24px!important; border-radius:0!important;
}
html body.qrcdr .inp input:focus{outline:none!important; box-shadow:none!important}

/* ============================================================
   LIGHT MODE
   machine.css pinned the dark palette to :root unconditionally, so
   removing data-theme changed nothing and light could never render.
   The dark set is now the DEFAULT, and these two blocks supply a real
   light set: one for an explicit choice, one for "system" (no
   data-theme attribute) when the OS asks for light.

   Measured on paper #F4F6FA:
     ink #0A0D12 18.0:1   muted #49536A 7.1:1
     r-dark #B81F15 6.0   g-dark #04603A 7.1   b-dark #1E4FBF 6.6
   The bright channel colours are 3.2:1 on paper — fills and large
   type only, never body text, which is why each has a dark twin.
   Control edges need 3:1: #7C889C clears it at 3.31, #C4CCDA (1.49)
   is a hairline and is used only for dividers.
   ============================================================ */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
  --footer-bg:#FFFFFF;
    --ink:#F4F6FA; --ink2:#FFFFFF; --ink3:#E9EDF4;
    --edge:#DFE4ED; --edge-ui:#7C889C; --fog:#49536A;
    --paper:#FFFFFF; --card:#FFFFFF; --line:#C4CCDA; --slate:#49536A;
    --r:#B81F15; --g:#04603A; --b:#1E4FBF; --b-ink:#1E4FBF;
    --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#E9EDF4;
    --text:#0A0D12; --text-muted:#49536A; --border:#DFE4ED;
    --accent:#1E4FBF; --highlight:#04603A;
    --on-dark:#0A0D12; --on-dark-muted:#49536A;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --footer-bg:#FFFFFF;
  --ink:#F4F6FA; --ink2:#FFFFFF; --ink3:#E9EDF4;
  --edge:#DFE4ED; --edge-ui:#7C889C; --fog:#49536A;
  --paper:#FFFFFF; --card:#FFFFFF; --line:#C4CCDA; --slate:#49536A;
  --r:#B81F15; --g:#04603A; --b:#1E4FBF; --b-ink:#1E4FBF;
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#E9EDF4;
  --text:#0A0D12; --text-muted:#49536A; --border:#DFE4ED;
  --accent:#1E4FBF; --highlight:#04603A;
  --on-dark:#0A0D12; --on-dark-muted:#49536A;
  color-scheme:light;
}

/* everything that hardcoded a dark value needs a light counterpart.
   A media query cannot sit inside a selector list, so the system case
   is its own block. */
:root[data-theme="light"] body{background:#F4F6FA; color:#0A0D12}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]) body{background:#F4F6FA; color:#0A0D12}
}

:root[data-theme="light"] h1,:root[data-theme="light"] h2,
:root[data-theme="light"] h3,:root[data-theme="light"] h4{color:#0A0D12}
:root[data-theme="light"] p{color:#49536A}
:root[data-theme="light"] h1 em,:root[data-theme="light"] .outline{
  color:transparent; -webkit-text-stroke:1.5px #0A0D12}
:root[data-theme="light"] .hero{background:#F4F6FA}
:root[data-theme="light"] .hero .field{opacity:.14; filter:invert(1) hue-rotate(180deg)}
:root[data-theme="light"] .hero .glow{
  background:
    radial-gradient(60% 46% at 16% 14%, rgba(184,31,21,.07), transparent 70%),
    radial-gradient(54% 44% at 86% 26%, rgba(30,79,191,.09), transparent 70%),
    radial-gradient(46% 40% at 52% 96%, rgba(4,96,58,.06), transparent 70%);
}
:root[data-theme="light"] .section{background:#F4F6FA}
:root[data-theme="light"] .section--alt{background:#FFFFFF; border-block:1px solid #DFE4ED}
:root[data-theme="light"] .section.section--dark{background:#0A0D12; color:#fff}
:root[data-theme="light"] .section.section--dark h2,
:root[data-theme="light"] .section.section--dark h3{color:#fff}
:root[data-theme="light"] .section.section--dark p{color:#C3CAD8}
:root[data-theme="light"] .card{background:#FFFFFF; border-color:#DFE4ED; color:#0A0D12}
:root[data-theme="light"] .card h3{color:#0A0D12}
:root[data-theme="light"] .card p{color:#49536A}
:root[data-theme="light"] .pill,:root[data-theme="light"] .eyebrow{
  background:#FFFFFF; border-color:#C4CCDA; color:#49536A}
:root[data-theme="light"] .hero-two .row .big{background:#0A0D12; color:#fff}
:root[data-theme="light"] .hero-two .row .big:hover{background:#1E4FBF; color:#fff}
:root[data-theme="light"] .hero-two .row .ghost{color:#0A0D12; border-color:#7C889C}
:root[data-theme="light"] .hero-two .row .ghost:hover{border-color:#0A0D12}
:root[data-theme="light"] .hero-label{box-shadow:0 24px 60px rgba(10,13,18,.14);
  border:1px solid #DFE4ED}
:root[data-theme="light"] .belt{background:#FFFFFF; border-block:1px solid #DFE4ED}
:root[data-theme="light"] .belt-in b{color:#49536A}
:root[data-theme="light"] .readout{background:#FFFFFF; border-color:#DFE4ED; color:#49536A}
:root[data-theme="light"] .readout dd{color:#0A0D12}
:root[data-theme="light"] body.qrcdr .btn.btn--primary,
:root[data-theme="light"] .btn.btn--primary{
  background:#0A0D12!important; color:#fff!important; border-color:#0A0D12!important}
:root[data-theme="light"] .btn.btn--primary:hover{
  background:#1E4FBF!important; color:#fff!important; border-color:#1E4FBF!important}
:root[data-theme="light"] .btn--ghost,:root[data-theme="light"] .ghost{
  color:#0A0D12; border-color:#7C889C}
:root[data-theme="light"] .skip{background:#0A0D12; color:#fff}

/* the generator in light mode */
:root[data-theme="light"] body.qrcdr .nav-pills .nav-link{
  background:#FFFFFF; color:#49536A; border-color:#7C889C}
:root[data-theme="light"] body.qrcdr .nav-pills .nav-link.active{
  background:#0A0D12!important; color:#fff!important; border-color:#0A0D12!important}
:root[data-theme="light"] body.qrcdr .nav-pills .nav-link.active span,
:root[data-theme="light"] body.qrcdr .nav-pills .nav-link.active i{color:#fff!important}
:root[data-theme="light"] .tab-content{background:#FFFFFF; border-color:#DFE4ED}
:root[data-theme="light"] .tab-content label,
:root[data-theme="light"] .qrcdr-form label{color:#1E2633}
:root[data-theme="light"] body.qrcdr .form-control,
:root[data-theme="light"] body.qrcdr input[type="text"],
:root[data-theme="light"] body.qrcdr textarea,
:root[data-theme="light"] body.qrcdr select{
  background:#FFFFFF!important; color:#0A0D12!important; border-color:#7C889C!important}
:root[data-theme="light"] body.qrcdr .btn-primary,
:root[data-theme="light"] body.qrcdr .generate_qrcode{
  background:#0A0D12!important; color:#fff!important}
:root[data-theme="light"] body.qrcdr .accordion .btn-outline-primary,
:root[data-theme="light"] body.qrcdr .accordion .btn{
  background:#FFFFFF!important; color:#0A0D12!important; border-color:#7C889C!important}
:root[data-theme="light"] .site-header,:root[data-theme="light"] header.site-header{
  background:rgba(244,246,250,.9); border-bottom:1px solid #DFE4ED}
:root[data-theme="light"] .site-header a,:root[data-theme="light"] .top nav a{color:#0A0D12}
:root[data-theme="light"] .mega-trigger{color:#0A0D12}

/* ============================================================
   FOOTER — the reference layout, in this system's palette.
   Centred mark, one-line promise, supporting copy, social row,
   four columns, bottom bar.
   ============================================================ */
.site-footer{background:var(--footer-bg); border-top:1px solid var(--edge); color:var(--text);
  padding-block:clamp(48px,6vw,78px) 0; margin-top:0}
.site-footer .wrap{max-width:1180px}

.foot-top{text-align:center; display:grid; justify-items:center; gap:14px;
  padding-bottom:clamp(36px,4.5vw,54px)}
.foot-mark{display:inline-flex; align-items:center; gap:13px; text-decoration:none;
  font-family:var(--disp); font-weight:800; font-size:clamp(1.6rem,1.1rem + 1.6vw,2.3rem);
  letter-spacing:-.035em; color:var(--text); padding-block:4px}
.foot-mark img{width:46px; height:46px; display:block}
.foot-claim{font-family:var(--disp); font-weight:800; font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  letter-spacing:-.02em; color:var(--text); margin:2px 0 0}
.foot-sub{color:var(--text-muted); max-width:62ch; margin:0; font-size:.95rem; line-height:1.6}

.foot-social{display:flex; gap:10px; margin-top:6px}
.foot-social a{width:42px; height:42px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink2); border:1px solid var(--edge-ui); color:var(--text-muted);
  transition:background .16s, color .16s, border-color .16s}
.foot-social a:hover{background:var(--ink3); color:var(--text); border-color:var(--fog)}
.foot-social .fi{width:19px; height:19px}

.foot-cols{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(22px,3vw,44px); padding-block:clamp(30px,4vw,46px);
  border-top:1px solid var(--edge)}
.foot-cols h3{font-family:var(--body); font-size:.74rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--g);
  margin:0 0 15px}
.foot-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.foot-cols a{color:var(--text-muted); text-decoration:none; font-size:.93rem;
  display:inline-flex; align-items:center; gap:9px; padding-block:3px}
.foot-cols a:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}
.foot-cols .ci{width:17px; height:17px; flex:none; color:var(--g)}
.foot-note{color:var(--text-muted); font-size:.86rem; margin:14px 0 0; line-height:1.5}
.foot-cta{display:inline-flex; align-items:center; justify-content:center;
  margin-top:15px; background:#fff; color:#12151C; border-radius:999px;
  padding:11px 22px; font-weight:600; font-size:.9rem; text-decoration:none; min-height:44px}
.foot-cta:hover{background:var(--g); color:#04140C}

.foot-bottom{display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
  justify-content:space-between; border-top:1px solid var(--edge);
  padding-block:20px 26px}
.foot-legal{display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin:0;
  color:var(--text-muted); font-size:.86rem}
.foot-legal a{color:var(--text-muted); text-decoration:none; padding-block:4px}
.foot-legal a:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}
/* The reference has a green status light reading "Walls online". That
   is a live system state; nothing here checks uptime, so a lit dot
   would be decoration pretending to be a measurement. The slot carries
   provenance instead. */
.foot-meta{margin:0; color:var(--text-muted); font-size:.84rem}
.foot-meta a{color:var(--text-muted); text-decoration:none}
.foot-meta a:hover{color:var(--text); text-decoration:underline; text-underline-offset:3px}

@media(max-width:860px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}
}
@media(max-width:520px){
  .foot-cols{grid-template-columns:1fr}
  .foot-bottom{justify-content:flex-start}
}

/* light mode */
:root[data-theme="light"] .site-footer{background:#FFFFFF; border-top:1px solid #DFE4ED; color:#0A0D12}
:root[data-theme="light"] .foot-mark,:root[data-theme="light"] .foot-claim{color:#0A0D12}
:root[data-theme="light"] .foot-sub{color:#49536A}
:root[data-theme="light"] .foot-social a{background:#F4F6FA; border-color:#7C889C; color:#49536A}
:root[data-theme="light"] .foot-social a:hover{background:#E9EDF4; color:#0A0D12}
:root[data-theme="light"] .foot-cols,:root[data-theme="light"] .foot-bottom{border-color:#DFE4ED}
:root[data-theme="light"] .foot-cols h3{color:#04603A}
:root[data-theme="light"] .foot-cols a,:root[data-theme="light"] .foot-legal a,
:root[data-theme="light"] .foot-meta a{color:#49536A}
:root[data-theme="light"] .foot-cols a:hover,:root[data-theme="light"] .foot-legal a:hover,
:root[data-theme="light"] .foot-meta a:hover{color:#0A0D12}
:root[data-theme="light"] .foot-cols .ci{color:#04603A}
:root[data-theme="light"] .foot-note,:root[data-theme="light"] .foot-legal,
:root[data-theme="light"] .foot-meta{color:#5C6678}
:root[data-theme="light"] .foot-cta{background:#0A0D12; color:#fff}
:root[data-theme="light"] .foot-cta:hover{background:#1E4FBF; color:#fff}

/* ============================================================
   FLOATING FURNITURE — matched to the reference
   Accessibility button bottom-left, back-to-top bottom-right, the
   social rail as a right-edge tab, and the cookie bar as a card.
   All four sized past 44px and given a 3:1 edge.
   ============================================================ */

/* accessibility — bottom LEFT, like the reference */
.a11y-fab{
  position:fixed; left:18px; right:auto; bottom:18px; z-index:80;
  width:48px; height:48px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--b); color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.45); cursor:pointer;
}
.a11y-fab:hover{background:#2B62D6}
.a11y-fab .af-svg{width:22px; height:22px}

/* back to top — bottom RIGHT, rounded square */
.to-top{
  position:fixed; right:18px; bottom:18px; z-index:80;
  width:48px; height:48px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  background:var(--b); color:#fff; border:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 30px rgba(0,0,0,.45); cursor:pointer;
}
.to-top:hover{background:#2B62D6; transform:translateY(-2px)}
.to-top .tt-svg{width:21px; height:21px}
.to-top span{display:none}          /* the arrow carries it; the label is the aria-label */

/* social rail — a tab clipped to the right edge */
.social-rail{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:70;
  display:flex; flex-direction:column; gap:2px;
  background:var(--ink2); border:1px solid var(--edge-ui); border-right:0;
  border-radius:14px 0 0 14px; padding:6px 4px; overflow:hidden;
}
.social-rail a{
  width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-muted); border-radius:10px;
}
.social-rail a:hover{background:var(--ink3); color:var(--text)}
.social-rail svg{width:18px; height:18px}
@media(max-width:820px){ .social-rail{display:none} }

/* cookie consent — a card, not a full-bleed slab */
.cookie{
  left:18px; right:auto; bottom:80px; max-width:400px;
  background:var(--ink2); color:var(--text);
  border:1px solid var(--edge-ui); border-radius:18px;
  box-shadow:0 26px 70px rgba(0,0,0,.6); padding:18px 19px;
}
.cookie strong{font-family:var(--disp); font-weight:800; font-size:1rem; color:var(--text)}
.cookie p{color:var(--text-muted); font-size:.86rem; line-height:1.5; margin:7px 0 0}
.cookie a{color:var(--text); text-underline-offset:3px}
.ck-act{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.ck-act .btn{flex:1 1 auto; min-height:44px; border-radius:999px; font-size:.86rem}
@media(max-width:560px){
  .cookie{left:12px; right:12px; max-width:none; bottom:76px}
  .a11y-fab{left:12px; bottom:12px} .to-top{right:12px; bottom:12px}
}

/* light mode for all four */
:root[data-theme="light"] .a11y-fab,:root[data-theme="light"] .to-top{
  background:#1E4FBF; color:#fff; border-color:rgba(0,0,0,.12);
  box-shadow:0 10px 30px rgba(10,13,18,.22)}
:root[data-theme="light"] .social-rail{
  background:#FFFFFF; border-color:#7C889C; box-shadow:0 8px 26px rgba(10,13,18,.1)}
:root[data-theme="light"] .social-rail a{color:#49536A}
:root[data-theme="light"] .social-rail a:hover{background:#E9EDF4; color:#0A0D12}
:root[data-theme="light"] .cookie{
  background:#FFFFFF; color:#0A0D12; border-color:#7C889C;
  box-shadow:0 26px 70px rgba(10,13,18,.18)}
:root[data-theme="light"] .cookie strong{color:#0A0D12}
:root[data-theme="light"] .cookie p{color:#49536A}
:root[data-theme="light"] .cookie a{color:#1E4FBF}

/* The original red/white/blue dashed divider was recoloured here.
   It is gone - see REVISION 4. Its !important background-image was
   what kept showing through two later attempts to replace it. */

/* .foot-cols a (0,1,1) was beating .foot-cta (0,1,0), so the CTA
   rendered its label in the muted link colour on a white pill */
.foot-cols .foot-cta,.site-footer .foot-cta{
  color:#12151C; background:#fff; text-decoration:none;
}
.foot-cols .foot-cta:hover,.site-footer .foot-cta:hover{
  color:#04140C; background:var(--g); text-decoration:none;
}
:root[data-theme="light"] .foot-cols .foot-cta,
:root[data-theme="light"] .site-footer .foot-cta{background:#0A0D12; color:#fff}
:root[data-theme="light"] .foot-cols .foot-cta:hover,
:root[data-theme="light"] .site-footer .foot-cta:hover{background:#1E4FBF; color:#fff}

/* ============================================================
   THE GENERATOR PANEL — bigger, clearer, less cramped
   The contrast figure is the one number this product is making an
   argument about, so it leads the result card at display size rather
   than sitting in small print. The download row was five icon tiles
   of unequal weight; it is now one grid of equal tiles with the
   format name as the label and the icon as support.
   ============================================================ */

/* the result card gets room to breathe */
html body.qrcdr .placeresult{padding:24px!important; border-radius:24px!important}

/* LIVE PREVIEW caption */
html body.qrcdr .placeresult > .form-group:first-child,
html body.qrcdr .wrapresult > label:first-child{
  font-family:var(--body); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#5E6779;
}

/* the KPI: the measured contrast, at display size */
.kpi{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  margin:18px 0 4px; padding-top:16px; border-top:1px solid var(--line)}
.kpi-num{font-family:var(--disp); font-weight:800; letter-spacing:-.045em;
  font-size:clamp(2.4rem,1.6rem + 2.2vw,3.4rem); line-height:.85; color:#12151C}
.kpi-unit{font-family:var(--disp); font-weight:800; font-size:1.1rem;
  color:#5E6779; letter-spacing:-.02em; padding-bottom:4px}
.kpi-tag{margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:.8rem; font-weight:700; border-radius:999px; padding:7px 14px}
.kpi-tag[data-v="good"]{background:#D8F7E7; color:#06492C}
.kpi-tag[data-v="ok"]{background:#FFF0CC; color:#5A4100}
.kpi-tag[data-v="bad"]{background:#FFE0DC; color:#8A1409}
.kpi-tag i{width:8px; height:8px; border-radius:50%; background:currentColor; display:block}
.kpi-cap{width:100%; margin:6px 0 0; font-size:.82rem; color:#5E6779; line-height:1.45}

/* download row: equal tiles, label first, icon as support */
html body.qrcdr .placeresult .pulls,
html body.qrcdr .wrapresult .d-grid{
  display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px!important; margin-top:16px;
}
html body.qrcdr .placeresult .btn:not(.generate_qrcode){
  flex-direction:column; gap:7px; padding:14px 8px!important;
  font-size:.78rem!important; font-weight:700!important; letter-spacing:.04em;
  text-transform:uppercase; min-height:76px!important; border-radius:14px!important;
}
/* QRcdr ships its export buttons as icon images. They were rendering
   at wildly different sizes; pin them so the row reads as one set. */
html body.qrcdr .placeresult .btn img,
html body.qrcdr .placeresult .btn svg{
  width:26px!important; height:26px!important; object-fit:contain; display:block; margin:0 auto;
}
@media(max-width:1200px){
  html body.qrcdr .placeresult .pulls,
  html body.qrcdr .wrapresult .d-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* the tab row: larger targets, clearer icons */
body.qrcdr .nav-pills .nav-link{padding:12px 18px; font-size:.9rem; gap:9px}
body.qrcdr .nav-pills .nav-link i,
body.qrcdr .nav-pills .nav-link svg{font-size:1.05rem; width:18px; height:18px; opacity:1}

/* the option accordions: bigger, with the icon carrying weight */
html body.qrcdr .accordion .btn-outline-primary,
html body.qrcdr .accordion .btn{
  min-height:58px!important; font-size:1rem!important; gap:11px;
  display:flex!important; align-items:center!important; justify-content:center!important;
}
html body.qrcdr .accordion .btn i,
html body.qrcdr .accordion .btn svg{font-size:1.15rem; width:20px; height:20px}

:root[data-theme="light"] .kpi{border-top-color:#DFE4ED}
:root[data-theme="light"] .kpi-num{color:#0A0D12}

/* ============================================================
   LIGHT MODE, SECOND PASS
   Rules that still assumed a dark page. Each is tokenised rather
   than duplicated per theme, so there is one source of truth.
   ============================================================ */

/* the pill/eyebrow carried a hardcoded dark translucent fill, so in
   light mode it was a dark chip with muted text on a pale page */
.pill,.eyebrow{background:var(--chip-bg); border-color:var(--edge-ui); color:var(--text-muted)}
:root{--chip-bg:rgba(13,16,23,.72)}
:root[data-theme="light"]{--chip-bg:#FFFFFF}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){--chip-bg:#FFFFFF}
}

/* site.css pins several headings to white for the old dark-only hero */
html body .hero h1,html body .art-hero-cap h1{color:var(--text)}
html body .hero h1 em{color:transparent; -webkit-text-stroke:1.5px var(--text)}
html body .section--dark h1,html body .section--dark h2,
html body .section--dark h3,html body .art-hero-cap h1{color:#fff}
html body .section--dark .eyebrow{color:#5BEDAD}

/* the stat blocks and category chips read from --accent, which is a
   mid blue: 2.8:1 on a light page. Large display numerals need 3:1,
   small caps labels need 4.5:1. */
.num,.bs-cat,.kpi-num{color:var(--text)}
.lbl{color:var(--text-muted)}
.bs-cat{color:var(--accent-ink,var(--accent))}
:root{--accent-ink:#7FB0FF}
:root[data-theme="light"]{--accent-ink:#1E4FBF}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){--accent-ink:#1E4FBF}
}

/* accordion labels inherited white from the dark build */
.vertical-middle,html body.qrcdr .accordion .btn span{color:inherit}

/* ============================================================
   LIGHT MODE, THIRD PASS — the root cause and the holdouts

   .section--dark read var(--ink). That token now flips to #F4F6FA in
   light mode, so a section whose whole job is to be dark turned pale
   while keeping its white text. Anything intentionally dark must use
   a fixed value, not a theme token.
   ============================================================ */
.section.section--dark,.section--dark,.motion-film,.guide-dark{
  background:#12151C!important; color:#fff!important;
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
.guide-dark h2,.guide-dark h3{color:#fff!important}
.section--dark p,.guide-dark p{color:#C3CAD8!important}
.section--dark .eyebrow,.guide-dark .eyebrow{
  color:#5BEDAD!important; background:rgba(25,29,38,.72)!important; border-color:#707E9A!important;
}
.section--dark a:not(.btn),.guide-dark a:not(.btn){color:#9CC3FF!important}

/* the hero headline: site.css pins .hero h1 to #fff and unify.css
   re-asserts it under body.qrcdr, so the token needs that prefix */
html body.qrcdr .hero h1,html body .hero h1,
html body.qrcdr .hero-two h1,html body .hero-two h1{color:var(--text)!important}
html body.qrcdr .hero h1 em,html body .hero h1 em{
  color:transparent!important; -webkit-text-stroke:1.5px var(--text);
}

/* accordion labels were white from the dark-only build */
html body.qrcdr .accordion .btn .vertical-middle,
html body.qrcdr .vertical-middle,
html body.qrcdr .accordion .btn{color:var(--text)!important}

/* stat blocks: big numerals need 3:1, their labels 4.5:1 */
html body .num,html body .sb .num{color:var(--text)!important}
html body .lbl,html body .sb .lbl{color:var(--text-muted)!important}

/* amber section heads were #B97700 on a pale page: 3.68:1 */
html body .ghead,html body .bs-cat{color:var(--head-ink)!important}
:root{--head-ink:#FFC94A}
:root[data-theme="light"]{--head-ink:#8A5600}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){--head-ink:#8A5600}
}

/* ============================================================
   FOURTH PASS — overcorrections from the third

   I swapped .num/.lbl to the theme text colour, but they live inside
   .section--dark, which is dark in BOTH themes. Dark text on a dark
   panel. The same applies to the article hero, which is a dark SVG
   banner: its chip must not take the light theme's white fill.
   ============================================================ */
html body .section--dark .num,html body .guide-dark .num{color:#fff!important}
html body .section--dark .lbl,html body .guide-dark .lbl{color:#C3CAD8!important}
html body .section--dark .ghead,html body .section--dark .bs-cat{color:#FFC94A!important}

/* The article hero used to be a dark SVG banner with the type laid
   over it, so everything in it was pinned white regardless of theme.
   It is a text hero on the page ground now (REVISION 4), and those
   pins have been removed rather than overridden - the !important
   background on the eyebrow was beating the category chip, and the
   border-color was still the retired #5A6782. The replacements live
   with the rest of REVISION 4. */
/* the key-takeaways label sits on a dark card */
html body .tk-label{color:#FFC94A!important}

/* ============================================================
   FIFTH PASS — light cards still holding white text
   .card and .takeaways resolve to #F4F6FA in light mode, but their
   own page CSS pins the text to white or #EAEEF3. The card is light,
   so the text follows the theme. Scoped with :not(.section--dark ...)
   so the genuinely dark panels are untouched.
   ============================================================ */
html body :not(.section--dark):not(.guide-dark) > .card h2,
html body :not(.section--dark):not(.guide-dark) > .card h3,
html body :not(.section--dark):not(.guide-dark) > .card h4,
html body .card > h2,html body .card > h3,html body .card > h4{color:var(--text)}
html body .card p,html body .card li,html body .card dd,
html body .takeaways p,html body .takeaways li{color:var(--text-muted)}
html body .takeaways{background:var(--surface); border:1px solid var(--border)}
html body .takeaways .tk-label{color:var(--head-ink)!important}
/* dark panels keep their light text */
html body .section--dark .card p,html body .section--dark .card li,
html body .guide-dark .card p,html body .guide-dark .card li{color:#C3CAD8}
html body .section--dark .card h2,html body .section--dark .card h3,
html body .guide-dark .card h2,html body .guide-dark .card h3{color:#fff}



/* These pages carry their own inline <style>, which the browser
   applies after the linked sheet at equal specificity. The card text
   rules need !important to land. */
html body .card > h2,html body .card > h3,html body .card > h4{color:var(--text)!important}
html body .card > p,html body .card p,html body .card li{color:var(--text-muted)!important}
html body .section--dark .card > h2,html body .section--dark .card > h3,
html body .guide-dark .card > h2,html body .guide-dark .card > h3{color:#fff!important}
html body .section--dark .card p,html body .section--dark .card li,
html body .guide-dark .card p,html body .guide-dark .card li{color:#C3CAD8!important}



/* The dark panels carry .guide-dark ON the card element, not on an
   ancestor, so a descendant selector never matched them and the
   light-card rule above forced dark text onto a dark panel. */
html body .card.guide-dark,html body .card.section--dark{background:#191D26!important}
html body .card.guide-dark > h2,html body .card.guide-dark > h3,
html body .card.guide-dark h2,html body .card.guide-dark h3{color:#fff!important}
html body .card.guide-dark p,html body .card.guide-dark li,
html body .card.guide-dark dd{color:#C3CAD8!important}
html body .card.guide-dark .eyebrow{color:#5BEDAD!important; background:rgba(13,16,23,.72)!important}
html body .card.guide-dark a:not(.btn){color:#9CC3FF!important}



/* Panels that declared themselves dark with an inline
   background:var(--ink). That token flips light, so they are marked
   .is-dark and pinned, exactly like .section--dark. */
html body .is-dark{background:#191D26!important; border-color:#2A3040!important}
html body .is-dark,html body .is-dark p,html body .is-dark li{color:#C3CAD8!important}
html body .is-dark h2,html body .is-dark h3,html body .is-dark h4,
html body .is-dark strong,html body .is-dark b{color:#fff!important}
html body .is-dark .eyebrow{color:#5BEDAD!important; background:rgba(13,16,23,.72)!important}
html body .is-dark a:not(.btn){color:#9CC3FF!important}

/* a primary button inside a dark panel must not take light mode's
   dark fill - it would vanish into the panel (1.03:1) */
html body .is-dark .btn.btn--primary,
html body .section--dark .btn.btn--primary,
html body .guide-dark .btn.btn--primary,
html body .card.guide-dark .btn.btn--primary{
  background:#fff!important; color:#12151C!important; border-color:#fff!important;
}
html body .is-dark .btn.btn--primary:hover,
html body .section--dark .btn.btn--primary:hover,
html body .guide-dark .btn.btn--primary:hover,
html body .card.guide-dark .btn.btn--primary:hover{
  background:#28E08A!important; color:#04140C!important; border-color:#28E08A!important;
}



/* ============================================================
   DARK PANELS, FINAL — specificity against the generated mirror.
   The mirror emits :root:not([data-theme="dark"]):not([data-theme="light"]) X,
   which scores (0,3,0) before the element part, outranking plain
   "html body .is-dark X". Matching that prefix puts these ahead of
   it whatever the source order.
   ============================================================ */
:root:not([data-theme="dark"]) .is-dark .btn.btn--primary,
:root:not([data-theme="dark"]) .section--dark .btn.btn--primary,
:root:not([data-theme="dark"]) .guide-dark .btn.btn--primary,
:root:not([data-theme="dark"]) .card.guide-dark .btn.btn--primary{
  background:#fff!important; color:#12151C!important; border-color:#fff!important;
}
:root:not([data-theme="dark"]) .is-dark .eyebrow,
:root:not([data-theme="dark"]) .section--dark .eyebrow,
:root:not([data-theme="dark"]) .guide-dark .eyebrow,
:root:not([data-theme="dark"]) .card.guide-dark .eyebrow{
  color:#5BEDAD!important; background:rgba(25,29,38,.72)!important; border-color:#707E9A!important;
}
:root:not([data-theme="dark"]) .is-dark p,
:root:not([data-theme="dark"]) .is-dark li,
:root:not([data-theme="dark"]) .section--dark p{color:#C3CAD8!important}
:root:not([data-theme="dark"]) .is-dark h2,
:root:not([data-theme="dark"]) .is-dark h3,
:root:not([data-theme="dark"]) .section--dark h2,
:root:not([data-theme="dark"]) .section--dark h3{color:#fff!important}

/* the active carousel dot was pinned white: invisible on a light page */
.bs-dots button{background:var(--edge-ui)}
.bs-dots button.on,.bs-dots button[aria-selected="true"]{background:var(--text)}
:root:not([data-theme="dark"]) .bs-dots button.on,
:root:not([data-theme="dark"]) .bs-dots button[aria-selected="true"]{background:var(--text)}

/* The KPI sits on the result card, which is white in both themes, so
   its figure is always dark. My earlier .num/.kpi-num token swap made
   it follow the theme and it went white-on-white in dark mode. */
html body .kpi-num,html body .placeresult .kpi-num,
:root:not([data-theme="light"]) .kpi-num{color:#12151C!important}
html body .kpi-cap,html body .kpi-unit{color:#5E6779!important}

/* site.css pins the rail to left:0; with right:0 from the tab styling
   the element stretched the full viewport width instead of hugging
   the right edge. */
html body .social-rail{left:auto!important; right:0!important; width:auto!important}

/* ============================================================
   REVISION 2 — picker grid, stripe, KPI, carousel, footer head
   Everything below loads after the rules it corrects, so the
   corrections win on order as well as specificity.
   ============================================================ */

/* ── 1. THE OPTION PICKERS ────────────────────────────────────
   The defect: `html body.qrcdr .accordion .btn{display:flex}` was
   written for the three accordion HEADER buttons (Colors, Design,
   Frame). But `.btn` also matches every swatch label inside
   `.styleselecta`, and `display:flex` is BLOCK-level — so each 40px
   swatch claimed a full row. Three pickers at 20-26 swatches each
   produced three 44px-wide, 1240-1612px-tall columns of empty tiles
   laid over the Design and Frame panels.

   The header rule is re-scoped to the thing that actually opens a
   panel — [data-bs-toggle="collapse"] — and the swatches get a real
   wrapping grid. `.btn-check` is position:absolute and clipped
   (verified in the DOM, not assumed), so the radios are out of flow
   and every grid cell holds exactly one swatch.
   ------------------------------------------------------------- */
/* Order matters here. `.qrcdr .accordion .btn` and
   `.qrcdr .accordion [data-bs-toggle]` have identical specificity
   (0,3,2), so whichever is written last wins. The general rule goes
   first and the header rule restores the bar height after it. */
html body.qrcdr .accordion .btn{
  min-height:0!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
}
html body.qrcdr .accordion [data-bs-toggle="collapse"],
html body.qrcdr .accordion .accordion-button,
html body.qrcdr .accordion .card-header .btn{
  min-height:58px!important; width:100%!important; font-size:1rem!important; gap:11px;
  display:flex!important; align-items:center!important; justify-content:center!important;
}
html body.qrcdr .accordion [data-bs-toggle="collapse"] i,
html body.qrcdr .accordion [data-bs-toggle="collapse"] svg{
  font-size:1.15rem; width:20px!important; height:20px!important;
}

/* the swatch grid */
html body.qrcdr .styleselecta,
html body.qrcdr .btn-group-toggle.styleselecta{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(54px,1fr));
  gap:8px!important; width:100%!important; max-width:100%!important;
  margin:0!important;
}
html body.qrcdr .styleselecta .btn,
html body.qrcdr .accordion .styleselecta .btn{
  width:100%!important; aspect-ratio:1/1; height:auto!important;
  min-height:0!important; min-width:0!important;
  padding:6px!important; margin:0!important;
  border-radius:12px!important;
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  background:var(--ink2)!important; border:1px solid var(--edge-ui)!important;
  color:var(--text)!important;
  transition:background .14s, border-color .14s, color .14s;
}
/* the SVGs inside carry mixed width/height attributes (38, 32, 14, 48x56)
   with square viewBoxes, so one size here renders them consistently */
html body.qrcdr .styleselecta .btn svg,
html body.qrcdr .accordion .styleselecta .btn svg{
  width:30px!important; height:30px!important; display:block;
}
html body.qrcdr .styleselecta .btn:hover{
  background:var(--ink3)!important; border-color:var(--fog)!important;
}
/* selection is carried by inversion, not colour alone, so it survives
   greyscale and forced-colors */
html body.qrcdr .btn-check:checked + .btn,
html body.qrcdr .styleselecta .btn-check:checked + .btn,
html body.qrcdr .styleselecta .btn.active{
  background:var(--text)!important; color:var(--ink)!important;
  border-color:var(--text)!important;
}
html body.qrcdr .btn-check:focus-visible + .btn{
  outline:3px solid var(--g); outline-offset:2px;
}
@media (forced-colors:active){
  html body.qrcdr .btn-check:checked + .btn{outline:3px solid CanvasText; outline-offset:-3px}
}

/* the small icon buttons in the background-image and logo rows were
   stacked by the same bug; give them a row of their own */
html body.qrcdr .custom-file + .btn,
html body.qrcdr .select-image-btn,
html body.qrcdr .remove-bg-image,
html body.qrcdr .export-bg-image{
  width:auto!important; min-width:52px; margin:0 8px 8px 0!important;
}
html body.qrcdr .logoselecta,
html body.qrcdr .col-12 > .btn-group-toggle:not(.styleselecta){
  display:flex!important; flex-wrap:wrap!important; gap:8px;
}

/* the picker label above each grid */
html body.qrcdr .accordion label,
html body.qrcdr .collapse > label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-muted);
}

/* ── 2. THE DIVIDER ───────────────────────────────────────────
   The measurement rule that lived here was the second attempt at
   this divider and it was still too loud. Both it and the
   original animated dash are gone; what replaces them is in
   REVISION 4, and it is a fade rather than a mark. Removing
   these rules rather than overriding them matters: they carried
   !important on content and background-image, so a third rule
   lower down could not switch them off.
   ------------------------------------------------------------- */

/* ── 3. THE CONTRAST READOUT ──────────────────────────────────
   The figure is computed from the live colour inputs; this only
   changes how much room it gets. The icon is a half-filled disc —
   the conventional contrast glyph — so the panel is readable at a
   glance before the number is.
   ------------------------------------------------------------- */
.kpi{
  display:grid!important;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"ico read tag" "cap cap cap";
  align-items:center; gap:4px 16px;
  margin:20px 0 4px!important; padding-top:20px!important;
  border-top:1px solid var(--line)!important;
}
.kpi-ico{
  grid-area:ico; width:52px; height:52px; border-radius:15px;
  display:grid; place-items:center;
  background:#EEF2F9; color:#12151C; border:1px solid #DFE4ED;
}
.kpi-ico svg{width:28px; height:28px; display:block}
.kpi-read{grid-area:read; display:block; min-width:0}
.kpi-read .kpi-num,.kpi-read .kpi-unit{display:inline}
.kpi-num{
  font-family:var(--disp)!important; font-weight:800!important;
  letter-spacing:-.05em!important; line-height:.82!important;
  font-size:clamp(3rem,2rem + 3.2vw,4.3rem)!important;
}
.kpi-unit{
  font-family:var(--disp)!important; font-weight:800!important;
  font-size:1.5rem!important; letter-spacing:-.03em;
}
.kpi-lab{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:#5E6779; display:block; margin-bottom:7px;
}
.kpi-tag{
  grid-area:tag; margin-left:0!important; justify-self:end;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.86rem;
  padding:9px 15px; border-radius:999px; white-space:nowrap;
}
.kpi-tag i{width:9px; height:9px; border-radius:50%; background:currentColor; display:block; flex:none}
.kpi-cap{
  grid-area:cap; width:100%; margin:14px 0 0!important;
  font-size:.84rem; line-height:1.5;
}
/* the readout sits on the white result card in both themes, so its
   own colours are pinned rather than tokenised */
.kpi-ico[data-v="good"]{background:#D8F7E7; border-color:#A6E7C8; color:#06492C}
.kpi-ico[data-v="ok"]{background:#FFF0CC; border-color:#EFD79A; color:#5A4100}
.kpi-ico[data-v="bad"]{background:#FFE0DC; border-color:#F3BDB6; color:#8A1409}
@media (max-width:420px){
  .kpi{grid-template-columns:auto 1fr; grid-template-areas:"ico read" "tag tag" "cap cap"}
  .kpi-tag{justify-self:start; margin-top:10px!important}
}

/* the same readout in the hero label card */
.hero-label .meta{
  display:grid!important; grid-template-columns:auto 1fr auto; align-items:center;
  gap:4px 14px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
}
.hero-label .meta .ratio{
  font-family:var(--disp); font-weight:800; letter-spacing:-.05em;
  font-size:clamp(2.4rem,1.8rem + 2vw,3.2rem); line-height:.85; color:#12151C;
}
.hero-label .meta .verdict{
  justify-self:end; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.84rem;
  padding:8px 14px; border-radius:999px; background:#D8F7E7; color:#06492C;
}
.hero-label .meta .meta-read{display:block; min-width:0}
.hero-label .meta small{
  display:block; margin-bottom:7px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:#5E6779;
}

/* ── 4. THE ARTICLE CAROUSEL ──────────────────────────────────
   The arrows were absolutely positioned at left:14px / right:14px
   and vertically centred, which put them on top of the headline and
   body copy. They move to a control row along the bottom of the
   card, where they sit beside the dots instead of over the text.
   The dots were 36x24 filled rectangles; they are dots again.
   ------------------------------------------------------------- */
.blogslider{position:relative; overflow:hidden; border-radius:18px}
.bs-slide{padding-bottom:92px!important; min-height:0!important}
.bs-slide h3{line-height:1.1!important; margin-bottom:.7rem!important; max-width:26ch}
.bs-slide p{margin-bottom:1.1rem!important}
.bs-slide .bs-more{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--body); font-weight:600; font-size:.92rem;
}

.bs-arrow,.bs-arrow.prev,.bs-arrow.next{
  position:absolute!important; top:auto!important; bottom:24px!important;
  transform:none!important;
  width:46px!important; height:46px!important; border-radius:999px!important;
  display:grid!important; place-items:center!important;
  font-size:1.35rem!important; line-height:1!important;
  background:var(--ink2)!important; color:var(--text)!important;
  border:1px solid var(--edge-ui)!important;
}
.bs-arrow.prev{left:auto!important; right:82px!important}
.bs-arrow.next{right:24px!important; left:auto!important}
.bs-arrow:hover{background:var(--ink3)!important; border-color:var(--fog)!important}

.bs-dots{
  position:absolute!important; bottom:36px!important;
  left:clamp(1.5rem,4vw,2.6rem)!important; transform:none!important;
  display:flex!important; gap:8px!important; align-items:center;
}
.bs-dots button{
  width:9px!important; height:9px!important; padding:0!important;
  border-radius:999px!important; border:0!important;
  background:var(--edge-ui)!important; background-clip:border-box!important;
  transition:width .18s, background .18s;
}
.bs-dots button.on{width:28px!important; background:var(--text)!important}
@media (max-width:640px){
  .bs-slide{padding-bottom:84px!important}
  .bs-arrow,.bs-arrow.prev,.bs-arrow.next{display:grid!important; width:42px!important; height:42px!important}
  .bs-arrow.prev{right:74px!important}
}

/* ── 5. THE FOOTER HEAD ───────────────────────────────────────
   .foot-top is display:grid, but site.css supplies a two-column
   grid-template-columns that my rule never overrode — so the
   centred Pixloud head rendered as two ragged columns. One column,
   centred, measure-limited.
   ------------------------------------------------------------- */
.foot-top{
  grid-template-columns:1fr!important;
  max-width:68ch; margin-inline:auto!important;
  justify-items:center!important; text-align:center!important;
  gap:16px!important;
}
.foot-top .foot-sub{margin-inline:auto!important; text-align:center!important}
/* the wordmark is an <a>, so .site-footer a{color:var(--text-muted)}
   was greying it out */
.site-footer a.foot-mark,.foot a.foot-mark{color:var(--text)!important}
.site-footer a.foot-mark:hover{color:var(--text)!important}
.foot-social{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.foot-social a{width:44px; height:44px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center}
.foot-social a svg{width:19px; height:19px}

/* ── 6. THE HERO FIELD ────────────────────────────────────────
   On the near-black base the bokeh tiles were barely visible; on the
   lifted base they read as muddy red and green blotches. Dropping
   the opacity keeps the texture and loses the stain.
   ------------------------------------------------------------- */
.hero .field{opacity:.075!important}
:root[data-theme="light"] .hero .field{opacity:.09!important}
.hero .glow{opacity:.5}

/* ── 7. THE LIGHT TWIN FOR THE PICKERS ────────────────────────
   :root[data-theme="light"] html body.qrcdr .accordion .btn pins
   background/color/border at (0,6,2), which outranks the swatch
   rules above. The selected and hover states need the same weight
   or they silently lose in light mode — which is exactly the class
   of miss that produced 276 failures the first time round.
   ------------------------------------------------------------- */
:root[data-theme="light"] body.qrcdr .styleselecta .btn:hover{
  background:#E9EDF4!important; border-color:#49536A!important;
}
:root[data-theme="light"] body.qrcdr .btn-check:checked + .btn,
:root[data-theme="light"] body.qrcdr .styleselecta .btn-check:checked + .btn,
:root[data-theme="light"] body.qrcdr .styleselecta .btn.active{
  background:#0A0D12!important; color:#FFFFFF!important; border-color:#0A0D12!important;
}

/* the hero label's verdict pill tracks the same three states */
.hero-label .meta .verdict[data-v="good"]{background:#D8F7E7; color:#06492C}
.hero-label .meta .verdict[data-v="ok"]{background:#FFF0CC; color:#5A4100}
.hero-label .meta .verdict[data-v="bad"]{background:#FFE0DC; color:#8A1409}



/* ── 8. THE SIDE NOTE ─────────────────────────────────────────
   Replaces template/sidebar.php's red "Important Note" heading and
   yellow contrast strip, which duplicated the readout above it in
   vaguer language. Styled as a quiet card so it reads as reference,
   not as an alarm.
   ------------------------------------------------------------- */
.side-note{
  margin-top:20px; padding:22px 22px 20px;
  background:var(--ink2); border:1px solid var(--edge);
  border-radius:16px; text-align:left;
}
.side-note h3{
  font-family:var(--mono)!important; font-size:.68rem!important;
  font-weight:500!important; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-muted)!important; margin:0 0 16px!important;
}
.side-note ul{list-style:none; margin:0; padding:0; display:grid; gap:15px}
.side-note li{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  font-size:.88rem; line-height:1.5; color:var(--text-muted);
}
.side-note li b{color:var(--text); font-weight:600}
.sn-ico{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  background:var(--ink3); border:1px solid var(--edge-ui); color:var(--text);
}
.sn-ico svg{width:17px; height:17px; display:block}
.sn-foot{
  margin:16px 0 0!important; padding-top:15px;
  border-top:1px solid var(--edge);
  font-size:.82rem!important; line-height:1.5; color:var(--text-muted)!important;
}

/* the background-image row stacked because its buttons were caught by
   the same display:flex; keep them on one line */
html body.qrcdr .custom-file{margin-bottom:10px}
html body.qrcdr .logoselecta,
html body.qrcdr .bgimageselecta,
html body.qrcdr .col-12 .select-image-btn,
html body.qrcdr .col-12 .remove-bg-image,
html body.qrcdr .col-12 .export-bg-image{vertical-align:top}
html body.qrcdr .select-image-btn,
html body.qrcdr .remove-bg-image,
html body.qrcdr .export-bg-image,
html body.qrcdr .custom-watermark{
  width:52px!important; height:52px!important; padding:0!important;
  border-radius:12px!important; margin:0 8px 0 0!important;
}



/* ── 9. SPECIFICITY AGAINST THE GENERATED MIRROR ──────────────
   The mirror emits `:root:not([data-theme="dark"]):not([data-theme="light"]) .btn.btn--primary`
   at (0,5,0) and, being generated last, it is appended at the end of
   this file. The dark-panel override above is also (0,5,0), so in
   SYSTEM-light it lost on source order alone and a primary button
   inside an always-dark panel took light mode's dark fill: #0A0D12
   on #191D26, 1.15:1.

   Rather than fight for position in a file whose tail is machine
   generated, these win on specificity and are order-independent.
   `html:root` is legal and adds an element to the count; `:root html`
   would never match, since :root IS the html element.
   ------------------------------------------------------------- */
html:root:not([data-theme="dark"]) body .is-dark .btn.btn--primary,
html:root:not([data-theme="dark"]) body .section--dark .btn.btn--primary,
html:root:not([data-theme="dark"]) body .guide-dark .btn.btn--primary,
html:root:not([data-theme="dark"]) body .motion-film .btn.btn--primary,
html:root:not([data-theme="dark"]) body .card.guide-dark .btn.btn--primary{
  background:#FFFFFF!important; color:#12151C!important; border-color:#FFFFFF!important;
}
html:root:not([data-theme="dark"]) body .is-dark .btn.btn--primary:hover,
html:root:not([data-theme="dark"]) body .section--dark .btn.btn--primary:hover,
html:root:not([data-theme="dark"]) body .guide-dark .btn.btn--primary:hover,
html:root:not([data-theme="dark"]) body .card.guide-dark .btn.btn--primary:hover{
  background:#28E08A!important; color:#04140C!important; border-color:#28E08A!important;
}

/* .btn--onDark is a white pill built for a dark section. site.css pins
   it white unconditionally, so on a light page it became white on
   #F4F6FA — 1.08:1, a button with no visible edge at all. In light
   themes it takes the ordinary dark fill unless it really is sitting
   inside a dark panel.

   This one is scoped to [data-theme="light"] rather than
   :not([data-theme="dark"]). The first draft used the negation, which
   is also true in SYSTEM mode on a dark OS — so the light treatment
   painted a #0A0D12 pill onto a #12151C panel, 1.07:1, swapping one
   invisible button for another. mirror_light.py generates the
   system-light twin from the explicit rule, so writing it this way
   covers both light paths and neither dark one. */
:root[data-theme="light"] body .btn.btn--onDark{
  background:#0A0D12!important; color:#FFFFFF!important; border-color:#0A0D12!important;
}
:root[data-theme="light"] body .btn.btn--onDark:hover{
  background:#04603A!important; color:#FFFFFF!important; border-color:#04603A!important;
}
:root[data-theme="light"] body .is-dark .btn.btn--onDark,
:root[data-theme="light"] body .section--dark .btn.btn--onDark,
:root[data-theme="light"] body .guide-dark .btn.btn--onDark,
:root[data-theme="light"] body .card.guide-dark .btn.btn--onDark{
  background:#FFFFFF!important; color:#10151B!important; border-color:#FFFFFF!important;
}



/* ── 10. THE CLOSED DRAWER WAS STILL FOCUSABLE ────────────────
   site.js closes the mobile menu with `dr.hidden = true`, which is
   the right call — the hidden attribute takes an element out of the
   accessibility tree and out of the tab order. But it only does that
   through the UA rule `[hidden]{display:none}`, and site.css sets
   `.drawer{display:flex}` at higher specificity. The attribute was
   being overruled, so the closed menu stayed rendered at
   right:-335px: invisible, off the page, and still reachable by Tab.
   A keyboard user tabbing through the header fell into a menu they
   could not see.
   ------------------------------------------------------------- */
.drawer[hidden],.scrim[hidden],[hidden]{display:none!important}



/* ── 11. THE TICKER'S PAUSE BUTTON ────────────────────────────
   .belt-pause had no rule anywhere, so it sat in normal flow after a
   3099px-wide marquee row — tabbable, and 2700px off the right of
   the screen. A keyboard user would reach a control they could not
   see or reason about. It belongs pinned to the belt.
   ------------------------------------------------------------- */
.belt{position:relative}
.belt-pause{
  position:absolute; right:12px; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:999px; padding:0;
  display:grid; place-items:center;
  font-size:.62rem; line-height:1; letter-spacing:1px;
  background:var(--ink2); color:var(--text);
  border:1px solid var(--edge-ui); cursor:pointer;
}
.belt-pause:hover{background:var(--ink3); border-color:var(--fog)}
@media (max-width:640px){ .belt-pause{right:8px; width:32px; height:32px} }

/* the slider holds five articles side by side and shows one. The four
   out of view stay in the tab order unless they are made inert, so
   tabbing out of the visible card used to land on links scrolled
   1000px to the right. The script sets [inert] on the hidden ones;
   this keeps them out of the pointer path as well. */
.bs-slide[inert]{pointer-events:none}



/* ============================================================
   REVISION 3 — DEPTH
   Light mode was flat: white cards on a white page, separated only
   by a hairline. Sections and cards now carry gradients.

   One rule governs how they are written. The contrast detector
   composites background-COLOR; it cannot see a gradient, which is
   painted as a background-image. So every gradient here is paired
   with a background-color set to its DARKEST stop — the worst case
   for the dark text sitting on it. The measurement therefore stays
   conservative: the real rendering is always lighter, and never
   worse, than the number the sweep reports.
   ============================================================ */

/* ── light ──────────────────────────────────────────────────── */
:root[data-theme="light"] body{
  background-color:#EDF1F8;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F3F6FB 420px,#EDF1F8 100%);
  background-attachment:fixed;
}
:root[data-theme="light"] .section{
  background-color:#EDF1F8;
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(237,241,248,.55));
}
:root[data-theme="light"] .section--alt{
  background-color:#E6ECF7;
  background-image:
    radial-gradient(120% 90% at 12% 0%,rgba(110,158,255,.18),transparent 62%),
    radial-gradient(90% 80% at 92% 18%,rgba(40,224,138,.14),transparent 60%),
    linear-gradient(180deg,#FFFFFF,#E6ECF7);
  border-block:1px solid #DFE4ED;
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .blog-card,
:root[data-theme="light"] .feat-main,
:root[data-theme="light"] .blogslider{
  background-color:#F4F7FC;
  background-image:linear-gradient(162deg,#FFFFFF 0%,#F7F9FD 46%,#F1F5FB 100%);
  border:1px solid #DCE3EF;
  box-shadow:0 1px 2px rgba(16,26,48,.04), 0 10px 28px -18px rgba(16,26,48,.28);
}
:root[data-theme="light"] .card:hover,
:root[data-theme="light"] .blog-card:hover,
:root[data-theme="light"] .feat-main:hover{
  border-color:#C3CEE2;
  box-shadow:0 2px 4px rgba(16,26,48,.05), 0 20px 44px -22px rgba(16,26,48,.34);
}
/* the section heading gets a wash behind it so the eye has somewhere
   to land on an otherwise white page */
:root[data-theme="light"] .sec-head{position:relative}
:root[data-theme="light"] .sec-head::before{
  content:""; position:absolute; left:50%; top:-28%;
  width:min(620px,86%); height:190%; transform:translateX(-50%);
  background:radial-gradient(60% 55% at 50% 50%,rgba(110,158,255,.20),transparent 70%);
  pointer-events:none; z-index:-1;
}

/* ── dark ───────────────────────────────────────────────────── */
:root[data-theme="dark"] body,
html:root:not([data-theme="light"]) body{
  background-color:#12151C;
  background-image:
    radial-gradient(90% 60% at 18% -8%,rgba(110,158,255,.10),transparent 58%),
    radial-gradient(70% 50% at 88% 4%,rgba(40,224,138,.07),transparent 56%);
  background-attachment:fixed;
}
html:root:not([data-theme="light"]) .section--alt{
  background-color:#191D26;
  background-image:
    radial-gradient(120% 90% at 10% 0%,rgba(110,158,255,.10),transparent 62%),
    radial-gradient(90% 80% at 92% 20%,rgba(40,224,138,.07),transparent 60%),
    linear-gradient(180deg,#1D2230,#191D26);
}
html:root:not([data-theme="light"]) .card,
html:root:not([data-theme="light"]) .blog-card,
html:root:not([data-theme="light"]) .feat-main,
html:root:not([data-theme="light"]) .blogslider{
  background-color:#191D26;
  background-image:linear-gradient(162deg,#1F2533 0%,#1A1F2A 52%,#171B24 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -26px rgba(0,0,0,.8);
}
html:root:not([data-theme="light"]) .card:hover,
html:root:not([data-theme="light"]) .blog-card:hover,
html:root:not([data-theme="light"]) .feat-main:hover{
  border-color:var(--edge-ui);
}
html:root:not([data-theme="light"]) .sec-head{position:relative}
html:root:not([data-theme="light"]) .sec-head::before{
  content:""; position:absolute; left:50%; top:-28%;
  width:min(620px,86%); height:190%; transform:translateX(-50%);
  background:radial-gradient(60% 55% at 50% 50%,rgba(110,158,255,.16),transparent 70%);
  pointer-events:none; z-index:-1;
}

/* ── the category label, both themes ────────────────────────── */
/* It was bare monospace text the size of a caption. As a chip it
   gives each card a spot of its own colour, which is what the page
   was missing. */
.bs-cat,.bc-cat,.blog-card .bc-cat{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:999px;
  font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  background:rgba(110,158,255,.14); border:1px solid rgba(110,158,255,.34);
}
:root[data-theme="light"] .bs-cat,:root[data-theme="light"] .bc-cat{
  background:#E4EBFB; border-color:#B9CCF4; color:#1E4FBF;
}

/* the article card's cover gets a hairline under it in both themes so
   the artwork reads as a plate rather than bleeding into the text */
.bc-cover,.feat-cover{border-bottom:1px solid var(--border)}



/* the slider card is now two columns: copy on the left, the article's
   own cover on the right, which is where the empty half was */
.bs-slide{
  display:grid!important; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,3vw,44px); align-items:center;
  padding:clamp(1.6rem,3vw,2.4rem)!important; padding-bottom:92px!important;
}
.bs-tx{min-width:0}
.bs-art{
  min-width:0; align-self:stretch; margin:-8px 0 -8px 0;
  border-radius:16px; overflow:hidden; border:1px solid var(--border);
  min-height:208px; position:relative;
}
.bs-art svg{position:absolute; inset:0; width:100%; height:100%}
@media (max-width:860px){
  .bs-slide{grid-template-columns:minmax(0,1fr)}
  .bs-art{min-height:150px; order:-1; margin:0}
}



/* the article hero's back link and category chip were two inline
   blocks in a block parent: .art-back ended at x=378 and the eyebrow
   started at x=378. Not an overlap, but no gap either, so they read
   as one collided lump. */
.art-hero-cap .art-back{margin-right:16px}
.art-hero-cap .art-back,.art-hero-cap .eyebrow{vertical-align:middle}
.art-hero-cap .wrap > .eyebrow{margin-bottom:4px}



/* ============================================================
   REVISION 4 — TEXT HEROES, AND A QUIET DIVIDER
   ============================================================ */

/* ── 1. THE DIVIDER ───────────────────────────────────────────
   Two attempts at this were both too loud: the original animated
   red/white/blue dash, and the measurement rule that replaced it.
   A divider's whole job is to be the least interesting thing on the
   page, and ticks across the full width are not that.

   What is left is a transition rather than a mark: the page ground
   dissolving into the footer ground over about 80px, with a single
   hairline where they meet. Nothing to read, nothing moving.
   ------------------------------------------------------------- */
/* site.css paints the divider with .stripe::before and animates it.
   Resetting with `all:unset` alone is not enough when the rule being
   switched off used !important, which both earlier versions did. */
.stripe::before,.stripe::after{
  content:none!important; display:none!important;
  background:none!important; animation:none!important;
}
.stripe{
  display:block!important; height:84px!important; width:100%!important;
  background-image:linear-gradient(180deg,transparent,var(--footer-bg))!important;
  border-bottom:1px solid var(--edge)!important;
  pointer-events:none;
}
@media (max-width:640px){ .stripe{height:56px!important} }

/* ── 2. THE ARTICLE HERO ──────────────────────────────────────
   Was a full-bleed illustration with the headline laid over it
   behind a dark scrim, which meant the type was white on every page
   regardless of theme and the picture had to stay dark enough to
   carry it. It now matches the index page: the type leads on the
   page's own ground and the motif sits in a contained plate beside
   it. Done entirely in CSS, so all 32 posts move together.
   ------------------------------------------------------------- */
.art-hero{
  position:relative!important; height:auto!important; min-height:0!important;
  overflow:visible!important; background:transparent!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(22px,3.4vw,52px); align-items:center;
  max-width:1200px; margin-inline:auto;
  padding:clamp(30px,4.4vw,64px) clamp(1rem,4vw,2rem) clamp(22px,3vw,40px);
}
/* the motif becomes a plate in the second column */
.art-hero > svg{
  position:static!important; order:2;
  width:100%!important; height:auto!important; aspect-ratio:16/10;
  border-radius:18px; border:1px solid var(--border);
  object-fit:cover; display:block;
}
/* the caption stops being an overlay */
.art-hero-cap{
  position:static!important; inset:auto!important; order:1;
  display:block!important; background:none!important; min-width:0;
}
.art-hero-cap .wrap{max-width:none!important; padding:0!important}

/* the type follows the theme now that it is on the page ground */
html body .art-hero,html body .art-hero-cap{color:var(--text)}
html body .art-hero-cap h1,html body .art-hero-cap h2{
  color:var(--text)!important;
  font-size:clamp(1.9rem,1.2rem + 2.3vw,3.1rem)!important;
  line-height:1!important; max-width:18ch; margin:14px 0 0!important;
}
html body .art-hero-cap .art-sub,html body .art-hero-cap p{
  color:var(--text-muted)!important; font-size:1.02rem; max-width:50ch;
  margin-top:14px!important;
}
html body .art-hero-cap .art-back{
  color:var(--text-muted)!important; display:inline-flex; align-items:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; text-decoration:none; margin:0 0 16px!important;
}
html body .art-hero-cap .art-back:hover{color:var(--text)!important; text-decoration:underline}
html body .art-meta,html body .art-meta *{color:var(--text-muted)!important}
html body .art-meta{margin-top:18px!important; font-family:var(--mono); font-size:.76rem;
  letter-spacing:.06em; text-transform:uppercase}
html body .art-meta a{color:var(--text)!important}
/* the back link and the chip now sit on separate lines, so the
   side-by-side spacing fix from before no longer applies */
.art-hero-cap .art-back{margin-right:0!important; display:block!important}
.art-hero-cap .wrap > .eyebrow{margin-bottom:0!important}

@media (max-width:820px){
  .art-hero{grid-template-columns:minmax(0,1fr); gap:22px}
  .art-hero > svg{order:1; aspect-ratio:16/8}
  .art-hero-cap{order:2}
  html body .art-hero-cap h1{max-width:none}
}

/* ── 3. THE CATEGORY CHIP ─────────────────────────────────────
   All 32 posts carried style="color:#FFB300" inline - one amber for
   five different categories, and amber text on a light page is not
   legible. The chip now takes the same colour as the motif beside
   it. Measured, both themes, text against its own tint:

     blue 6.01 / 4.88   green 6.71 / 6.94   red 5.37 / 4.53
     cyan 6.83 / 6.89   magenta 6.48 / 4.85
   ------------------------------------------------------------- */
html body .art-cat{
  display:inline-flex!important; align-items:center; gap:7px;
  padding:6px 13px!important; border-radius:999px!important;
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid transparent;
}
html body .art-cat[data-cat="guides"]   {background:rgba(110,158,255,.16); color:#6E9EFF!important; border-color:rgba(110,158,255,.34)}
html body .art-cat[data-cat="design"]   {background:rgba(40,224,138,.16);  color:#28E08A!important; border-color:rgba(40,224,138,.32)}
html body .art-cat[data-cat="marketing"]{background:rgba(255,95,82,.16);   color:#FF5F52!important; border-color:rgba(255,95,82,.34)}
html body .art-cat[data-cat="industry"] {background:rgba(63,216,232,.16);  color:#3FD8E8!important; border-color:rgba(63,216,232,.32)}
html body .art-cat[data-cat="tech"]     {background:rgba(229,115,216,.16); color:#E573D8!important; border-color:rgba(229,115,216,.32)}

:root[data-theme="light"] body .art-cat[data-cat="guides"]   {background:#E4EBFB; color:#1E4FBF!important; border-color:#B9CCF4}
:root[data-theme="light"] body .art-cat[data-cat="design"]   {background:#D8F7E7; color:#04603A!important; border-color:#A6E7C8}
:root[data-theme="light"] body .art-cat[data-cat="marketing"]{background:#FFE4E0; color:#B81F15!important; border-color:#F3BDB6}
:root[data-theme="light"] body .art-cat[data-cat="industry"] {background:#DCF3F7; color:#0A5A66!important; border-color:#A9DDE6}
:root[data-theme="light"] body .art-cat[data-cat="tech"]     {background:#F7E2F4; color:#8A2480!important; border-color:#E6BCDF}



/* ============================================================
   REVISION 5 — THE STICKY STACK
   The generator's code-type tabs were painting over the site header.

   Root cause, found by walking the cascade rather than the pixels:
   site.css styled the site header with a bare `.nav` selector, and
   Bootstrap's list component also uses the class `nav`. So

       .nav{position:sticky; top:0; z-index:100; height:var(--header-h)}

   was landing on <ul class="nav nav-pills nav-fill"> as well as on
   <header class="nav">. That one rule caused three separate faults:

     * the tab row became sticky at top:0 - the header's own slot -
       with a matching z-index, and being later in the DOM it won
     * it was forced to 74px, clipping its second row of pills
     * it took the header's background and bottom border

   That rule is now `header.nav`. Every one of the 51 elements with
   class="nav" in this project is a <header>, so the scoping is exact.

   Two things then still needed fixing, and neither was visible until
   the first one was:

     * nav.navbar.sticky-top (the live-preview column) carries
       Bootstrap's own z-index:1020, which outranked the header
     * neither sticky element has ever actually STUCK. A sticky box
       can only travel inside its containing block, and each exactly
       filled its parent - the tab list inside a 74px wrapper, the
       preview nav inside a column stretched to its own height. Zero
       travel. Fixing only the z-index would have hidden the overlap
       and left two sticky components that do not stick.
   ============================================================ */
html{scroll-padding-top:calc(var(--header-h) + 18px)}

/* the list itself goes back to being an ordinary list */
html body.qrcdr ul.nav-pills,
html body.qrcdr .nav-pills.nav-fill{
  position:static!important; top:auto!important; z-index:auto!important;
  height:auto!important; background:transparent!important;
  border:0!important; margin:0!important; padding:0!important;
}

/* the stickiness moves to the wrapper, whose containing block is the
   tall form row, so it has somewhere to travel. The panel styling
   lives here too - on the wrapper, not the list, because the wrapper
   is the box that stays pinned and anything transparent on it lets
   the form scroll through in the gap. :has() is Baseline widely
   available; without it the row is simply not sticky, which is a
   correct result rather than a broken one. */
@supports selector(:has(*)){
  html body.qrcdr .row > .col-12:has(> ul.nav-pills){
    position:sticky!important;
    top:var(--header-h)!important;      /* flush: no strip to see through */
    z-index:60!important;
    background:var(--ink2)!important;
    border:1px solid var(--edge)!important; border-top:0!important;
    border-radius:0 0 16px 16px!important;
    padding:12px!important;
    box-shadow:0 12px 26px -18px rgba(0,0,0,.6);
  }
  :root[data-theme="light"] body.qrcdr .row > .col-12:has(> ul.nav-pills){
    background:#FFFFFF!important; border-color:#DCE3EF!important;
    box-shadow:0 1px 2px rgba(16,26,48,.04), 0 12px 26px -18px rgba(16,26,48,.3);
  }
}

/* the live-preview column: below the header in the stack, and stopped
   from stretching to the form's full height so the sticky has travel */
html body.qrcdr .navbar.sticky-top,
html body.qrcdr nav.navbar.sticky-top{
  position:static!important; top:auto!important; z-index:auto!important;
}
html body.qrcdr .row > .col-lg-4.order-last{
  position:sticky!important;
  top:calc(var(--header-h) + 16px)!important;
  align-self:flex-start!important;
  height:max-content!important;
  z-index:50!important;
}



/* ── MOBILE: the sticky stack has to behave differently ───────
   Measured on a 390px phone: the tab panel wraps to five rows and
   stands 277px tall. Pinned under the header that is a third of an
   844px screen given over permanently to a tab switcher, and the
   section heading passes through the narrow band left over.

   On a phone the row becomes what a row of too many tabs should be:
   one line that scrolls sideways. 277px -> about 60px.

   The preview column stops being sticky below the point where the
   form and the preview stack. Full width and ~700px tall, pinning it
   would nail most of the screen in place.
   ------------------------------------------------------------- */
@media (max-width:991.98px){
  html body.qrcdr .row > .col-lg-4.order-last{
    position:static!important; height:auto!important; z-index:auto!important;
  }
}

@media (max-width:820px){
  html body.qrcdr .row > .col-12:has(> ul.nav-pills){
    padding:8px 0 8px 12px!important;
    border-radius:0 0 14px 14px!important;
    /* the strip runs to the right edge so the cut-off pill reads as
       "there is more this way" rather than as a layout fault */
    overflow:hidden!important;
    position:relative;
  }
  html body.qrcdr ul.nav-pills{
    /* 8px here against 10px on desktop. A sideways-scrolling strip
       wants the tighter rhythm - it fits one more chip in view, which
       is the cue that the row continues. This currently also happens
       to win on specificity (ul.nav-pills is (0,2,3) against the
       desktop rule's (0,2,2)); saying it on purpose so it is not
       resting on that accident. */
    gap:8px!important;
    display:flex!important; flex-wrap:nowrap!important;
    overflow-x:auto!important; overflow-y:hidden!important;
    scroll-snap-type:x proximity;
    scroll-padding-left:12px;
    gap:8px!important;
    padding-right:34px!important;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  html body.qrcdr ul.nav-pills::-webkit-scrollbar{display:none}
  /* .nav-fill sets flex:1 1 auto, which is what made them wrap */
  html body.qrcdr ul.nav-pills > *{
    flex:0 0 auto!important; width:auto!important; scroll-snap-align:start;
  }
  html body.qrcdr ul.nav-pills .nav-link{
    white-space:nowrap!important; padding:10px 14px!important;
  }
  /* a fade at the right edge: the affordance that says it scrolls */
  html body.qrcdr .row > .col-12:has(> ul.nav-pills)::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:38px;
    background:linear-gradient(90deg,transparent,var(--ink2));
    pointer-events:none;
  }
  :root[data-theme="light"] body.qrcdr .row > .col-12:has(> ul.nav-pills)::after{
    background:linear-gradient(90deg,transparent,#FFFFFF);
  }
}

/* a heading that scrolls under a sticky header needs room when it is
   jumped to by anchor */
h1,h2,h3,[id]{scroll-margin-top:calc(var(--header-h) + 84px)}



/* ============================================================
   REVISION 7 — THE CODE-TYPE PILLS, AND TWO TOKENS CONFUSED
   The pills carried two colours apiece: unify.css paints the icon
   with var(--accent) while the label stays muted, so every inactive
   chip was a bright blue glyph beside grey text. Fourteen of them in
   a row read as a scatter of blue marks rather than a set of tabs.
   The icon now takes the label's colour, so a chip is one thing.

   Measuring that turned up a second fault underneath it. These pills
   were bounded by --edge (#2A3040), the DECORATIVE hairline token,
   not --edge-ui, the control token - and their fill was the same
   colour as the panel behind them. Fill 1:1, border 1.28:1, where
   WCAG 1.4.11 asks 3:1 for the boundary of a control. The row looked
   like floating labels because, as surfaces, the pills were not
   there.

   Measured replacements:
     dark   panel #191D26, pill #222733, border #707E9A  4.13:1
            label #9AA3B5 on the pill                    5.89:1
     light  panel #FFFFFF, pill #F4F6FA, border #7C889C  3.58:1
            label #49536A on the pill                    7.11:1
   ============================================================ */
html body.qrcdr .nav-pills .nav-link i,
html body.qrcdr .nav-pills .nav-link svg,
html body.qrcdr .nav-pills .nav-link.active i,
html body.qrcdr .nav-pills .nav-link.active svg{
  color:currentColor!important; opacity:1;
}
html body.qrcdr .nav-pills{gap:10px!important}
html body.qrcdr .nav-pills .nav-link{
  background:var(--ink3)!important;
  border:1px solid var(--edge-ui)!important;
  color:var(--text-muted)!important;
}
html body.qrcdr .nav-pills .nav-link:hover{
  background:var(--ink2)!important; border-color:var(--fog)!important;
  color:var(--text)!important;
}
:root[data-theme="light"] body.qrcdr .nav-pills .nav-link{
  background:#F4F6FA!important; border-color:#7C889C!important; color:#49536A!important;
}
:root[data-theme="light"] body.qrcdr .nav-pills .nav-link:hover{
  background:#E9EDF4!important; border-color:#49536A!important; color:#0A0D12!important;
}
/* the selected tab keeps the full-contrast inversion it already had */
html body.qrcdr .nav-pills .nav-link.active{
  background:var(--text)!important; color:var(--ink)!important;
  border-color:var(--text)!important;
}

/* The share rail's four icon buttons each carried their own 1.28:1
   box inside a rail that already has a proper boundary - two frames
   around one control. The rail keeps its edge; the buttons become
   what an icon-only control should be, a glyph with a hit area.
   Icon contrast on the rail: 6.65:1 dark, 7.70:1 light. */
html body .social-rail a{
  background:transparent!important; border:0!important;
}
html body .social-rail a:hover{background:var(--ink3)!important}



/* The previous/next article links at the foot of a post were a
   transparent box with a --edge outline: 1.39:1 in dark, 1.13:1 in
   light. Unlike the blog cards they carry no artwork and only a few
   words, so nothing else marks them out as a surface - they need a
   real boundary. Measured: #707E9A on the dark page 4.47:1,
   #737F90 on the light page 3.59:1. */
html body .pn-prev,html body .pn-next{
  background:var(--ink2)!important;
  border:1px solid var(--edge-ui)!important;
}
html body .pn-prev:hover,html body .pn-next:hover{
  background:var(--ink3)!important; border-color:var(--fog)!important;
}
:root[data-theme="light"] body .pn-prev,
:root[data-theme="light"] body .pn-next{
  background:#FFFFFF!important; border-color:#737F90!important;
}
:root[data-theme="light"] body .pn-prev:hover,
:root[data-theme="light"] body .pn-next:hover{
  background:#F4F6FA!important; border-color:#49536A!important;
}

/* ===== GENERATED: system-light mirror — do not edit by hand ===== */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
  --footer-bg:#FFFFFF;
  --ink:#F4F6FA; --ink2:#FFFFFF; --ink3:#E9EDF4;
  --edge:#DFE4ED; --edge-ui:#7C889C; --fog:#49536A;
  --paper:#FFFFFF; --card:#FFFFFF; --line:#C4CCDA; --slate:#49536A;
  --r:#B81F15; --g:#04603A; --b:#1E4FBF; --b-ink:#1E4FBF;
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#E9EDF4;
  --text:#0A0D12; --text-muted:#49536A; --border:#DFE4ED;
  --accent:#1E4FBF; --highlight:#04603A;
  --on-dark:#0A0D12; --on-dark-muted:#49536A;
  color-scheme:light;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body{background:#F4F6FA; color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) h1,:root:not([data-theme="dark"]):not([data-theme="light"]) h2,
:root:not([data-theme="dark"]):not([data-theme="light"]) h3,:root:not([data-theme="dark"]):not([data-theme="light"]) h4{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) p{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) h1 em,:root:not([data-theme="dark"]):not([data-theme="light"]) .outline{
  color:transparent; -webkit-text-stroke:1.5px #0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero{background:#F4F6FA}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero .field{opacity:.14; filter:invert(1) hue-rotate(180deg)}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero .glow{
  background:
    radial-gradient(60% 46% at 16% 14%, rgba(184,31,21,.07), transparent 70%),
    radial-gradient(54% 44% at 86% 26%, rgba(30,79,191,.09), transparent 70%),
    radial-gradient(46% 40% at 52% 96%, rgba(4,96,58,.06), transparent 70%);
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section{background:#F4F6FA}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section--alt{background:#FFFFFF; border-block:1px solid #DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section.section--dark{background:#0A0D12; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section.section--dark h2,
:root:not([data-theme="dark"]):not([data-theme="light"]) .section.section--dark h3{color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section.section--dark p{color:#C3CAD8}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .card{background:#FFFFFF; border-color:#DFE4ED; color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .card h3{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .card p{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .pill,:root:not([data-theme="dark"]):not([data-theme="light"]) .eyebrow{
  background:#FFFFFF; border-color:#C4CCDA; color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero-two .row .big{background:#0A0D12; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero-two .row .big:hover{background:#1E4FBF; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero-two .row .ghost{color:#0A0D12; border-color:#7C889C}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero-two .row .ghost:hover{border-color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero-label{box-shadow:0 24px 60px rgba(10,13,18,.14);
  border:1px solid #DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .belt{background:#FFFFFF; border-block:1px solid #DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .belt-in b{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .readout{background:#FFFFFF; border-color:#DFE4ED; color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .readout dd{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .btn.btn--primary,
:root:not([data-theme="dark"]):not([data-theme="light"]) .btn.btn--primary{
  background:#0A0D12!important; color:#fff!important; border-color:#0A0D12!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .btn.btn--primary:hover{
  background:#1E4FBF!important; color:#fff!important; border-color:#1E4FBF!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .btn--ghost,:root:not([data-theme="dark"]):not([data-theme="light"]) .ghost{
  color:#0A0D12; border-color:#7C889C}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .skip{background:#0A0D12; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .nav-pills .nav-link{
  background:#FFFFFF; color:#49536A; border-color:#7C889C}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .nav-pills .nav-link.active{
  background:#0A0D12!important; color:#fff!important; border-color:#0A0D12!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .nav-pills .nav-link.active span,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .nav-pills .nav-link.active i{color:#fff!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .tab-content{background:#FFFFFF; border-color:#DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .tab-content label,
:root:not([data-theme="dark"]):not([data-theme="light"]) .qrcdr-form label{color:#1E2633}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .form-control,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr input[type="text"],
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr textarea,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr select{
  background:#FFFFFF!important; color:#0A0D12!important; border-color:#7C889C!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .btn-primary,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .generate_qrcode{
  background:#0A0D12!important; color:#fff!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .accordion .btn-outline-primary,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .accordion .btn{
  background:#FFFFFF!important; color:#0A0D12!important; border-color:#7C889C!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .site-header,:root:not([data-theme="dark"]):not([data-theme="light"]) header.site-header{
  background:rgba(244,246,250,.9); border-bottom:1px solid #DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .site-header a,:root:not([data-theme="dark"]):not([data-theme="light"]) .top nav a{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .mega-trigger{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .site-footer{background:#FFFFFF; border-top:1px solid #DFE4ED; color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-mark,:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-claim{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-sub{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-social a{background:#F4F6FA; border-color:#7C889C; color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-social a:hover{background:#E9EDF4; color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols,:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-bottom{border-color:#DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols h3{color:#04603A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols a,:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-legal a,
:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-meta a{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols a:hover,:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-legal a:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-meta a:hover{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols .ci{color:#04603A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-note,:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-legal,
:root:not([data-theme="dark"]):not([data-theme="light"]) .foot-meta{color:#5C6678}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cta{background:#0A0D12; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cta:hover{background:#1E4FBF; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .a11y-fab,:root:not([data-theme="dark"]):not([data-theme="light"]) .to-top{
  background:#1E4FBF; color:#fff; border-color:rgba(0,0,0,.12);
  box-shadow:0 10px 30px rgba(10,13,18,.22)}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .social-rail{
  background:#FFFFFF; border-color:#7C889C; box-shadow:0 8px 26px rgba(10,13,18,.1)}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .social-rail a{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .social-rail a:hover{background:#E9EDF4; color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cookie{
  background:#FFFFFF; color:#0A0D12; border-color:#7C889C;
  box-shadow:0 26px 70px rgba(10,13,18,.18)}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cookie strong{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cookie p{color:#49536A}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .cookie a{color:#1E4FBF}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols .foot-cta,
:root:not([data-theme="dark"]):not([data-theme="light"]) .site-footer .foot-cta{background:#0A0D12; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .foot-cols .foot-cta:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) .site-footer .foot-cta:hover{background:#1E4FBF; color:#fff}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .kpi{border-top-color:#DFE4ED}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .kpi-num{color:#0A0D12}
  :root:not([data-theme="dark"]):not([data-theme="light"]){--chip-bg:#FFFFFF}
  :root:not([data-theme="dark"]):not([data-theme="light"]){--accent-ink:#1E4FBF}
  :root:not([data-theme="dark"]):not([data-theme="light"]){--head-ink:#8A5600}
  html body .kpi-num,html body .placeresult .kpi-num,
:root:not([data-theme="light"]) .kpi-num{color:#12151C!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .hero .field{opacity:.09!important}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .styleselecta .btn:hover{
  background:#E9EDF4!important; border-color:#49536A!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .btn-check:checked + .btn,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .styleselecta .btn-check:checked + .btn,
:root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .styleselecta .btn.active{
  background:#0A0D12!important; color:#FFFFFF!important; border-color:#0A0D12!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .btn.btn--onDark{
  background:#0A0D12!important; color:#FFFFFF!important; border-color:#0A0D12!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .btn.btn--onDark:hover{
  background:#04603A!important; color:#FFFFFF!important; border-color:#04603A!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .is-dark .btn.btn--onDark,
:root:not([data-theme="dark"]):not([data-theme="light"]) body .section--dark .btn.btn--onDark,
:root:not([data-theme="dark"]):not([data-theme="light"]) body .guide-dark .btn.btn--onDark,
:root:not([data-theme="dark"]):not([data-theme="light"]) body .card.guide-dark .btn.btn--onDark{
  background:#FFFFFF!important; color:#10151B!important; border-color:#FFFFFF!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body{
  background-color:#EDF1F8;
  background-image:linear-gradient(180deg,#FFFFFF 0%,#F3F6FB 420px,#EDF1F8 100%);
  background-attachment:fixed;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section{
  background-color:#EDF1F8;
  background-image:linear-gradient(180deg,rgba(255,255,255,.96),rgba(237,241,248,.55));
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .section--alt{
  background-color:#E6ECF7;
  background-image:
    radial-gradient(120% 90% at 12% 0%,rgba(110,158,255,.18),transparent 62%),
    radial-gradient(90% 80% at 92% 18%,rgba(40,224,138,.14),transparent 60%),
    linear-gradient(180deg,#FFFFFF,#E6ECF7);
  border-block:1px solid #DFE4ED;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .card,
:root:not([data-theme="dark"]):not([data-theme="light"]) .blog-card,
:root:not([data-theme="dark"]):not([data-theme="light"]) .feat-main,
:root:not([data-theme="dark"]):not([data-theme="light"]) .blogslider{
  background-color:#F4F7FC;
  background-image:linear-gradient(162deg,#FFFFFF 0%,#F7F9FD 46%,#F1F5FB 100%);
  border:1px solid #DCE3EF;
  box-shadow:0 1px 2px rgba(16,26,48,.04), 0 10px 28px -18px rgba(16,26,48,.28);
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .card:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) .blog-card:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) .feat-main:hover{
  border-color:#C3CEE2;
  box-shadow:0 2px 4px rgba(16,26,48,.05), 0 20px 44px -22px rgba(16,26,48,.34);
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .sec-head{position:relative}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .sec-head::before{
  content:""; position:absolute; left:50%; top:-28%;
  width:min(620px,86%); height:190%; transform:translateX(-50%);
  background:radial-gradient(60% 55% at 50% 50%,rgba(110,158,255,.20),transparent 70%);
  pointer-events:none; z-index:-1;
}
  :root[data-theme="dark"] body,
html:root:not([data-theme="light"]) body{
  background-color:#12151C;
  background-image:
    radial-gradient(90% 60% at 18% -8%,rgba(110,158,255,.10),transparent 58%),
    radial-gradient(70% 50% at 88% 4%,rgba(40,224,138,.07),transparent 56%);
  background-attachment:fixed;
}
  html:root:not([data-theme="light"]) .section--alt{
  background-color:#191D26;
  background-image:
    radial-gradient(120% 90% at 10% 0%,rgba(110,158,255,.10),transparent 62%),
    radial-gradient(90% 80% at 92% 20%,rgba(40,224,138,.07),transparent 60%),
    linear-gradient(180deg,#1D2230,#191D26);
}
  html:root:not([data-theme="light"]) .card,
html:root:not([data-theme="light"]) .blog-card,
html:root:not([data-theme="light"]) .feat-main,
html:root:not([data-theme="light"]) .blogslider{
  background-color:#191D26;
  background-image:linear-gradient(162deg,#1F2533 0%,#1A1F2A 52%,#171B24 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -26px rgba(0,0,0,.8);
}
  html:root:not([data-theme="light"]) .card:hover,
html:root:not([data-theme="light"]) .blog-card:hover,
html:root:not([data-theme="light"]) .feat-main:hover{
  border-color:var(--edge-ui);
}
  html:root:not([data-theme="light"]) .sec-head{position:relative}
  html:root:not([data-theme="light"]) .sec-head::before{
  content:""; position:absolute; left:50%; top:-28%;
  width:min(620px,86%); height:190%; transform:translateX(-50%);
  background:radial-gradient(60% 55% at 50% 50%,rgba(110,158,255,.16),transparent 70%);
  pointer-events:none; z-index:-1;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) .bs-cat,:root:not([data-theme="dark"]):not([data-theme="light"]) .bc-cat{
  background:#E4EBFB; border-color:#B9CCF4; color:#1E4FBF;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .art-cat[data-cat="guides"]{background:#E4EBFB; color:#1E4FBF!important; border-color:#B9CCF4}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .art-cat[data-cat="design"]{background:#D8F7E7; color:#04603A!important; border-color:#A6E7C8}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .art-cat[data-cat="marketing"]{background:#FFE4E0; color:#B81F15!important; border-color:#F3BDB6}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .art-cat[data-cat="industry"]{background:#DCF3F7; color:#0A5A66!important; border-color:#A9DDE6}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .art-cat[data-cat="tech"]{background:#F7E2F4; color:#8A2480!important; border-color:#E6BCDF}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .nav-pills .nav-link{
  background:#F4F6FA!important; border-color:#7C889C!important; color:#49536A!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body.qrcdr .nav-pills .nav-link:hover{
  background:#E9EDF4!important; border-color:#49536A!important; color:#0A0D12!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .pn-prev,
:root:not([data-theme="dark"]):not([data-theme="light"]) body .pn-next{
  background:#FFFFFF!important; border-color:#737F90!important;
}
  :root:not([data-theme="dark"]):not([data-theme="light"]) body .pn-prev:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) body .pn-next:hover{
  background:#F4F6FA!important; border-color:#49536A!important;
}
}
/* ===== END GENERATED ===== */