/* bricktab.news, the public site for the bricktab browser extension.
   One stylesheet for the landing page and the three legal pages.

   The look: a quiet grey page, large white cards with generous corners,
   very large uppercase headlines, pastel panels holding small mock-ups of
   the product, and dark pill buttons. The palette and the two typefaces are
   the extension's own (see extension/src/styles.css), so the site and the
   new tab read as one product.

   Type rule, same as the extension: every title is Outfit Bold 700 and every
   line of running text is Lexend Regular 400. Both weights come from the two
   tokens below, never from a literal number. Buttons, chips and form labels
   are labels rather than copy, and keep their own weights.

   No inline styles anywhere on the site: .htaccess ships a CSP with
   style-src 'self', so a style attribute would simply be ignored. */

@font-face {
  font-family: 'Outfit';
  src: local('Outfit'), url('../fonts/Outfit-Variable.woff2') format('woff2-variations'),
    url('../fonts/Outfit-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: local('Lexend'), url('../fonts/Lexend-Variable.woff2') format('woff2-variations'),
    url('../fonts/Lexend-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f7f7f7;
  --card: #ffffff;
  --ink: #1c1c21;
  --ink-soft: #515158; /* 7.19:1 on card and paper */
  --line: #ebebeb;
  --field-line: #8a8a8a; /* 3.15:1, the floor for a control's outline */
  --stud: #f6c500;
  --stud-ink: #3a2e00;
  --alert: #9e1f17;
  --ok: #1d6b3a;

  /* Pastel panels. Decoration only: every piece of text that sits on one is
     --ink, which clears 9:1 on the darkest of them. */
  --p-yellow: #ffec91;
  --p-green: #c2e6af;
  --p-blue: #b9d9e5;
  --p-pink: #ffc9cf;
  --p-lilac: #e3caef;
  --p-orange: #ffb27a;

  --font-title: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Lexend', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --weight-title: 700;
  --weight-body: 400;

  --radius: 10px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --header: 70px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1360px;
  --shadow: 0 10px 26px rgb(28 28 33 / 8%);
  --shadow-float: 0 18px 40px rgb(28 28 33 / 14%);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  color: var(--ink);
}

p {
  margin: 0;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: #fff;
}

.btn--stud {
  border-color: var(--stud);
  background: var(--stud);
  color: var(--stud-ink);
}

.btn--lg {
  min-height: 54px;
  padding: 16px 28px;
  font-size: 1rem;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* ── Header ──────────────────────────────────────────────────────────── */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header);
  background: rgb(247 247 247 / 88%);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header.is-stuck {
  border-bottom-color: var(--line);
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.brand svg {
  width: 32px;
  height: 32px;
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 8px 0;
}

.nav a:hover,
.nav a[aria-current='page'] {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

/* ── Hero ────────────────────────────────────────────────────────────── */

main {
  padding-top: var(--header);
}

.hero {
  padding-block: clamp(40px, 7vw, 96px) clamp(32px, 5vw, 64px);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
}

.display {
  font-size: clamp(2.9rem, 6.3vw, 5.9rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.display--md {
  font-size: clamp(2.5rem, 5.6vw, 5rem);
  line-height: 0.92;
}

.lede {
  max-width: 34ch;
  margin-top: 28px;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

.hero-note {
  margin-top: 18px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.browser-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.browser-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.browser-chip:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.browser-chip svg {
  width: 20px;
  height: 20px;
}

/* The hero artwork: a pastel panel holding a mock of the new tab, with
   three cards floating over its edges. All of it is markup and CSS, there is
   no screenshot to go stale when the extension changes. */

.stage {
  position: relative;
  padding: clamp(20px, 3vw, 40px);
  padding-top: clamp(44px, 4.5vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--p-yellow);
}

.mock {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  overflow: hidden;
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-float);
}

.mock-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  background: var(--card);
  border-right: 1px solid var(--line);
  color: #82828c;
}

.mock-rail svg {
  width: 18px;
  height: 18px;
}

.mock-rail .mock-mark {
  width: 22px;
  height: 22px;
  margin-bottom: 8px;
  color: var(--ink);
}

.mock-rail .is-on {
  color: var(--ink);
}

.mock-body {
  padding: 14px;
}

.mock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 62%;
  margin: 0 auto 14px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--card);
  font-size: 0.6875rem;
  color: var(--ink-soft);
}

.mock-search svg {
  width: 12px;
  height: 12px;
}

.mock-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.mcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.mcard--hero {
  grid-row: span 2;
}

.mcard-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  color: var(--ink);
}

.mcard--hero .mcard-art {
  flex: 1;
  aspect-ratio: auto;
  min-height: 120px;
}

.mcard-art svg {
  width: 46%;
  height: auto;
}

.mcard-text {
  padding: 9px 10px 11px;
}

.mcard-source {
  display: block;
  margin-bottom: 3px;
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mcard-title {
  display: block;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 0.6875rem;
  line-height: 1.25;
}

.mcard--hero .mcard-title {
  font-size: 0.9375rem;
}

.bg-yellow { background: var(--p-yellow); }
.bg-green { background: var(--p-green); }
.bg-blue { background: var(--p-blue); }
.bg-pink { background: var(--p-pink); }
.bg-lilac { background: var(--p-lilac); }
.bg-orange { background: var(--p-orange); }
.bg-card { background: var(--card); }
.bg-ink { background: var(--ink); }

.float {
  position: absolute;
  z-index: 2;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-float);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.float-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 3px 9px;
  border-radius: 100px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.float strong {
  display: block;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 0.9375rem;
}

.float small {
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.float--deal {
  top: -34px;
  left: -26px;
  width: 190px;
}

.float--event {
  right: -22px;
  bottom: 22%;
  width: 200px;
}

.float--like {
  left: 12%;
  bottom: -20px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 100px;
  font-weight: 500;
}

.float--like svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: no-preference) {
  .float--deal { animation: bob 7s ease-in-out infinite; }
  .float--event { animation: bob 8s ease-in-out -2s infinite; }
  .float--like { animation: bob 6s ease-in-out -4s infinite; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Sources strip ───────────────────────────────────────────────────── */

.sources {
  padding-block: 24px 56px;
  text-align: center;
}

.sources-label {
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.marquee {
  overflow: hidden;
  margin-top: 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 64px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.marquee-track li {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #6a6a72; /* 5.0:1 on paper */
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: slide 38s linear infinite;
  }
}

@keyframes slide {
  to { transform: translateX(-50%); }
}

/* ── Statement and bento ─────────────────────────────────────────────── */

.section {
  padding-block: clamp(48px, 7vw, 104px);
}

.statement {
  text-align: center;
}

.statement .lede {
  max-width: 52ch;
  margin-inline: auto;
}

.statement .btn {
  margin-top: 32px;
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 6vw, 72px);
}

.tile {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 24px;
  border-radius: var(--radius-lg);
  text-align: left;
}

.tile-tag {
  align-self: flex-start;
  margin-bottom: auto;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgb(255 255 255 / 70%);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bg-card .tile-tag {
  background: var(--paper);
}

.tile h3 {
  margin-top: 28px;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tile p {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.tile--4 { grid-column: span 4; }
.tile--5 { grid-column: span 5; }
.tile--3 { grid-column: span 3; }
.tile--6 { grid-column: span 6; }

.tile-figure {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.tile.bg-ink,
.tile.bg-ink h3 {
  color: #fff;
}

.tile.bg-ink .tile-tag {
  background: rgb(255 255 255 / 14%);
  color: #fff;
}

.tile.bg-ink p {
  color: #d6d6da;
}

/* ── Feature cards ───────────────────────────────────────────────────── */

.features {
  display: grid;
  gap: 24px;
  padding-block: 0 clamp(48px, 7vw, 104px);
}

.feature {
  padding: clamp(24px, 4.5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.feature-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

.feature--flip .feature-copy {
  order: 2;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.feature h2 {
  font-size: clamp(2rem, 3.6vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.feature-copy p {
  max-width: 46ch;
  margin-top: 20px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.feature-copy .btn {
  margin-top: 28px;
}

.panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 34vw, 460px);
  padding: clamp(20px, 3vw, 40px);
  border-radius: 24px;
}

.checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: clamp(28px, 4vw, 56px) 0 0;
  padding: clamp(20px, 3vw, 32px) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.checks li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.checks svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--ink);
}

/* Panel mock-ups */

.stack {
  display: grid;
  gap: 12px;
  width: min(100%, 380px);
}

.ui {
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.ui--row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ui-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  color: var(--ink);
}

.ui-thumb svg {
  width: 36px;
  height: auto;
}

.ui-kicker {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.ui-title {
  display: block;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1rem;
  line-height: 1.25;
}

.ui-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.ui-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.ui-actions span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ui-actions svg {
  width: 16px;
  height: 16px;
}

.ui-actions .is-on {
  color: var(--ink);
  font-weight: 500;
}

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pill--ink {
  background: var(--ink);
  color: #fff;
}

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 4px;
}

.price b {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1.25rem;
}

.price s {
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.date {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 60px;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  line-height: 1;
  text-align: center;
}

.date b {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1.375rem;
}

.date span {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.date > div {
  display: grid;
  gap: 3px;
}

.rows {
  display: grid;
  gap: 0;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}

.rows li b {
  font-weight: 600;
}

.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin-left: auto;
  border-radius: 100px;
  background: #3278c3;
}

.switch::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}

/* ── Download ────────────────────────────────────────────────────────── */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-head p {
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.stores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.store {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.store:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.store.is-yours {
  border-color: var(--ink);
}

.store-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--stud);
  color: var(--stud-ink);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.store-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  color: var(--ink);
}

.store-icon svg {
  width: 34px;
  height: 34px;
}

.store h3 {
  margin-top: 24px;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.store p {
  margin: 6px 0 24px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.store .btn {
  width: 100%;
  margin-top: auto;
}

/* The whole card is the link's hit area, the button is where it looks
   pressable. One link per card, so a screen reader hears each store once. */
.store .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.faq-head {
  position: sticky;
  top: calc(var(--header) + 24px);
}

.faq-head p {
  margin-top: 16px;
  font-size: 1.125rem;
  color: var(--ink-soft);
}

.qa {
  border-top: 1px solid #d9d9dd;
}

.qa:last-child {
  border-bottom: 1px solid #d9d9dd;
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.qa summary::-webkit-details-marker {
  display: none;
}

.qa summary::after {
  content: '';
  flex: none;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 14px no-repeat;
  transition: transform 0.2s ease;
}

.qa[open] summary::after {
  transform: rotate(45deg);
}

.qa-body {
  max-width: 64ch;
  padding: 0 60px 28px 0;
  color: var(--ink-soft);
}

.qa-body p + p {
  margin-top: 12px;
}

.qa-body a,
.prose a,
.form-note a,
.contact-copy a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(24px, 4.5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.contact-copy p {
  max-width: 40ch;
  margin-top: 20px;
  font-size: 1.0625rem;
  color: var(--ink-soft);
}

.contact-mail {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1.375rem;
}

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: grid;
  gap: 6px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.875rem;
  font-weight: 500;
}

.field .opt {
  font-weight: var(--weight-body);
  color: var(--ink-soft);
}

.input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: 1rem;
}

textarea.input {
  min-height: 150px;
  resize: vertical;
}

select.input {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1c21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
}

.input:hover {
  border-color: var(--ink);
}

.input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-color: var(--ink);
  border-radius: 14px;
}

.input[aria-invalid='true'] {
  border-color: var(--alert);
}

.field-error {
  font-size: 0.8125rem;
  color: var(--alert);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ink);
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.form-status {
  grid-column: 1 / -1;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.9375rem;
}

.form-status.is-ok {
  background: #e3f3e6;
  color: var(--ok);
}

.form-status.is-error {
  background: #fbe9e7;
  color: var(--alert);
}

/* ── Closing call to action ──────────────────────────────────────────── */

.cta {
  padding: clamp(40px, 7vw, 104px) clamp(24px, 5vw, 80px);
  border-radius: var(--radius-xl);
  background: var(--ink);
  color: #fff;
  text-align: center;
}

.cta h2 {
  color: #fff;
}

.cta p {
  margin: 24px auto 0;
  max-width: 44ch;
  font-size: 1.125rem;
  color: #d6d6da;
}

.cta .btn {
  margin-top: 32px;
}

.cta .btn:focus-visible {
  outline-color: #fff;
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer {
  padding-block: clamp(48px, 6vw, 88px) 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.footer-about p {
  max-width: 36ch;
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.footer h2 {
  margin-bottom: 16px;
  font-size: 1rem;
}

.footer ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer li a {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
}

.footer li a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 40px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid #d9d9dd;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.footer-legal p:last-child {
  max-width: 76ch;
}

/* ── Legal pages ─────────────────────────────────────────────────────── */

.legal-hero {
  padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 40px);
}

.legal-hero p {
  margin-top: 20px;
  font-size: 1rem;
  color: var(--ink-soft);
}

.legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(24px, 4.5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--card);
}

.toc {
  position: sticky;
  top: calc(var(--header) + 24px);
}

.toc h2 {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toc ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--ink-soft);
}

.toc a:hover {
  color: var(--ink);
}

.prose {
  max-width: 72ch;
}

.prose h2 {
  margin-top: 48px;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: 28px;
  font-size: 1.125rem;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 14px;
  color: var(--ink-soft);
}

.prose ul,
.prose ol {
  padding-left: 22px;
}

.prose li + li {
  margin-top: 8px;
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.callout {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--p-yellow);
  color: var(--ink);
}

.prose .callout p {
  margin: 0;
  color: var(--ink);
}

.table-scroll {
  margin-top: 18px;
  overflow-x: auto;
}

.prose table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  color: var(--ink-soft);
}

.prose th {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  color: var(--ink);
}

.legal-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-block: 24px clamp(40px, 6vw, 80px);
}

.legal-more a {
  display: block;
  padding: 24px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform 0.18s ease;
}

.legal-more a:hover {
  transform: translateY(-3px);
}

.legal-more span {
  display: block;
  font-size: 0.8125rem;
}

.legal-more strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  font-size: 1.25rem;
}

/* 404 */
.lost {
  display: grid;
  place-items: center;
  min-height: 70vh;
  text-align: center;
}

.lost p {
  margin: 20px auto 28px;
  max-width: 40ch;
  color: var(--ink-soft);
}

/* ── Reveal on scroll ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .stores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile--3,
  .tile--4,
  .tile--5 {
    grid-column: span 6;
  }

  .float--deal { left: -10px; }
  .float--event { right: -10px; }
}

@media (max-width: 900px) {
  .nav {
    position: fixed;
    inset: var(--header) 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.0625rem;
    color: var(--ink);
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
  }

  .header-actions .btn--ghost {
    display: none;
  }

  .hero .wrap,
  .feature-main,
  .section-head,
  .faq,
  .contact,
  .legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature--flip .feature-copy {
    order: 0;
  }

  .faq-head,
  .toc {
    position: static;
  }

  .toc {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
  }

  .checks,
  .legal-more {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-about {
    grid-column: 1 / -1;
  }

  .stage {
    margin-inline: 8px;
  }
}

@media (max-width: 600px) {
  .tile--3,
  .tile--4,
  .tile--5,
  .tile--6 {
    grid-column: 1 / -1;
  }

  .tile {
    min-height: 180px;
  }

  .stores,
  .form {
    grid-template-columns: minmax(0, 1fr);
  }

  .mock-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mcard--hero {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .stage {
    margin-top: 40px;
    padding-top: 56px;
  }

  .float--deal {
    top: -48px;
    left: -6px;
    width: 170px;
  }

  .float--event {
    right: -6px;
    bottom: 12%;
    width: 170px;
  }

  .qa-body {
    padding-right: 0;
  }

  .header-actions .btn {
    min-height: 40px;
    padding: 10px 16px;
    font-size: 0.875rem;
  }

  .brand {
    font-size: 1.3125rem;
  }

  .header .wrap {
    gap: 12px;
  }
}

/* Brick artwork tints, one per pastel panel. Decoration only. */
.t-yellow { color: #d9a400; }
.t-green { color: #4f9a3a; }
.t-blue { color: #3b86a8; }
.t-pink { color: #d6566a; }
.t-lilac { color: #8b5bb0; }
.t-orange { color: #d96a1f; }

/* ── Button pairs ────────────────────────────────────────────────────── */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.feature-copy .btn-row .btn {
  margin-top: 0;
}

/* ── Analytics consent ───────────────────────────────────────────────────
   Built by assets/js/analytics.js. A bar fixed to the bottom of the window,
   so it stays in view however far the page is scrolled. It asks one question
   and both answers weigh the same, so neither button is styled as the one to
   press. Named consent-bar because .consent is the contact form's checkbox
   row, and sharing the name pinned that row to the window as well. */

/* Room for the bar under the footer, see reserve() in analytics.js. */
body {
  padding-bottom: var(--consent-bar, 0px);
}

.consent-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-float);
}

.consent-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.consent-bar p {
  flex: 1 1 320px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.consent-bar a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.consent-actions {
  display: flex;
  flex: 0 1 auto;
  gap: 8px;
}

.consent-actions .btn {
  min-height: 42px;
  padding: 10px 20px;
  font-size: 0.875rem;
}

@media (max-width: 600px) {
  .consent-actions {
    flex: 1 1 100%;
  }

  .consent-actions .btn {
    flex: 1;
  }
}

.footer li button {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
}

.footer li button:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--ink);
}