/* ---- Claude-style warm palette (dark is the no-JS fallback) ----
   Kept byte-identical to template/report_template.html so the front desk and
   the report it sells are visibly the same product. */
:root,
:root[data-theme="dark"] {
  --bg: #262624;
  --bg-soft: #2d2c2a;
  --panel: #30302e;
  --panel-2: #3a3937;
  --border: #403f3b;
  --border-soft: #383734;
  --border-strong: #575550;
  --text: #f5f4ef;
  --text-dim: #b7b4a8;
  --text-faint: #8b897f;
  --accent: #d97757;          /* Claude terracotta */
  --accent-rgb: 217, 119, 87;
  --accent-ink: #2b160d;
  --pos: #0ca30c;             /* validated on #262624 (dataviz) */
  --neg: #e66767;
  --warn: #d9a13d;
  --chip: #3a3937;
  --shadow: 0 10px 34px rgba(0, 0, 0, .42);
  --topbar-bg: linear-gradient(180deg, rgba(38, 38, 36, .94), rgba(38, 38, 36, .76));
  --radius: 14px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #faf9f5;
  --bg-soft: #f3f1e9;
  --panel: #ffffff;
  --panel-2: #f3f1e9;
  --border: #e4e1d5;
  --border-soft: #ebe8dd;
  --border-strong: #cbc7b8;
  --text: #1f1e1d;
  --text-dim: #5d5a4f;
  --text-faint: #8b8778;
  --accent: #ba5b38;
  --accent-rgb: 186, 91, 56;
  --accent-ink: #ffffff;
  --pos: #006300;             /* validated on #faf9f5 (dataviz) */
  --neg: #d03b3b;
  --warn: #9a6b10;
  --chip: #f3f1e9;
  --shadow: 0 8px 26px rgba(31, 30, 29, .09);
  --topbar-bg: linear-gradient(180deg, rgba(250, 249, 245, .94), rgba(250, 249, 245, .78));
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(var(--accent-rgb), .07), transparent 60%),
    radial-gradient(800px 460px at -10% 12%, rgba(var(--accent-rgb), .04), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}
.serif {
  font-family: ui-serif, "Iowan Old Style", Georgia, "Songti SC",
    "Source Han Serif SC", "Times New Roman", serif;
  letter-spacing: .01em;
}
.mono { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px 72px; }
/* The post-payment page is one card and nothing else - full width would leave
   a lone panel stranded in the middle of a 1120px column. */
.wrap-narrow { max-width: 620px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The ONLY way to start an element hidden in this project. The CSP is
   `style-src 'self'` with no 'unsafe-inline', so a style="display:none" in the
   markup is dropped by the browser and the element renders - silently, and
   only in production, because the page looks right while it is a local file.
   !important so it still wins over a class that sets its own display. */
.is-hidden { display: none !important; }
.noscript-note { padding: 20px; text-align: center; }

/* ---- Topbar (identical mechanics to the report) ---- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* The brand is a link back to the checkout page on /paid. It must not pick up
   the accent colour or the underline every other <a> gets. */
.brand-link { color: inherit; }
.brand-link:hover { color: inherit; text-decoration: none; }
.brand-link:hover .brand-title { color: var(--accent); }
.brand-mark { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent); }
.brand-title { font-size: 19px; font-weight: 600; }
.brand-sub { font-size: 12px; color: var(--text-faint); margin-top: -2px; }
.top-spacer { flex: 1; }
.price-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); border: 1px solid rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .10);
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}
.theme-toggle {
  width: 33px; height: 33px; min-width: 33px; padding: 0;
  border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 15px; line-height: 1; transition: .15s; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.lang-switch .lang-btn {
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  background: transparent; border: none; color: var(--text-dim);
  font-size: 12px; font-weight: 700; transition: .15s; line-height: 1.4;
}
.lang-switch .lang-btn:hover { color: var(--text); }
.lang-switch .lang-btn.active { background: var(--accent); color: var(--accent-ink); }

/* ---- Hero ---- */
.hero { margin: 40px 0 8px; max-width: 720px; }
.hero h1 {
  font-size: 40px; font-weight: 600; line-height: 1.14;
  margin: 0 0 14px; letter-spacing: -.01em;
}
.hero h1 .hl { color: var(--accent); }
.hero p.lede { font-size: 16px; color: var(--text-dim); margin: 0 0 18px; }
.trust-row { display: flex; gap: 8px; flex-wrap: wrap; }
.trust-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-dim);
  background: var(--chip); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 4px 12px;
}
.trust-chip .ic { font-size: 12px; line-height: 1; }

/* ---- Stat strip (reports generated / turnaround / holders) ----
   Three tiles under the hero. The first one is the headline number and is
   deliberately the loudest thing on the page after the H1: accent colour, the
   biggest type in the layout, tabular figures so the count-up animation does
   not jitter the width. */
.stat-strip {
  display: grid; gap: 12px; margin: 22px 0 0;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
/* With the count hidden (a brand-new install, or show_report_count = false)
   the two remaining tiles share the row instead of leaving a gap. */
.stat-strip.no-count { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat {
  position: relative; min-width: 0;
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 15px 17px;
}
.stat .stat-v {
  font-size: 23px; font-weight: 650; line-height: 1.15; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.stat .stat-k {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); margin-top: 7px;
}
.stat .stat-d { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.stat .stat-d a { font-weight: 600; }
.stat-hero {
  border-color: rgba(var(--accent-rgb), .45);
  background:
    radial-gradient(320px 150px at 12% 0%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, var(--panel), var(--bg-soft));
}
.stat-hero .stat-v {
  font-size: 40px; color: var(--accent); display: flex; align-items: baseline;
}
.stat-hero .stat-plus { font-size: .6em; font-weight: 700; opacity: .8; }
.stat-live {
  position: absolute; top: 13px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
}
.stat-live .live-dot { width: 6px; height: 6px; }
@media (max-width: 760px) {
  /* Two columns, with the headline number spanning both: it stays big, and
     the strip stays short enough not to push the order form off a phone. */
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-hero { grid-column: 1 / -1; }
  .stat { padding: 13px 14px; }
  .stat-hero .stat-v { font-size: 33px; }
  .stat .stat-v { font-size: 20px; }
}

/* ---- Layout: order card + preview ---- */
.cols {
  display: grid; gap: 20px; margin: 26px 0 0;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  align-items: start;
}
/* The order card is much shorter than the sample-report panel beside it, so on
   a wide screen it would leave a column of dead space and scroll out of view
   exactly while the buyer is reading the sample that should make them buy.
   Sticking it keeps the call to action on screen for the whole scroll. */
@media (min-width: 901px) {
  #order-panel { position: sticky; top: 74px; }
}
.panel {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.panel-head {
  padding: 15px 18px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.panel-head h2 { font-size: 15px; font-weight: 650; margin: 0; }
.panel-head .sub { font-size: 12px; color: var(--text-faint); }
.panel-body { padding: 18px; }

/* ---- Stepper ---- */
.steps { display: flex; align-items: center; gap: 6px; margin: 0 0 18px; }
.step {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--text-faint);
}
.step .n {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); font-size: 11px; line-height: 1;
  transition: .18s;
}
.step.on { color: var(--text); }
.step.on .n { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.step.done .n { border-color: var(--pos); color: var(--pos); }
.step-line { flex: 1; height: 1px; background: var(--border); min-width: 10px; }

/* ---- Form ---- */
.field { margin-bottom: 15px; }
.field > label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-faint); margin-bottom: 6px;
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; outline: none; transition: .15s;
  overflow-wrap: anywhere;
}
.input::placeholder { color: var(--text-faint); }
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14);
}
.input.ok { border-color: rgba(var(--accent-rgb), .55); }
.input.bad { border-color: var(--neg); }
.input:disabled { opacity: .6; cursor: not-allowed; }
textarea.input { resize: vertical; min-height: 74px; line-height: 1.45; }
.hint { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; }
.hint.ok { color: var(--pos); }
.hint.bad { color: var(--neg); }
.chain-tag {
  display: none; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; padding: 2px 9px; margin-top: 8px;
  border: 1px solid rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .10); color: var(--accent);
}
.chain-tag.show { display: inline-flex; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 11px; padding: 11px 18px; cursor: pointer;
  font-size: 14px; font-weight: 650; transition: .15s;
  border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); width: 100%; }
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn-ghost {
  background: var(--panel); border-color: var(--border); color: var(--text-dim);
  font-size: 12.5px; padding: 8px 14px; border-radius: 9px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; display: none;
}
.is-busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  * { scroll-behavior: auto !important; }
}

.pay-note {
  font-size: 11.5px; color: var(--text-faint); text-align: center; margin-top: 10px;
}
/* "Pay in crypto? Pick BNB Chain." - advice about a page we do not control,
   so it reads as a tip, not as a rule of this site. */
.pay-hint {
  margin-top: 10px; padding: 8px 12px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.45; text-align: center;
  color: var(--accent);
  background: rgba(var(--accent-rgb), .09);
  border: 1px solid rgba(var(--accent-rgb), .28);
}
.price-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin: 4px 0 14px; padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.price-line .k { font-size: 12px; color: var(--text-faint); }
.price-line .v { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }
.price-line .once {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--pos); text-transform: uppercase;
}

/* ---- Status states ---- */
.state { display: none; }
.state.show { display: block; }
.state-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.state h3 { margin: 0 0 8px; font-size: 17px; font-weight: 650; }
.state p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-dim); }
.state .strong { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.state-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.order-id {
  font-size: 11px; color: var(--text-faint); margin-top: 12px;
  overflow-wrap: anywhere;
}
.pay-link-box {
  display: flex; gap: 6px; align-items: center; margin-top: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 10px;
}
.pay-link-box .u {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.progress {
  height: 4px; border-radius: 2px; overflow: hidden; margin-top: 14px;
  background: rgba(var(--accent-rgb), .18);
}
.progress > i {
  display: block; height: 100%; width: 40%; border-radius: 2px;
  background: var(--accent); animation: slide 1.6s ease-in-out infinite;
}
@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.banner {
  display: none; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid var(--warn); border-radius: 10px;
  color: var(--warn); background: rgba(var(--accent-rgb), .05);
  font-size: 12.5px;
}
.banner.show { display: block; }
.banner.err { border-color: var(--neg); color: var(--neg); }

/* ---- Post-payment page (/paid) ---- */
.receipt { margin-top: 40px; }
.receipt .panel-body { padding: 22px 22px 20px; }
.receipt-head { text-align: center; margin-bottom: 4px; }
.receipt-head .state-icon { font-size: 38px; margin-bottom: 10px; }
.receipt-head h1 {
  font-size: 26px; font-weight: 600; margin: 0 0 8px; line-height: 1.25;
}
.receipt-head p { margin: 0; font-size: 14px; color: var(--text-dim); }
.receipt p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-dim); }
.receipt .strong {
  margin-top: 16px; color: var(--text); font-weight: 600;
  overflow-wrap: anywhere;
}
.receipt .paid-hint { font-size: 12.5px; color: var(--text-faint); }
.receipt .state-actions { justify-content: center; }
.receipt .order-id { text-align: center; }
/* The live status line only appears once the SERVER has answered, so it is
   styled as fact, not decoration. */
.live-line {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  margin: 14px 0 2px; font-size: 12.5px; color: var(--text-dim);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); animation: pulse 1.5s ease-in-out infinite;
}
.live-dot.wait { background: var(--warn); }
.live-dot.ok { background: var(--pos); animation: none; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}
@media (max-width: 640px) {
  .receipt { margin-top: 24px; }
  .receipt-head h1 { font-size: 22px; }
}

/* ---- Preview ---- */
.preview-frame {
  position: relative; border-top: 1px solid var(--border-soft);
  background: var(--bg);
}
.preview-frame iframe {
  display: block; width: 100%; height: 560px; border: 0;
  background: var(--bg);
}
.preview-frame .veil {
  position: absolute; inset: auto 0 0 0; height: 54px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .16));
}
:root[data-theme="light"] .preview-frame .veil {
  background: linear-gradient(180deg, transparent, rgba(31, 30, 29, .07));
}
.preview-fallback {
  padding: 44px 20px; text-align: center; color: var(--text-faint); font-size: 13px;
}

/* ---- Feature grid ---- */
.feat-grid {
  display: grid; gap: 12px; padding: 16px 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.feat {
  background: var(--bg-soft); border: 1px solid var(--border-soft);
  border-radius: 11px; padding: 12px 14px;
}
.feat .ic { font-size: 17px; line-height: 1; margin-bottom: 7px; }
.feat .k { font-size: 13px; font-weight: 650; margin-bottom: 3px; }
.feat .d { font-size: 12px; color: var(--text-faint); }

/* ---- Chains ---- */
.chain-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chain-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600;
  background: var(--chip); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 5px 13px;
}
.chain-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ---- Generic section ---- */
.section { margin-top: 26px; }
.section > h2 {
  font-size: 19px; font-weight: 600; margin: 0 0 4px;
}
.section > p.sub { font-size: 13px; color: var(--text-faint); margin: 0 0 14px; }

/* ---- How it works ---- */
.how-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.how {
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.how .n {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  color: var(--accent); margin-bottom: 8px;
}
.how .k { font-size: 14.5px; font-weight: 650; margin-bottom: 5px; }
.how .d { font-size: 12.5px; color: var(--text-faint); }

/* ---- Privacy ---- */
.privacy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.privacy-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--text-dim);
}
.privacy-list .tick { color: var(--pos); font-weight: 800; line-height: 1.45; }
.privacy-list b { color: var(--text); font-weight: 600; }

/* ---- FAQ ---- */
.faq details {
  border: 1px solid var(--border); border-radius: 11px;
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  padding: 0; margin-bottom: 9px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 13px 16px; font-size: 13.5px; font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; margin-left: auto; color: var(--text-faint);
  font-size: 16px; line-height: 1; transition: .15s;
}
.faq details[open] summary::after { content: '\2212'; color: var(--accent); }
.faq summary:hover { color: var(--accent); }
.faq .a {
  padding: 0 16px 14px; font-size: 12.8px; color: var(--text-dim); margin: 0;
}

/* ---- Footer ---- */
.footer {
  margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border-soft);
  display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  color: var(--text-faint); font-size: 12px;
}
.footer .ver { color: var(--text-faint); }

/* The link columns above that bottom line. `.footer` keeps its own rules and
   is reused as the bottom row inside here, so the brand/version line is
   untouched on both pages. */
.site-footer {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--border-soft);
}
.site-footer .footer { margin-top: 20px; }
/* Flex, not grid: footer.js hides a whole column when both of its links are
   switched off in the config, and fixed grid tracks would leave that column's
   space behind as a hole. Flex items that are display:none simply stop
   existing, and the rest of the row closes up. */
.foot-top {
  display: flex; flex-wrap: wrap; gap: 22px 28px;
  align-items: flex-start;
}
/* Basis values chosen so 260 + 170 + 170 + gaps still fits the 720px content
   box a 760px viewport gives - the width at which the media query below takes
   over. Wider bases leave a dead band just above the breakpoint where the
   second link column wraps onto a row of its own. */
.foot-brand { min-width: 0; flex: 1 1 260px; }
.fb-row { display: flex; align-items: center; gap: 9px; }
.fb-row .brand-mark { width: 22px; height: 22px; }
.fb-title { font-size: 16px; font-weight: 600; }
.fb-sub {
  margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint);
  max-width: 42ch;
}
.foot-col { min-width: 0; flex: 0 1 170px; }
/* The post-payment page renders inside .wrap-narrow, a 620px column - so its
   footer is narrow at EVERY viewport width and a viewport media query never
   fires for it. Left to the three-across rule, the brand grew to fill row one
   and pushed "Contact" onto a row of its own, left-aligned under the tagline.
   Give that container the stacked layout outright: brand across the top, the
   two link columns side by side beneath it. */
.wrap-narrow .foot-top { gap: 18px 20px; }
.wrap-narrow .foot-brand { flex: 1 1 100%; }
.wrap-narrow .foot-col { flex: 1 1 150px; }
.foot-h {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px;
}
.foot-link {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 0; color: var(--text-dim); min-width: 0;
}
.foot-link:hover { color: var(--accent); text-decoration: none; }
.foot-link .fi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  background: var(--chip); border: 1px solid var(--border-soft);
  color: var(--text-faint); transition: .15s;
}
.foot-link .fi svg { width: 14px; height: 14px; display: block; }
.foot-link:hover .fi {
  color: var(--accent); border-color: rgba(var(--accent-rgb), .5);
  background: rgba(var(--accent-rgb), .10);
}
.fl-t { display: flex; flex-direction: column; min-width: 0; }
.fl-k { font-size: 13px; font-weight: 600; color: var(--text); }
.foot-link:hover .fl-k { color: var(--accent); }
.fl-d {
  font-size: 11.5px; color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 760px) {
  /* The brand takes the whole first row, the link columns share the second. */
  .foot-top { gap: 16px 20px; }
  .foot-brand { flex: 1 1 100%; }
  .foot-col { flex: 1 1 140px; }
}

@media (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .preview-frame iframe { height: 460px; }
}
@media (max-width: 640px) {
  .hero { margin-top: 28px; }
  .hero h1 { font-size: 29px; }
  .hero p.lede { font-size: 14.5px; }
  .preview-frame iframe { height: 380px; }
  .price-line .v { font-size: 21px; }
}