/* Halve landing. Brand from halve/app/src/theme.ts and design/screens/0_brand.html. */

:root {
  --ink: #15171C;
  --ground: #F3F4F6;
  --card: #FFFFFF;
  --accent: #C8F545;      /* accept */
  --save: #FFB020;
  --save-dark: #B8780A;
  --muted: #8A909C;
  --secondary: #5B616E;
  --body: #3C414B;
  --border: #DDE0E6;
  --hairline: #EEF0F3;
  --track: #E2E4E9;

  /* dark surfaces: always dark, in both themes */
  --d-bg: #15171C;
  --d-surface: #1F2229;
  --d-track: #2A2E36;
  --d-border: #343842;
  --d-text: #F6F7F9;
  --d-text2: #C9CDD6;

  /* the product sweep: the grey the packshots were shot on (the contact sheets bake in #EBECEF) */
  --sweep: var(--ground);
  --photo: #EBECEF;
  --sweep-floor: #E2E4E9;
  --wall: #C3C7CF;        /* the filter wall: grey, on purpose */
  --bubble: var(--ink);   /* the shopper's own words */
  --bubble-text: #FFFFFF;

  /* theme tokens */
  --bg: var(--card);
  --surface: var(--card);
  --text: var(--ink);
  --text2: var(--body);
  --text3: var(--secondary);
  --line: var(--border);
  --shadow: 0 2px 6px rgba(21,23,28,.06), 0 12px 32px rgba(21,23,28,.06);
  --band-edge: transparent;   /* the rim of a dark box: only needed when the page is dark too */

  --r-card: 22px;
  --r-btn: 18px;
  --wrap: 1120px;
  --header-h: 64px;
  --font-display: "Bricolage Grotesque", Manrope, system-ui, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101216;
    --surface: #1B1E24;
    --text: #F6F7F9;
    --text2: #C9CDD6;
    --text3: #9AA0AC;
    --line: #2A2E36;
    --hairline: #2A2E36;
    --track: #2A2E36;
    --shadow: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.25);
    --sweep: #1B1E24;
    --sweep-floor: #0B0C0F;
    --wall: #3A3F49;
    --bubble: #F6F7F9;
    --bubble-text: var(--ink);
    --band-edge: #343842;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101216;
  --surface: #1B1E24;
  --text: #F6F7F9;
  --text2: #C9CDD6;
  --text3: #9AA0AC;
  --line: #2A2E36;
  --hairline: #2A2E36;
  --track: #2A2E36;
  --shadow: 0 2px 6px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.25);
  --sweep: #1B1E24;
  --sweep-floor: #0B0C0F;
  --wall: #3A3F49;
  --bubble: #F6F7F9;
  --bubble-text: var(--ink);
  --band-edge: #343842;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* anything scrolled into view (a focused link, an in-page anchor) clears the sticky header; the nav's sections cancel
   that and land flush, so the header sits over the section's own top padding (at least 24px clear of the heading),
   never over the band before it */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
main > section[id] { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: 0;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; }
/* tracking tightens as type grows; leading tightens with it */
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 88%; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 8vw, 7.5rem); line-height: .92; letter-spacing: -0.034em; }
h2 { font-size: clamp(3rem, 8vw, 7.5rem); line-height: .9; letter-spacing: -0.034em; margin-bottom: 1.75rem; }
h3 { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; }
/* the serif italic is the cut in the sentence: only the first headline and the last one have it, so it stays a
   signature and never a habit */
h1 em, h2 em, .serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal;
  letter-spacing: -0.035em; padding-right: .04em;
}
h1 em, h2 em { font-size: 1.06em; line-height: 0; }
p { text-wrap: pretty; }
p { margin: 0 0 14px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 28px; } }
.narrow { max-width: 760px; }
.small { font-size: 0.875rem; letter-spacing: 0.006em; line-height: 1.5; }
.muted { color: var(--text3); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; z-index: 100; background: var(--accent); color: var(--ink); padding: 8px 12px; border-radius: 10px; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px; border-radius: var(--r-btn); border: 0;
  font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform .18s cubic-bezier(.23,1,.32,1), background-color .16s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active { transform: scale(.97); transition-duration: .08s; }
.btn.busy { opacity: .7; cursor: progress; }
.btn:focus-visible, .round:focus-visible, summary:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.btn-small { min-height: 40px; padding: 0 16px; font-size: 14px; border-radius: 14px; }
.btn-block { width: 100%; }
.btn-ink { background: var(--text); color: var(--bg); }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--line); }
.btn-light { background: var(--d-text); color: var(--ink); }
.btn-glass { background: rgba(255,255,255,.08); color: var(--d-text); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-glow { box-shadow: 0 0 0 0 transparent, 0 10px 40px color-mix(in srgb, var(--accent) 40%, transparent); }
/* hover only where there is a real pointer: on a touch screen a tap would leave it stuck on */
@media (hover: hover) and (pointer: fine) {
  .btn-ink:hover { box-shadow: 0 6px 20px rgba(21,23,28,.18); }
  .btn-accent:hover { background: #D4FA62; }
  .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--text3); }
  .btn-light:hover { background: #fff; }
  .btn-glass:hover { background: rgba(255,255,255,.14); }
  .btn-glow:hover { box-shadow: 0 10px 50px color-mix(in srgb, var(--accent) 60%, transparent); }
  .ask-chips button:hover { background: rgba(255,255,255,.14); }
  .modal-close:hover { background: var(--bg); }
}

/* header: the page's material, and dark glass while an ink band (the stage, the numbers, #scale, the closing box,
   the dark cards once they span a phone) is under it (main.js initChrome). The dark glass is dense enough that blurred white numerals or the page at the
   sides of the closing box never turn it grey. */
.site-header {
  position: sticky; top: 0; z-index: 20; color: var(--text);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.site-header.on-dark {
  background: color-mix(in srgb, var(--d-bg) 86%, transparent); color: var(--d-text);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.site-header.on-dark .nav a { color: var(--d-text2); }
.site-header.on-dark .nav a:hover { color: var(--d-text); }
.site-header .btn-ink:hover { box-shadow: none; }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--bg) 70%, transparent), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.site-header.scrolled:not(.on-dark)::after { opacity: 1; }
.header-row { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-stretch: 90%; font-size: 24px; letter-spacing: -0.04em; text-decoration: none; }
.site-header.on-dark .btn-ink { background: var(--d-text); color: var(--ink); }
.logo { height: 32px; width: auto; flex: none; }
/* the logo images: ink version on light surfaces, white version on dark ones */
.brand .on-dark { display: none; }
.site-header.on-dark .brand .on-light { display: none; }
.site-header.on-dark .brand .on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .on-light { display: none; }
  :root:not([data-theme="light"]) .brand .on-dark { display: block; }
}
:root[data-theme="dark"] .brand .on-light { display: none; }
:root[data-theme="dark"] .brand .on-dark { display: block; }
.nav { display: none; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 600; letter-spacing: 0.005em; }
.nav a { text-decoration: none; color: var(--text3); transition: color .15s ease; }
.nav a:hover { color: var(--text); }
.header-row .btn { margin-left: auto; }
@media (min-width: 820px) { .nav { display: flex; } .header-row .btn { margin-left: 0; } }

/* the hero, #scale and the closing box (the folding catalog sheet): fold.css */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row.center { justify-content: center; }
.ask-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ask-chips button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--d-text); cursor: pointer; min-height: 40px;
  background: rgba(255,255,255,.06); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  padding: 9px 14px; border-radius: 999px; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, transform .18s cubic-bezier(.23,1,.32,1);
}
.ask-chips button:active { transform: scale(.97); transition-duration: .08s; }
.fb-deck:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: var(--r-card); }

/* a product card (hero and fallback demo). Light in both themes, like the app. */
.pcard {
  position: absolute; inset: 0; background: #fff; border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(21,23,28,.06), 0 10px 30px rgba(21,23,28,.08); display: flex; flex-direction: column;
  will-change: transform, opacity; color: var(--ink); opacity: 0;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  transition: box-shadow .25s ease;
}
.pcard svg, .pcard img { pointer-events: none; }
.pcard.held { cursor: grabbing; box-shadow: 0 24px 50px rgba(21,23,28,.2); transition-duration: .08s; }
.pcard.leaving { pointer-events: none; }
.pcard-art { flex: 1; display: grid; place-items: center; position: relative; min-height: 0; }
.pcard-art .tag { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--secondary); background: rgba(255,255,255,.7); padding: 4px 8px; border-radius: 8px; }
.pcard-art .stamp {
  position: absolute; top: 14px; right: 14px; font-family: var(--font-display); font-stretch: 90%;
  font-size: 15px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 9px; opacity: 0; transform: rotate(6deg);
}
.stamp-yes { background: var(--accent); color: var(--ink); }
.stamp-no { background: var(--ink); color: #fff; }
.stamp-save { background: var(--save); color: var(--ink); }
.pcard-body { padding: 14px 16px 16px; display: grid; gap: 3px; }
.pcard-brand { font-size: 12px; font-weight: 600; color: var(--muted); }
.pcard-name { font-family: var(--font-display); font-stretch: 92%; font-size: 20px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.pcard-price { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chips span { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: var(--ground); color: var(--secondary); }

/* photos: a packshot (img) over its contact-sheet cell, both contained in a square, on the grey they were shot on */
.pcard-photo, .photo, .mini-art, .swipe-photo, .ml-thumb { background: var(--photo) !important; container-type: size; position: relative; overflow: hidden; }
.ghost-card { container-type: size; }
.cell, .pcard-photo img, .photo img, .mini-art img, .swipe-photo img, .ml-thumb img {
  position: absolute; left: 50%; top: 50%; width: min(100cqw, 100cqh); height: min(100cqw, 100cqh);
  transform: translate(-50%, -50%); background-repeat: no-repeat;
}
.pcard-photo img, .photo img, .mini-art img, .swipe-photo img, .ml-thumb img { object-fit: contain; opacity: 0; transition: opacity .3s ease; background: var(--photo); }
.pcard-photo img.loaded, .photo img.loaded, .mini-art img.loaded, .swipe-photo img.loaded, .ml-thumb img.loaded { opacity: 1; }

/* sections */
.section { padding: 96px 0; }
@media (min-width: 920px) { .section { padding: 160px 0; } }
.section-head { max-width: 1120px; margin-bottom: 56px; }
@media (min-width: 920px) { .section-head { margin-bottom: 88px; } }
.section-head h2 { margin-bottom: 0; }
.sub { font-size: clamp(19px, 2.2vw, 26px); color: var(--text2); margin: 28px 0 0; font-weight: 500; max-width: 34em; }
.sub b { color: var(--text); font-weight: 700; }

/* reveal on scroll: only when JS runs, so the page reads without it */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.23,1,.32,1), transform .5s cubic-bezier(.23,1,.32,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* the problem: a grey wall of filters against one sentence and one product */
.versus { display: grid; gap: 16px; }
@media (min-width: 900px) { .versus { grid-template-columns: 1.35fr .65fr; gap: 20px; } }
.vs { margin: 0; border-radius: 32px; position: relative; overflow: hidden; isolation: isolate; min-height: 560px; display: flex; flex-direction: column; }
@media (min-width: 900px) { .vs { min-height: 720px; } }
.vs-cap { position: relative; z-index: 1; padding: 28px 28px 0; display: grid; gap: 8px; }
.vs-n {
  font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-variant-numeric: tabular-nums;
  font-size: clamp(9rem, 46vw, 21rem); line-height: .78; letter-spacing: -0.07em; margin-left: -.04em;
}
.vs-says { font-size: 17px; max-width: 15em; color: var(--text2); }
.vs-says b { color: var(--text); }
.vs-old { background: var(--sweep); color: var(--text); }
.filters {
  position: absolute; z-index: 0; top: -18px; left: -14px; width: calc(100% + 120px); height: calc(100% + 60px);
  column-width: 138px; column-gap: 18px; column-fill: auto; overflow: hidden;
  -webkit-mask: radial-gradient(80% 70% at 0% 0%, transparent 62%, rgba(0,0,0,.55) 76%, #000 92%);
  mask: radial-gradient(80% 70% at 0% 0%, transparent 62%, rgba(0,0,0,.55) 76%, #000 92%);
}
@media (max-width: 899px) {
  .vs-old { min-height: 620px; }
  .filters { top: 232px; left: -10px; width: calc(100% + 60px); column-width: 100px; column-gap: 12px;
    -webkit-mask: linear-gradient(to bottom, transparent 0, #000 90px); mask: linear-gradient(to bottom, transparent 0, #000 90px); }
  .filters .fgroup span { font-size: 13px; gap: 8px; }
  .filters .fgroup span::before { width: 16px; height: 16px; }
}
.fgroup { display: grid; gap: 8px; align-content: start; break-inside: avoid; padding: 16px 0 14px; border-top: 1px solid var(--line); }
.fgroup h4 { margin: 0 0 4px; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--text3); }
.fgroup span { font-size: 14px; color: var(--wall); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.fgroup span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--wall); background: var(--surface); flex: none; }
.fgroup span:nth-child(3n+2)::before { box-shadow: inset 0 0 0 1.5px var(--text3); }
.vs-new { background: var(--d-bg); color: var(--d-text); box-shadow: 0 0 0 1px var(--d-border); }
.vs-new .vs-n { color: var(--accent); }
.vs-new .vs-says { color: var(--d-text2); }
.vs-new .vs-says b { color: var(--d-text); }
.vs-ask { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 22px; padding: 28px 24px 36px; }
.bubble {
  align-self: flex-end; margin: 0; max-width: 86%; background: var(--d-surface); color: var(--d-text);
  font-weight: 600; padding: 12px 16px; border-radius: 20px 20px 6px 20px; box-shadow: inset 0 0 0 1px var(--d-border);
}
.mini-card { position: relative; width: min(240px, 78%); background: #fff; color: var(--ink); border-radius: 22px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.mini-art { aspect-ratio: 1; }
.mini-body { padding: 12px 16px 16px; display: grid; gap: 2px; font-size: 14px; }
.mini-body span { color: var(--muted); font-weight: 600; font-size: 11px; }
.mini-body b { font-family: var(--font-display); font-stretch: 92%; font-weight: 600; font-size: 19px; letter-spacing: -0.025em; line-height: 1.1; }
.mini-body i { font-style: normal; font-weight: 700; }
.mini-stamp, .swipe-stamp {
  position: absolute; top: 16px; right: 16px; background: var(--accent); color: var(--ink);
  font-family: var(--font-display); font-stretch: 90%; font-weight: 700; font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 10px; transform: rotate(8deg);
}

/* numbers band: the one ink band. One idea each, the numeral takes the room. */
.numbers { background: var(--d-bg); color: var(--d-text); padding: 24px 0 72px; border-block: 1px solid var(--d-border); }
.numbers-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .numbers-grid { grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .numbers { padding: 40px 0 120px; } }
.num { padding: 36px 0 8px; border-top: 1px solid var(--d-border); display: grid; align-content: start; }
.num:first-child { border-top: 0; }
@media (min-width: 900px) { .num { padding-top: 56px; } .num:first-child { grid-column: 1 / -1; } }
.num b {
  display: block; font-family: var(--font-display); font-weight: 600; font-stretch: 78%; font-variant-numeric: tabular-nums;
  font-size: clamp(9rem, 56vw, 22rem); letter-spacing: -0.03em; line-height: .76; margin-left: -.05em; color: var(--d-text);
}
@media (max-width: 899px) {
  .num:not(:first-child) { grid-template-columns: auto 1fr; align-items: end; column-gap: 18px; }
  .num:not(:first-child) > span { margin: 0 0 .5em; font-size: 19px; }
  .num:first-child b { font-size: clamp(6rem, 34vw, 14rem); }
}
@media (min-width: 900px) {
  .num { grid-template-columns: auto 1fr; align-items: end; column-gap: 24px; padding-bottom: 48px; }
  .num b { font-size: clamp(10rem, 15vw, 15rem); }
  .num:first-child b { font-size: clamp(14rem, 27vw, 26rem); }
  .num:first-child > span { font-size: clamp(26px, 2.6vw, 38px); max-width: 12ch; }
  .num > span { margin: 0 0 .4em; max-width: 12ch; }
}
.num b { white-space: nowrap; }
.num .dash { margin: 0 .05em; }
.num small { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; font-size: .3em; letter-spacing: -0.02em; margin-left: .12em; color: var(--d-text2); }
.num > span {
  display: block; margin-top: 22px; font-family: var(--font-display); font-stretch: 94%; font-weight: 500;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.02em; color: var(--d-text2); max-width: 20ch;
}

/* demo: the panel as an object on the product sweep */
.demo { background: linear-gradient(180deg, var(--bg) 0%, var(--sweep) 38%, var(--sweep-floor) 100%); overflow: hidden; }
.demo-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .demo-grid { grid-template-columns: 1fr 440px; gap: 72px; } }
.demo-lede { font-size: 19px; color: var(--text2); max-width: 30em; margin-top: 8px; }
.keys { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 0; color: var(--text2); max-width: 30em; }
.keys li { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.keys li:last-child { border-bottom: 1px solid var(--line); }
.keys b { color: var(--text); margin-right: 6px; }
.key { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; box-shadow: inset 0 0 0 1.5px var(--text3); color: var(--text); font-weight: 800; }
.demo .muted { color: var(--text3); }

.demo-stage { position: relative; display: grid; justify-items: center; padding-bottom: 40px; }
/* the floor: a soft contact shadow where the device stands on the sweep */
.demo-stage::after {
  content: ""; position: absolute; z-index: 0; left: 8%; right: 8%; bottom: 8px; height: 64px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(21,23,28,.32), transparent 100%);
}
.demo-frame {
  position: relative; z-index: 1; width: 100%; max-width: 400px; height: 760px; padding: 11px;
  border-radius: 56px; background: #0E0F12;
  box-shadow:
    inset 0 0 0 1.5px #3A3E47, inset 0 0 0 4px #0E0F12, inset 0 0 0 5px #23262D,
    0 2px 4px rgba(21,23,28,.2), 0 40px 60px -30px rgba(21,23,28,.45), 0 100px 120px -60px rgba(21,23,28,.4);
}
@media (max-width: 480px) { .demo-frame { height: 680px; border-radius: 48px; padding: 9px; } }
.demo-live { position: absolute; inset: 11px; border-radius: 45px; overflow: hidden; background: #fff; }
.demo-live iframe { width: 100%; height: 100%; border: 0; display: block; }
.demo-fallback { position: absolute; inset: 11px; border-radius: 45px; overflow: hidden; background: #fff; color: var(--ink); transition: opacity .3s ease; }
@media (max-width: 480px) { .demo-live, .demo-fallback { inset: 9px; border-radius: 39px; } }
.demo-fallback.fading { opacity: 0; }
.pill { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--ground); color: var(--secondary); white-space: nowrap; transition: background-color .3s ease, color .3s ease; }
.pill-quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.fb-card { height: 100%; display: flex; flex-direction: column; padding: 30px 18px 18px; gap: 14px; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; }
.fb-count { font-size: 14px; font-weight: 600; color: var(--secondary); white-space: nowrap; }
@media (max-width: 480px) { .fb-head .pill { font-size: 11px; padding: 4px 8px; } .fb-count b { font-size: 34px; } }
.fb-count b { font-family: var(--font-display); font-stretch: 85%; font-size: 40px; font-weight: 650; letter-spacing: -0.05em; color: var(--ink); margin-right: 4px; font-variant-numeric: tabular-nums; }
.fb-deck { position: relative; flex: 1; }
.fb-actions { display: flex; justify-content: center; gap: 18px; }
.round {
  width: 58px; height: 58px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: var(--secondary); box-shadow: 0 0 0 1px var(--border), 0 2px 8px rgba(21,23,28,.08);
  transition: transform .18s cubic-bezier(.23,1,.32,1); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.round:active { transform: scale(.97); transition-duration: .08s; }
.round-save { color: var(--save-dark); }
.round-accept { background: var(--accent); color: var(--ink); box-shadow: none; }
.fb-note { text-align: center; font-size: 13px; color: var(--secondary) !important; margin: 0; }
.shortlist { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center; padding: 16px; }
.shortlist h3 { font-size: 30px; }
.shortlist p { color: var(--secondary) !important; }

/* how it works: an editorial sequence, one picture per step */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 56px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } .step:nth-child(2) { margin-top: 72px; } .step:nth-child(3) { margin-top: 144px; } }
.step { display: grid; gap: 28px; align-content: start; }
.step-art {
  position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: var(--sweep);
  display: grid; place-items: center; padding: 28px;
}
@media (max-width: 859px) { .step-art { aspect-ratio: 1; } }
.step-text { display: grid; gap: 10px; padding-right: 8px; }
.step-n { font-family: var(--font-serif); font-style: italic; font-size: 44px; line-height: .8; color: var(--text); }
.step h3 { font-size: clamp(26px, 2.4vw, 34px); }
.step p { color: var(--text2); margin: 0; font-size: 16px; max-width: 30em; }

/* i. the sentence, and what Halve reads in it */
.step-art-ask { align-content: center; justify-items: stretch; gap: 22px; }
.step .step-bubble {
  margin: 0; justify-self: end; max-width: 92%; background: var(--bubble); color: var(--bubble-text);
  font-family: var(--font-display); font-stretch: 92%; font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: -0.025em;
  padding: 20px 22px; border-radius: 28px 28px 8px 28px; box-shadow: 0 24px 50px rgba(21,23,28,.22);
}
.step-reads { display: flex; flex-wrap: wrap; gap: 8px; }
.step-reads span { font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.step-reads i { font-style: normal; font-weight: 600; color: var(--text3); margin-right: 4px; }

/* ii. a card mid-swipe */
.step-art-swipe { padding: 0; }
.ghost-card { position: absolute; width: 58%; aspect-ratio: 1 / 1.28; border-radius: 22px; background: #fff; transform: translate(-6%, 2%) rotate(-3deg) scale(.94); box-shadow: 0 10px 30px rgba(21,23,28,.08); overflow: hidden; }
.ghost-card .cell { top: 40%; width: 100%; height: auto; aspect-ratio: 1; opacity: .9; }
.swipe-card {
  position: absolute; width: 60%; border-radius: 22px; overflow: hidden; background: #fff; color: var(--ink);
  transform: translate(12%, -11%) rotate(10deg); box-shadow: 0 40px 70px rgba(21,23,28,.28);
}
.swipe-photo { aspect-ratio: 1; }
.swipe-body { padding: 12px 14px 14px; display: grid; gap: 2px; font-size: 13px; }
.swipe-body span { color: var(--muted); font-weight: 600; font-size: 11px; }
.swipe-body b { font-family: var(--font-display); font-stretch: 92%; font-weight: 600; font-size: 18px; letter-spacing: -0.025em; line-height: 1.1; }
.swipe-body i { font-style: normal; font-weight: 700; }
.swipe-stamp { left: 14px; right: auto; transform: rotate(-10deg); font-size: 20px; }

/* iii. the shortlist */
.step-art-list { align-content: center; }
.mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; counter-reset: sl; }
.mini-list li {
  display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); border-radius: 18px; padding: 8px 14px 8px 8px;
  box-shadow: 0 1px 2px rgba(21,23,28,.05), 0 12px 30px rgba(21,23,28,.08);
}
.mini-list li:nth-child(1) { transform: translateX(-4%); }
.mini-list li:nth-child(3) { transform: translateX(4%); }
.ml-thumb { width: 72px; height: 72px; border-radius: 12px; flex: none; }
.mini-list b { display: block; font-family: var(--font-display); font-stretch: 92%; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; line-height: 1.15; }
.mini-list span { display: block; font-size: 13px; color: var(--secondary); }

.groups {
  margin: 112px 0 0; max-width: 24em; font-family: var(--font-display); font-stretch: 92%; font-weight: 500;
  font-size: clamp(26px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -0.035em; color: var(--text3);
}
.groups em { color: var(--text); font-style: normal; }

/* offers: two confident cards. The Shopify app leads; lime only on its button. */
.offers { display: grid; gap: 20px; }
@media (min-width: 860px) { .offers { grid-template-columns: 1fr 1fr; } }
.offer { border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.offer-art { aspect-ratio: 5 / 4; background: var(--photo); overflow: hidden; }
.offer-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .4s ease; }
.offer-art img.loaded { opacity: 1; }
.offer-body { padding: 32px 28px 32px; display: flex; flex-direction: column; flex: 1; }
@media (min-width: 640px) { .offer-body { padding: 40px 40px 36px; } }
.offer h3 { font-size: clamp(36px, 4vw, 56px); line-height: .95; letter-spacing: -0.045em; font-weight: 650; margin-bottom: 18px; }
.offer > p, .offer-body > p { color: var(--text2); }
.offer-dark { background: var(--d-bg); color: var(--d-text); box-shadow: 0 0 0 1px var(--d-border); }
.offer-dark .offer-body > p, .offer-dark .ticks { color: var(--d-text2); }
.offer-dark .small { color: var(--muted); }
.ticks { list-style: none; padding: 0; margin: 12px 0 32px; display: grid; color: var(--text2); font-size: 16px; flex: 1; align-content: start; }
.ticks li { padding: 13px 0 13px 30px; position: relative; border-top: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.offer-dark .ticks li { border-color: var(--d-border); }
.ticks li::after {
  content: ""; position: absolute; left: 3px; top: 19px; width: 10px; height: 5px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .7;
}
.offer .small { margin: 14px 0 0; text-align: center; }
/* side by side, the notes under the buttons take the same two lines, so both buttons sit on one line */
@media (min-width: 860px) { .offer .small { min-height: 3em; } }

/* faq: quiet, typographic */
.faq-grid { display: grid; gap: 8px; }
@media (min-width: 960px) {
  .faq-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
  .faq-grid .section-head { position: sticky; top: 112px; }
}
.faq-grid h2 { font-size: clamp(2.75rem, 6vw, 5.5rem); }
.faq { display: grid; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 26px 48px 26px 0; position: relative;
  font-family: var(--font-display); font-stretch: 94%; font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.025em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body); font-size: 28px; font-weight: 300; color: var(--text3); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--text2); padding-bottom: 28px; margin: 0; max-width: 36em; font-size: 17px; }
:root { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size .25s cubic-bezier(.23,1,.32,1), opacity .2s ease, content-visibility .25s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.faq summary { -webkit-tap-highlight-color: transparent; }

/* footer: the wordmark, cut clean through the middle */
.site-footer { border-top: 1px solid var(--line); padding: 72px 0 48px; color: var(--text3); overflow: hidden; }
.footer-mark {
  position: relative; margin: 0 0 56px; color: var(--text); user-select: none;
  font-family: var(--font-display); font-weight: 700; font-stretch: 82%;
  font-size: clamp(6rem, 50vw, 30rem); line-height: .8; letter-spacing: -0.015em; margin-left: -.05em; white-space: nowrap;
}
/* two copies of the word, one cut line (--cut, through the x-height), a clean gap (--gap) and the lower half slid
   right (--slide): a word sliced with a blade, never a misregistered render */
.footer-mark { --cut: 56%; --gap: clamp(4px, .03em, 12px); --slide: .06em; }
.footer-mark span { display: block; clip-path: inset(0 0 calc(100% - var(--cut) + var(--gap) / 2) 0); }
.footer-mark span + span {
  position: absolute; inset: 0; clip-path: inset(calc(var(--cut) + var(--gap) / 2) 0 0 0); transform: translateX(var(--slide));
}
.footer-grid { display: grid; gap: 24px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1fr 1.4fr; } }
.site-footer .brand { color: var(--text); margin-bottom: 12px; }
.legal p { margin: 0 0 6px; }

/* modal */
.modal { border: 0; padding: 0; border-radius: 26px; width: min(460px, calc(100% - 32px)); background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal::backdrop { background: rgba(21,23,28,.55); backdrop-filter: blur(4px); }

.modal-body { padding: 32px 24px 24px; position: relative; }
.modal h2 { font-size: 40px; margin-bottom: 10px; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--text3); cursor: pointer; display: grid; place-items: center; }
.field-input { display: grid; gap: 6px; margin: 16px 0; font-size: 14px; font-weight: 700; }
.field-input input { font: inherit; font-size: 16px; font-weight: 500; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); }
.field-input input:focus { border-color: var(--text); outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form-error, .field-note { color: #C0392B; font-size: 0.8125rem; font-weight: 600; margin: 0; }
.field-input input[aria-invalid="true"] { border-color: #C0392B; }
.modal .btn-block { margin: 8px 0 14px; }

/* legal page */
.doc { padding: 48px 0 80px; }
.doc h1 { font-size: clamp(44px, 7vw, 80px); margin-bottom: 16px; }
.doc h2 { font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; margin: 40px 0 10px; }
.doc p, .doc li { color: var(--text2); }

@media (prefers-reduced-motion: reduce) {
  .btn, .round, .demo-fallback, .faq details::details-content, .ask-chips button { transition: none; }
  .js .reveal { transform: none; transition: opacity .3s ease; }
  .pcard-photo img, .photo img, .offer-art img { transition: none; }
  .btn:active, .round:active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal::backdrop { backdrop-filter: none; background: rgba(21,23,28,.75); }
}
@media (prefers-contrast: more) {
  .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--text); }
  .offer, .vs, .modal, .step-art { box-shadow: none; outline: 1.5px solid var(--text); }
  .muted { color: var(--text2); }
}