/* Coldfire Storefronts — public home page.
   A build of the approved "free-first" design: a frosted light page set
   entirely in Poppins, one accent taken from the flame mark, and dark ink
   only for the banner, the insights panel and the closing block.

   Light only, on purpose: the design has one palette, and a marketing page
   that flips to dark loses the frosted ground the whole layout sits on.
   Every colour below is a token on :root — component rules never hardcode
   one, same rule the admin panel follows. */

:root {
  --sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --paper: #eef3f8;
  --surface: #ffffff;
  --shelf: #dcebf2;
  --line: #d6e0ea;
  --line-str: #c5d1de;

  --ink: #0b1220;
  --ink-2: #141c2e;
  --fg: #0b1220;
  --mut: #4a5669;
  --fnt: #6b7686;
  --on-dark: #eef1f7;
  --on-dark-mut: #a9b3c5;
  --on-dark-fnt: #7f8aa0;

  --accent: #3868b8;
  --accent-link: #2d5aa3;
  --ice: #acdde8;
  --ok: #17875a;
  --ok-dot: #17a86b;
  --ok-sf: #e3f5ec;
  --ok-fg: #0f6b44;
  --warn-sf: #fbf0dc;
  --warn-fg: #8a5a12;
  --info-sf: #e2ecfa;
  --info-fg: #1f4580;

  --r-lg: 28px;
  --r: 20px;
  --r-sm: 14px;
  --lift: 0 1px 2px rgba(11, 18, 32, .06), 0 30px 60px -30px rgba(11, 18, 32, .35);
  --gutter: 64px;
  --big-gutter: 120px;
  --maxw: 1440px;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--accent-link); text-decoration: none; }
a:hover { color: #1f4580; }
b, strong { font-weight: 600; }

h1, h2, .band-zero, .plan-price b, .win-title, .brand span, .theme h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.i { width: 18px; height: 18px; flex-shrink: 0; }
.mono { font-size: 12px; }
.fine { font-size: 12px; color: var(--on-dark-fnt); }
.accent { color: var(--accent); }
.ice { color: var(--ice); }

/* The pulsing live dot, reused by every "live" marker on the page. */
.dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ok-dot);
  flex-shrink: 0;
}
.dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--ok-dot);
  animation: ping 1.8s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { font-size: 13px; padding: 10px 17px; }
.btn-lg { font-size: 16px; padding: 12px 28px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #2f5aa1; color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #111a2d; color: #fff; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { color: var(--ink); }
.btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { color: var(--fg); border-color: var(--line-str); }
.btn-disabled {
  background: transparent;
  color: #8f9bb0;
  border-color: rgba(238, 241, 247, .22);
  cursor: not-allowed;
}
.btn-disabled:hover { transform: none; }

/* ---------- tags ---------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag-beta { background: var(--ice); color: var(--ink); letter-spacing: .08em; padding-left: 10px; }
.tag-live { background: var(--ok-sf); color: var(--ok-fg); letter-spacing: .06em; padding-left: 10px; }
.tag-draft { background: var(--warn-sf); color: var(--warn-fg); }
.tag-preview { background: var(--info-sf); color: var(--info-fg); }
.tag-accent { background: var(--accent); color: #fff; }
.tag-ice { background: var(--ice); color: var(--ink); }
.tag-pro { background: var(--ice); color: var(--ink); border-radius: 6px; padding: 4px 8px; font-size: 11px; }

/* ---------- banner + nav ---------- */

.banner {
  background: var(--ink-2);
  color: #dfe5ef;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 13px var(--gutter);
  font-size: 14px;
}
.banner-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ice); font-weight: 600; }
.banner-link:hover { color: #fff; }
.banner-link .i { width: 15px; height: 15px; }

.nav {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); flex-shrink: 0; }
.brand span { font-size: 18px; letter-spacing: -0.02em; }
.brand:hover { color: var(--fg); }
.brand-light, .brand-light:hover { color: var(--on-dark); }
.brand-light span { font-size: 16px; }

.nav-links { display: flex; gap: 4px; flex-grow: 1; justify-content: center; }
.nav-links a { color: #36445a; font-size: 14px; padding: 10px 16px; border-radius: 999px; }
.nav-links a:hover { color: var(--fg); background: var(--surface); }
/* margin-left: auto keeps these on the right edge even when the centre links
   are hidden (tablet and phone). */
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-signin { color: var(--fg); font-size: 14px; font-weight: 500; padding: 12px 8px; }
.nav-toggle {
  display: none;
  font: inherit;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
}
.nav-toggle .i { width: 20px; height: 20px; }
.nav-toggle svg:last-child { display: none; }
.nav-toggle[aria-expanded="true"] svg:first-child { display: none; }
.nav-toggle[aria-expanded="true"] svg:last-child { display: block; }
.nav-mobile { display: none; flex-direction: column; padding: 8px 20px 20px; gap: 4px; }
.nav-mobile a { color: var(--fg); font-size: 16px; padding: 12px 4px; border-bottom: 1px solid var(--line); }

/* ---------- hero ---------- */

.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 18px 8px 14px;
  font-size: 14px;
  color: #36445a;
}
.pill b { color: var(--fg); }
.hero h1 { font-size: 72px; line-height: 1.02; letter-spacing: -0.035em; max-width: 1100px; }
.hero-sub { font-size: 18px; color: var(--mut); max-width: 760px; }
.hero-actions { display: flex; gap: 12px; align-items: center; }
.hero-ticks { display: flex; gap: 28px; font-size: 14px; color: var(--mut); }
.hero-ticks li { display: flex; align-items: center; gap: 8px; }
.hero-ticks .i { width: 16px; height: 16px; stroke: var(--ok); stroke-width: 2.6; }

/* hero stage: drawn storefront + the two floating product cards */
.stage { position: relative; width: 100%; max-width: 1312px; height: 640px; margin-top: 8px; }
.stage-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 420px; border-radius: 40px 40px 0 0; background: var(--shelf); }
.win {
  position: absolute;
  left: 116px;
  top: 0;
  width: 860px;
  height: 600px;
  border-radius: var(--r);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--lift);
  overflow: hidden;
  text-align: left;
}
.win-bar { height: 52px; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid #e3e9f0; }
.win-host { font-size: 13px; color: var(--mut); flex-grow: 1; }
.win-meta { font-size: 12px; color: var(--fnt); }
.win-body { background: #111827; height: calc(100% - 52px); }
.win-head { height: 190px; background: #1d2e52; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.win-title { display: block; font-size: 30px; color: #fff; }
.win-ip { display: block; font-size: 13px; color: var(--ice); margin-top: 8px; }
.win-basket { font-size: 13px; color: #fff; background: rgba(255, 255, 255, .12); padding: 10px 16px; border-radius: 8px; }
.win-tabs { display: flex; gap: 20px; padding: 0 40px; height: 52px; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.win-tabs span { font-size: 13px; color: var(--on-dark-mut); }
.win-tabs .on { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); padding: 16px 0; }
.win-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 28px 40px; }
.win-card { background: #1a2233; border-radius: var(--r-sm); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.win-card b { font-size: 15px; color: #fff; }
.win-card i { font-size: 13px; color: var(--on-dark-mut); font-style: normal; }
.shot { height: 110px; border-radius: 8px; display: block; }
.shot-a { background: #26365a; }
.shot-b { background: #2f4674; }

.float {
  position: absolute;
  border-radius: var(--r);
  box-shadow: var(--lift);
  text-align: left;
  display: flex;
  flex-direction: column;
}
.float-settings { left: 920px; top: 110px; width: 300px; padding: 22px; gap: 16px; background: var(--surface); border: 1px solid var(--line); }
.float-head { display: flex; align-items: center; justify-content: space-between; }
.float-head b { font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { flex-direction: row; align-items: center; justify-content: space-between; font-size: 14px; }
.field-label { font-size: 12px; color: var(--mut); }
.swatches { display: flex; gap: 8px; }
.swatches i { width: 30px; height: 30px; border-radius: 999px; background: var(--accent); }
.swatches .on { outline: 2px solid var(--ink); outline-offset: 2px; }
.sw-b { background: #7a4fc2 !important; }
.sw-c { background: #d0532a !important; }
.sw-d { background: #1f8f66 !important; }
.toggle { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--accent); }
.toggle::after { content: ""; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 999px; background: #fff; }
.float-btn { text-align: center; font-size: 14px; font-weight: 600; color: #fff; padding: 12px; border-radius: 999px; background: var(--ink); }

.float-tip { left: 20px; top: 380px; width: 290px; padding: 20px; gap: 10px; background: var(--ink); }
.tip-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ice); }
.tip-label .i { width: 16px; height: 16px; }
.tip-text { font-size: 14px; line-height: 1.45; color: var(--on-dark); }
.tip-link { font-size: 13px; font-weight: 600; color: var(--ice); }

/* ---------- free band ---------- */

.band {
  margin-top: 80px;
  padding: 60px var(--big-gutter);
  background: var(--accent);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
}
.band-copy { display: flex; flex-direction: column; gap: 20px; color: #fff; }
.band-zero { font-size: 140px; line-height: .85; letter-spacing: -0.05em; }
.band-copy h2 { font-size: 34px; line-height: 1.05; color: #fff; }
.band-copy p { font-size: 16px; color: #e4edf9; max-width: 440px; }
.band-card { background: var(--surface); border-radius: var(--r-lg); padding: 30px 40px; display: flex; flex-direction: column; gap: 24px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.checks { display: flex; flex-direction: column; gap: 14px; }
.checks-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.checks li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; }
.checks .i { width: 20px; height: 20px; margin-top: 2px; stroke: var(--ok); stroke-width: 2.6; }
.band-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 14px; color: var(--mut); }

/* ---------- generic section ---------- */

.section { max-width: var(--maxw); margin: 0 auto; padding: 118px var(--gutter); }
.section + .section { padding-top: 0; }
.section-head { display: flex; flex-direction: row; gap: 16px; margin-bottom: 56px; }
.section-head h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.03em; max-width: 820px; }
.section-head p { font-size: 16px; color: var(--mut); max-width: 480px; }
.section-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
.section-head-center { align-items: center; text-align: center; }
.section-head-center p { max-width: 600px; font-size: 17px; }

.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.card h3 { font-size: 18px; font-weight: 600; }
.card p { font-size: 14px; color: var(--mut); }
.card-demo { width: 100%; height: 150px; border-radius: var(--r-sm); display: flex; padding: 18px; gap: 10px; }
.card-demo-draft { background: var(--paper); flex-direction: column; }
.demo-label { font-size: 12px; color: var(--mut); }
.demo-input { font-size: 14px; background: var(--surface); border: 2px solid var(--accent); border-radius: 10px; padding: 10px 12px; }
.demo-saved { font-size: 12px; color: var(--ok); }
.card-demo-preview { background: #1d2e52; align-items: center; justify-content: center; position: relative; }
.demo-banner { font-size: 19px; font-weight: 700; color: #fff; }
.demo-only { position: absolute; top: 12px; right: 12px; font-size: 11px; color: var(--ink); background: var(--warn-sf); padding: 4px 8px; border-radius: 6px; }
.card-demo-publish { background: var(--paper); align-items: center; justify-content: center; gap: 12px; }
.demo-ghost { font-size: 14px; color: var(--mut); padding: 12px 18px; border-radius: 999px; border: 1px solid var(--line-str); }
.demo-solid { font-size: 14px; font-weight: 600; color: #fff; padding: 12px 22px; border-radius: 999px; background: var(--ink); }
.tag-live-solid { padding-left: 10px; }

/* ---------- themes ---------- */

/* Three equal cards: a fixed-height crop of each demo store with the theme's
   name and its live-demo link under it. Equal widths on purpose — no theme
   is the "small" one, and a fourth card just joins the row. */
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.theme { position: relative; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.theme-deluxe { background: #140f26; }
.theme-radiant { background: #1c1207; }
.theme-cobalt { background: #0b1a33; }
.theme-shot { height: 250px; overflow: hidden; }
.theme-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.theme-caption { padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.theme h3 { font-size: 26px; color: #fff; letter-spacing: -0.02em; }
.theme-badge { position: absolute; top: 20px; left: 20px; z-index: 1; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--ice); padding: 6px 12px; border-radius: 999px; }
.theme-note { margin-top: 24px; text-align: center; font-size: 15px; color: var(--mut); }

/* ---------- insights ---------- */

.insights {
    width: 100%;
    margin: 0 auto;
    background: var(--ink);
    color: var(--on-dark);
    padding: 80px var(--big-gutter);
}
.insights .section-head { margin-bottom: 56px; }
.insights .section-head h2 { font-size: 48px; color: var(--on-dark); }
.insights .section-head p { color: var(--on-dark-mut); }
.insight-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 16px; }
.insight-stack { display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--ink-2); border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; }
.panel-head b { font-size: 15px; color: var(--on-dark); }
.panel-head .mono { color: var(--on-dark-fnt); }
.funnel { display: flex; align-items: flex-end; gap: 16px; height: 220px; }
.funnel-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.funnel-col span:last-child { font-size: 13px; color: var(--on-dark-mut); }
.bar { border-radius: 10px; background: var(--accent); }
.bar-2 { opacity: .8; }
.bar-3 { opacity: .6; }
.bar-ice { background: var(--ice); }
.panel-tip { flex-grow: 1; background: var(--ice); color: var(--ink); gap: 12px; padding: 28px; }
.panel-tip .tip-label { color: var(--ink); }
.panel-tip strong { font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
.panel-tip span:last-child { font-size: 14px; line-height: 1.55; color: #1e2c40; }
.panel-sources { padding: 28px; gap: 14px; }
.sources { display: flex; flex-direction: column; gap: 10px; }
.source { display: flex; align-items: center; gap: 12px; }
.source span { width: 90px; font-size: 13px; color: var(--on-dark-mut); }
.source i { height: 10px; border-radius: 5px; background: var(--accent); }

/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { border-radius: var(--r-lg); padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.plan-free { background: var(--surface); border: 2px solid var(--accent); }
.plan-pro { background: var(--ink); color: var(--on-dark); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plan-head h3 { font-size: 20px; font-weight: 600; }
.plan-price { display: flex; align-items: baseline; gap: 10px; }
.plan-price b { font-size: 60px; line-height: .95; letter-spacing: -0.035em; }
.plan-price span { font-size: 15px; color: var(--mut); }
/* Seven ticks per card read as a long thin column at this width, so each
   plan splits its list into two. */
.plan .checks {
  flex-grow: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px 24px;
}
.plan-pro .plan-price span { color: var(--on-dark-mut); }
.plan-pro .checks .i { stroke: var(--ice); }

/* ---------- faq ---------- */

.faq-title { font-size: 34px; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 40px; }
.faq-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.qa { background: var(--surface); border-radius: var(--r); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.qa h3 { font-size: 17px; font-weight: 600; }
.qa p { font-size: 14px; color: var(--mut); }

/* ---------- closing ---------- */

.closing { background: var(--ink); color: var(--on-dark); }
.closing-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 70px var(--gutter) 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.closing .pill { background: transparent; border-color: rgba(238, 241, 247, .16); color: #c3cad8; }
.closing .pill b { color: #fff; }
.closing h2 { font-size: 62px; line-height: 1.04; letter-spacing: -0.035em; max-width: 1000px; color: var(--on-dark); }
.foot-bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px var(--gutter) 44px;
  display: flex;
  align-items: center;
  gap: 28px;
  border-top: 1px solid rgba(238, 241, 247, .1);
}
.foot-note { font-size: 14px; color: var(--on-dark-fnt); flex-grow: 1; }
.foot-bar nav { display: flex; gap: 24px; }
.foot-bar nav a { font-size: 14px; color: var(--on-dark-mut); }
.foot-bar nav a:hover { color: #fff; }

/* ---------- content pages: legal + 404 ---------- */

/* One narrow reading column; the footer bar sits straight under it with no
   closing call-to-action above. */
/* Short pages (the 404) still put the footer at the bottom of the window. */
body.page-plain { min-height: 100vh; display: flex; flex-direction: column; }
body.page-plain main { flex: 1 0 auto; }
/* In a flex column the header's auto side margins would shrink it to its
   content; keep it full width like on the home page. */
body.page-plain .nav { width: 100%; }
.closing-plain { margin-top: 96px; }
.closing-plain .foot-bar { border-top: 0; }

.legal { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 0; }
.legal-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: 44px; line-height: 1.1; }
.legal-updated { font-size: 14px; color: var(--fnt); }
.legal-intro { padding: 28px 0 8px; display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.legal-toc { margin: 24px 0 8px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.legal-toc .eyebrow { margin-bottom: 12px; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.legal-toc li { break-inside: avoid; padding: 3px 0; font-size: 14px; }
.legal-toc a { color: var(--fg); }
.legal-toc a:hover { color: var(--accent-link); }
.legal-section { padding-top: 36px; scroll-margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.legal-section h2 { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; }
.legal-section h3 { font-size: 16px; font-weight: 600; margin-top: 8px; }
.legal-section p, .legal-section li { font-size: 15px; color: #2b3547; }
.legal-section ul { list-style: disc; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal-section code { font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
/* Warranty and liability paragraphs are the conspicuous kind; small caps
   rather than shouting capitals keeps them readable. */
.legal-section .caps { font-variant: small-caps; letter-spacing: .01em; color: var(--fg); }
.legal-next { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 15px; color: var(--mut); }

.notfound { max-width: 640px; margin: 0 auto; padding: 96px var(--gutter) 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.notfound-code { font-size: 15px; font-weight: 600; letter-spacing: .12em; color: var(--accent); }
.notfound h1 { font-size: 48px; line-height: 1.08; }
.notfound p { font-size: 16px; color: var(--mut); max-width: 480px; }
.notfound .hero-actions { margin-top: 10px; }

/* ---------- responsive ---------- */

@media (max-width: 1280px) {
  :root { --gutter: 40px; }
  .hero h1 { font-size: 64px; }
  .section-head h2, .insights .section-head h2 { font-size: 42px; }
  .closing h2 { font-size: 56px; }
  .stage { height: 560px; }
  .win { left: 60px; width: 700px; height: 520px; }
  .win-head { height: 150px; }
  .win-title { font-size: 30px; }
  .float-settings { left: auto; right: 0; top: 60px; }
  .float-tip { top: 330px; }
  .band-zero { font-size: 120px; }
}

@media (max-width: 1024px) {
  .nav-links, .nav-signin { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile:not([hidden]) { display: flex; }
  .band { grid-template-columns: 1fr; gap: 40px; padding: 80px var(--gutter); }
  .band-copy p { max-width: none; }
  .insight-grid { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-shot { height: 230px; }
  .faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights { padding: 80px 40px; border-radius: 32px; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --r-lg: 22px; }
  body { font-size: 14px; }

  .banner { flex-wrap: wrap; gap: 10px; padding: 12px 20px; justify-content: flex-start; font-size: 13px; }
  .banner-text { flex: 1 1 100%; order: 3; }
  /* Brand, Start free and the menu button have to share 390px: the brand
     gives up its width first (ellipsis) so the two controls stay whole. */
  .nav { padding: 14px 20px; gap: 10px; }
  .brand { min-width: 0; flex-shrink: 1; }
  .brand span { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* "Storefronts" is the first thing to go when the header runs out of room. */
  .brand-word { display: none; }
  .nav-right { flex-shrink: 0; gap: 8px; }
  .nav-right .btn-sm { white-space: nowrap; font-size: 13px; padding: 10px 13px; }

  .hero { padding: 24px 20px 0; gap: 18px; }
  .hero h1 { font-size: 44px; line-height: .98; }
  .hero-sub { font-size: 15px; }
  .hero-actions { flex-direction: column; align-self: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; font-size: 15px; padding: 15px; }
  .hero-ticks { flex-direction: column; gap: 8px; align-items: center; font-size: 13px; }
  .hero-ticks .i { display: none; }

  /* The drawn stage is desktop furniture; on a phone the storefront window
     stands on its own and the two floating cards stack under it. */
  .stage { height: auto; display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
  .stage-shelf { display: none; }
  .win, .float { position: static; width: 100%; height: auto; }
  .win-bar { height: auto; padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .win-host { font-size: 11px; }
  .win-meta { display: none; }
  .win-body { height: auto; }
  .win-head { height: 130px; padding: 0 20px; flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
  .win-title { font-size: 22px; }
  .win-basket { display: none; }
  .win-tabs { padding: 12px 16px; height: auto; gap: 14px; }
  .win-tabs .on { padding: 0; box-shadow: none; }
  .win-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 16px; gap: 10px; }
  .win-grid .win-card:last-child { display: none; }
  .shot { height: 64px; }
  .float-settings, .float-tip { padding: 18px; }

  .band { margin-top: 40px; padding: 40px 20px; gap: 24px; }
  .band-zero { font-size: 92px; }
  .band-copy h2 { font-size: 28px; }
  .band-card { padding: 24px; border-radius: 24px; }
  .checks-2, .plan .checks { grid-template-columns: 1fr; gap: 12px; }
  .band-foot { flex-direction: column; align-items: stretch; gap: 14px; text-align: center; }
  .band-foot .btn { width: 100%; }

  .section { padding: 44px 20px; }
  .section-head { margin-bottom: 24px; gap: 12px; }
  .section-head h2, .insights .section-head h2 { font-size: 32px; line-height: 1.02; }
  .section-head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-head p { font-size: 16px; max-width: none; }
  #editor p {text-align: right; margin-top: 1rem}

  .cards-3, .plans, .faq-grid { grid-template-columns: 1fr; gap: 12px; }
  .card { padding: 18px; gap: 14px; }
  .card-demo { display: none; }

  .theme-grid { grid-template-columns: 1fr; gap: 12px; }
  .theme-shot { height: 170px; }
  .theme-caption { padding: 16px 20px; }
  .theme h3 { font-size: 24px; }
  .theme-note { font-size: 14px; }

  .insights { margin: 0 12px 44px; padding: 44px 20px; border-radius: 28px; }
  .panel { padding: 18px; gap: 18px; border-radius: 22px; }
  /* Vertical funnel bars get too thin to read at 390px, so they lie down. */
  .funnel { flex-direction: column; align-items: stretch; height: auto; gap: 12px; }
  .funnel-col { flex-direction: row-reverse; align-items: center; justify-content: flex-end; height: auto; gap: 10px; }
  .funnel-col span:last-child { width: 118px; }
  .funnel .bar { height: 10px !important; border-radius: 5px; }
  .funnel-col:nth-child(1) .bar { width: 100%; }
  .funnel-col:nth-child(2) .bar { width: 62%; }
  .funnel-col:nth-child(3) .bar { width: 34%; }
  .funnel-col:nth-child(4) .bar { width: 18%; }
  .panel-tip strong { font-size: 20px; }
  .source span { width: 86px; }

  .plan { padding: 22px; gap: 18px; border-radius: 24px; }
  .plan-price b { font-size: 52px; }
  .faq-title { font-size: 28px; margin-bottom: 20px; }
  .qa { padding: 18px; border-radius: 20px; }

  .closing-inner { padding: 44px 20px 36px; gap: 20px; }
  .closing h2 { font-size: 38px; }
  .closing .btn { width: 100%; }
  .foot-bar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px 32px; }
}

@media (max-width: 760px) {
  .legal { padding: 32px 20px 0; }
  .legal-head h1 { font-size: 32px; }
  .legal-toc { padding: 20px; }
  .legal-toc ol { columns: 1; }
  .legal-section h2 { font-size: 19px; }
  .notfound { padding: 64px 20px 16px; }
  .notfound h1 { font-size: 32px; }
  .notfound .hero-actions { flex-direction: column; align-self: stretch; }
  .notfound .hero-actions .btn { width: 100%; }
  .closing-plain { margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .dot::after { animation: none; opacity: 0; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}