/* =========================================================================
   buyrealigcomments.com — storefront design system  ("the order desk")
   Bricolage Grotesque (display) · Hanken Grotesk (text) · Spline Sans Mono (numeric)
   ========================================================================= */

/* ---- tokens: light (default) ------------------------------------------- */
:root {
  --paper:        #faf7f3;
  --surface:      #ffffff;
  --surface-sunk: #f2ece3;
  --ink:          #1c1a17;
  --ink-soft:     #6b6459;
  --ink-faint:    #9a9184;
  --line:         #e7e1d8;
  --line-strong:  #d6cec1;

  --flame:        #db4b26;   /* accent — persimmon */
  --flame-deep:   #b83c1d;
  --flame-haze:   #f6e7de;

  --pine:         #2f5d57;   /* trust / secondary */
  --pine-haze:    #e4ece9;

  --ok:           #2f7d4f;
  --ok-haze:      #e5f0e8;
  --warn:         #a5641b;
  --warn-haze:    #f6ebda;

  --focus:        #db4b26;
  --shadow-sm:    0 1px 0 rgba(28,26,23,.04), 0 1px 3px rgba(28,26,23,.06);
  --shadow-panel: 0 1px 0 rgba(28,26,23,.04), 0 18px 40px -24px rgba(28,26,23,.22);

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  1rem;
  --step-1:  clamp(1.1rem, 1.04rem + .3vw, 1.28rem);
  --step-2:  clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.5vw, 2.75rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 66ch;
  --maxw: 1160px;

  color-scheme: light;
}

/* ---- tokens: dark ---------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #171512;
    --surface:      #201d18;
    --surface-sunk: #14120f;
    --ink:          #f2ede4;
    --ink-soft:     #a89f90;
    --ink-faint:    #7c7365;
    --line:         #322d25;
    --line-strong:  #443d33;

    --flame:        #f26140;
    --flame-deep:   #f8785c;
    --flame-haze:   #2c1c15;

    --pine:         #6fb0a3;
    --pine-haze:    #17231f;

    --ok:           #64b784;
    --ok-haze:      #16241b;
    --warn:         #d29a4f;
    --warn-haze:    #271d10;

    --focus:        #f26140;
    --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
    --shadow-panel: 0 20px 44px -26px rgba(0,0,0,.7);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper:        #171512;
  --surface:      #201d18;
  --surface-sunk: #14120f;
  --ink:          #f2ede4;
  --ink-soft:     #a89f90;
  --ink-faint:    #7c7365;
  --line:         #322d25;
  --line-strong:  #443d33;
  --flame:        #f26140;
  --flame-deep:   #f8785c;
  --flame-haze:   #2c1c15;
  --pine:         #6fb0a3;
  --pine-haze:    #17231f;
  --ok:           #64b784;
  --ok-haze:      #16241b;
  --warn:         #d29a4f;
  --warn-haze:    #271d10;
  --focus:        #f26140;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.4);
  --shadow-panel: 0 20px 44px -26px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
:target {
  scroll-margin-top: 85px;
}
section[id], [id] {
  scroll-margin-top: 85px;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* ---- type ---------------------------------------------------------- */
.display, h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); letter-spacing: -.01em; }

.eyebrow {
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--flame-deep);
}

.num { font-family: "Spline Sans Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3 { margin-top: 1.8em; }
.prose a { color: var(--flame-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .35em; }
.prose img { border: 1px solid var(--line); border-radius: var(--r-md); margin: 1.4em 0; }

/* ---- layout primitives ------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--flow, 1rem); }
.section { padding-block: clamp(2.5rem, 7vw, 5rem); }
.section--tight { padding-block: clamp(1.75rem, 4vw, 3rem); }
.rule { height: 1px; background: var(--line); border: 0; }

main { flex: 1 0 auto; }

/* ---- header / nav ---------------------------------------------- */
.site-header {
  --header-h: 66px;
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(28, 26, 23, 0.05);
}
.site-header__bar {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: var(--header-h);
}
html.nav-locked { overflow: hidden; }
.wordmark {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.025em;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  transition: opacity 0.15s ease;
}
.wordmark:hover {
  opacity: 0.92;
}
.wordmark__mark {
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  border-radius: 8.5px;
  box-shadow: 0 3px 10px rgba(219, 75, 38, 0.22);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.wordmark:hover .wordmark__mark {
  transform: scale(1.08) rotate(-2deg);
  box-shadow: 0 5px 14px rgba(219, 75, 38, 0.35);
}
.wordmark__text {
  display: inline-flex;
  align-items: baseline;
}
.wordmark__main {
  font-weight: 800;
  color: var(--ink);
}
.wordmark__tag {
  color: var(--flame-deep);
  font-weight: 800;
  margin-inline: 0.02em;
}
.wordmark__sub {
  font-weight: 600;
  color: var(--ink);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav--center {
  margin-inline: auto;
}
.site-nav--left {
  margin-right: auto;
  margin-left: 1.5rem;
}
.site-nav--right {
  margin-left: auto;
  margin-right: 0;
}
.site-nav__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.site-nav__link:hover,
.site-nav__link:focus-visible {
  color: var(--flame-deep);
  background: var(--surface-sunk);
}
/* CTA duplicated inside <nav> — shown only in the mobile menu.
   Selectors are scoped under .site-header__bar so they outrank the generic
   `.btn { display: inline-flex }` rule further down the file. */
.site-header__bar .site-nav__cta { display: none; }
.site-nav__link.is-active,
.site-nav__link[aria-current="page"] {
  color: var(--flame-deep);
  background: var(--flame-haze);
  font-weight: 600;
}
.site-nav__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--flame);
  color: #ffffff;
  line-height: 1.2;
}

/* Header Action Controls */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}
.site-header__cta {
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(219, 75, 38, 0.2);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
}
.site-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(219, 75, 38, 0.32);
}

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.38rem 0.75rem;
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  transition: all 0.15s ease;
}
.cart-link:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.cart-link[data-count]:not([data-count="0"]) {
  border-color: var(--flame);
  color: var(--flame-deep);
  background: var(--flame-haze);
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { border-color: var(--ink); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}
.nav-toggle__box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.16s ease, top 0.22s ease;
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 6px; }
.nav-toggle__bar:nth-child(3) { top: 12px; }
.site-header[data-open="true"] .nav-toggle {
  border-color: var(--flame);
  color: var(--flame-deep);
  background: var(--flame-haze);
}
.site-header[data-open="true"] .nav-toggle__bar:nth-child(1) { top: 6px; transform: rotate(45deg); }
.site-header[data-open="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-header[data-open="true"] .nav-toggle__bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Backdrop behind the open mobile menu */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 18, 15, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.site-header[data-open="true"] .nav-scrim { opacity: 1; pointer-events: auto; }
@supports (backdrop-filter: blur(2px)) {
  .site-header[data-open="true"] .nav-scrim { backdrop-filter: blur(2px); }
}
/* the scrim only exists as an overlay below the mobile breakpoint */
@media (min-width: 921px) { .nav-scrim { display: none; } }

/* ---- mobile menu ---- */
@media (max-width: 920px) {
  .site-header__bar { gap: 0.75rem; }

  .site-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0;
    padding: 0.85rem clamp(1rem, 5vw, 1.75rem) calc(1.4rem + env(safe-area-inset-bottom));
    background: var(--paper);
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    box-shadow: 0 18px 40px -12px rgba(28, 26, 23, 0.28);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.22s ease, opacity 0.18s ease, visibility 0s linear 0.22s;
  }
  .site-nav--center,
  .site-nav--left,
  .site-nav--right { margin: 0; }

  .site-header[data-open="true"] .site-nav {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s;
  }

  .site-nav__link {
    width: 100%;
    min-height: 50px;
    padding: 0.7rem 0.85rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    border-radius: var(--r-md);
    justify-content: space-between;
  }
  .site-nav__link + .site-nav__link { border-top: 1px solid var(--line); border-radius: 0; }
  .site-nav__link:first-of-type { border-radius: var(--r-md) var(--r-md) 0 0; }
  .site-nav__link:hover,
  .site-nav__link:focus-visible { background: var(--surface-sunk); color: var(--flame-deep); }
  .site-nav__link.is-active,
  .site-nav__link[aria-current="page"] { background: var(--flame-haze); color: var(--flame-deep); }

  .site-header__bar .site-nav__cta {
    display: flex;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.95rem 1.2rem;
    font-size: 0.95rem;
    border-radius: var(--r-md);
    box-shadow: 0 6px 16px rgba(219, 75, 38, 0.28);
  }

  .site-header .nav-toggle { display: inline-flex; }
  .site-header__actions .site-header__cta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-header[data-open="true"] .site-nav,
  .nav-toggle__bar,
  .nav-scrim { transition: none; }
}

/* ---- buttons ---------------------------------------------------- */
.btn {
  --_bg: var(--ink); --_fg: var(--paper); --_bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5ch;
  font-weight: 600; font-size: var(--step--1);
  letter-spacing: .01em;
  padding: .8rem 1.3rem;
  background: var(--_bg); color: var(--_fg);
  border: 1px solid var(--_bd); border-radius: var(--r-md);
  cursor: pointer; text-align: center;
  transition: transform .08s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--flame { --_bg: var(--flame); --_fg: #fff; --_bd: var(--flame); }
.btn--flame:hover { --_bg: var(--flame-deep); }
.btn--ghost { --_bg: transparent; --_fg: var(--ink); --_bd: var(--line-strong); }
.btn--block { width: 100%; }
.btn--lg { padding: 1rem 1.5rem; font-size: var(--step-0); }
.btn--sm { padding: .5rem .9rem; font-size: .8rem; }

/* ---- trust row ---------------------------------------------- */
.trust {
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  padding-block: 1rem;
}
.trust li {
  list-style: none;
  display: inline-flex; align-items: center; gap: .5ch;
  font-size: var(--step--1); color: var(--ink-soft);
}
.trust li::before {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none;
  background: var(--pine); border-radius: 50%;
  mask: center / .7rem no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.3 3 8.1l1.1-1.1 2.1 2.1 5.6-5.6L13 4.6z'/%3E%3C/svg%3E");
}

/* ---- price board (catalog) -------------------------------- */
.board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tile {
  background: var(--surface);
  padding: 1.4rem 1.4rem 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  position: relative;
  transition: background .15s ease;
}
.tile:hover { background: var(--surface-sunk); }
.tile__qty {
  font-family: "Spline Sans Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.1rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ink);
}
.tile__unit { font-size: var(--step--1); color: var(--ink-soft); }
.tile__price {
  margin-top: auto;
  font-family: "Spline Sans Mono", monospace;
  font-size: 1.05rem; font-weight: 600;
  color: var(--flame-deep);
}
.tile__price small { color: var(--ink-faint); font-weight: 400; }
.tile__badge {
  position: absolute; top: .9rem; right: .9rem;
  font-family: "Spline Sans Mono", monospace;
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pine); background: var(--pine-haze);
  padding: .2rem .45rem; border-radius: 999px;
}
.tile__link::after { content: ""; position: absolute; inset: 0; }

/* ---- product page --------------------------------------- */
.product {
  display: grid; gap: clamp(1.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1fr) 400px; }
  .product .order-panel { position: sticky; top: 90px; }
}

.product__pitch h1 { margin-bottom: .5rem; }
.product__lede { font-size: var(--step-1); color: var(--ink-soft); }
.spec {
  display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.1rem;
  margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: var(--step--1);
}
.spec dt { color: var(--ink-faint); font-family: "Spline Sans Mono", monospace; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.spec dd { color: var(--ink); }

/* ---- order panel with ticket notch ---------------------- */
.order-panel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: 1.5rem;
  --notch: 13px;
}
.order-panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-bottom: 1rem;
  border-bottom: 1px dashed var(--line-strong);
  position: relative;
}
/* perforation notches on the dashed rule */
.order-panel__head::before,
.order-panel__head::after {
  content: ""; position: absolute; bottom: -1px; width: var(--notch); height: var(--notch);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 50%;
  transform: translateY(50%);
}
.order-panel__head::before { left: calc(-1.5rem - var(--notch) / 2); }
.order-panel__head::after  { right: calc(-1.5rem - var(--notch) / 2); }
.order-panel__total {
  font-family: "Spline Sans Mono", monospace;
  font-size: 1.6rem; font-weight: 600; color: var(--flame-deep);
  font-variant-numeric: tabular-nums;
}
.order-panel__label { font-family: "Spline Sans Mono", monospace; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }

/* variation radios as a segmented list */
.variations { display: flex; flex-direction: column; gap: .5rem; margin: 1.1rem 0; }
.variation {
  display: grid; grid-template-columns: 1.1rem 1fr max-content; align-items: center; gap: .8rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.variation:hover { border-color: var(--ink-faint); }
.variation input { appearance: none; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--line-strong); border-radius: 50%; display: grid; place-content: center; cursor: pointer; }
.variation input::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; transform: scale(0); transition: transform .12s ease; background: var(--flame); }
.variation input:checked::before { transform: scale(1); }
.variation:has(input:checked) { border-color: var(--flame); background: var(--flame-haze); }
.variation__name { font-weight: 600; }
.variation__each { font-size: var(--step--1); color: var(--ink-soft); }
.variation__price { font-family: "Spline Sans Mono", monospace; font-weight: 600; font-variant-numeric: tabular-nums; }

/* add-on form */
.addons { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > label { font-size: var(--step--1); font-weight: 600; }
.field .req { color: var(--flame-deep); }
.field .hint { font-size: .8rem; color: var(--ink-faint); }
.field input[type="text"], .field input[type="url"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: .65rem .75rem;
  transition: border-color .12s ease;
}
.field :is(input, select, textarea):focus { outline: none; border-color: var(--flame); box-shadow: 0 0 0 3px var(--flame-haze); }
.field textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.field--check { flex-direction: row; align-items: flex-start; gap: .6rem; }
.field--check input { margin-top: .2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--flame); flex: none; }
.field--check label { font-weight: 400; font-size: var(--step--1); }
.field-error { color: var(--flame-deep); font-size: .8rem; }

/* ---- steps (how it works) ------------------------------ */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 720px) { .steps { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.step { background: var(--surface); padding: 1.4rem; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: "Spline Sans Mono", monospace; font-size: .8rem; color: var(--flame-deep);
  display: block; margin-bottom: .6rem;
}
.step h3 { font-size: var(--step-0); margin-bottom: .3rem; }
.step p { font-size: var(--step--1); color: var(--ink-soft); }

/* ---- notices ------------------------------------------ */
.notice { border: 1px solid var(--line-strong); border-left: 3px solid var(--ink-faint); border-radius: var(--r-md); padding: .85rem 1rem; font-size: var(--step--1); }
.notice--ok   { border-left-color: var(--ok);   background: var(--ok-haze); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-haze); }
.notice--error{ border-left-color: var(--flame);background: var(--flame-haze); }

/* ---- breadcrumb -------------------------------------- */
.crumbs { font-size: .8rem; color: var(--ink-faint); font-family: "Spline Sans Mono", monospace; display: flex; gap: .5ch; flex-wrap: wrap; }
.crumbs a:hover { color: var(--ink); }

/* ---- footer ----------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
  margin-top: auto;
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 3.5rem 2rem;
}
.site-footer__grid {
  display: grid;
  gap: 2.2rem 1.8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  }
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 600px) and (max-width: 899px) {
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}
.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  font-family: "Bricolage Grotesque", sans-serif;
  letter-spacing: -0.01em;
}
.site-footer__logo-mark {
  width: 1.65rem;
  height: 1.65rem;
  flex-shrink: 0;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(219, 75, 38, 0.2);
}
.site-footer__tagline {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  max-width: 32ch;
}
.site-footer__contact {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.12s ease;
  margin-top: 0.25rem;
}
.site-footer__contact:hover {
  color: var(--flame-deep);
}

.site-footer__nav h4 {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  margin: 0 0 0.75rem 0;
}
.site-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.site-footer__nav a {
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.12s ease;
  display: inline-block;
}
.site-footer__nav a:hover {
  color: var(--flame-deep);
}

/* Trust Badges Strip */
.site-footer__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.2rem;
  padding-block: 1.2rem;
  border-block: 1px solid var(--line);
  align-items: center;
}
.site-footer__trust--center {
  justify-content: center;
}
.site-footer__trust--left {
  justify-content: flex-start;
}
.site-footer__trust--right {
  justify-content: flex-end;
}
.site-footer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* Base / Copyright Row */
.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.site-footer__copy {
  color: var(--ink-soft);
}
.site-footer__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.theme-toggle {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: "Spline Sans Mono", monospace;
  color: var(--ink-soft);
  transition: all 0.12s ease;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---- floating contact buttons ------------------- */
.contact-fab {
  position: fixed; right: clamp(1rem, 4vw, 2rem); bottom: clamp(1rem, 4vw, 2rem); z-index: 40;
  display: flex; flex-direction: column; gap: .6rem;
}
.wa-fab, .tg-fab, .em-fab {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  color: #fff; display: grid; place-content: center;
  box-shadow: var(--shadow-panel);
  transition: transform .12s ease;
}
.wa-fab { background: var(--pine); }
.tg-fab { background: #229ed9; }
.em-fab { background: var(--ink); }
.wa-fab:hover, .tg-fab:hover, .em-fab:hover { transform: scale(1.05); }

/* ---- cart: modern 2-column aesthetic redesign ------------------------ */
.cart-section {
  padding-top: clamp(2.2rem, 5vw, 3.8rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.cart-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-size: var(--step-3);
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0.35rem 0 0.35rem;
  color: var(--ink);
}

.cart-subtitle {
  color: var(--ink-soft);
  font-size: var(--step--1);
  margin: 0;
}

.cart-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--flame-haze);
  border: 1px solid rgba(219, 75, 38, 0.25);
  color: var(--flame-deep);
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 1px 2px rgba(219, 75, 38, 0.08);
}

/* 2-Column Grid Layout */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

@media (min-width: 960px) {
  .cart-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

/* Main Left Column */
.cart-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 20px -4px rgba(28, 26, 23, 0.05);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cart-card:hover {
  border-color: var(--line-strong);
}

.cart-card__body {
  padding: 1.5rem 1.5rem 1rem;
}

/* Header inside cart card */
.cart-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px dashed var(--line);
}

.cart-card__info {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.cart-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E64A19, #FF7043);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(230, 74, 25, 0.22);
}

.cart-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.cart-card__tagline {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-card__head-actions {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex-shrink: 0;
}

.cart-card__pricing {
  text-align: right;
  flex-shrink: 0;
}

.cart-card__total {
  font-family: "Spline Sans Mono", monospace;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--flame-deep);
  line-height: 1.1;
}

.cart-card__unit {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

/* Quick remove icon button in card header */
.cart-remove-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(28, 26, 23, 0.04);
}

.cart-remove-icon-btn svg {
  opacity: 0.75;
  transition: transform 0.18s ease, color 0.15s ease, opacity 0.15s ease;
}

.cart-remove-icon-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
}

.cart-remove-icon-btn:hover svg {
  opacity: 1;
  transform: rotate(90deg);
}

.cart-remove-icon-btn:active {
  background: #fecaca;
  transform: scale(0.96);
}

.cart-remove-icon-btn:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

.cart-tier-badge {
  display: inline-block;
  background: var(--flame-haze);
  color: var(--flame-deep);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  margin-top: 0.25rem;
}

/* Metadata pills & chips */
.cart-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}

.cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  background: var(--surface-sunk);
  color: var(--ink);
  border: 1px solid var(--line);
  text-decoration: none;
  line-height: 1.25;
}

.cart-pill svg {
  flex-shrink: 0;
}

.cart-pill--ig {
  background: rgba(225, 48, 108, 0.08);
  border-color: rgba(225, 48, 108, 0.25);
  color: #c13584;
  font-weight: 600;
}

.cart-pill--url {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
  transition: all 0.12s ease;
}

.cart-pill--url:hover {
  border-color: var(--flame);
  color: var(--flame-deep);
}

.cart-pill--flame {
  background: var(--flame-haze);
  border-color: rgba(219, 75, 38, 0.25);
  color: var(--flame-deep);
  font-weight: 600;
}

.cart-pill--blue {
  background: #eef4ff;
  border-color: #d0e0ff;
  color: #1e5bb8;
  font-weight: 600;
}

.cart-pill--ok {
  background: var(--ok-haze);
  border-color: rgba(47, 125, 79, 0.25);
  color: var(--ok);
  font-weight: 600;
}

/* Custom Comments expandable drawer */
.cart-comments-drawer {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  margin-bottom: 0.25rem;
  overflow: hidden;
}

.cart-comments-drawer summary {
  padding: 0.65rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  list-style: none;
}

/* Suppress all browser markers and global details::after '+' */
.cart-comments-drawer summary::-webkit-details-marker,
.cart-comments-drawer summary::marker,
.cart-comments-drawer summary::after {
  display: none !important;
  content: "" !important;
}

.cart-comments-drawer__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.cart-comments-drawer__toggle {
  font-size: 0.76rem;
  color: var(--flame-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cart-comments-drawer .cart-comments-drawer__toggle-close {
  display: none;
}

.cart-comments-drawer[open] .cart-comments-drawer__toggle-open {
  display: none;
}

.cart-comments-drawer[open] .cart-comments-drawer__toggle-close {
  display: inline;
}

.cart-comments-drawer__body {
  padding: 0.85rem 1rem 1rem;
  background: var(--surface);
  border-top: 1px solid var(--line);
  max-height: 190px;
  overflow-y: auto;
}

.cart-comments-list {
  margin: 0;
  padding-left: 1.3rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.cart-comments-list li {
  margin-bottom: 0.3rem;
}

.cart-comments-list li:last-child {
  margin-bottom: 0;
}

/* Card bottom controls: Package Details & Remove */
.cart-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.5rem 1rem;
  background: var(--surface-sunk);
  border-top: 1px solid var(--line);
  border-bottom-left-radius: calc(var(--r-lg) - 1px);
  border-bottom-right-radius: calc(var(--r-lg) - 1px);
}

.cart-package-qty {
  display: flex;
  align-items: center;
}

.cart-qty-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 0.85rem;
  color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(28, 26, 23, 0.04);
}

.cart-qty-badge svg {
  color: var(--flame);
  flex-shrink: 0;
}

.cart-qty-badge strong {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  color: var(--ink);
  font-size: 0.92rem;
}

/* Card footer remove button — Industry standard high-visibility action */
.cart-remove-btn,
.cart-remove-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.44rem 0.95rem;
  background: var(--surface);
  border: 1.5px solid rgba(220, 38, 38, 0.32);
  border-radius: var(--r-md);
  color: #dc2626;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.06);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  line-height: 1.25;
}

.cart-remove-btn svg,
.cart-remove-link svg {
  color: #dc2626;
  opacity: 1;
  transition: transform 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.cart-remove-btn:hover,
.cart-remove-link:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(220, 38, 38, 0.25);
  transform: translateY(-1px);
}

.cart-remove-btn:hover svg,
.cart-remove-link:hover svg {
  color: #ffffff;
  transform: scale(1.08);
}

.cart-remove-btn:active,
.cart-remove-link:active {
  transform: translateY(0);
  background: #b91c1c;
  border-color: #b91c1c;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
}

.cart-remove-btn:focus-visible,
.cart-remove-link:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Dark mode support */
:root[data-theme="dark"] .cart-remove-btn,
:root[data-theme="dark"] .cart-remove-link {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.38);
  color: #f87171;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

:root[data-theme="dark"] .cart-remove-btn svg,
:root[data-theme="dark"] .cart-remove-link svg {
  color: #f87171;
}

:root[data-theme="dark"] .cart-remove-btn:hover,
:root[data-theme="dark"] .cart-remove-link:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.45);
}

:root[data-theme="dark"] .cart-remove-btn:hover svg,
:root[data-theme="dark"] .cart-remove-link:hover svg {
  color: #ffffff;
}

:root[data-theme="dark"] .cart-remove-icon-btn {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-soft);
}

:root[data-theme="dark"] .cart-remove-icon-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.45);
  color: #f87171;
}

/* Trust assurances grid */
.cart-assurances {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  align-items: stretch;
}

.cart-assurance {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  height: 100%;
  box-sizing: border-box;
}

.cart-assurance__icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

.cart-assurance strong {
  display: block;
  color: var(--ink);
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}

.cart-assurance p {
  color: var(--ink-soft);
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.4;
}

/* Right Sidebar: Order Summary Box */
.cart-sidebar {
  position: static;
}
@media (min-width: 960px) {
  .cart-sidebar {
    position: sticky;
    top: 90px;
  }
}

.cart-summary-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 35px -8px rgba(28, 26, 23, 0.07);
  padding: 1.6rem;
}

.cart-summary-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.cart-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.cart-summary-row--discount {
  color: var(--ok);
  font-weight: 600;
}

.cart-shipping-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--ok-haze);
  color: var(--ok);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.78rem;
}

.cart-summary-savings {
  background: var(--ok-haze);
  border: 1px solid rgba(47, 125, 79, 0.2);
  border-radius: var(--r-md);
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--ok);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.cart-summary-total {
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.cart-total-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.cart-total-subtext {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.cart-total-amount {
  font-family: "Spline Sans Mono", monospace;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--flame-deep);
  line-height: 1;
}

/* Coupon box within summary */
.cart-coupon-form {
  display: flex;
  gap: 0.4rem;
  margin: 1.25rem 0;
}

.cart-coupon-input {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.cart-coupon-input:focus {
  background: var(--surface);
  border-color: var(--flame);
  outline: none;
}

.cart-coupon-btn {
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--r-md);
}

.cart-coupon-active {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.8rem;
  background: var(--ok-haze);
  border: 1px dashed rgba(47, 125, 79, 0.3);
  border-radius: var(--r-md);
  font-size: 0.82rem;
  margin: 1.25rem 0;
}

.cart-coupon-tag {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  color: var(--ok);
}

/* Checkout CTA Button */
.cart-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin: 1.35rem 0 0.95rem;
  padding: 1.05rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--flame) 0%, var(--flame-deep) 100%);
  color: #fff !important;
  border: 1px solid var(--flame-deep);
  box-shadow: 0 4px 14px rgba(219, 75, 38, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.cart-checkout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(219, 75, 38, 0.48);
}

.cart-checkout-btn svg {
  transition: transform 0.15s ease;
}

.cart-checkout-btn:hover svg {
  transform: translateX(4px);
}

.cart-secure-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.85rem;
  font-size: 0.76rem;
  color: var(--ink-faint);
}

.cart-payment-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.cart-pay-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.cart-continue-wrap {
  text-align: center;
  margin-top: 1.1rem;
}

.cart-continue-wrap a {
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.1s ease;
}

.cart-continue-wrap a:hover {
  color: var(--flame-deep);
}

/* Empty State */
.cart-empty-state {
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  max-width: 580px;
  margin: 1.5rem auto;
  box-shadow: var(--shadow-panel);
}

.cart-empty-state__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--surface-sunk);
  color: var(--flame);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--line);
}

.cart-empty-state h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: var(--step-2);
  font-weight: 800;
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.cart-empty-state p {
  color: var(--ink-soft);
  font-size: var(--step-0);
  line-height: 1.5;
  margin: 0 auto 1.75rem;
  max-width: 440px;
}

.cart-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* ---- checkout --------------------------------- */
.checkout-section {
  padding-top: clamp(1rem, 2.5vw, 1.6rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.checkout-header {
  margin-bottom: 1.1rem;
}

.checkout-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin: 0.15rem 0 0.25rem;
  color: var(--ink);
}

.checkout-secure-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: var(--ok-haze);
  border: 1px solid rgba(47, 125, 79, 0.25);
  color: var(--ok);
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.checkout-subtitle {
  color: var(--ink-soft);
  font-size: 0.84rem;
  margin: 0;
  max-width: 60ch;
}

/* 2-Column Responsive Layout Grid */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
}

@media (min-width: 960px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(350px, 0.95fr);
  }
}

.checkout-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.checkout-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px -2px rgba(28, 26, 23, 0.03);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-card:hover {
  border-color: var(--line-strong);
}

.checkout-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.checkout-step-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--flame) 0%, var(--flame-deep) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Spline Sans Mono", monospace;
  font-weight: 800;
  font-size: 0.78rem;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(219, 75, 38, 0.22);
}

.checkout-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}

.checkout-optional-tag {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-faint);
  border: 1px solid var(--line);
}

.checkout-card__subtitle {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0.1rem 0 0;
  line-height: 1.35;
}

.checkout-card__body {
  padding: 1rem 1.25rem 1.15rem;
}

/* Collapsible Optional Card */
details.checkout-card--optional summary {
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.12s ease;
}

details.checkout-card--optional summary::-webkit-details-marker,
details.checkout-card--optional summary::marker,
details.checkout-card--optional summary::after {
  display: none !important;
  content: "" !important;
}

details.checkout-card--optional summary:hover {
  background: var(--surface-sunk);
}

details.checkout-card--optional:not([open]) .checkout-card__head {
  border-bottom: 0;
}

.checkout-auth-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 0.85rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.checkout-auth-badge {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--flame-deep);
  background: var(--flame-haze);
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  margin-right: 0.35rem;
}

.checkout-auth-link {
  font-weight: 600;
  color: var(--flame-deep);
  text-decoration: none;
  font-size: 0.78rem;
}

.checkout-auth-link:hover {
  text-decoration: underline;
}

.checkout-auth-banner--logged {
  background: var(--ok-haze);
  border-color: rgba(47, 125, 79, 0.2);
  color: var(--ok);
}

.checkout-auth-logged-icon {
  font-weight: 800;
  margin-right: 0.3rem;
}

.checkout-fields-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 600px) {
  .checkout-fields-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.checkout-field {
  display: flex;
  flex-direction: column;
}

.checkout-label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.checkout-label .req {
  color: var(--flame);
  font-weight: 700;
}

.checkout-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.checkout-input-icon {
  position: absolute;
  left: 0.75rem;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.checkout-input {
  width: 100%;
  padding: 0.62rem 0.85rem 0.62rem 2.3rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.88rem;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.checkout-input:focus {
  background: var(--surface);
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(219, 75, 38, 0.12);
  outline: none;
}

.checkout-hint {
  font-size: 0.72rem;
  color: var(--ink-faint);
  margin-top: 0.25rem;
  line-height: 1.3;
}

.checkout-field-error {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #e53935;
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.25rem 0 0;
}

.checkout-field-error svg {
  flex-shrink: 0;
}

.checkout-verify-card {
  margin-top: 0.95rem;
  padding: 0.95rem 1.1rem;
  background: var(--surface-sunk);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
}

.checkout-verify-head {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.checkout-verify-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--flame);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-verify-head strong {
  display: block;
  font-size: 0.84rem;
  color: var(--ink);
}

.checkout-verify-head p {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin: 0.1rem 0 0;
}

.checkout-verify-row {
  display: flex;
  gap: 0.55rem;
}

.checkout-code-input {
  max-width: 155px;
  padding-left: 0.85rem;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
}

.checkout-send-code-btn {
  padding: 0.62rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--r-md);
  white-space: nowrap;
}

.checkout-verify-status {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  transition: color 0.15s ease;
}

.checkout-verify-status.is-ok {
  color: var(--ok);
  font-weight: 600;
}

.checkout-verify-status.is-err {
  color: #e53935;
  font-weight: 600;
}

.checkout-account-optin {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.85rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.checkout-account-optin:hover {
  border-color: var(--line-strong);
  background: var(--surface-sunk);
}

.checkout-custom-checkbox {
  margin-top: 0.15rem;
  width: 16px;
  height: 16px;
  accent-color: var(--flame);
  cursor: pointer;
}

.checkout-account-optin__content strong {
  display: block;
  font-size: 0.82rem;
  color: var(--ink);
}

.checkout-account-optin__content span {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}

/* Payment Methods */
.checkout-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.checkout-alert--warn {
  background: var(--warn-haze);
  border: 1px solid rgba(165, 100, 27, 0.3);
  color: var(--warn);
}

.checkout-alert--warn strong {
  display: block;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.checkout-alert--warn p {
  margin: 0;
  color: var(--ink-soft);
}

.checkout-pay-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.pay-method-card {
  display: block;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.pay-method-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-sunk);
}

.pay-method-card.is-selected {
  border-color: var(--flame);
  background: var(--surface);
  box-shadow: 0 3px 14px -2px rgba(219, 75, 38, 0.14);
}

.pay-method-card__top {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.pay-method-radio-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}

.pay-method-radio {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.pay-method-custom-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.pay-method-custom-radio::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--flame);
  transform: scale(0);
  transition: transform 0.15s ease;
}

.pay-method-radio:checked + .pay-method-custom-radio,
.pay-method-card.is-selected .pay-method-custom-radio {
  border-color: var(--flame);
}

.pay-method-radio:checked + .pay-method-custom-radio::after,
.pay-method-card.is-selected .pay-method-custom-radio::after {
  transform: scale(1);
}

.pay-method-card__content {
  flex: 1;
  min-width: 0;
}

.pay-method-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pay-method-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}

.pay-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.pay-chip--green {
  background: var(--ok-haze);
  border-color: rgba(47, 125, 79, 0.25);
  color: var(--ok);
}

.pay-chip--yellow {
  background: #fef9e7;
  border-color: #fce4a6;
  color: #b78103;
}

.pay-chip--blue {
  background: #eef4ff;
  border-color: #d0e0ff;
  color: #1e5bb8;
}

.pay-chip--purple {
  background: #f4efff;
  border-color: #e0d1ff;
  color: #6a36c4;
}

.pay-method-card__desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 0;
  line-height: 1.35;
}

.pay-method-fields {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--line);
}

.pay-fields-inner {
  background: var(--surface-sunk);
  padding: 0.85rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}

.checkout-select {
  width: 100%;
  padding: 0.62rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  box-sizing: border-box;
}

.checkout-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.84rem;
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.checkout-textarea:focus {
  background: var(--surface);
  border-color: var(--flame);
  box-shadow: 0 0 0 3px rgba(219, 75, 38, 0.12);
  outline: none;
}

/* Action Card & Live Delivery Status */
.checkout-action-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 0.95rem 1.25rem;
  box-shadow: 0 2px 10px -2px rgba(28, 26, 23, 0.03);
}

.checkout-delivery-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.95rem;
  background: var(--ok-haze);
  border: 1px solid rgba(47, 125, 79, 0.2);
  border-radius: var(--r-md);
}

.checkout-delivery-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(47, 125, 79, 0.7);
  animation: checkout-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes checkout-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(47, 125, 79, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 7px rgba(47, 125, 79, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(47, 125, 79, 0); }
}

.checkout-delivery-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.checkout-delivery-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ok);
}

.checkout-delivery-meta {
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.checkout-delivery-meta strong {
  color: var(--ink);
}

.checkout-mobile-cta {
  display: none;
  margin-top: 0.85rem;
}

@media (max-width: 959px) {
  .checkout-mobile-cta {
    display: block;
  }
}

/* Sidebar Order Summary */
.checkout-sidebar {
  position: relative;
}

@media (min-width: 960px) {
  .checkout-sidebar {
    position: sticky;
    top: 86px;
  }
}

.checkout-summary-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: 0 4px 24px -4px rgba(28, 26, 23, 0.06);
}

.checkout-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1rem;
}

.checkout-summary-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}

.checkout-count-pill {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--flame-haze);
  color: var(--flame-deep);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(219, 75, 38, 0.2);
}

.checkout-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.checkout-item-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.75rem 0.85rem;
}

.checkout-item-main {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.checkout-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--flame);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-item-details {
  flex: 1;
  min-width: 0;
}

.checkout-item-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.checkout-item-name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}

.checkout-item-price {
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--flame-deep);
}

.checkout-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.checkout-meta-badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: var(--ink);
}

.checkout-meta-tag {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.checkout-meta-tag--ig {
  color: #c13584;
  border-color: rgba(225, 48, 108, 0.25);
  background: rgba(225, 48, 108, 0.06);
}

.checkout-meta-tag--flame {
  color: var(--flame-deep);
  border-color: rgba(219, 75, 38, 0.25);
  background: var(--flame-haze);
}

.checkout-meta-tag--blue {
  color: #1e5bb8;
  border-color: #d0e0ff;
  background: #eef4ff;
}

.checkout-comments-drawer {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--line);
}

.checkout-comments-drawer summary {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  user-select: none;
}

.checkout-comments-drawer summary::-webkit-details-marker,
.checkout-comments-drawer summary::marker,
.checkout-comments-drawer summary::after {
  display: none !important;
  content: "" !important;
}

.checkout-comments-list {
  margin: 0.4rem 0 0;
  padding-left: 1.15rem;
  font-size: 0.74rem;
  color: var(--ink);
  line-height: 1.4;
}

.checkout-comments-list li {
  margin-bottom: 0.15rem;
}

.checkout-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.checkout-summary-row--discount {
  color: var(--ok);
  font-weight: 600;
}

.checkout-shipping-badge {
  display: inline-flex;
  align-items: center;
  background: var(--ok-haze);
  color: var(--ok);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
}

.checkout-summary-total {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.checkout-total-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.checkout-total-subtext {
  display: block;
  font-size: 0.68rem;
  color: var(--ink-faint);
  margin-top: 0.1rem;
}

.checkout-total-amount {
  font-family: "Spline Sans Mono", monospace;
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--flame-deep);
  line-height: 1;
}

/* Primary Sticky Place Order CTA */
.checkout-summary-cta {
  margin-bottom: 0.95rem;
}

.checkout-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--flame) 0%, var(--flame-deep) 100%);
  color: #ffffff !important;
  border: 1px solid var(--flame-deep);
  box-shadow: 0 4px 16px rgba(219, 75, 38, 0.38);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}

.checkout-submit-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(219, 75, 38, 0.5);
}

.checkout-submit-btn svg {
  transition: transform 0.15s ease;
}

.checkout-submit-btn:hover svg {
  transform: translateX(3px);
}

.checkout-submit-guarantee {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: center;
  margin-top: 0.45rem;
}

.checkout-edit-cart {
  text-align: center;
  margin-bottom: 0.95rem;
}

.checkout-edit-cart a {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}

.checkout-edit-cart a:hover {
  color: var(--flame-deep);
}

.checkout-trust-box {
  padding: 0.85rem 1rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.checkout-trust-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.checkout-trust-title svg {
  color: var(--pine);
}

.checkout-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.3;
}

.checkout-trust-list span {
  color: var(--ok);
  font-weight: 800;
  margin-right: 0.2rem;
}

.checkout-trust-list strong {
  color: var(--ink);
}

/* Modal Popup Redesign */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: grid;
  place-content: center;
  padding: 1.5rem;
  z-index: 999;
}

.modal-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  max-width: 28rem;
  padding: 1.85rem 2rem;
  box-shadow: 0 20px 48px -12px rgba(28, 26, 23, 0.35);
  animation: modal-fade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modal-fade {
  from { opacity: 0; transform: scale(0.96) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-card h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.65rem;
  color: var(--ink);
}

.modal-card p {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

.modal-card .modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.modal-card .modal-actions button {
  flex: 1;
}

/* ---- account -------------------------------- */
.account-nav {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 1.4rem 0 1.6rem;
}
.account-nav a {
  font-size: var(--step--1); font-weight: 600; color: var(--ink-soft);
  padding: .5rem .95rem; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.account-nav a:hover { color: var(--ink); border-color: var(--line-strong); }
.account-nav a[aria-current="page"] {
  color: var(--flame-deep); background: var(--flame-haze); border-color: var(--flame);
}
.account-nav form { margin-left: auto; }

/* account dashboard */
.acct-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; margin: 1rem 0 0;
}
.acct-head__id { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1 1 16rem; }
.acct-head__txt { min-width: 0; }
.acct-avatar {
  flex: none; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--flame-haze); color: var(--flame-deep);
  font-family: "Spline Sans Mono", monospace; font-weight: 600; font-size: 1rem;
  letter-spacing: .02em;
}
.acct-head__name { margin: 0; font-size: var(--step-2); line-height: 1.15; overflow-wrap: anywhere; }
.acct-head__meta { margin: .25rem 0 0; font-size: var(--step--1); color: var(--ink-soft); overflow-wrap: anywhere; }

.acct-summary {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: 1fr; margin-bottom: 1.4rem;
}
@media (min-width: 560px) { .acct-summary { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .acct-summary { grid-template-columns: repeat(4, 1fr); } }
.acct-stat { background: var(--surface); padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.acct-stat__label {
  font-family: "Spline Sans Mono", monospace; font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint);
}
.acct-stat__value { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.acct-stat__hint { font-size: .74rem; color: var(--ink-soft); line-height: 1.4; margin-top: .1rem; }
.acct-stat--wallet { background: var(--flame-haze); }
.acct-stat--wallet .acct-stat__value { color: var(--flame-deep); }

.acct-quick {
  display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr);
  margin-bottom: 1.6rem;
}
@media (min-width: 720px) { .acct-quick { grid-template-columns: repeat(4, 1fr); } }
.acct-quick__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--step--1); font-weight: 600; color: var(--ink);
}
.acct-quick__item:hover { border-color: var(--flame); color: var(--flame-deep); }
.acct-quick__item svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--flame-deep); }

.acct-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.acct-panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.acct-panel__head h2 { margin: 0; font-size: var(--step-0); }
.acct-panel__head a { font-size: var(--step--1); font-weight: 600; color: var(--flame-deep); }
.acct-panel .order-list { border: 0; border-radius: 0; }
.acct-panel__empty { padding: 2rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.acct-panel__empty p { margin: 0; color: var(--ink-soft); }

.account-auth { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .account-auth { grid-template-columns: 1fr 1fr; } }

/* sign in / register card (pure-CSS tab switch via .auth-radio) */
.auth-section {
  padding-top: clamp(1.8rem, 3.5vw, 2.8rem);
  padding-bottom: 3.5rem;
}

.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.auth-header__icon {
  display: inline-flex;
  margin-bottom: 0.75rem;
}
.auth-header__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.auth-header__desc {
  font-size: 0.86rem;
  color: var(--ink-soft);
  max-width: 38ch;
  margin: 0.35rem auto 0;
  line-height: 1.45;
}

.auth-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  padding: 0.3rem;
  gap: 0.3rem;
}
.auth-tab {
  text-align: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
  background: transparent;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: all 0.15s ease;
  user-select: none;
}
.auth-tab:hover {
  color: var(--ink);
}
#auth-signin:checked ~ .auth-tabs .auth-tab[for="auth-signin"],
#auth-register:checked ~ .auth-tabs .auth-tab[for="auth-register"] {
  background: var(--surface);
  color: var(--flame-deep);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
#auth-signin:focus-visible ~ .auth-tabs .auth-tab[for="auth-signin"],
#auth-register:focus-visible ~ .auth-tabs .auth-tab[for="auth-register"] {
  outline: 2px solid var(--flame);
  outline-offset: -2px;
}

.auth-panel {
  display: none;
  padding: 1.6rem 1.6rem 1.8rem;
}
#auth-signin:checked ~ .auth-panel--signin {
  display: block;
}
#auth-register:checked ~ .auth-panel--register {
  display: block;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.auth-forgot-link {
  font-size: 0.76rem;
  color: var(--flame-deep);
  text-decoration: none;
  font-weight: 600;
}
.auth-forgot-link:hover {
  text-decoration: underline;
}

.auth-or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.2rem 0;
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-magic-btn {
  border-color: var(--line-strong);
  font-weight: 600;
}
.auth-magic-btn:hover {
  border-color: var(--flame);
  color: var(--flame-deep);
}

.auth-note {
  margin: -0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.45;
}

.auth-trust-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.auth-trust-item {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.auth-footnote {
  margin: 1.2rem 0 0;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.auth-footnote a {
  color: var(--flame-deep);
  font-weight: 600;
}

.chip { font-family: "Spline Sans Mono", monospace; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .28em .6em; border-radius: 999px; white-space: nowrap; display: inline-block; }
.chip--ok     { background: var(--ok-haze);   color: var(--ok); }
.chip--active { background: var(--flame-haze); color: var(--flame-deep); }
.chip--next   { background: var(--surface-sunk); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong); }
.chip--later  { background: transparent; color: var(--ink-faint); box-shadow: inset 0 0 0 1px var(--line-strong); }

.order-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.order-list a { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; background: var(--surface); flex-wrap: wrap; }
.order-list a:hover { background: var(--surface-sunk); }
.order-list__date { font-size: var(--step--1); color: var(--ink-faint); }
.order-list__total { margin-left: auto; font-weight: 600; }

.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.timeline li { display: grid; grid-template-columns: 1rem 1fr; gap: .8rem; position: relative; }
.timeline__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--flame); margin-top: .3rem; position: relative; }
.timeline li:not(:last-child) .timeline__dot::after {
  content: ""; position: absolute; top: .9rem; left: 50%; transform: translateX(-50%);
  width: 1px; height: calc(100% + .5rem); background: var(--line-strong);
}

/* ---- utilities --------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: .5rem; top: .5rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =========================================================================
   Homepage — Order builder hero + education stack
   ========================================================================= */

/* ---- Hero builder layout --------------------------------------------- */
.hero-builder {
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) {
  /* ── current: pitch left, builder pinned right (default) ── */
  .hero-builder { grid-template-columns: 1fr 420px; }
  .hero-builder__panel { position: sticky; top: 90px; }

  /* ── stacked: pitch full-width on top, builder centered below ── */
  .hero-builder--stacked { grid-template-columns: 1fr; gap: clamp(2.5rem, 6vw, 4rem); }
  .hero-builder--stacked .hero-builder__pitch { max-width: 900px; margin-inline: auto; }
  .hero-builder--stacked .hero-primer {
    flex-direction: row; flex-wrap: wrap; gap: 1.4rem 2rem; max-width: none;
    border-top: 1px solid var(--line); padding-top: 1.5rem;
  }
  .hero-builder--stacked .hero-primer__step { flex: 1 1 14rem; }
  .hero-builder--stacked .hero-builder__panel {
    position: static; width: 100%; max-width: 680px; margin-inline: auto;
  }
  .hero-builder--stacked .hero-builder__panel::before {
    content: "Build your order"; display: block;
    font-weight: 700; font-size: var(--step-1); color: var(--ink);
    text-align: center; margin-bottom: 1.1rem;
  }

  /* ── pinned: short pitch stays in view while the builder scrolls ── */
  .hero-builder--pinned { grid-template-columns: minmax(300px, 360px) 1fr; }
  .hero-builder--pinned .hero-builder__pitch { position: sticky; top: 90px; align-self: start; }
  .hero-builder--pinned .hero-builder__panel { position: static; }

  /* ── compact: same frame as current; builder collapses (see below) ── */
  .hero-builder--compact .hero-builder__panel { position: sticky; top: 90px; }
}

/* variant-specific trims to the pitch column's supporting blocks */
.hero-builder--stacked .hero-included,
.hero-builder--stacked .hero-quote,
.hero-builder--pinned .hero-primer,
.hero-builder--pinned .hero-included,
.hero-builder--compact .hero-included,
.hero-builder--compact .hero-quote { display: none; }

/* compact builder: progressive step reveal (enhanced by site.js) */
.hero-builder__continue { margin-top: 1.1rem; }
.hero-builder--compact .order-panel .is-hidden { display: none !important; }

.hero-builder__pitch h1 { margin-bottom: .6rem; }
.hero-builder__lede {
  font-size: var(--step-1); color: var(--ink-soft); max-width: 38rem;
  margin-bottom: 1.5rem;
}
/* rating strip */
.rating-strip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--step--1); color: var(--ink-soft);
  margin-bottom: 1rem;
}
.rating-strip__stars { color: #f59e0b; letter-spacing: -.05em; font-size: 1rem; line-height: 1; }
.rating-strip__score { font-family: "Spline Sans Mono", monospace; font-weight: 600; color: var(--ink); }
/* trust pills */
.trust-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.trust-pill {
  display: inline-flex; align-items: center; gap: .45ch;
  font-size: .78rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .75rem;
}
.trust-pill svg { flex: none; color: var(--pine); }

/* hero primer — fills the space beside the taller builder panel */
.hero-primer {
  list-style: none; margin: 1.9rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 34rem;
}
.hero-primer__step { display: grid; grid-template-columns: 1.9rem 1fr; gap: .8rem; align-items: start; }
.hero-primer__num {
  font-family: "Spline Sans Mono", monospace; font-size: .8rem; font-weight: 600;
  color: var(--flame-deep); padding-top: .1rem;
}
.hero-primer__step strong { display: block; font-size: var(--step--1); color: var(--ink); margin-bottom: .1rem; }
.hero-primer__step p { margin: 0; font-size: .82rem; color: var(--ink-soft); line-height: 1.5; }
.hero-included {
  margin: 1.9rem 0 0; max-width: 34rem;
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}
.hero-included__label {
  font-family: "Spline Sans Mono", monospace; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  margin: 0 0 .7rem;
}
.hero-included ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.hero-included li {
  position: relative; padding-left: 1.5rem;
  font-size: .84rem; color: var(--ink-soft); line-height: 1.45;
}
.hero-included li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: .7rem; height: .38rem;
  border-left: 2px solid var(--flame-deep); border-bottom: 2px solid var(--flame-deep);
  transform: rotate(-45deg);
}
.hero-quote {
  margin: 1.9rem 0 0; padding: 1rem 1.15rem;
  border-left: 2px solid var(--flame); background: var(--surface);
  max-width: 34rem;
}
.hero-quote blockquote { margin: 0; font-size: var(--step--1); color: var(--ink); line-height: 1.55; }
.hero-quote figcaption {
  margin-top: .5rem; font-family: "Spline Sans Mono", monospace;
  font-size: .72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em;
}

/* ---- Order builder panel -------------------------------------------- */
.builder-step {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}
.builder-step:last-of-type { border-bottom: 0; }
.builder-step__head {
  display: flex; align-items: baseline; gap: .6rem;
  margin-bottom: .75rem;
}
.builder-step__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--flame-deep); flex: none;
}
.builder-step__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: var(--step-0); letter-spacing: -.01em;
}
/* quantity chips */
.qty-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.qty-chip {
  font-family: "Spline Sans Mono", monospace;
  font-size: .8rem; font-weight: 600;
  padding: .38rem .7rem; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: border-color .1s ease, background .1s ease, color .1s ease;
}
.qty-chip:hover { border-color: var(--ink-faint); color: var(--ink); }
.qty-chip--active, .qty-chip[aria-pressed="true"] {
  background: var(--flame); border-color: var(--flame); color: #fff;
}
/* stepper */
.qty-stepper { display: flex; align-items: center; gap: .5rem; }
.qty-stepper__btn {
  width: 2.2rem; height: 2.2rem; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--surface);
  display: grid; place-content: center; cursor: pointer; font-size: 1.1rem;
  transition: background .1s ease;
}
.qty-stepper__btn:hover { background: var(--surface-sunk); }
.qty-stepper__input {
  width: 5rem; text-align: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: .42rem .5rem;
  font-family: "Spline Sans Mono", monospace; font-size: .95rem; font-weight: 600;
}
.qty-stepper__input:focus { outline: none; border-color: var(--flame); box-shadow: 0 0 0 3px var(--flame-haze); }
/* live price */
.price-live { font-family: "Spline Sans Mono", monospace; font-variant-numeric: tabular-nums; transition: color .15s ease; }
/* builder line count */
.builder-line-count { font-size: .8rem; color: var(--ink-faint); margin-top: .35rem; }
.builder-line-count--warn { color: var(--warn); font-weight: 600; }
.builder-line-error {
  margin: .4rem 0 0;
  padding: .45rem .65rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--flame-deep);
  background: var(--flame-haze);
  border: 1px solid var(--flame);
  border-radius: var(--r-sm);
}
.builder-line-error[hidden] { display: none; }
/* style toggle (Custom / Random) */
.style-toggle { display: flex; gap: .5rem; }
.style-toggle label {
  position: relative;
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5ch;
  padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font-size: var(--step--1); font-weight: 600; cursor: pointer;
  transition: border-color .1s ease, background .1s ease;
  user-select: none;
}
.style-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  pointer-events: none;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}
.style-toggle label:has(input:checked) {
  border-color: var(--flame); background: var(--flame-haze); color: var(--flame-deep);
}
.style-toggle--lg label { padding: .85rem 1.1rem; font-size: var(--step-0); border-radius: var(--r-lg); }

/* custom-comment input: heading + method pills + paste / link panels */
.cc-heading { font-size: var(--step-0); font-weight: 700; margin: 0 0 .7rem; }
.cc-heading span { font-weight: 500; color: var(--ink-faint); }
.cc-methods { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .7rem; }
.cc-method {
  display: inline-flex; align-items: center; gap: .45ch;
  padding: .4rem .8rem; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: border-color .1s ease, background .1s ease, color .1s ease;
}
.cc-method svg { width: .9rem; height: .9rem; flex: none; }
.cc-method:hover { border-color: var(--flame); color: var(--flame-deep); }
.cc-method--active { border-color: var(--flame); background: var(--flame-haze); color: var(--flame-deep); }
[data-custom-panel] textarea,
[data-custom-panel] input[type="url"] {
  width: 100%; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: .65rem .75rem; transition: border-color .12s ease;
}
[data-custom-panel] textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
[data-custom-panel] :is(textarea, input):focus {
  outline: none; border-color: var(--flame); box-shadow: 0 0 0 3px var(--flame-haze);
}
/* builder trust footer */
.builder-trust-footer { text-align: center; font-size: .78rem; color: var(--ink-faint); margin-top: .6rem; }

/* ---- Stats bar -------------------------------------------------------- */
.stat-bar {
  display: grid; gap: 1px;
  background: var(--line); border-block: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .stat-bar { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface-sunk); padding: 1.6rem 1.2rem; text-align: center; }
.stat__num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--flame-deep); line-height: 1;
}
.stat__label {
  font-family: "Spline Sans Mono", monospace;
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: .4rem;
}

/* ---- Two Ways To Order Section ------------------------------------- */
.ways-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.ways-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.ways-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.ways-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.ways-grid {
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 768px) {
  .ways-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.ways-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: border-color 0.15s ease;
}
.ways-card--featured {
  border-color: var(--flame);
  box-shadow: 0 0 0 1px var(--flame);
}
.ways-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ways-card__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
}
.ways-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.ways-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.ways-card__badge--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.ways-card__title {
  margin: 0 0 0.35rem 0;
  font-size: var(--step-1);
  color: var(--ink);
}
.ways-card__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* 3-Step Mini Flow */
.ways-flow {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.ways-flow__step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.ways-flow__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--flame-deep);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
}
.ways-flow__text {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
}
.ways-flow__arrow {
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.ways-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ways-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.45;
}
.ways-card__check {
  color: var(--ok);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -1px;
}
.ways-card__preview {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: var(--ink);
  font-style: italic;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: auto;
}
.ways-card__preview-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
  font-style: normal;
  display: block;
  margin-bottom: 0.2rem;
}

/* Ways Strip */
.ways-strip {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .ways-strip {
    grid-template-columns: 1fr 1fr;
  }
}
.ways-strip__item {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.ways-strip__item strong {
  color: var(--ink);
}
.ways-strip__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---- Safety & Integrity Section ------------------------------------ */
.safety-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.safety-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.safety-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.safety-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.safety-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 600px) {
  .safety-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .safety-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.safety-card {
  background: var(--surface);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.15s ease;
}
.safety-card:hover {
  background: var(--surface-lift, var(--surface));
}
.safety-card--featured {
  background: var(--surface);
}
.safety-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.95rem;
}
.safety-card__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: var(--ok-haze, #e8f5e9);
  color: var(--ok, #2e7d32);
  display: grid;
  place-content: center;
}
.safety-card--featured .safety-card__icon {
  background: var(--flame-haze);
  color: var(--flame-deep);
}
.safety-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.safety-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.safety-card__badge--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.safety-card__title {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.45rem 0;
  line-height: 1.25;
}
.safety-card__desc {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 1.2rem 0;
  flex: 1;
}
.safety-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.safety-card__tag {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* ---- Feature / safety cards ----------------------------------------- */
.card-grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card-grid__item { background: var(--surface); padding: 1.4rem 1.3rem; }
.card-grid__icon {
  width: 2.2rem; height: 2.2rem; border-radius: var(--r-md);
  background: var(--flame-haze); color: var(--flame-deep);
  display: grid; place-content: center; margin-bottom: .85rem;
}
.card-grid__icon svg { width: 1.1rem; height: 1.1rem; }
.card-grid__item h3 { font-size: var(--step-0); margin-bottom: .35rem; }
.card-grid__item p  { font-size: var(--step--1); color: var(--ink-soft); }

/* ---- Full Control Section ------------------------------------------- */
.control-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.control-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.control-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.control-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.control-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 600px) {
  .control-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .control-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.control-card {
  background: var(--surface);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.15s ease;
}
.control-card:hover {
  background: var(--surface-lift, var(--surface));
}
.control-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.95rem;
}
.control-card__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
}
.control-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.control-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.control-card__badge--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.control-card__title {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.45rem 0;
  line-height: 1.25;
}
.control-card__desc {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 1.2rem 0;
  flex: 1;
}
.control-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.control-card__tag {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}

/* Value Summary Strip */
.control-strip {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .control-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}
.control-strip__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.control-strip__item strong {
  color: var(--ink);
}
.control-strip__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---- Live Order Tracking Section ------------------------------------ */
.tracker-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.tracker-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.tracker-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.tracker-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.tracker-layout {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 860px) {
  .tracker-layout {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}

/* Tracking Console */
.tracker-console {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tracker-console__head {
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  padding: 0.95rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.tracker-console__id {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}
.tracker-console__id::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--flame);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}
.tracker-console__body {
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.tracker-meta-strip {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.65rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tracker-meta-strip__target {
  font-family: "Spline Sans Mono", monospace;
  color: var(--ink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
}
.tracker-meta-strip__speed {
  color: var(--ink-soft);
  font-family: "Spline Sans Mono", monospace;
}

/* Progress bar */
.tracker-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.tracker-progress__bar-wrap {
  height: 8px;
  background: var(--surface-sunk);
  border-radius: 999px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.tracker-progress__bar {
  height: 100%;
  background: var(--flame);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.tracker-progress__labels {
  display: flex;
  justify-content: space-between;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.tracker-progress__labels strong {
  color: var(--ink);
}

/* Stepper timeline */
.tracker-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
}
.tracker-step {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.8rem;
  position: relative;
}
.tracker-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.4rem;
  left: 0.65rem;
  width: 1px;
  height: calc(100% + 0.1rem);
  background: var(--line-strong);
}
.tracker-step__indicator {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  margin-top: 0.15rem;
  z-index: 1;
}
.tracker-step--done .tracker-step__indicator {
  background: var(--ok);
  color: #fff;
}
.tracker-step--active .tracker-step__indicator {
  background: var(--flame);
  color: #fff;
  box-shadow: 0 0 0 3px var(--flame-haze);
}
.tracker-step--pending .tracker-step__indicator {
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
}
.tracker-step__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.tracker-step__title {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.tracker-step__time {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  color: var(--ink-faint);
}
.tracker-step__desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 0 0;
  line-height: 1.45;
}

/* Right Pillars */
.tracker-pillars {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.tracker-pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.3rem;
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  transition: border-color 0.15s ease;
}
.tracker-pillar:hover {
  border-color: var(--line-strong);
}
.tracker-pillar__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--flame-deep);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  flex-shrink: 0;
}
.tracker-pillar__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.tracker-pillar__title {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.25rem 0;
}
.tracker-pillar__desc {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* Inline Lookup Bar */
.tracker-lookup-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 768px) {
  .tracker-lookup-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.tracker-lookup-card__title {
  margin: 0 0 0.15rem 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
}
.tracker-lookup-card__desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.tracker-lookup-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.tracker-lookup-form input {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  font-family: "Spline Sans Mono", monospace;
  min-width: 170px;
}
.tracker-lookup-form input:focus {
  outline: none;
  border-color: var(--flame);
}

/* ---- Made for Ads Section ------------------------------------------- */
.ads-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.ads-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.ads-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.ads-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.ads-grid {
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 768px) {
  .ads-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ads-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: border-color 0.15s ease;
}
.ads-card--featured {
  border-color: var(--flame);
  box-shadow: 0 0 0 1px var(--flame);
}
.ads-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ads-card__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
}
.ads-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.ads-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.ads-card__badge--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.ads-card__title {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.4rem 0;
  line-height: 1.25;
}
.ads-card__desc {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.ads-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.ads-card__metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.ads-card__metric-label {
  font-size: 0.65rem;
  font-family: "Spline Sans Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.ads-card__metric-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

/* 3-Step Ad Warming Blueprint */
.ads-blueprint {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ads-blueprint__head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.ads-blueprint__tag {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flame-deep);
  background: var(--flame-haze);
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-sm);
}
.ads-blueprint__title {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
}
.ads-blueprint__grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .ads-blueprint__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ads-blueprint__step {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.ads-blueprint__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--flame-deep);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: grid;
  place-content: center;
  flex-shrink: 0;
}
.ads-blueprint__step strong {
  display: block;
  font-size: var(--step--1);
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.ads-blueprint__step p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---- Custom vs Auto-written Section --------------------------------- */
.compare-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.compare-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.compare-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.compare-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.compare-cards-grid {
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 768px) {
  .compare-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.compare-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: border-color 0.15s ease;
}
.compare-card--featured {
  border-color: var(--flame);
  box-shadow: 0 0 0 1px var(--flame);
}
.compare-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compare-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.compare-card__badge--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.compare-card__title {
  margin: 0 0 0.35rem 0;
  font-size: var(--step-1);
  color: var(--ink);
}
.compare-card__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}
.compare-card__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.compare-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.45;
}
.compare-card__check {
  color: var(--ok);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -1px;
}
.compare-card__preview {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  color: var(--ink);
  font-style: italic;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: auto;
}
.compare-card__preview-label {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.65rem;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
  font-style: normal;
  display: block;
  margin-bottom: 0.2rem;
}

/* Compare Matrix Table */
.compare-matrix-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.compare-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.compare-matrix-table th,
.compare-matrix-table td {
  padding: 0.85rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.compare-matrix-table th {
  background: var(--surface-sunk);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--ink);
}
.compare-matrix-table tr:last-child td {
  border-bottom: 0;
}
.compare-matrix-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  width: 25%;
}
.compare-matrix-table td:nth-child(2) {
  color: var(--ink-soft);
  width: 37.5%;
}
.compare-matrix-table td:nth-child(3) {
  color: var(--ink-soft);
  width: 37.5%;
}
.compare-matrix-table .check {
  color: var(--ok);
  font-weight: 700;
}

/* Compare Pro-Tip */
.compare-pro-tip {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-left: 3px solid var(--flame);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}
.compare-pro-tip strong {
  color: var(--ink);
}

/* ---- Strategic Sizing Guide Section --------------------------------- */
.sizing-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.sizing-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.sizing-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.sizing-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.sizing-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 600px) {
  .sizing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .sizing-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.sizing-card {
  background: var(--surface);
  padding: 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.15s ease;
}
.sizing-card:hover {
  background: var(--surface-lift, var(--surface));
}
.sizing-card--featured {
  background: var(--surface);
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1px var(--flame);
}
.sizing-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.sizing-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.sizing-card__badge--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.sizing-card__badge--ok {
  background: var(--ok-haze);
  color: var(--ok);
  border-color: var(--ok);
}
.sizing-card__qty {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
}
.sizing-card__title {
  font-size: var(--step-0);
  font-weight: 700;
  margin: 0 0 0.45rem 0;
  color: var(--ink);
  line-height: 1.25;
}
.sizing-card__desc {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 1.1rem 0;
  flex: 1;
}
.sizing-card__meta {
  display: flex;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.sizing-card__metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sizing-card__metric-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  font-family: "Spline Sans Mono", monospace;
}
.sizing-card__metric-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}

/* Sizing Benchmark Table */
.sizing-table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sizing-table-card__head {
  padding: 1.1rem 1.4rem;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
@media (min-width: 680px) {
  .sizing-table-card__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.sizing-table-card__head h4 {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
}
.sizing-table-card__note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-family: "Spline Sans Mono", monospace;
}
.sizing-table-wrap {
  overflow-x: auto;
}
.sizing-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}
.sizing-table th {
  padding: 0.75rem 1.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-family: "Spline Sans Mono", monospace;
}
.sizing-table td {
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: middle;
}
.sizing-table tr:last-child td {
  border-bottom: 0;
}
.sizing-table td strong {
  color: var(--ink);
}
.sizing-badge-qty {
  display: inline-block;
  font-family: "Spline Sans Mono", monospace;
  font-weight: 700;
  color: var(--flame-deep);
  background: var(--flame-haze);
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-sm);
  margin-right: 0.3rem;
}

/* Sizing Pillars */
.sizing-pillars {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .sizing-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}
.sizing-pillar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.2rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.sizing-pillar__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: var(--r-md);
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
  flex-shrink: 0;
}
.sizing-pillar__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
.sizing-pillar__title {
  margin: 0 0 0.3rem 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
}
.sizing-pillar__desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---- Delivery Explainer Section ------------------------------------- */
.delivery-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.delivery-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.delivery-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.delivery-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.delivery-steps-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (min-width: 600px) {
  .delivery-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .delivery-steps-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.delivery-step-card {
  background: var(--surface);
  padding: 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background 0.15s ease;
}
.delivery-step-card:hover {
  background: var(--surface-lift, var(--surface));
}
.delivery-step-card--active {
  box-shadow: inset 0 0 0 1px var(--flame);
  z-index: 1;
}
.delivery-step-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.delivery-step-card__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-faint);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  width: 1.85rem;
  height: 1.85rem;
  border-radius: var(--r-sm);
  display: grid;
  place-content: center;
}
.delivery-step-card__time {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.delivery-step-card__icon {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--r-md);
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
  margin-bottom: 0.85rem;
}
.delivery-step-card__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}
.delivery-step-card__title {
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.45rem 0;
  line-height: 1.25;
}
.delivery-step-card__desc {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 1.2rem 0;
  flex: 1;
}
.delivery-step-card__tag {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

/* Delivery Info Cards */
.delivery-info-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .delivery-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.delivery-info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.delivery-info-card__icon {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--flame-deep);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  flex-shrink: 0;
}
.delivery-info-card__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}
.delivery-info-card__content {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.delivery-info-card__title {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.delivery-info-card__desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ---- Review section header & layout ---------------------------------- */
.reviews-header {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 640px) {
  .reviews-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }
}
.reviews-header__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.reviews-header__title {
  margin: 0;
  font-size: var(--step-2);
}
.reviews-header__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  max-width: 58ch;
}
.reviews-header__btn {
  align-self: flex-start;
  gap: 0.5ch;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .reviews-header__btn {
    align-self: auto;
    margin-bottom: 0.15rem;
  }
}

/* ---- Review cards ---------------------------------------------------- */
.review-grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 560px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: var(--surface);
  padding: 1.35rem 1.4rem;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.review-card[hidden] {
  display: none;
}
.review-card__top {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .75rem;
}
.review-card__avatar {
  width: 2.25rem; height: 2.25rem; border-radius: 50%; flex: none;
  background: var(--flame-haze); color: var(--flame-deep);
  font-family: "Spline Sans Mono", monospace; font-size: .78rem; font-weight: 700;
  display: grid; place-content: center; text-transform: uppercase; letter-spacing: .03em;
}
.review-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  padding-top: 0.15rem;
}
.review-card__name {
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
}
.review-card__role {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.1rem 0.38rem;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  vertical-align: middle;
}
.review-card__order {
  font-family: "Spline Sans Mono", monospace;
  font-size: .72rem;
  color: var(--ink-faint);
  margin-left: auto;
  white-space: nowrap;
  text-align: right;
  padding-top: 0.2rem;
}
.review-card__stars {
  display: inline-flex;
  gap: 2px;
  color: #f59e0b;
  margin-bottom: .55rem;
}
.review-card__stars svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.review-card__stars svg[data-empty] {
  color: var(--line-strong);
}
.review-card__quote {
  margin: 0;
  padding: 0;
  border: 0;
}
.review-card__headline {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .35rem 0;
  line-height: 1.35;
}
.review-card__body {
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

/* ---- SweetAlert-style Review Modal (Pure CSS / Vanilla JS) ---------- */
.swal-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 500px;
  width: calc(100% - 2rem);
  box-shadow: none;
  overflow: visible;
  position: fixed;
  inset: 0;
  margin: auto;
}
.swal-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
.swal-dialog::backdrop {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: swalFadeIn .2s ease forwards;
}
.swal-dialog[open] .swal-card {
  animation: swalPopIn .24s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes swalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes swalPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.swal-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 1.15rem;
  padding: 1.4rem 1.6rem 1.25rem;
  position: relative;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05);
  text-align: center;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  box-sizing: border-box;
  width: 100%;
}
.swal-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 0;
  background: var(--surface-sunk);
  color: var(--ink-soft);
  font-size: 0.85rem;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background .15s ease, color .15s ease;
  z-index: 2;
}
.swal-close:hover {
  background: var(--line-strong);
  color: var(--ink);
}
.swal-star-badge {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
  margin: 0 auto 0.55rem;
  box-shadow: 0 0 0 4px var(--flame-haze);
}
.swal-star-badge svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: currentColor;
}
.swal-title {
  font-size: 1.18rem;
  font-weight: 700;
  margin: 0 0 0.2rem 0;
  color: var(--ink);
  line-height: 1.25;
}
.swal-subtitle {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 0 0 0.75rem 0;
  line-height: 1.35;
}
.swal-rating-box {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem 0.85rem;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.swal-stars {
  display: inline-flex;
  gap: 6px;
}
.swal-star {
  background: none;
  border: 0;
  padding: 2px;
  cursor: pointer;
  color: var(--line-strong);
  transition: color .12s ease, transform .12s ease;
}
.swal-star svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.swal-star--active,
.swal-star--hover {
  color: #f59e0b;
}
.swal-star:hover {
  transform: scale(1.18);
}
.swal-rating-caption {
  font-size: 0.74rem;
  font-weight: 600;
  color: #d97706;
  font-family: "Spline Sans Mono", monospace;
  letter-spacing: 0.02em;
}
.swal-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}
.swal-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
@media (min-width: 440px) {
  .swal-row {
    grid-template-columns: 1fr 1fr;
  }
}
.swal-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.swal-field label {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
}
.swal-input,
.swal-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.swal-textarea {
  min-height: 52px;
  resize: vertical;
}
.swal-input:focus,
.swal-textarea:focus {
  outline: 0;
  border-color: var(--flame);
  box-shadow: 0 0 0 3px var(--flame-haze);
  background: var(--surface);
}
.swal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.swal-btn-submit {
  min-width: 120px;
}
.swal-status {
  padding: 0.55rem 0.8rem;
  border-radius: var(--r-md);
  font-size: 0.78rem;
  margin-top: 0.65rem;
  text-align: left;
}
.swal-status--ok {
  background: var(--ok-haze);
  color: var(--ok);
  border: 1px solid var(--ok);
}
.swal-status--error {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border: 1px solid var(--flame);
}
.swal-success-icon {
  width: 52px;
  height: 52px;
  margin: 0.4rem auto 0.2rem;
  color: var(--ok);
}
.swal-success-icon svg {
  width: 100%;
  height: 100%;
}

/* ---- Guide cards ----------------------------------------------------- */
.guide-grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
@media (min-width: 680px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
.guide-card { background: var(--surface); padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
.guide-card__tag {
  font-family: "Spline Sans Mono", monospace; font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--flame-deep);
}
.guide-card__title { font-weight: 700; font-size: var(--step-0); line-height: 1.25; color: var(--ink); }
.guide-card__title:hover { color: var(--flame-deep); }
.guide-card__excerpt { font-size: var(--step--1); color: var(--ink-soft); flex: 1; }
.guide-card__read { font-size: .8rem; font-weight: 600; color: var(--flame-deep); margin-top: auto; }

/* ---- Section eyebrow + divider (homepage sections) ------------------- */
.section-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.4rem; }
.section-head h2 { margin: 0; }
.section-head::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }

/* ---- FAQ Section ---------------------------------------------------- */
.faq-head {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 68ch;
}
.faq-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.faq-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.faq-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.faq-grid {
  display: grid;
  gap: 0.85rem;
}
@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}
/* Reset all summary markers across all browsers */
details > summary {
  list-style: none !important;
  list-style-type: none !important;
}
details > summary::-webkit-details-marker {
  display: none !important;
}
details > summary::marker {
  display: none !important;
  content: "" !important;
}

.faq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.faq-card:hover {
  border-color: var(--line-strong);
}
.faq-item {
  width: 100%;
}
.faq-summary {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  cursor: pointer;
  list-style: none !important;
  list-style-type: none !important;
  user-select: none;
}
.faq-summary::-webkit-details-marker,
.faq-summary::marker {
  display: none !important;
  content: "" !important;
  font-size: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.faq-summary::before,
.faq-summary::after {
  content: none !important;
  display: none !important;
}
.faq-question {
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  flex: 1;
}
.faq-icon {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  display: grid;
  place-content: center;
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.15s ease, color 0.15s ease;
}
.faq-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faq-item[open] .faq-icon {
  transform: rotate(180deg);
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
}
.faq-item[open] .faq-summary {
  border-bottom: 1px solid var(--line);
}
.faq-body {
  padding: 1.15rem 1.3rem;
  background: var(--surface-sunk);
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.6;
}
.faq-body p {
  margin: 0;
}

/* FAQ Help Card */
.faq-help-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
@media (min-width: 680px) {
  .faq-help-card {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.faq-help-card__left {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.faq-help-card__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--r-md);
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
  flex-shrink: 0;
}
.faq-help-card__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}
.faq-help-card__title {
  margin: 0 0 0.2rem 0;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--ink);
}
.faq-help-card__desc {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.faq-help-card__btn {
  white-space: nowrap;
  align-self: flex-start;
}
@media (min-width: 680px) {
  .faq-help-card__btn {
    align-self: auto;
  }
}

/* ---- Guides & Knowledge Base Section -------------------------------- */
.guides-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .guides-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.guides-head__left {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 65ch;
}
.guides-head__eyebrow {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.guides-head__title {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.2;
}
.guides-head__sub {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}
.guides-head__all {
  flex-shrink: 0;
}

.guides-grid {
  display: grid;
  gap: 1.2rem;
}
@media (min-width: 768px) {
  .guides-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.guides-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.guides-card:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-panel);
}
.guides-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.guides-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame-deep);
  background: var(--flame-haze);
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.guides-card__badge svg {
  width: 0.85rem;
  height: 0.85rem;
}
.guides-card__time {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  color: var(--ink-faint);
}
.guides-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.guides-card__title {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1.3;
}
.guides-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.guides-card__title a:hover {
  color: var(--flame-deep);
  text-decoration: underline;
}
.guides-card__excerpt {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.guides-card__footer {
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.guides-card__link {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--flame-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap 0.15s ease;
}
.guides-card__link svg {
  width: 0.9rem;
  height: 0.9rem;
  transition: transform 0.15s ease;
}
.guides-card:hover .guides-card__link svg {
  transform: translateX(3px);
}

/* Bottom Guides Banner */
.guides-banner {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
@media (min-width: 768px) {
  .guides-banner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.guides-banner__left {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.guides-banner__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}
.guides-banner__title {
  margin: 0 0 0.15rem 0;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--ink);
}
.guides-banner__desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ---- Promo ribbon (site-wide announcement) ------------------------- */
.promo-dismissed .promo-ribbon { display: none; }
.promo-ribbon {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--step--1);
}
.promo-ribbon__inner {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .5rem var(--gutter); text-align: center;
}
.promo-ribbon__badge {
  flex: none; font-weight: 700; font-size: .72rem; letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px;
  padding: .12rem .5rem;
}
.promo-ribbon__text { font-weight: 500; }
.promo-ribbon__close {
  flex: none; margin-left: .2rem; background: none; border: 0;
  color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer;
  opacity: .7; padding: .1rem .3rem;
}
.promo-ribbon__close:hover { opacity: 1; }
@media (max-width: 560px) {
  .promo-ribbon__inner { flex-wrap: wrap; gap: .35rem .5rem; }
}

/* ---- Sub-5 wallet-only notice (order builder) ------------------- */
.builder-wallet-notice {
  margin-top: .7rem;
  padding: .5rem .7rem;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--flame);
  border-radius: var(--r-sm);
  background: var(--flame-haze);
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.4;
}
.builder-wallet-notice[hidden] { display: none; }
.builder-wallet-notice strong { color: var(--flame-deep); }

/* ---- Wallet balance card (account dashboard) ------------------- */
.wallet-card {
  display: grid;
  gap: .15rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-sunk);
}
.wallet-card__label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint);
}
.wallet-card__amount {
  font-size: var(--step-2); font-weight: 700; color: var(--ink);
  font-family: "Spline Sans Mono", ui-monospace, monospace;
}
.wallet-card__hint { font-size: .78rem; color: var(--ink-soft); }

/* ---- Savings badge (order builder) ------------------------------- */
.savings-badge {
  display: inline-block; margin-top: .25rem;
  background: var(--ok-haze); color: var(--ok);
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
  border-radius: 999px; padding: .12rem .5rem;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
}
.savings-badge[hidden] { display: none; }

/* ---- Volume tier table (order builder) -------------------------- */
.tier-table {
  margin-top: .8rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden;
  font-family: "Spline Sans Mono", ui-monospace, monospace;
  font-size: .78rem;
}
.tier-table__row {
  display: grid; grid-template-columns: 1fr auto auto; gap: .75rem;
  align-items: baseline;
  padding: .4rem .7rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.tier-table__row:first-child { border-top: 0; }
.tier-table__qty { font-weight: 600; color: var(--ink); }
.tier-table__ea { color: var(--ink-faint); }
.tier-table__save { color: var(--ink-faint); }
.tier-table__row--active {
  background: var(--flame-haze);
  color: var(--flame-deep);
}
.tier-table__row--active .tier-table__qty,
.tier-table__row--active .tier-table__ea,
.tier-table__row--active .tier-table__save { color: var(--flame-deep); }

/* =========================================================================
   MODERN BLOG HUB & ARTICLE SYSTEM
   ========================================================================= */
.blog-hub {
  background: var(--paper);
}

/* Blog Hero */
.blog-hero {
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
}
.blog-hero__breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.blog-hero__breadcrumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-hero__breadcrumbs a:hover {
  color: var(--ink);
}
.blog-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--flame-deep);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  width: fit-content;
}
.blog-hero__badge svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--flame);
}
.blog-hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0;
}
.blog-hero__desc {
  font-size: clamp(0.95rem, 1.2vw, 1.12rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
}

/* Category Filter Pills */
.blog-filter-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.blog-pill:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}
.blog-pill--active {
  background: var(--ink);
  border-color: var(--ink);
  color: #ffffff !important;
}

/* Featured Article Bento Card */
.blog-featured-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.5rem);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-featured-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--flame), var(--flame-deep));
}
.blog-featured-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.blog-featured-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.blog-featured-card__badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--flame-haze);
  color: var(--flame-deep);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.blog-featured-card__date,
.blog-featured-card__read {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 500;
}
.blog-featured-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}
.blog-featured-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-featured-card__title a:hover {
  color: var(--flame-deep);
}
.blog-featured-card__excerpt {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 75ch;
}
.blog-featured-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.blog-featured-card__desk {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 500;
}

/* Articles Bento Grid */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 680px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1020px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.blog-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.blog-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--flame-deep);
}
.blog-card__badge svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--flame);
}
.blog-card__time {
  font-size: 0.76rem;
  color: var(--ink-faint);
}
.blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.blog-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin: 0;
}
.blog-card__title a {
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-card__title a:hover {
  color: var(--flame-deep);
}
.blog-card__excerpt {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}
.blog-card__footer {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--flame-deep);
  text-decoration: none;
  transition: gap 0.12s ease;
}
.blog-card__link svg {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform 0.12s ease;
}
.blog-card:hover .blog-card__link svg {
  transform: translateX(3px);
}

/* Blog Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.blog-pagination__counter {
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.blog-pagination .is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Blog CTA Banner */
.blog-cta-banner {
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 1.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.blog-cta-banner__left {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  max-width: 60ch;
}
.blog-cta-banner__icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.blog-cta-banner__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.25rem 0;
  color: var(--ink);
}
.blog-cta-banner__desc {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.blog-cta-banner__actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Empty State */
.blog-empty-state {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.blog-empty-state__icon {
  font-size: 2.8rem;
  margin-bottom: 0.8rem;
}
.blog-empty-state h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.3rem;
  margin: 0 0 0.4rem 0;
}
.blog-empty-state p {
  color: var(--ink-soft);
  margin: 0 0 1.2rem 0;
}

/* =========================================================================
   SINGLE ARTICLE VIEW
   ========================================================================= */
.article-view {
  background: var(--paper);
}
.article-header {
  padding-block: clamp(2.5rem, 4vw, 3.5rem) 2rem;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
}
.article-crumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.article-crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.article-crumbs a:hover {
  color: var(--ink);
}
.article-crumbs .current {
  color: var(--ink);
  font-weight: 600;
  max-width: 32ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--flame-deep);
  background: var(--flame-haze);
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  width: fit-content;
}
.article-badge svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--flame);
}
.article-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}
.article-meta__author {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.article-meta__avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--flame);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-meta__name {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink);
}
.article-meta__role {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-faint);
}
.article-meta__details {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.article-container {
  padding-block: 2.5rem 4rem;
}
.article-featured-image {
  margin-bottom: 2rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
}
.article-prose {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
}
.article-prose h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.article-prose h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  color: var(--ink);
}
.article-prose p {
  margin-bottom: 1.4rem;
}
.article-prose ul,
.article-prose ol {
  margin-bottom: 1.4rem;
  padding-left: 1.4rem;
}
.article-prose li {
  margin-bottom: 0.4rem;
}
.article-prose blockquote {
  border-left: 4px solid var(--flame);
  padding: 0.8rem 1.2rem;
  margin: 1.8rem 0;
  background: var(--surface-sunk);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
  color: var(--ink);
}

/* Callout Boxes */
.prose-callout {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--flame);
  background: var(--surface-sunk);
  border-radius: var(--r-sm);
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.prose-callout__icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.prose-callout__content {
  flex: 1;
}
.prose-callout__content strong {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.prose-callout__content p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.prose-callout--tip {
  border-left-color: #2f7d4f;
  background: rgba(47, 125, 79, 0.05);
}
.prose-callout--warning {
  border-left-color: #eab308;
  background: rgba(234, 179, 8, 0.06);
}
.prose-callout--insight {
  border-left-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

/* Prose Tables */
.prose-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  background: var(--surface);
  text-align: left;
}
.prose-table th {
  background: var(--surface-sunk);
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.prose-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  line-height: 1.5;
}
.prose-table tr:last-child td {
  border-bottom: none;
}
.prose-table tr:hover td {
  background: var(--surface-sunk);
}

/* Stat Highlights Grid */
.prose-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.8rem 0;
}
@media (min-width: 580px) {
  .prose-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.prose-stat-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.2rem;
  text-align: center;
}
.prose-stat-card__val {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--flame-deep);
  font-family: "Spline Sans Mono", monospace;
  margin-bottom: 0.2rem;
}
.prose-stat-card__label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Step by Step List */
.prose-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 2rem 0 !important;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.prose-step {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.2rem 1.4rem;
}
.prose-step__num {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--flame-haze);
  color: var(--flame-deep);
  display: grid;
  place-content: center;
  font-weight: 800;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.prose-step__content h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem 0;
  color: var(--ink);
}
.prose-step__content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* FAQ Accordion in Prose */
.prose-faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 0.9rem;
  background: var(--surface);
  overflow: hidden;
}
.prose-faq-item summary {
  padding: 1rem 1.3rem;
  font-weight: 700;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.prose-faq-item summary::-webkit-details-marker {
  display: none;
}
.prose-faq-item[open] summary {
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  color: var(--flame-deep);
}
.prose-faq-item__answer {
  padding: 1.1rem 1.3rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.prose-faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* Takeaway Box */
.article-takeaway {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 1.6rem 1.8rem;
  margin-block: 2.8rem 2.2rem;
  box-shadow: var(--shadow-sm);
}
.article-takeaway__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.article-takeaway__icon {
  font-size: 1.2rem;
}
.article-takeaway__head h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0;
}
.article-takeaway p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 1.2rem 0;
}
.article-takeaway__action {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* Related Articles */
.article-related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.article-related__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.article-related__head h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.25rem;
  margin: 0;
}
.article-related__head a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--flame-deep);
  text-decoration: none;
}
.article-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 680px) {
  .article-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.article-related__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.article-related__tag {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--flame-deep);
}
.article-related__card h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}
.article-related__card h4 a {
  color: var(--ink);
  text-decoration: none;
}
.article-related__card h4 a:hover {
  color: var(--flame-deep);
}
.article-related__card p {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}
.article-related__link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--flame-deep);
  text-decoration: none;
  margin-top: auto;
}

/* Article CTA Ribbon */
.article-cta-ribbon {
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-sunk) 100%);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: 2rem;
  margin-top: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.article-cta-ribbon__content {
  max-width: 48ch;
}
.article-cta-ribbon__content h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0 0 0.3rem 0;
}
.article-cta-ribbon__content p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
}

/* =========================================================================
   MODERN ACCOUNT DETAILS & SECURITY (BENTO 2-COLUMN HUB)
   ========================================================================= */
.acct-edit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 900px) {
  .acct-edit-grid {
    grid-template-columns: 1fr 340px;
  }
}

.acct-form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.acct-card {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.acct-card__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1.2rem 1.4rem !important;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
}
.acct-card__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.acct-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
}
.acct-card__subtitle {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 0 0;
}
.acct-card__body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.acct-two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 580px) {
  .acct-two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.acct-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.acct-field label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.acct-verified-badge {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #2f7d4f;
  background: rgba(47, 125, 79, 0.1);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}
.acct-input {
  width: 100%;
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.65rem 0.85rem;
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
  transition: all 0.15s ease;
}
.acct-input:focus {
  border-color: var(--flame);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--flame-haze);
}
.acct-field-error {
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 0.25rem 0 0 0;
}

.acct-security-note {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-left: 3px solid var(--flame);
  border-radius: var(--r-sm);
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.acct-security-note svg {
  flex-shrink: 0;
  color: var(--flame);
}

.acct-pw-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.acct-pw-wrapper input {
  padding-right: 2.5rem;
}
.acct-pw-toggle {
  position: absolute;
  right: 0.65rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.65;
  padding: 0.2rem;
  line-height: 1;
  transition: opacity 0.15s ease;
}
.acct-pw-toggle:hover {
  opacity: 1;
}

.acct-pw-rules {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.4rem;
}
.acct-pw-rule {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.acct-pw-rule span {
  color: var(--ok, #2f7d4f);
  font-weight: 700;
}

.acct-form-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 0.4rem;
}

.acct-edit-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.acct-card--sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.acct-card__head--compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem !important;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
}
.acct-card__body--compact {
  padding: 0.9rem 1.1rem !important;
}

.acct-meta-list {
  display: flex;
  flex-direction: column;
}
.acct-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
}
.acct-meta-row:first-child {
  padding-top: 0.15rem;
}
.acct-meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0.15rem;
}
.acct-meta-row__label {
  color: var(--ink-soft);
  font-weight: 500;
}
.acct-meta-row__val {
  font-weight: 600;
  color: var(--ink);
}
.acct-meta-row__val--wallet {
  color: var(--flame-deep);
  font-weight: 800;
}

.acct-side-nav-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.acct-side-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface-sunk);
  transition: all 0.15s ease;
}
.acct-side-link:hover {
  background: var(--flame-haze);
  color: var(--flame-deep);
  border-color: var(--flame);
  transform: translateX(2px);
}
.acct-side-link__arrow {
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}
.acct-side-link:hover .acct-side-link__arrow {
  color: var(--flame-deep);
  transform: translateX(2px);
}

.acct-security-card {
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
}
.acct-security-card__icon {
  font-size: 1.3rem;
  line-height: 1;
}
.acct-security-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--ink);
}
.acct-security-card__desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}

/* =========================================================================
   MODERN ACCOUNT DASHBOARD & ORDERS MANAGEMENT
   ========================================================================= */
.acct-head__badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* 4-Stat Metric Cards Grid */
.acct-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) {
  .acct-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .acct-summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.acct-stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.acct-stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.acct-stat-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}
.acct-stat-card__icon {
  font-size: 1.25rem;
  line-height: 1;
}
.acct-stat-card__tag {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-sunk);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.acct-stat-card__tag--flame {
  background: var(--flame-haze);
  color: var(--flame-deep);
}
.acct-stat-card__value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
}
.acct-stat-card__label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.acct-stat-card--active {
  border-color: var(--flame);
  background: var(--surface);
}
.acct-stat-card--wallet .acct-stat-card__value {
  color: var(--flame-deep);
}

/* Quick Action Launchpad Grid */
.acct-launchpad-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .acct-launchpad-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1040px) {
  .acct-launchpad-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.acct-launchpad-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.25rem 1.3rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all 0.15s ease;
}
.acct-launchpad-card:hover {
  transform: translateY(-2px);
  border-color: var(--flame);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.acct-launchpad-card__icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.acct-launchpad-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
.acct-launchpad-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
  color: var(--ink);
  transition: color 0.15s ease;
}
.acct-launchpad-card:hover .acct-launchpad-card__title {
  color: var(--flame-deep);
}
.acct-launchpad-card__desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}
.acct-launchpad-card__arrow {
  font-size: 0.95rem;
  color: var(--ink-faint);
  transition: transform 0.15s ease, color 0.15s ease;
}
.acct-launchpad-card:hover .acct-launchpad-card__arrow {
  color: var(--flame-deep);
  transform: translateX(3px);
}

/* Recent Orders Panel */
.acct-orders-panel {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.acct-orders-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem !important;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.acct-orders-panel__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.acct-orders-panel__subtitle {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 0 0;
}

.acct-orders-table {
  width: 100%;
  border-collapse: collapse;
}
.acct-orders-table th {
  background: var(--surface);
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.acct-orders-table td {
  padding: 0.95rem 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
  vertical-align: middle;
}
.acct-orders-table tr:last-child td {
  border-bottom: none;
}
.acct-orders-table tr:hover td {
  background: var(--surface-sunk);
}
.acct-order-link {
  color: var(--ink);
  text-decoration: none;
}
.acct-order-link:hover {
  color: var(--flame-deep);
}

.acct-empty-orders {
  text-align: center;
  padding: 3.5rem 1.5rem;
}
.acct-empty-orders__icon {
  font-size: 2.5rem;
  margin-bottom: 0.6rem;
}
.acct-empty-orders h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.2rem;
  margin: 0 0 0.3rem 0;
}
.acct-empty-orders p {
  color: var(--ink-soft);
  font-size: 0.86rem;
  margin: 0 0 1.2rem 0;
}

/* Orders Header in Orders View */
.acct-orders-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.acct-orders-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.acct-orders-subtitle {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0.2rem 0 0 0;
}

/* Assurance Banner */
.acct-guarantee-banner {
  background: var(--surface-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.acct-guarantee-banner__icon {
  font-size: 1.8rem;
  flex-shrink: 0;
}
.acct-guarantee-banner__text {
  flex: 1;
  min-width: 240px;
}
.acct-guarantee-banner__text h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  margin: 0 0 0.2rem 0;
  color: var(--ink);
}
.acct-guarantee-banner__text p {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
}
.acct-guarantee-banner__btn {
  flex-shrink: 0;
}




/* =========================================================================
   About Us Page Styles — Modern Aesthetic UI & High-Contrast Dark Typography
   ========================================================================= */

.about-page {
  color: #1e293b;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  line-height: 1.65;
}

/* Breadcrumbs */
.about-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 2rem;
}
.about-crumbs a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.15s ease;
}
.about-crumbs a:hover {
  color: var(--flame);
}
.about-crumbs__sep {
  color: #94a3b8;
}

/* Eyebrow Pills */
.about-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.95rem;
  background: rgba(219, 75, 38, 0.08);
  border: 1px solid rgba(219, 75, 38, 0.22);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b83c1d;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}
.about-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #db4b26;
  box-shadow: 0 0 8px rgba(219, 75, 38, 0.6);
}
.about-sub-pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #db4b26;
  margin-bottom: 0.75rem;
}
.about-pill--dark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.about-pill--dark .about-pill__dot {
  background: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}
.about-pill--cta {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Hero Section */
.about-hero {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  background: radial-gradient(circle at 50% 0%, rgba(219, 75, 38, 0.05) 0%, transparent 70%);
}
.about-hero__header {
  max-width: 820px;
  margin-bottom: 3.5rem;
}
.about-hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.35rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0f172a; /* Deep dark slate for maximum contrast */
  margin-bottom: 1.35rem;
}
.about-hero__highlight {
  background: linear-gradient(135deg, #db4b26 0%, #ea580c 50%, #e11d48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-hero__lead {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  line-height: 1.68;
  color: #1e293b; /* Dark, crisp font color */
  font-weight: 450;
  max-width: 720px;
}

/* Stats Counter Grid */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) {
  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
  }
}
.about-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.about-stat-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.1), 0 3px 8px rgba(15, 23, 42, 0.05);
}
.about-stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #db4b26, #f97316);
  opacity: 0.85;
}
.about-stat-card__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}
.about-stat-card__plus,
.about-stat-card__pct,
.about-stat-card__star {
  color: #db4b26;
  font-size: 0.85em;
}
.about-stat-card__unit {
  color: #475569;
  font-size: 0.45em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.25rem;
}
.about-stat-card__label {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 0.4rem;
}
.about-stat-card__desc {
  font-size: 0.86rem;
  color: #334155; /* Crisp dark slate description */
  line-height: 1.5;
}

/* Sections */
.about-section {
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.about-section--surface {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.about-section-header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: 3.5rem;
}
.about-section-header.text-center {
  text-align: center;
}
.about-section-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0f172a; /* Deep dark heading */
  margin-bottom: 1rem;
}
.about-section-subtitle {
  font-size: 1.08rem;
  line-height: 1.65;
  color: #1e293b;
}

/* Story Grid */
.about-story-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 960px) {
  .about-story-grid {
    grid-template-columns: 1fr;
  }
}
.about-story-text p {
  color: #1e293b;
  font-size: 1.04rem;
  line-height: 1.75;
  margin-bottom: 1.35rem;
}
.about-story-text em {
  color: #0f172a;
  font-weight: 600;
  font-style: normal;
}
.about-story-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}
.about-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #0f172a;
}
.about-badge-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dcfce7;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
}

/* Comparison Card */
.about-story-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 3px 10px rgba(15, 23, 42, 0.04);
}
.about-compare-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f1f5f9;
}
.about-compare-header h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.35rem;
}
.about-compare-header p {
  font-size: 0.88rem;
  color: #475569;
  margin: 0;
}
.about-compare-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.about-compare-row {
  padding: 1.25rem;
  border-radius: 12px;
}
.about-compare-row--bad {
  background: #fff1f2;
  border: 1px solid #ffe4e6;
}
.about-compare-row--good {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.about-compare-tag {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e11d48;
  margin-bottom: 0.75rem;
}
.about-compare-tag--good {
  color: #16a34a;
}
.about-compare-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.about-compare-bullets li {
  font-size: 0.88rem;
  font-weight: 550;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.about-compare-row--bad .about-compare-bullets li {
  color: #9f1239;
}
.about-compare-row--bad .about-compare-bullets li span {
  color: #e11d48;
  font-weight: 800;
}
.about-compare-row--good .about-compare-bullets li {
  color: #166534;
}
.about-compare-row--good .about-compare-bullets li span {
  color: #16a34a;
  font-weight: 800;
}

/* Pillars Grid */
.about-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}
@media (max-width: 768px) {
  .about-pillars-grid {
    grid-template-columns: 1fr;
  }
}
.about-pillar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.about-pillar-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 30px -6px rgba(15, 23, 42, 0.1);
}
.about-pillar-card__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(219, 75, 38, 0.1);
  color: #db4b26;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.35rem;
}
.about-pillar-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.28rem;
  font-weight: 750;
  color: #0f172a;
  letter-spacing: -0.015em;
  margin-bottom: 0.75rem;
}
.about-pillar-card__desc {
  font-size: 0.96rem;
  color: #1e293b;
  line-height: 1.68;
  margin: 0;
}

/* Steps Grid */
.about-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}
@media (max-width: 860px) {
  .about-steps-grid {
    grid-template-columns: 1fr;
  }
}
.about-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 2.25rem 1.85rem;
  position: relative;
  box-shadow: 0 4px 16px -3px rgba(15, 23, 42, 0.05);
}
.about-step-card__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(219, 75, 38, 0.22);
  margin-bottom: 1.25rem;
}
.about-step-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.18rem;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 0.65rem;
}
.about-step-card__desc {
  font-size: 0.94rem;
  color: #1e293b;
  line-height: 1.65;
  margin: 0;
}

/* Security Architecture Card */
.about-security-card {
  background: #0f172a; /* Deep dark slate security card */
  color: #f8fafc;
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4rem);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.35);
  position: relative;
  overflow: hidden;
}
.about-security-card::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -150px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(219, 75, 38, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.about-security-header {
  max-width: 680px;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.about-security-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.85rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.about-security-lead {
  font-size: 1.05rem;
  color: #cbd5e1;
  line-height: 1.65;
  margin: 0;
}
.about-security-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .about-security-grid {
    grid-template-columns: 1fr;
  }
}
.about-security-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.5rem;
}
.about-security-item__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.about-security-item__content h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.1rem;
  font-weight: 750;
  color: #ffffff;
  margin-bottom: 0.4rem;
}
.about-security-item__content p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* FAQ Accordion */
.about-faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.about-faq-item:hover {
  border-color: #cbd5e1;
}
.about-faq-item[open] {
  border-color: #db4b26;
  box-shadow: 0 4px 18px -4px rgba(219, 75, 38, 0.1);
}
.about-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 1.5rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.08rem;
  font-weight: 750;
  color: #0f172a;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.about-faq-question::-webkit-details-marker {
  display: none;
}
.about-faq-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.about-faq-item[open] .about-faq-chevron {
  transform: rotate(-135deg);
  border-color: #db4b26;
}
.about-faq-answer {
  padding: 0 1.5rem 1.35rem 1.5rem;
}
.about-faq-answer p {
  font-size: 0.96rem;
  color: #1e293b;
  line-height: 1.7;
  margin: 0;
}

/* CTA Card */
.about-cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 60%, #31103f 100%);
  border-radius: 24px;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.3);
}
.about-cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #db4b26, transparent);
}
.about-cta-content {
  max-width: 680px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.about-cta-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 1.15rem;
}
.about-cta-desc {
  font-size: 1.1rem;
  color: #e2e8f0;
  line-height: 1.65;
  margin-bottom: 2.25rem;
}
.about-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.about-cta-btn-primary {
  box-shadow: 0 8px 24px -4px rgba(219, 75, 38, 0.5);
}
.about-cta-btn-secondary {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
}
.about-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
}
.about-cta-guarantees {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-weight: 550;
  color: #cbd5e1;
}

/* Dark Mode Overrides */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .about-page {
    color: #e2e8f0;
  }
  :root:not([data-theme="light"]) .about-crumbs {
    color: #94a3b8;
  }
  :root:not([data-theme="light"]) .about-crumbs a {
    color: #f1f5f9;
  }
  :root:not([data-theme="light"]) .about-hero__title,
  :root:not([data-theme="light"]) .about-section-title,
  :root:not([data-theme="light"]) .about-stat-card__num,
  :root:not([data-theme="light"]) .about-stat-card__label,
  :root:not([data-theme="light"]) .about-pillar-card__title,
  :root:not([data-theme="light"]) .about-step-card__title,
  :root:not([data-theme="light"]) .about-compare-header h3,
  :root:not([data-theme="light"]) .about-faq-question {
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .about-hero__lead,
  :root:not([data-theme="light"]) .about-section-subtitle,
  :root:not([data-theme="light"]) .about-story-text p,
  :root:not([data-theme="light"]) .about-pillar-card__desc,
  :root:not([data-theme="light"]) .about-step-card__desc,
  :root:not([data-theme="light"]) .about-faq-answer p {
    color: #cbd5e1;
  }
  :root:not([data-theme="light"]) .about-stat-card__desc {
    color: #94a3b8;
  }
  :root:not([data-theme="light"]) .about-badge-item {
    color: #f1f5f9;
  }
  :root:not([data-theme="light"]) .about-section--surface {
    background: #14120f;
    border-color: #322d25;
  }
  :root:not([data-theme="light"]) .about-stat-card,
  :root:not([data-theme="light"]) .about-story-card,
  :root:not([data-theme="light"]) .about-pillar-card,
  :root:not([data-theme="light"]) .about-step-card,
  :root:not([data-theme="light"]) .about-faq-item {
    background: #201d18;
    border-color: #322d25;
  }
  :root:not([data-theme="light"]) .about-compare-header {
    border-bottom-color: #322d25;
  }
  :root:not([data-theme="light"]) .about-compare-row--bad {
    background: rgba(225, 29, 72, 0.12);
    border-color: rgba(225, 29, 72, 0.25);
  }
  :root:not([data-theme="light"]) .about-compare-row--good {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
  }
}

:root[data-theme="dark"] .about-page {
  color: #e2e8f0;
}
:root[data-theme="dark"] .about-crumbs {
  color: #94a3b8;
}
:root[data-theme="dark"] .about-crumbs a {
  color: #f1f5f9;
}
:root[data-theme="dark"] .about-hero__title,
:root[data-theme="dark"] .about-section-title,
:root[data-theme="dark"] .about-stat-card__num,
:root[data-theme="dark"] .about-stat-card__label,
:root[data-theme="dark"] .about-pillar-card__title,
:root[data-theme="dark"] .about-step-card__title,
:root[data-theme="dark"] .about-compare-header h3,
:root[data-theme="dark"] .about-faq-question {
  color: #f8fafc;
}
:root[data-theme="dark"] .about-hero__lead,
:root[data-theme="dark"] .about-section-subtitle,
:root[data-theme="dark"] .about-story-text p,
:root[data-theme="dark"] .about-pillar-card__desc,
:root[data-theme="dark"] .about-step-card__desc,
:root[data-theme="dark"] .about-faq-answer p {
  color: #cbd5e1;
}
:root[data-theme="dark"] .about-stat-card__desc {
  color: #94a3b8;
}
:root[data-theme="dark"] .about-badge-item {
  color: #f1f5f9;
}
:root[data-theme="dark"] .about-section--surface {
  background: #14120f;
  border-color: #322d25;
}
:root[data-theme="dark"] .about-stat-card,
:root[data-theme="dark"] .about-story-card,
:root[data-theme="dark"] .about-pillar-card,
:root[data-theme="dark"] .about-step-card,
:root[data-theme="dark"] .about-faq-item {
  background: #201d18;
  border-color: #322d25;
}
:root[data-theme="dark"] .about-compare-header {
  border-bottom-color: #322d25;
}
:root[data-theme="dark"] .about-compare-row--bad {
  background: rgba(225, 29, 72, 0.12);
  border-color: rgba(225, 29, 72, 0.25);
}
:root[data-theme="dark"] .about-compare-row--good {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
}

/* =========================================================================
   Legal & Privacy Policy Styles — Modern Aesthetic Layout & Dark Typography
   ========================================================================= */

.legal-page {
  color: #1e293b;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  line-height: 1.7;
}

/* Breadcrumbs */
.legal-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 1.85rem;
}
.legal-crumbs a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.15s ease;
}
.legal-crumbs a:hover {
  color: var(--flame);
}
.legal-crumbs__sep {
  color: #94a3b8;
}

/* Hero Section */
.legal-hero {
  padding-top: clamp(2rem, 4.5vw, 3.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: radial-gradient(circle at 50% 0%, rgba(219, 75, 38, 0.04) 0%, transparent 65%);
  border-bottom: 1px solid #e2e8f0;
}
.legal-hero__content {
  max-width: 860px;
}
.legal-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem;
  background: rgba(47, 93, 87, 0.08);
  border: 1px solid rgba(47, 93, 87, 0.22);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1b5049;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}
.legal-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f5d57;
  box-shadow: 0 0 8px rgba(47, 93, 87, 0.6);
}
.legal-hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0f172a; /* Deep dark slate for max readability */
  margin-bottom: 1.15rem;
}
.legal-hero__lead {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: #1e293b; /* Dark font color */
  font-weight: 450;
  max-width: 760px;
  margin-bottom: 2rem;
}
.legal-hero__lead strong {
  color: #0f172a;
  font-weight: 700;
}

/* Legal Meta Bar */
.legal-meta-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}
.legal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.legal-meta-label {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #475569;
}
.legal-meta-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}
.legal-meta-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
@media (max-width: 768px) {
  .legal-meta-actions {
    margin-left: 0;
    width: 100%;
  }
}
.legal-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.95rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.legal-action-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--flame);
}

/* Highlights Section */
.legal-highlights-section {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.legal-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 990px) {
  .legal-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .legal-highlights-grid {
    grid-template-columns: 1fr;
  }
}
.legal-highlight-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.legal-highlight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
}
.legal-highlight-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.legal-highlight-card__icon--orange {
  background: rgba(219, 75, 38, 0.1);
  color: #db4b26;
}
.legal-highlight-card__icon--green {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}
.legal-highlight-card__icon--blue {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}
.legal-highlight-card__icon--purple {
  background: rgba(147, 51, 234, 0.1);
  color: #9333ea;
}
.legal-highlight-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 0.4rem;
}
.legal-highlight-card__desc {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

/* Legal Content Layout: 2 Columns */
.legal-content-section {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.legal-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Sidebar & TOC */
.legal-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: static;
  width: 100%;
}
@media (min-width: 961px) {
  .legal-sidebar {
    position: sticky;
    top: 95px;
    width: 280px;
    flex-shrink: 0;
  }
}
@media (max-width: 960px) {
  .legal-sidebar {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    margin-bottom: 2rem;
  }
  .legal-support-card {
    display: none;
  }
}

.legal-toc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.25rem 1.4rem;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  position: relative;
  z-index: 2;
}

.legal-toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  list-style: none;
  user-select: none;
}
.legal-toc-summary::-webkit-details-marker {
  display: none;
}

.legal-toc-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0;
  margin-bottom: 0;
}

.legal-toc-header h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.legal-toc-chevron {
  display: none;
}

@media (max-width: 960px) {
  .legal-toc-summary {
    cursor: pointer;
    padding-bottom: 0.4rem;
  }
  .legal-toc-chevron {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .legal-toc-details[open] .legal-toc-chevron {
    transform: rotate(-135deg);
    border-color: #db4b26;
  }
  .legal-toc-details[open] .legal-toc-summary {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.85rem;
  }
}

@media (min-width: 961px) {
  .legal-toc-details .legal-toc-summary {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 1rem;
    pointer-events: none;
  }
}
.legal-toc-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.legal-toc-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 0.86rem;
  font-weight: 550;
  color: #334155;
  text-decoration: none;
  transition: all 0.15s ease;
}
.legal-toc-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.legal-toc-link:active,
.legal-toc-link.active {
  background: rgba(219, 75, 38, 0.08);
  color: #db4b26;
  font-weight: 700;
}
.legal-toc-num {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

/* Sidebar Support Card */
.legal-support-card {
  background: #0f172a;
  color: #ffffff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.25);
}
.legal-support-card__badge {
  display: inline-block;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #38bdf8;
  margin-bottom: 0.65rem;
}
.legal-support-card h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem;
  font-weight: 750;
  margin-bottom: 0.45rem;
  color: #ffffff;
}
.legal-support-card p {
  font-size: 0.84rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin-bottom: 1.15rem;
}
.legal-support-card__btn {
  display: block;
  text-align: center;
  padding: 0.55rem 1rem;
  background: #db4b26;
  color: #ffffff !important;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.legal-support-card__btn:hover {
  background: #b83c1d;
}

/* Legal Body Sections */
.legal-body {
  max-width: 820px;
}
.legal-section-block {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  border-bottom: 1px solid #e2e8f0;
  scroll-margin-top: 100px;
}
.legal-section-block:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.legal-section-header {
  margin-bottom: 1.35rem;
}
.legal-section-badge {
  display: inline-block;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #db4b26;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.45rem;
}
.legal-section-header h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a; /* Deep dark heading */
  line-height: 1.2;
}

/* Legal Prose Typography ("dark font colors") */
.legal-prose {
  color: #1e293b; /* Dark, crisp text */
  font-size: 1.02rem;
  line-height: 1.75;
}
.legal-prose p {
  margin-bottom: 1.25rem;
  color: #1e293b;
}
.legal-prose strong {
  color: #0f172a;
  font-weight: 700;
}
.legal-prose code {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.88em;
  background: #f1f5f9;
  color: #0f172a;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* Bullets */
.legal-bullets {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.legal-bullets li {
  position: relative;
  padding-left: 1.75rem;
  color: #1e293b;
  font-size: 0.98rem;
  line-height: 1.65;
}
.legal-bullets li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #db4b26;
}

/* Legal Data Table */
.legal-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}
.legal-table th {
  background: #f8fafc;
  padding: 0.9rem 1.15rem;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 750;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
  letter-spacing: -0.01em;
}
.legal-table td {
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: top;
  line-height: 1.6;
}
.legal-table tr:last-child td {
  border-bottom: 0;
}

/* Callouts */
.legal-callout {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  border-radius: 14px;
  padding: 1.5rem;
  margin: 1.75rem 0;
}
.legal-callout--safety {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
.legal-callout__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.legal-callout__body h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #14532d;
  margin-bottom: 0.45rem;
}
.legal-callout__body p {
  font-size: 0.95rem;
  color: #166534;
  line-height: 1.65;
  margin-bottom: 0.65rem;
}
.legal-callout__body p:last-child {
  margin-bottom: 0;
}

/* Cookie Grid */
.legal-cookie-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
@media (max-width: 768px) {
  .legal-cookie-grid {
    grid-template-columns: 1fr;
  }
}
.legal-cookie-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.25rem;
}
.legal-cookie-item h5 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.98rem;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 0.45rem;
}
.legal-cookie-item p {
  font-size: 0.86rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

/* DPO Box */
.legal-dpo-box {
  background: #ffffff;
  border: 2px solid #0f172a;
  border-radius: 18px;
  padding: 2.25rem;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08);
}
.legal-dpo-box__header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}
.legal-dpo-box__icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.legal-dpo-box__header h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.25rem;
}
.legal-dpo-box__header p {
  font-size: 0.92rem;
  color: #475569;
  margin: 0;
}
.legal-dpo-box__details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .legal-dpo-box__details {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.legal-dpo-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.legal-dpo-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #64748b;
}
.legal-dpo-val {
  font-size: 0.95rem;
  font-weight: 650;
  color: #0f172a;
}
a.legal-dpo-val {
  color: #db4b26;
  text-decoration: underline;
}
.legal-dpo-box__footer {
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}
.legal-dpo-box__footer p {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

/* Dark Mode Overrides for Legal Page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .legal-page {
    color: #e2e8f0;
  }
  :root:not([data-theme="light"]) .legal-crumbs {
    color: #94a3b8;
  }
  :root:not([data-theme="light"]) .legal-crumbs a {
    color: #f1f5f9;
  }
  :root:not([data-theme="light"]) .legal-hero {
    border-bottom-color: #322d25;
  }
  :root:not([data-theme="light"]) .legal-hero__title,
  :root:not([data-theme="light"]) .legal-section-header h2,
  :root:not([data-theme="light"]) .legal-highlight-card__title,
  :root:not([data-theme="light"]) .legal-toc-header h4,
  :root:not([data-theme="light"]) .legal-dpo-box__header h3 {
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .legal-hero__lead,
  :root:not([data-theme="light"]) .legal-prose,
  :root:not([data-theme="light"]) .legal-prose p,
  :root:not([data-theme="light"]) .legal-bullets li,
  :root:not([data-theme="light"]) .legal-table td {
    color: #cbd5e1;
  }
  :root:not([data-theme="light"]) .legal-prose strong {
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .legal-prose code {
    background: #1e1b18;
    color: #f8fafc;
    border-color: #383127;
  }
  :root:not([data-theme="light"]) .legal-meta-bar,
  :root:not([data-theme="light"]) .legal-section-block {
    border-color: #322d25;
  }
  :root:not([data-theme="light"]) .legal-meta-val {
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .legal-action-btn {
    background: #201d18;
    border-color: #383127;
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .legal-highlights-section {
    background: #14120f;
    border-bottom-color: #322d25;
  }
  :root:not([data-theme="light"]) .legal-highlight-card,
  :root:not([data-theme="light"]) .legal-toc-card,
  :root:not([data-theme="light"]) .legal-table-card,
  :root:not([data-theme="light"]) .legal-cookie-item,
  :root:not([data-theme="light"]) .legal-dpo-box {
    background: #201d18;
    border-color: #383127;
  }
  :root:not([data-theme="light"]) .legal-highlight-card__desc,
  :root:not([data-theme="light"]) .legal-cookie-item p,
  :root:not([data-theme="light"]) .legal-dpo-box__header p,
  :root:not([data-theme="light"]) .legal-dpo-box__footer p {
    color: #94a3b8;
  }
  :root:not([data-theme="light"]) .legal-toc-link {
    color: #cbd5e1;
  }
  :root:not([data-theme="light"]) .legal-toc-link:hover {
    background: #2a2620;
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .legal-table th {
    background: #171512;
    color: #f8fafc;
    border-bottom-color: #383127;
  }
  :root:not([data-theme="light"]) .legal-callout--safety {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
  }
  :root:not([data-theme="light"]) .legal-callout__body h4 {
    color: #86efac;
  }
  :root:not([data-theme="light"]) .legal-callout__body p {
    color: #bbf7d0;
  }
}

:root[data-theme="dark"] .legal-page {
  color: #e2e8f0;
}
:root[data-theme="dark"] .legal-crumbs {
  color: #94a3b8;
}
:root[data-theme="dark"] .legal-crumbs a {
  color: #f1f5f9;
}
:root[data-theme="dark"] .legal-hero {
  border-bottom-color: #322d25;
}
:root[data-theme="dark"] .legal-hero__title,
:root[data-theme="dark"] .legal-section-header h2,
:root[data-theme="dark"] .legal-highlight-card__title,
:root[data-theme="dark"] .legal-toc-header h4,
:root[data-theme="dark"] .legal-dpo-box__header h3 {
  color: #f8fafc;
}
:root[data-theme="dark"] .legal-hero__lead,
:root[data-theme="dark"] .legal-prose,
:root[data-theme="dark"] .legal-prose p,
:root[data-theme="dark"] .legal-bullets li,
:root[data-theme="dark"] .legal-table td {
  color: #cbd5e1;
}
:root[data-theme="dark"] .legal-prose strong {
  color: #f8fafc;
}
:root[data-theme="dark"] .legal-prose code {
  background: #1e1b18;
  color: #f8fafc;
  border-color: #383127;
}
:root[data-theme="dark"] .legal-meta-bar,
:root[data-theme="dark"] .legal-section-block {
  border-color: #322d25;
}
:root[data-theme="dark"] .legal-meta-val {
  color: #f8fafc;
}
:root[data-theme="dark"] .legal-action-btn {
  background: #201d18;
  border-color: #383127;
  color: #f8fafc;
}
:root[data-theme="dark"] .legal-highlights-section {
  background: #14120f;
  border-bottom-color: #322d25;
}
:root[data-theme="dark"] .legal-highlight-card,
:root[data-theme="dark"] .legal-toc-card,
:root[data-theme="dark"] .legal-table-card,
:root[data-theme="dark"] .legal-cookie-item,
:root[data-theme="dark"] .legal-dpo-box {
  background: #201d18;
  border-color: #383127;
}
:root[data-theme="dark"] .legal-highlight-card__desc,
:root[data-theme="dark"] .legal-cookie-item p,
:root[data-theme="dark"] .legal-dpo-box__header p,
:root[data-theme="dark"] .legal-dpo-box__footer p {
  color: #94a3b8;
}
:root[data-theme="dark"] .legal-toc-link {
  color: #cbd5e1;
}
:root[data-theme="dark"] .legal-toc-link:hover {
  background: #2a2620;
  color: #ffffff;
}
:root[data-theme="dark"] .legal-table th {
  background: #171512;
  color: #f8fafc;
  border-bottom-color: #383127;
}
:root[data-theme="dark"] .legal-callout--safety {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
}
:root[data-theme="dark"] .legal-callout__body h4 {
  color: #86efac;
}
:root[data-theme="dark"] .legal-callout__body p {
  color: #bbf7d0;
}

/* =========================================================================
   COMPREHENSIVE MOBILE RESPONSIVENESS (ALL PAGES & BLOG POSTS)
   ========================================================================= */

/* Prevent horizontal overflow across all devices */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Base Prose & Content Mobile Fluidity */
.prose,
.article-prose {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.prose table,
.article-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}

.prose pre,
.article-prose pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: var(--r-sm);
  padding: 0.85rem 1rem;
}

.prose code,
.article-prose code {
  word-break: break-word;
}

.prose img,
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

/* Blog Post Mobile Specifics */
@media (max-width: 640px) {
  .article-header {
    padding-block: 1.5rem 1.25rem;
  }
  .article-title {
    font-size: clamp(1.65rem, 5.5vw, 2.25rem);
    line-height: 1.18;
    word-break: break-word;
  }
  .article-crumbs .current {
    max-width: 22ch;
  }
  .article-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .article-meta__details {
    width: 100%;
    justify-content: flex-start;
    font-size: 0.78rem;
    gap: 0.65rem;
  }
  .article-container {
    padding-block: 1.5rem 2.5rem;
  }
  .article-featured-image {
    margin-bottom: 1.5rem;
    border-radius: var(--r-sm);
  }
  .article-takeaway {
    padding: 1.25rem 1.15rem;
    margin-block: 2rem 1.5rem;
  }
  .article-takeaway__action {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .article-takeaway__action .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .article-cta-ribbon {
    padding: 1.35rem 1.15rem;
    margin-top: 2rem;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 1.15rem;
  }
  .article-cta-ribbon .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .article-related {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
  }
}

/* Prose Interactive Components on Small Mobile */
@media (max-width: 480px) {
  .prose-step {
    padding: 0.95rem 1rem;
    gap: 0.8rem;
  }
  .prose-step__num {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.85rem;
  }
  .prose-callout {
    padding: 0.95rem 1rem;
    gap: 0.65rem;
    margin: 1.25rem 0;
  }
  .prose-stat-card {
    padding: 1rem;
  }
}

/* Legal & Privacy Policy Mobile Polish */
@media (max-width: 768px) {
  .legal-meta-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .legal-meta-actions {
    width: 100%;
    display: flex;
    gap: 0.65rem;
  }
  .legal-meta-actions .legal-action-btn {
    flex: 1;
    justify-content: center;
    text-align: center;
  }
  .legal-section-block {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
  }
  .legal-dpo-box {
    padding: 1.4rem 1.25rem;
  }
  .legal-dpo-box__header {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* About Page Mobile Polish */
@media (max-width: 640px) {
  .about-hero {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }
  .about-hero__header {
    margin-bottom: 2rem;
  }
  .about-stat-card {
    padding: 1.25rem 1.15rem;
  }
  .about-story-card {
    padding: 1.35rem 1.15rem;
  }
  .about-pillar-card {
    padding: 1.4rem 1.25rem;
  }
  .about-step-card {
    padding: 1.4rem 1.25rem;
  }
  .about-security-card {
    padding: 1.75rem 1.25rem;
  }
  .about-security-item {
    padding: 1.15rem;
    gap: 0.85rem;
  }
  .about-cta-card {
    padding: 2.25rem 1.25rem;
  }
  .about-cta-actions {
    flex-direction: column;
    width: 100%;
  }
  .about-cta-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .about-cta-guarantees {
    gap: 0.85rem;
    font-size: 0.78rem;
  }
}

/* =========================================================================
   Contact Us Page Styles — Modern Aesthetic Layout & High-Contrast Typography
   ========================================================================= */

.contact-page {
  color: #1e293b;
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  line-height: 1.65;
}

/* Breadcrumbs */
.contact-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #475569;
  margin-bottom: 1.85rem;
}
.contact-crumbs a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.15s ease;
}
.contact-crumbs a:hover {
  color: var(--flame);
}
.contact-crumbs__sep {
  color: #94a3b8;
}

/* Hero Section */
.contact-hero {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  background: radial-gradient(circle at 50% 0%, rgba(219, 75, 38, 0.05) 0%, transparent 70%);
  border-bottom: 1px solid #e2e8f0;
}
.contact-hero__header {
  max-width: 820px;
}
.contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.95rem;
  background: rgba(219, 75, 38, 0.08);
  border: 1px solid rgba(219, 75, 38, 0.22);
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b83c1d;
  letter-spacing: 0.02em;
  margin-bottom: 1.25rem;
}
.contact-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #db4b26;
  box-shadow: 0 0 8px rgba(219, 75, 38, 0.6);
}
.contact-hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.35rem, 4.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0f172a; /* Deep dark slate for maximum contrast */
  margin-bottom: 1.25rem;
}
.contact-hero__highlight {
  background: linear-gradient(135deg, #db4b26 0%, #ea580c 50%, #e11d48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-hero__lead {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.68;
  color: #1e293b; /* Dark font color */
  font-weight: 450;
  max-width: 740px;
  margin-bottom: 2rem;
}
.contact-hero__lead strong {
  color: #0f172a;
  font-weight: 700;
}

.contact-hero__guarantees {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}
.contact-guarantee-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  font-weight: 650;
  color: #0f172a;
}
.contact-guarantee-icon {
  font-size: 1.05rem;
}

/* Contact Channels Section */
.contact-channels-section {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.contact-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 990px) {
  .contact-channels-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .contact-channels-grid {
    grid-template-columns: 1fr;
  }
}
.contact-channel-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.85rem;
  box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}
.contact-channel-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 28px -6px rgba(15, 23, 42, 0.1);
}
.contact-channel-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
}
.contact-channel-card__icon--orange {
  background: rgba(219, 75, 38, 0.1);
  color: #db4b26;
}
.contact-channel-card__icon--blue {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}
.contact-channel-card__icon--green {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
}
.contact-channel-card__badge {
  display: inline-block;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.35rem;
}
.contact-channel-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.55rem;
}
.contact-channel-card__desc {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.55;
  margin-bottom: 1.35rem;
  flex: 1;
}
.contact-channel-card__action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.94rem;
  font-weight: 750;
  color: #db4b26;
  text-decoration: none;
  margin-bottom: 0.45rem;
  transition: color 0.15s ease, transform 0.15s ease;
}
.contact-channel-card__action:hover {
  color: #b83c1d;
  transform: translateX(2px);
}
.contact-channel-card__meta {
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 500;
}

/* Main Section: 2-Column Form & Hub */
.contact-main-section {
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.contact-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Contact Form Card */
.contact-form-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.06);
}
.contact-form-header {
  margin-bottom: 2rem;
}
.contact-sub-pill {
  display: inline-block;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #db4b26;
  margin-bottom: 0.5rem;
}
.contact-form-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.55rem;
}
.contact-form-subtitle {
  font-size: 0.98rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}
.contact-form-body {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 600px) {
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}
.contact-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.contact-label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.92rem;
  font-weight: 750;
  color: #0f172a;
}
.contact-req {
  color: #dc2626;
}
.contact-opt {
  font-size: 0.8em;
  font-weight: 500;
  color: #64748b;
}
.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  border-color: #db4b26;
  box-shadow: 0 0 0 3px rgba(219, 75, 38, 0.15);
}
.contact-input::placeholder,
.contact-textarea::placeholder {
  color: #94a3b8;
}
.contact-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
.contact-form-actions {
  margin-top: 0.5rem;
}
.contact-submit-btn {
  width: 100%;
  padding: 0.95rem 1.5rem;
  font-size: 1.02rem;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -4px rgba(219, 75, 38, 0.4);
  cursor: pointer;
}
.contact-form-security-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: #475569;
  text-align: center;
  margin-top: 0.25rem;
}
.contact-security-icon {
  font-size: 0.95rem;
}

/* Right Column: FAQ & Status */
.contact-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.contact-info-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 4px 18px -4px rgba(15, 23, 42, 0.05);
}
.contact-info-card__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.95rem;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 1.25rem;
}
.contact-info-icon {
  font-size: 1.25rem;
}
.contact-info-card__head h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.contact-faq-mini {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-faq-mini-item h5 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.98rem;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 0.35rem;
}
.contact-faq-mini-item p {
  font-size: 0.88rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

/* Status Card */
.contact-status-card {
  background: #0f172a;
  color: #ffffff;
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.25);
}
.contact-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1.25rem;
}
.contact-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
  animation: contactPulse 2s infinite ease-in-out;
}
@keyframes contactPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}
.contact-status-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: #86efac;
  letter-spacing: 0.01em;
}
.contact-status-details {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.35rem;
}
.contact-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
}
.contact-status-label {
  color: #94a3b8;
  font-weight: 500;
}
.contact-status-val {
  color: #f8fafc;
  font-weight: 700;
}
.contact-quick-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.84rem;
  font-weight: 600;
}
.contact-quick-links a {
  color: #38bdf8;
  text-decoration: none;
  transition: color 0.15s ease;
}
.contact-quick-links a:hover {
  color: #7dd3fc;
  text-decoration: underline;
}

/* Dark Mode Overrides for Contact Page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .contact-page {
    color: #e2e8f0;
  }
  :root:not([data-theme="light"]) .contact-crumbs {
    color: #94a3b8;
  }
  :root:not([data-theme="light"]) .contact-crumbs a {
    color: #f1f5f9;
  }
  :root:not([data-theme="light"]) .contact-hero {
    border-bottom-color: #322d25;
  }
  :root:not([data-theme="light"]) .contact-hero__title,
  :root:not([data-theme="light"]) .contact-channel-card__title,
  :root:not([data-theme="light"]) .contact-form-title,
  :root:not([data-theme="light"]) .contact-label,
  :root:not([data-theme="light"]) .contact-info-card__head h4,
  :root:not([data-theme="light"]) .contact-faq-mini-item h5,
  :root:not([data-theme="light"]) .contact-guarantee-tag {
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .contact-hero__lead,
  :root:not([data-theme="light"]) .contact-channel-card__desc,
  :root:not([data-theme="light"]) .contact-form-subtitle,
  :root:not([data-theme="light"]) .contact-faq-mini-item p {
    color: #cbd5e1;
  }
  :root:not([data-theme="light"]) .contact-hero__guarantees {
    border-top-color: #322d25;
  }
  :root:not([data-theme="light"]) .contact-channels-section {
    background: #14120f;
    border-bottom-color: #322d25;
  }
  :root:not([data-theme="light"]) .contact-channel-card,
  :root:not([data-theme="light"]) .contact-form-card,
  :root:not([data-theme="light"]) .contact-info-card {
    background: #201d18;
    border-color: #322d25;
  }
  :root:not([data-theme="light"]) .contact-input,
  :root:not([data-theme="light"]) .contact-select,
  :root:not([data-theme="light"]) .contact-textarea {
    background: #171512;
    border-color: #383127;
    color: #f8fafc;
  }
  :root:not([data-theme="light"]) .contact-info-card__head {
    border-bottom-color: #322d25;
  }
  :root:not([data-theme="light"]) .contact-form-security-note {
    color: #94a3b8;
  }
}

:root[data-theme="dark"] .contact-page {
  color: #e2e8f0;
}
:root[data-theme="dark"] .contact-crumbs {
  color: #94a3b8;
}
:root[data-theme="dark"] .contact-crumbs a {
  color: #f1f5f9;
}
:root[data-theme="dark"] .contact-hero {
  border-bottom-color: #322d25;
}
:root[data-theme="dark"] .contact-hero__title,
:root[data-theme="dark"] .contact-channel-card__title,
:root[data-theme="dark"] .contact-form-title,
:root[data-theme="dark"] .contact-label,
:root[data-theme="dark"] .contact-info-card__head h4,
:root[data-theme="dark"] .contact-faq-mini-item h5,
:root[data-theme="dark"] .contact-guarantee-tag {
  color: #f8fafc;
}
:root[data-theme="dark"] .contact-hero__lead,
:root[data-theme="dark"] .contact-channel-card__desc,
:root[data-theme="dark"] .contact-form-subtitle,
:root[data-theme="dark"] .contact-faq-mini-item p {
  color: #cbd5e1;
}
:root[data-theme="dark"] .contact-hero__guarantees {
  border-top-color: #322d25;
}
:root[data-theme="dark"] .contact-channels-section {
  background: #14120f;
  border-bottom-color: #322d25;
}
:root[data-theme="dark"] .contact-channel-card,
:root[data-theme="dark"] .contact-form-card,
:root[data-theme="dark"] .contact-info-card {
  background: #201d18;
  border-color: #322d25;
}
:root[data-theme="dark"] .contact-input,
:root[data-theme="dark"] .contact-select,
:root[data-theme="dark"] .contact-textarea {
  background: #171512;
  border-color: #383127;
  color: #f8fafc;
}
:root[data-theme="dark"] .contact-info-card__head {
  border-bottom-color: #322d25;
}
:root[data-theme="dark"] .contact-form-security-note {
  color: #94a3b8;
}

/* ==========================================================================
   ORDER TRACKING CONSOLE & TELEMETRY STYLING
   Industry standard, modern aesthetic, high contrast dark font colors
   ========================================================================== */

.tracker-page {
  color: #1e293b;
  font-family: inherit;
  background: #f8fafc;
  min-height: 80vh;
}

/* --- Hero Section --- */
.tracker-hero {
  background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 100%);
  padding: 3rem 0 3.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.tracker-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #475569;
  margin-bottom: 1.5rem;
}

.tracker-crumbs a {
  color: #0f172a;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.tracker-crumbs a:hover {
  color: #e64a19;
}

.tracker-crumbs__sep {
  color: #cbd5e1;
}

.tracker-crumbs__current {
  color: #64748b;
  font-weight: 600;
}

.tracker-hero__header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto;
}

.tracker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.tracker-pill__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  animation: trackerDotPulse 1.8s infinite ease-in-out;
}

@keyframes trackerDotPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.75;
  }
}

.tracker-hero__title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
}

.tracker-hero__sub {
  font-size: 1.08rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

/* --- Search Card --- */
.tracker-search-card {
  max-width: 54rem;
  margin: 2.25rem auto 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
}

.tracker-form__grid {
  display: grid;
  grid-template-columns: 1.15fr 1.35fr auto;
  gap: 1.25rem;
  align-items: flex-end;
}

.tracker-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tracker-field__label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.tracker-field__icon {
  color: #e64a19;
  font-weight: 800;
}

.tracker-field__svg {
  width: 1rem;
  height: 1rem;
  color: #e64a19;
}

.tracker-field__input {
  height: 3.1rem;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 0.75rem;
  padding: 0 1.1rem;
  font-size: 0.96rem;
  color: #0f172a;
  font-weight: 500;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.tracker-field__input:focus {
  outline: none;
  border-color: #e64a19;
  box-shadow: 0 0 0 3.5px rgba(230, 74, 25, 0.15);
}

.tracker-field__hint {
  font-size: 0.74rem;
  color: #64748b;
  margin-top: 0.15rem;
}

.tracker-field--btn {
  margin-bottom: 1.25rem;
}

.tracker-submit-btn {
  height: 3.1rem;
  padding: 0 1.8rem;
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: #ffffff;
  border: none;
  border-radius: 0.75rem;
  font-size: 0.98rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(230, 74, 25, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.tracker-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(230, 74, 25, 0.35);
  background: linear-gradient(135deg, #f4511e 0%, #d84315 100%);
}

.tracker-submit-btn:active {
  transform: translateY(0);
}

.tracker-search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.82rem;
}

.tracker-security-tag {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #475569;
  font-weight: 500;
}

.tracker-security-tag svg {
  color: #10b981;
}

.tracker-sample-hint {
  color: #64748b;
}

.tracker-sample-hint a {
  color: #e64a19;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Alert / Error State --- */
.tracker-alert {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 1rem;
  margin-top: 1.5rem;
  background: #ffffff;
  border: 1px solid #fecaca;
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.05);
}

.tracker-alert--danger {
  border-left: 5px solid #ef4444;
}

.tracker-alert__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  display: grid;
  place-content: center;
  flex-shrink: 0;
}

.tracker-alert__icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.tracker-alert__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.35rem;
}

.tracker-alert__desc {
  font-size: 0.94rem;
  color: #1e293b;
  line-height: 1.55;
  margin: 0 0 0.85rem;
}

.tracker-alert__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tracker-alert__tip {
  font-size: 0.78rem;
  color: #64748b;
}

/* --- Results / Telemetry Console --- */
.tracker-results {
  padding: 2.5rem 0 4rem;
}

.tracker-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.4rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-ribbon__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #e64a19;
  text-transform: uppercase;
}

.tracker-ribbon__id {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0.15rem 0 0.3rem;
}

.tracker-ribbon__date {
  font-size: 0.85rem;
  color: #475569;
  font-weight: 500;
}

/* Badges */
.tracker-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.15rem;
  border-radius: 9999px;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1.5px solid transparent;
}

.tracker-badge--live {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.tracker-badge--success {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}

.tracker-badge--warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}

.tracker-badge--pending {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}

.tracker-badge--muted {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

.tracker-badge__pulse {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
  animation: trackerDotPulse 1.5s infinite;
}

.tracker-badge__check {
  font-weight: 900;
  color: #10b981;
}

/* Metrics Grid */
.tracker-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.tracker-metric-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.4rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tracker-metric-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.tracker-metric-card__label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}

.tracker-metric-card__icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.65rem;
  display: grid;
  place-content: center;
}

.tracker-metric-card__icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.tracker-metric-card__icon--orange {
  background: #fff7ed;
  color: #ea580c;
}

.tracker-metric-card__icon--blue {
  background: #eff6ff;
  color: #2563eb;
}

.tracker-metric-card__icon--pink {
  background: #fdf2f8;
  color: #db2777;
}

.tracker-metric-card__icon--green {
  background: #ecfdf5;
  color: #059669;
}

.tracker-metric-card__val {
  font-size: 1.28rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.tracker-metric-card__percent {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2563eb;
  margin-left: 0.25rem;
}

.tracker-metric-card__val--green {
  color: #059669;
}

.tracker-metric-card__val--truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracker-metric-card__sub {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
}

.tracker-metric-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #db2777;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.tracker-metric-link:hover {
  color: #be185d;
  text-decoration: underline;
}

/* Progress Panel */
.tracker-progress-panel {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-progress-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tracker-progress-panel__tag {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: #e64a19;
  text-transform: uppercase;
}

.tracker-progress-panel__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0.15rem 0 0;
}

.tracker-progress-panel__stat {
  text-align: right;
}

.tracker-progress-panel__num {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  display: block;
}

.tracker-progress-panel__lbl {
  font-size: 0.82rem;
  color: #475569;
  font-weight: 600;
}

.tracker-bar {
  margin-bottom: 1.35rem;
}

.tracker-bar__track {
  height: 0.95rem;
  background: #e2e8f0;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.tracker-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5722 0%, #e64a19 100%);
  border-radius: 9999px;
  position: relative;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tracker-bar__glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
  animation: trackerShimmer 2s infinite linear;
}

@keyframes trackerShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.tracker-stream-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.15rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.84rem;
  color: #334155;
}

.tracker-stream-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tracker-stream-item__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #2563eb;
}

.tracker-stream-item__dot--purple {
  background: #8b5cf6;
}

.tracker-stream-item__dot--green {
  background: #10b981;
}

/* Stepper Box */
.tracker-stepper-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-stepper-box__head {
  margin-bottom: 2rem;
}

.tracker-stepper-box__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.25rem;
}

.tracker-stepper-box__sub {
  font-size: 0.86rem;
  color: #475569;
}

.tracker-stages {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tracker-stages::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 1.25rem;
  left: 1.2rem;
  width: 2px;
  background: #e2e8f0;
  z-index: 0;
}

.tracker-stage {
  display: flex;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

.tracker-stage__marker {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  color: #64748b;
  font-weight: 700;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #ffffff;
  font-size: 0.92rem;
}

.tracker-stage__marker svg {
  width: 1.2rem;
  height: 1.2rem;
}

.tracker-stage--done .tracker-stage__marker {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.tracker-stage--active .tracker-stage__marker {
  background: #ffffff;
  border-color: #e64a19;
  color: #e64a19;
  box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px rgba(230, 74, 25, 0.18);
}

.tracker-stage__pulse-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #e64a19;
  animation: trackerDotPulse 1.5s infinite;
}

.tracker-stage__body {
  flex: 1;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  padding: 1.2rem 1.4rem;
}

.tracker-stage--active .tracker-stage__body {
  border-color: #fed7aa;
  background: #fffaf5;
}

.tracker-stage__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.tracker-stage__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.tracker-stage__status {
  font-size: 0.75rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

.tracker-stage--active .tracker-stage__status {
  color: #ea580c;
  background: #fff7ed;
  border-color: #fed7aa;
}

.tracker-stage--pending .tracker-stage__status {
  color: #64748b;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.tracker-stage__desc {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.55;
  margin: 0 0 0.5rem;
}

.tracker-stage__time {
  font-size: 0.78rem;
  color: #64748b;
  font-family: "Spline Sans Mono", monospace;
  font-weight: 600;
}

/* Custom Comments Card */
.tracker-comments-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-comments-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.tracker-comments-card__title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.2rem;
}

.tracker-comments-card__count {
  font-size: 0.84rem;
  color: #475569;
}

.tracker-comments-toggle {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tracker-comments-toggle:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

.tracker-comments-list {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.tracker-comment-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
}

.tracker-comment-row__num {
  font-family: monospace;
  font-weight: 700;
  color: #64748b;
  font-size: 0.8rem;
  width: 2rem;
}

.tracker-comment-row__text {
  flex: 1;
  color: #0f172a;
  font-weight: 500;
}

.tracker-comment-row__badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #059669;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

/* Summary Grid */
.tracker-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.tracker-summary-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-summary-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.tracker-summary-card__desc {
  font-size: 0.94rem;
  color: #334155;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.tracker-kv-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0;
}

.tracker-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.92rem;
}

.tracker-kv-row dt {
  color: #64748b;
  font-weight: 500;
}

.tracker-kv-row dd {
  color: #0f172a;
  font-weight: 600;
  margin: 0;
}

.tracker-help-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* History List */
.tracker-history-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.75rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-history-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1.25rem;
}

.tracker-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.tracker-history-item {
  display: flex;
  gap: 1rem;
  font-size: 0.88rem;
}

.tracker-history-item__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #cbd5e1;
  margin-top: 0.4rem;
  flex-shrink: 0;
}

.tracker-history-item__content {
  flex: 1;
}

.tracker-history-item__status {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: #0f172a;
  margin-bottom: 0.2rem;
}

.tracker-history-item__status span {
  font-size: 0.78rem;
  color: #64748b;
}

.tracker-history-item__note {
  color: #475569;
  font-size: 0.82rem;
}

/* Buttons */
.tracker-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.8rem 1.4rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.tracker-btn--primary {
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(230, 74, 25, 0.25);
}

.tracker-btn--primary:hover {
  background: linear-gradient(135deg, #f4511e 0%, #d84315 100%);
  transform: translateY(-1px);
}

.tracker-btn--ghost {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}

.tracker-btn--ghost:hover {
  background: #e2e8f0;
}

.tracker-btn--outline-sm {
  background: #ffffff;
  color: #0f172a;
  border-color: #cbd5e1;
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
}

.tracker-btn--outline-sm:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* --- Empty State Components (Pillars & FAQs) --- */
.tracker-section-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2.5rem;
}

.tracker-section-head__pill {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #e64a19;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.tracker-section-head__title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin: 0 0 0.75rem;
}

.tracker-section-head__sub {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.55;
  margin: 0;
}

.tracker-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.tracker-pillar-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2.2rem 1.8rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tracker-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.06);
}

.tracker-pillar-card__icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  display: grid;
  place-content: center;
  margin-bottom: 1.4rem;
}

.tracker-pillar-card__icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.tracker-pillar-card__icon--blue {
  background: #eff6ff;
  color: #2563eb;
}

.tracker-pillar-card__icon--orange {
  background: #fff7ed;
  color: #ea580c;
}

.tracker-pillar-card__icon--green {
  background: #ecfdf5;
  color: #059669;
}

.tracker-pillar-card__title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.75rem;
}

.tracker-pillar-card__desc {
  font-size: 0.94rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

/* FAQ Grid */
.tracker-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.tracker-faq-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.8rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.tracker-faq-card__q {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.65rem;
}

.tracker-faq-card__a {
  font-size: 0.93rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

.tracker-faq-card__a a {
  color: #e64a19;
  font-weight: 600;
}

/* CTA Card */
.tracker-cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
}

.tracker-cta-card__content {
  max-width: 44rem;
  margin: 0 auto;
}

.tracker-cta-card__pill {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fb923c;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.75rem;
}

.tracker-cta-card__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.tracker-cta-card__desc {
  font-size: 1.05rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.tracker-cta-card__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.tracker-cta-card__btns .tracker-btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

.tracker-cta-card__btns .tracker-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
  .tracker-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tracker-pillars-grid {
    grid-template-columns: 1fr;
  }
  .tracker-summary-grid {
    grid-template-columns: 1fr;
  }
  .tracker-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .tracker-form__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .tracker-field--btn {
    margin-bottom: 0;
    margin-top: 0.5rem;
  }
  .tracker-submit-btn {
    width: 100%;
  }
  .tracker-metrics-grid {
    grid-template-columns: 1fr;
  }
  .tracker-search-card {
    padding: 1.5rem;
  }
  .tracker-ribbon {
    padding: 1.25rem;
  }
  .tracker-progress-panel {
    padding: 1.25rem;
  }
  .tracker-stepper-box {
    padding: 1.25rem;
  }
  .tracker-stage {
    gap: 1rem;
  }
}

/* --- Dark Theme Support --- */
:root[data-theme="dark"] .tracker-page {
  background: #0f172a;
  color: #f1f5f9;
}

:root[data-theme="dark"] .tracker-hero {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-bottom-color: #334155;
}

:root[data-theme="dark"] .tracker-crumbs a {
  color: #cbd5e1;
}

:root[data-theme="dark"] .tracker-crumbs__current {
  color: #94a3b8;
}

:root[data-theme="dark"] .tracker-hero__title,
:root[data-theme="dark"] .tracker-ribbon__id,
:root[data-theme="dark"] .tracker-metric-card__val,
:root[data-theme="dark"] .tracker-progress-panel__title,
:root[data-theme="dark"] .tracker-progress-panel__num,
:root[data-theme="dark"] .tracker-stepper-box__title,
:root[data-theme="dark"] .tracker-stage__title,
:root[data-theme="dark"] .tracker-comments-card__title,
:root[data-theme="dark"] .tracker-comment-row__text,
:root[data-theme="dark"] .tracker-summary-card__title,
:root[data-theme="dark"] .tracker-kv-row dd,
:root[data-theme="dark"] .tracker-history-card__title,
:root[data-theme="dark"] .tracker-history-item__status,
:root[data-theme="dark"] .tracker-section-head__title,
:root[data-theme="dark"] .tracker-pillar-card__title,
:root[data-theme="dark"] .tracker-faq-card__q,
:root[data-theme="dark"] .tracker-alert__title {
  color: #f8fafc;
}

:root[data-theme="dark"] .tracker-hero__sub,
:root[data-theme="dark"] .tracker-ribbon__date,
:root[data-theme="dark"] .tracker-metric-card__sub,
:root[data-theme="dark"] .tracker-progress-panel__lbl,
:root[data-theme="dark"] .tracker-stream-strip,
:root[data-theme="dark"] .tracker-stepper-box__sub,
:root[data-theme="dark"] .tracker-stage__desc,
:root[data-theme="dark"] .tracker-summary-card__desc,
:root[data-theme="dark"] .tracker-history-item__note,
:root[data-theme="dark"] .tracker-pillar-card__desc,
:root[data-theme="dark"] .tracker-faq-card__a,
:root[data-theme="dark"] .tracker-alert__desc {
  color: #cbd5e1;
}

:root[data-theme="dark"] .tracker-search-card,
:root[data-theme="dark"] .tracker-ribbon,
:root[data-theme="dark"] .tracker-metric-card,
:root[data-theme="dark"] .tracker-progress-panel,
:root[data-theme="dark"] .tracker-stepper-box,
:root[data-theme="dark"] .tracker-comments-card,
:root[data-theme="dark"] .tracker-summary-card,
:root[data-theme="dark"] .tracker-history-card,
:root[data-theme="dark"] .tracker-pillar-card,
:root[data-theme="dark"] .tracker-faq-card,
:root[data-theme="dark"] .tracker-alert {
  background: #1e293b;
  border-color: #334155;
}

:root[data-theme="dark"] .tracker-field__input {
  background: #0f172a;
  border-color: #475569;
  color: #f8fafc;
}

:root[data-theme="dark"] .tracker-field__label {
  color: #f1f5f9;
}

:root[data-theme="dark"] .tracker-stage__body {
  background: #0f172a;
  border-color: #334155;
}

:root[data-theme="dark"] .tracker-comment-row {
  background: #0f172a;
  border-color: #334155;
}

:root[data-theme="dark"] .tracker-stage__marker {
  background: #0f172a;
  border-color: #475569;
  box-shadow: 0 0 0 4px #1e293b;
}

:root[data-theme="dark"] .tracker-stages::before {
  background: #334155;
}

:root[data-theme="dark"] .tracker-bar__track {
  background: #334155;
}

:root[data-theme="dark"] .tracker-btn--ghost {
  background: #0f172a;
  color: #f8fafc;
  border-color: #475569;
}

/* ==========================================================================
   ENHANCED BLOG & ARTICLE STYLES (INDUSTRY STANDARD / DARK FONT COLORS)
   High contrast, aesthetic typography, modern editorial layout
   ========================================================================== */

/* --- Reading Progress Bar --- */
.article-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: linear-gradient(90deg, #ff5722, #e64a19);
  z-index: 9999;
  transition: width 0.08s ease-out;
}

/* --- Single Article View --- */
.article-view {
  background: #f8fafc;
  color: #1e293b;
  min-height: 80vh;
}

.article-header {
  background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 100%);
  padding-block: clamp(2.5rem, 4.5vw, 3.8rem) 2.2rem;
  border-bottom: 1px solid #e2e8f0;
}

.article-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #475569;
  flex-wrap: wrap;
}

.article-crumbs a {
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.article-crumbs a:hover {
  color: #e64a19;
}

.article-crumbs .sep {
  color: #cbd5e1;
}

.article-crumbs .current {
  color: #64748b;
  font-weight: 500;
  max-width: 36ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.article-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.article-updated-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.article-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.15rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.18;
  letter-spacing: -0.025em;
  margin: 0;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.article-meta__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.article-meta__avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 0 0 3px #fed7aa;
  flex-shrink: 0;
}

.article-meta__initials {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.article-meta__check {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  display: grid;
  place-content: center;
  border: 1.5px solid #ffffff;
}

.article-meta__name {
  display: block;
  font-size: 0.94rem;
  font-weight: 800;
  color: #0f172a;
}

.article-meta__role {
  display: block;
  font-size: 0.78rem;
  color: #475569;
  font-weight: 500;
}

.article-meta__details {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.article-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  color: #334155;
  font-weight: 600;
}

.article-meta__item svg {
  color: #e64a19;
}

/* Share Strip */
.article-share-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

.article-share-strip__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.6rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.article-share-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.article-share-btn svg {
  color: #475569;
}

/* Table of Contents */
.article-toc {
  margin-bottom: 2.5rem;
}

.article-toc__details {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.25rem 1.6rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.article-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  color: #0f172a;
}

.article-toc__summary::-webkit-details-marker {
  display: none;
}

.article-toc__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
  color: #0f172a;
}

.article-toc__title svg {
  color: #e64a19;
}

.article-toc__badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ea580c;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
}

.article-toc__list {
  list-style: none;
  padding: 1.15rem 0 0.25rem;
  margin: 1rem 0 0;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.article-toc__item {
  margin: 0;
}

.article-toc__link {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  text-decoration: none;
  font-size: 0.92rem;
  color: #1e293b;
  font-weight: 600;
  line-height: 1.45;
  transition: color 0.15s ease;
}

.article-toc__link:hover {
  color: #e64a19;
  text-decoration: underline;
}

.article-toc__num {
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.8rem;
  font-weight: 700;
  color: #e64a19;
  flex-shrink: 0;
}

/* --- Article Prose Typography (Dark Colors & Crisp Contrast) --- */
.article-container {
  padding-block: 2.5rem 4.5rem;
}

.article-featured-image {
  margin-bottom: 2.5rem;
  border-radius: 1.15rem;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.article-featured-image img {
  width: 100%;
  height: auto;
  display: block;
}

.article-prose {
  font-size: 1.08rem;
  line-height: 1.8;
  color: #1e293b;
}

.article-prose h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: #0f172a;
  scroll-margin-top: 5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1.5px solid #f1f5f9;
}

.article-prose h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  color: #0f172a;
  scroll-margin-top: 5rem;
}

.article-prose h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.article-prose p {
  color: #1e293b;
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.article-prose strong,
.article-prose b {
  color: #0f172a;
  font-weight: 700;
}

.article-prose em,
.article-prose i {
  color: #1e293b;
}

.article-prose a {
  color: #e64a19;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.article-prose a:hover {
  color: #c2410c;
}

.article-prose ul,
.article-prose ol {
  color: #1e293b;
  margin-bottom: 1.6rem;
  padding-left: 1.6rem;
}

.article-prose li {
  margin-bottom: 0.55rem;
  line-height: 1.7;
}

.article-prose blockquote {
  border-left: 4px solid #e64a19;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  padding: 1.4rem 1.8rem;
  margin: 2.25rem 0;
  border-radius: 0 1rem 1rem 0;
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #0f172a;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Callout Boxes */
.prose-callout {
  border: 1px solid #e2e8f0;
  border-left: 4px solid #e64a19;
  background: #ffffff;
  border-radius: 1rem;
  padding: 1.4rem 1.75rem;
  margin: 2.25rem 0;
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.prose-callout__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.prose-callout__content {
  flex: 1;
}

.prose-callout__content strong {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.35rem;
}

.prose-callout__content p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #1e293b;
}

.prose-callout--tip {
  border-left-color: #10b981;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.prose-callout--warning {
  border-left-color: #f59e0b;
  background: #fffbeb;
  border-color: #fde68a;
}

.prose-callout--insight {
  border-left-color: #3b82f6;
  background: #eff6ff;
  border-color: #bfdbfe;
}

/* Prose Tables */
.prose-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 2.25rem 0;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  text-align: left;
}

.prose-table th {
  background: #f8fafc;
  padding: 0.95rem 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: #0f172a;
  border-bottom: 1px solid #e2e8f0;
}

.prose-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  line-height: 1.6;
}

.prose-table tr:last-child td {
  border-bottom: none;
}

.prose-table tr:hover td {
  background: #f8fafc;
}

/* Stat Highlights Grid */
.prose-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2.25rem 0;
}

@media (min-width: 600px) {
  .prose-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.prose-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.4rem;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.prose-stat-card__val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #e64a19;
  font-family: "Spline Sans Mono", monospace;
  margin-bottom: 0.35rem;
  line-height: 1.15;
}

.prose-stat-card__label {
  font-size: 0.84rem;
  color: #334155;
  font-weight: 700;
}

/* Step by Step List */
.prose-steps {
  list-style: none !important;
  padding: 0 !important;
  margin: 2.25rem 0 !important;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.prose-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.4rem 1.65rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.prose-step__num {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: #ffffff;
  display: grid;
  place-content: center;
  font-weight: 800;
  font-family: "Spline Sans Mono", monospace;
  font-size: 0.95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(230, 74, 25, 0.25);
}

.prose-step__content h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.08rem;
  font-weight: 800;
  margin: 0 0 0.35rem 0;
  color: #0f172a;
}

.prose-step__content p {
  margin: 0;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.6;
}

/* FAQ Items in Prose */
.prose-faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 0.95rem;
  margin-bottom: 1rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.prose-faq-item summary {
  padding: 1.15rem 1.45rem;
  font-weight: 800;
  cursor: pointer;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  color: #0f172a;
}

.prose-faq-item summary::-webkit-details-marker {
  display: none;
}

.prose-faq-item[open] summary {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  color: #e64a19;
}

.prose-faq-item__answer {
  padding: 1.25rem 1.45rem;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.65;
}

.prose-faq-item__answer p:last-child {
  margin-bottom: 0;
}

/* --- Takeaway Box --- */
.article-takeaway {
  background: #ffffff;
  border: 1.5px solid #fed7aa;
  border-radius: 1.25rem;
  padding: 2rem 2.25rem;
  margin-block: 3.25rem 2.5rem;
  box-shadow: 0 10px 20px -5px rgba(230, 74, 25, 0.06);
}

.article-takeaway__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.article-takeaway__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #ffedd5;
  color: #ea580c;
  display: grid;
  place-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.article-takeaway__head h4 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #0f172a;
  margin: 0;
}

.article-takeaway__tag {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ea580c;
  display: block;
}

.article-takeaway p {
  font-size: 1rem;
  color: #1e293b;
  line-height: 1.65;
  margin: 0 0 1.5rem 0;
}

.article-takeaway__action {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

/* --- Feedback Rating Widget --- */
.article-feedback {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.25rem 1.75rem;
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.article-feedback__question {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
}

.article-feedback__btns {
  display: flex;
  gap: 0.65rem;
}

.feedback-btn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: 0.65rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.feedback-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.article-feedback__thanks {
  color: #059669;
  font-weight: 700;
  font-size: 0.9rem;
}

/* --- Author Bio Box --- */
.article-author-bio {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.25rem;
  padding: 2rem;
  margin-bottom: 3.5rem;
  display: flex;
  gap: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
}

.article-author-bio__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #fed7aa;
}

.article-author-bio__content {
  flex: 1;
}

.article-author-bio__header {
  margin-bottom: 0.45rem;
}

.article-author-bio__name {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.15rem;
}

.article-author-bio__role {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
  display: block;
}

.article-author-bio__text {
  font-size: 0.94rem;
  color: #334155;
  line-height: 1.6;
  margin: 0 0 0.85rem;
}

.article-author-bio__links {
  display: flex;
  gap: 1.25rem;
}

.article-bio-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: #e64a19;
  text-decoration: none;
}

.article-bio-link:hover {
  text-decoration: underline;
}

/* --- Related Articles --- */
.article-related {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e2e8f0;
}

.article-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.article-related__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #e64a19;
  text-transform: uppercase;
}

.article-related__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0.2rem 0 0;
}

.article-related__more {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.article-related__more:hover {
  color: #e64a19;
}

.article-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.article-related__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.article-related__card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.06);
}

.article-related__card-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.article-related__card-title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 0.5rem;
}

.article-related__card-title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.article-related__card-title a:hover {
  color: #e64a19;
}

.article-related__card-desc {
  font-size: 0.86rem;
  color: #334155;
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.article-related__card-foot {
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
}

.article-related__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #e64a19;
  text-decoration: none;
}

.article-related__link:hover {
  text-decoration: underline;
}

/* --- High-Converting Bottom CTA Ribbon --- */
.article-cta-ribbon {
  margin-top: 3.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: 1.5rem;
  padding: 2.75rem 3rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.2);
}

.article-cta-ribbon__content {
  max-width: 36rem;
}

.article-cta-ribbon__pill {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fb923c;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.5rem;
}

.article-cta-ribbon__title {
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 0.65rem;
}

.article-cta-ribbon__desc {
  font-size: 0.98rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

.article-cta-ribbon__action {
  flex-shrink: 0;
}

/* ==========================================================================
   BLOG HUB INDEX PAGE STYLES
   ========================================================================== */
.blog-hub {
  background: #f8fafc;
  color: #1e293b;
  min-height: 80vh;
}

.blog-hero {
  background: linear-gradient(180deg, #fff7ed 0%, #f8fafc 100%);
  padding: 3rem 0 2.5rem;
  border-bottom: 1px solid #e2e8f0;
}

.blog-hero__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  color: #475569;
}

.blog-hero__breadcrumbs a {
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
}

.blog-hero__header {
  max-width: 48rem;
}

.blog-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.blog-pill__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #10b981;
}

.blog-hero__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.1rem, 4vw, 2.85rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.85rem;
}

.blog-hero__desc {
  font-size: 1.08rem;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

.blog-filter-strip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding-top: 1.25rem;
}

.blog-filter-tag {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.blog-filter-tag:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.blog-filter-tag--active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* Featured Card */
.blog-featured-card {
  background: #ffffff;
  border: 1.5px solid #fed7aa;
  border-radius: 1.35rem;
  padding: 2.25rem 2.5rem;
  box-shadow: 0 10px 25px -5px rgba(230, 74, 25, 0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blog-featured-card__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.blog-featured-badge {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
}

.blog-featured-card__date,
.blog-featured-card__read {
  font-size: 0.82rem;
  color: #475569;
  font-weight: 600;
}

.blog-featured-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  margin: 0;
}

.blog-featured-card__title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.blog-featured-card__title a:hover {
  color: #e64a19;
}

.blog-featured-card__excerpt {
  font-size: 1.02rem;
  color: #334155;
  line-height: 1.65;
  margin: 0;
}

.blog-featured-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f5f9;
}

.blog-featured-card__desk {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 600;
}

/* Blog Cards Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.blog-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.15rem;
  padding: 1.65rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.06);
}

.blog-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 600;
}

.blog-card__read {
  margin-left: auto;
}

.blog-card__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.35;
  color: #0f172a;
  margin: 0 0 0.5rem;
}

.blog-card__title a {
  color: #0f172a;
  text-decoration: none;
  transition: color 0.15s ease;
}

.blog-card__title a:hover {
  color: #e64a19;
}

.blog-card__excerpt {
  font-size: 0.9rem;
  color: #334155;
  line-height: 1.55;
  margin: 0;
}

.blog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.95rem;
  border-top: 1px solid #f1f5f9;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #e64a19;
  text-decoration: none;
}

.blog-card__link:hover {
  text-decoration: underline;
}

.blog-card__category {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
}

/* Pagination */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e8f0;
}

.blog-page-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.6rem 1.35rem;
  border-radius: 0.75rem;
  text-decoration: none;
  transition: all 0.15s ease;
}

.blog-page-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.blog-page-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

.blog-pagination__counter {
  font-size: 0.9rem;
  color: #475569;
  font-weight: 500;
}

.blog-pagination__counter strong {
  color: #0f172a;
}

/* --- Mobile Responsiveness for Articles & Blog Hub --- */
@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-related__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .article-cta-ribbon {
    padding: 2rem 1.5rem;
  }
  .article-author-bio {
    flex-direction: column;
    padding: 1.5rem;
  }
  .article-takeaway {
    padding: 1.5rem;
  }
  .blog-featured-card {
    padding: 1.5rem;
  }
  .article-share-strip {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Dark Theme Overrides for Blog & Article --- */
:root[data-theme="dark"] .article-view,
:root[data-theme="dark"] .blog-hub {
  background: #0f172a;
  color: #f1f5f9;
}

:root[data-theme="dark"] .article-header,
:root[data-theme="dark"] .blog-hero {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  border-bottom-color: #334155;
}

:root[data-theme="dark"] .article-crumbs a,
:root[data-theme="dark"] .blog-hero__breadcrumbs a {
  color: #cbd5e1;
}

:root[data-theme="dark"] .article-title,
:root[data-theme="dark"] .article-prose h2,
:root[data-theme="dark"] .article-prose h3,
:root[data-theme="dark"] .article-prose h4,
:root[data-theme="dark"] .article-prose strong,
:root[data-theme="dark"] .article-meta__name,
:root[data-theme="dark"] .article-toc__title,
:root[data-theme="dark"] .article-takeaway__head h4,
:root[data-theme="dark"] .article-author-bio__name,
:root[data-theme="dark"] .article-related__title,
:root[data-theme="dark"] .article-related__card-title,
:root[data-theme="dark"] .article-related__card-title a,
:root[data-theme="dark"] .blog-hero__title,
:root[data-theme="dark"] .blog-featured-card__title a,
:root[data-theme="dark"] .blog-card__title a,
:root[data-theme="dark"] .article-feedback__question,
:root[data-theme="dark"] .feedback-btn,
:root[data-theme="dark"] .blog-page-btn {
  color: #f8fafc;
}

:root[data-theme="dark"] .article-prose,
:root[data-theme="dark"] .article-prose p,
:root[data-theme="dark"] .article-prose li,
:root[data-theme="dark"] .article-takeaway p,
:root[data-theme="dark"] .article-author-bio__text,
:root[data-theme="dark"] .article-related__card-desc,
:root[data-theme="dark"] .blog-hero__desc,
:root[data-theme="dark"] .blog-featured-card__excerpt,
:root[data-theme="dark"] .blog-card__excerpt {
  color: #cbd5e1;
}

:root[data-theme="dark"] .article-toc__details,
:root[data-theme="dark"] .article-featured-image,
:root[data-theme="dark"] .prose-callout,
:root[data-theme="dark"] .prose-table-wrap,
:root[data-theme="dark"] .prose-stat-card,
:root[data-theme="dark"] .prose-step,
:root[data-theme="dark"] .prose-faq-item,
:root[data-theme="dark"] .article-takeaway,
:root[data-theme="dark"] .article-feedback,
:root[data-theme="dark"] .article-author-bio,
:root[data-theme="dark"] .article-related__card,
:root[data-theme="dark"] .blog-featured-card,
:root[data-theme="dark"] .blog-card {
  background: #1e293b;
  border-color: #334155;
}

:root[data-theme="dark"] .article-toc__link,
:root[data-theme="dark"] .article-meta__item,
:root[data-theme="dark"] .article-share-btn,
:root[data-theme="dark"] .prose-table td,
:root[data-theme="dark"] .prose-step__content p {
  color: #e2e8f0;
}

:root[data-theme="dark"] .article-share-btn,
:root[data-theme="dark"] .feedback-btn,
:root[data-theme="dark"] .blog-page-btn,
:root[data-theme="dark"] .blog-filter-tag {
  background: #1e293b;
  border-color: #475569;
}

:root[data-theme="dark"] .prose-table th {
  background: #0f172a;
  color: #f8fafc;
  border-bottom-color: #334155;
}

:root[data-theme="dark"] .prose-table td {
  border-bottom-color: #334155;
}

:root[data-theme="dark"] .article-prose blockquote {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
  border-left-color: #e64a19;
}

/* ==========================================================================
   BLOG POST REFINED COMPONENT STYLES (STEPS, TABLES & FAQS)
   Addresses issues in screenshots: beautiful layout, aesthetic design, dark fonts
   ========================================================================== */

/* --- 1. Ordered Steps Block (.prose-steps & .prose-step) - Multi-card Row Grid --- */
.article-prose .prose-steps,
.prose .prose-steps,
.prose-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.25rem !important;
  margin: 2.5rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

@media (max-width: 860px) {
  .article-prose .prose-steps,
  .prose .prose-steps,
  .prose-steps {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .article-prose .prose-steps,
  .prose .prose-steps,
  .prose-steps {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

.article-prose .prose-step,
.prose .prose-step,
.prose-step {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 1.15rem !important;
  padding: 1.5rem 1.35rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  overflow: hidden !important;
}

.article-prose .prose-step::before,
.prose .prose-step::before,
.prose-step::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ff5722 0%, #ff8a65 100%) !important;
  opacity: 0.9 !important;
}

.article-prose .prose-step:hover,
.prose .prose-step:hover,
.prose-step:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-3px) !important;
}

/* Rigid number badge styling - guaranteed perfect circle, never stretched into oval */
.article-prose .prose-step > span:first-child,
.prose .prose-step > span:first-child,
.prose-step > span:first-child,
.prose-step__num {
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  flex: 0 0 2.5rem !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  background: linear-gradient(135deg, #ff5722 0%, #e64a19 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 800 !important;
  font-family: "Spline Sans Mono", monospace !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  box-shadow: 0 4px 10px rgba(230, 74, 25, 0.25) !important;
  border: 2px solid #ffffff !important;
  outline: 2px solid #fed7aa !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
}

/* Step content container */
.article-prose .prose-step > div,
.prose .prose-step > div,
.prose-step > div,
.prose-step__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Step title */
.article-prose .prose-step > div > strong:first-child,
.prose .prose-step > div > strong:first-child,
.prose-step > div > strong:first-child,
.article-prose .prose-step > div > h4,
.prose .prose-step > div > h4,
.prose-step__title {
  display: block !important;
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 0.45rem 0 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

/* Step paragraph */
.article-prose .prose-step > div > p,
.prose .prose-step > div > p,
.prose-step > div > p,
.prose-step__text {
  color: #334155 !important;
  font-size: 0.93rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* --- 2. Pricing & Data Tables (.prose-table-wrap & .prose-table) --- */
.article-prose .prose-table-wrap,
.prose .prose-table-wrap,
.prose-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  margin: 2.5rem 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 1.15rem !important;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.02) !important;
  display: block !important;
  -webkit-overflow-scrolling: touch !important;
}

.article-prose .prose-table,
.prose .prose-table,
.prose-table {
  width: 100% !important;
  min-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  font-size: 0.96rem !important;
  text-align: left !important;
  margin: 0 !important;
  display: table !important;
}

.article-prose .prose-table th,
.prose .prose-table th,
.prose-table th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 1.15rem 1.5rem !important;
  border-bottom: 2px solid #e2e8f0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  white-space: nowrap !important;
}

.article-prose .prose-table th:first-child,
.prose .prose-table th:first-child,
.prose-table th:first-child {
  border-top-left-radius: 1.05rem !important;
}

.article-prose .prose-table th:last-child,
.prose .prose-table th:last-child,
.prose-table th:last-child {
  border-top-right-radius: 1.05rem !important;
}

.article-prose .prose-table td,
.prose .prose-table td,
.prose-table td {
  padding: 1.15rem 1.5rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  color: #1e293b !important;
  font-size: 0.96rem !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
}

.article-prose .prose-table tbody tr:last-child td,
.prose .prose-table tbody tr:last-child td,
.prose-table tbody tr:last-child td {
  border-bottom: none !important;
}

.article-prose .prose-table tbody tr:last-child td:first-child,
.prose .prose-table tbody tr:last-child td:first-child,
.prose-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 1.05rem !important;
}

.article-prose .prose-table tbody tr:last-child td:last-child,
.prose .prose-table tbody tr:last-child td:last-child,
.prose-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 1.05rem !important;
}

.article-prose .prose-table tbody tr:hover td,
.prose .prose-table tbody tr:hover td,
.prose-table tbody tr:hover td {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.article-prose .prose-table td strong,
.prose .prose-table td strong,
.prose-table td strong {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* --- 3. FAQ Items (.prose-faq-item) --- */
.article-prose .prose-faq-item,
.prose .prose-faq-item,
.prose-faq-item {
  border: 1.5px solid #e2e8f0 !important;
  border-left: 4px solid #e64a19 !important;
  border-radius: 1rem !important;
  margin-bottom: 1.15rem !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.2s ease !important;
}

.article-prose .prose-faq-item:hover,
.prose .prose-faq-item:hover,
.prose-faq-item:hover {
  border-color: #cbd5e1 !important;
  border-left-color: #e64a19 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04) !important;
  transform: translateY(-1px);
}

/* Upgraded Interactive Details & Summary */
.prose-faq-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 1.25rem 1.65rem !important;
  cursor: pointer !important;
  user-select: none !important;
  background: #ffffff !important;
  transition: background 0.15s ease !important;
}

.prose-faq-summary::-webkit-details-marker {
  display: none !important;
}

.prose-faq-item[open] .prose-faq-summary {
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.prose-faq-q {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  flex: 1 !important;
}

.prose-faq-pill {
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 50% !important;
  background: #ffedd5 !important;
  color: #ea580c !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  border: 1px solid #fed7aa !important;
}

.prose-faq-qtext {
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
}

.prose-faq-chevron {
  color: #64748b !important;
  transition: transform 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.prose-faq-item[open] .prose-faq-chevron {
  transform: rotate(180deg) !important;
  color: #e64a19 !important;
}

.prose-faq-answer {
  padding: 1.25rem 1.65rem 1.35rem 4.35rem !important;
  color: #1e293b !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  background: #ffffff !important;
}

.prose-faq-answer p {
  margin: 0 !important;
  color: #1e293b !important;
}

/* Fallback for static div.prose-faq-item */
div.prose-faq-item {
  padding: 1.35rem 1.65rem !important;
}

div.prose-faq-item > strong {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  font-family: "Bricolage Grotesque", sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 0.65rem !important;
}

div.prose-faq-item > strong::before {
  content: "Q";
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.85rem !important;
  height: 1.85rem !important;
  border-radius: 50% !important;
  background: #ffedd5 !important;
  color: #ea580c !important;
  font-size: 0.84rem !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
  border: 1px solid #fed7aa !important;
}

div.prose-faq-item > p {
  color: #1e293b !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin: 0 !important;
  padding-left: 2.7rem !important;
}

@media (max-width: 640px) {
  .prose-faq-answer {
    padding-left: 1.45rem !important;
  }
  div.prose-faq-item > p {
    padding-left: 0 !important;
    margin-top: 0.45rem !important;
  }
  .article-prose .prose-step,
  .prose .prose-step,
  .prose-step {
    padding: 1.35rem 1.15rem !important;
  }
}

/* --- Dark Theme Overrides for Steps, Tables & FAQs --- */
:root[data-theme="dark"] .article-prose .prose-step,
:root[data-theme="dark"] .prose .prose-step,
:root[data-theme="dark"] .prose-step,
:root[data-theme="dark"] .article-prose .prose-table-wrap,
:root[data-theme="dark"] .prose .prose-table-wrap,
:root[data-theme="dark"] .prose-table-wrap,
:root[data-theme="dark"] .article-prose .prose-faq-item,
:root[data-theme="dark"] .prose .prose-faq-item,
:root[data-theme="dark"] .prose-faq-item,
:root[data-theme="dark"] .prose-faq-summary,
:root[data-theme="dark"] .prose-faq-answer,
:root[data-theme="dark"] div.prose-faq-item {
  background: #1e293b !important;
  border-color: #334155 !important;
}

:root[data-theme="dark"] .prose-step > span:first-child,
:root[data-theme="dark"] .prose-step__num {
  border-color: #1e293b !important;
  outline-color: #ea580c !important;
}

:root[data-theme="dark"] .article-prose .prose-step > div > strong:first-child,
:root[data-theme="dark"] .prose .prose-step > div > strong:first-child,
:root[data-theme="dark"] .prose-step > div > strong:first-child,
:root[data-theme="dark"] .prose-step__title,
:root[data-theme="dark"] .prose-faq-qtext,
:root[data-theme="dark"] div.prose-faq-item > strong {
  color: #f8fafc !important;
}

:root[data-theme="dark"] .article-prose .prose-step > div > p,
:root[data-theme="dark"] .prose .prose-step > div > p,
:root[data-theme="dark"] .prose-step > div > p,
:root[data-theme="dark"] .prose-step__text,
:root[data-theme="dark"] .prose-faq-answer,
:root[data-theme="dark"] .prose-faq-answer p,
:root[data-theme="dark"] div.prose-faq-item > p,
:root[data-theme="dark"] .article-prose .prose-table td,
:root[data-theme="dark"] .prose .prose-table td,
:root[data-theme="dark"] .prose-table td {
  color: #cbd5e1 !important;
}

:root[data-theme="dark"] .article-prose .prose-table th,
:root[data-theme="dark"] .prose .prose-table th,
:root[data-theme="dark"] .prose-table th {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-bottom-color: #334155 !important;
}

:root[data-theme="dark"] .article-prose .prose-table tbody tr:hover td,
:root[data-theme="dark"] .prose .prose-table tbody tr:hover td,
:root[data-theme="dark"] .prose-table tbody tr:hover td,
:root[data-theme="dark"] .prose-faq-item[open] .prose-faq-summary {
  background: #0f172a !important;
}

/* ---- wallet / add funds page --------------------------------------- */
a.acct-stat-card--wallet { text-decoration: none; }
.wallet-tiers {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem;
}
.wallet-tier {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .55rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-sunk); flex: 1 1 5.5rem;
}
.wallet-tier__from { font-family: "Spline Sans Mono", monospace; font-size: .72rem; color: var(--ink-soft); }
.wallet-tier__bonus { font-weight: 700; color: var(--flame-deep); }
.wallet-presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.wallet-preset {
  padding: .55rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); font-weight: 600; font-size: var(--step--1); cursor: pointer;
  font-family: "Spline Sans Mono", monospace; color: var(--ink);
}
.wallet-preset:hover { border-color: var(--flame); }
.wallet-preset.is-active { background: var(--flame-haze); border-color: var(--flame); color: var(--flame-deep); }
.wallet-form__row { display: flex; flex-wrap: wrap; gap: 1rem; }
.wallet-form .field { display: flex; flex-direction: column; gap: .3rem; }
.wallet-form .field > span { font-size: .78rem; font-weight: 600; color: var(--ink); }
.wallet-form input, .wallet-form select {
  padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface-sunk); color: var(--ink); font: inherit; width: 100%;
}
.wallet-yield {
  margin: 1rem 0 1.1rem; padding: .8rem 1rem; border-radius: var(--r-md);
  background: var(--ok-haze); color: var(--ink); font-size: var(--step--1); line-height: 1.5;
}
.wallet-pending { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.wallet-pending li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .8rem; }
.wallet-pending__bonus { color: var(--flame-deep); font-weight: 600; font-size: .85rem; }
.wallet-pending__via { color: var(--ink-soft); font-size: .85rem; }
.wallet-pending__note { flex-basis: 100%; color: var(--ink-faint); font-size: .8rem; }
.wallet-table-wrap { overflow-x: auto; }
.wallet-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.wallet-table th, .wallet-table td { padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; }
.wallet-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.wallet-table tbody tr:last-child td { border-bottom: 0; }
.wallet-table__note { display: block; font-size: .78rem; color: var(--ink-faint); }