/* Layout: left-aligned single column; the hero "equation" (person + product = ad) is the one loud element. */
:root {
  --stone: #eceee8;      /* page ground, faintly green */
  --paper: #f8f9f5;      /* raised surfaces */
  --ink: #1d2219;        /* text */
  --muted: #5c6455;      /* secondary text */
  --olive: #4e5a35;      /* accent: the mixer, the shirt */
  --olive-ink: #f4f6ee;  /* text on olive */
  --brass: #a5844f;      /* the mixer knob; operators and rules */
  --line: #d3d7cc;
  --code-bg: #232a1e;
  --code-fg: #e3e8d8;
  --code-dim: #97a184;
  --danger: #9b2c1f;

  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius-lg: 14px;
  --measure: 62ch;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stone: #171b14; --paper: #20251c; --ink: #e5e9dc; --muted: #a3ab96;
    --olive: #a9b884; --olive-ink: #171b14; --brass: #cfac72; --line: #343b2d;
    --code-bg: #0f120d; --code-fg: #e3e8d8; --code-dim: #8b957a; --danger: #ec8a7a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --stone: #171b14; --paper: #20251c; --ink: #e5e9dc; --muted: #a3ab96;
  --olive: #a9b884; --olive-ink: #171b14; --brass: #cfac72; --line: #343b2d;
  --code-bg: #0f120d; --code-fg: #e3e8d8; --code-dim: #8b957a; --danger: #ec8a7a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--stone);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--olive); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

.wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1; margin: 0; text-wrap: balance; letter-spacing: 0.005em; }
h1 { font-size: clamp(3.2rem, 9vw, 7.25rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
h3 { font-size: 1.6rem; font-weight: 600; }
p { margin: 0; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--stone); border-bottom: 1px solid var(--line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--stone); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.75rem; color: var(--ink); text-decoration: none; letter-spacing: 0.02em; }
.site-header nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  /* On phones the section links don't fit beside the logo; keep the logo and the main action. */
  .site-header nav a:not(.nav-cta) { display: none; }
  .site-header nav .nav-cta { padding: 7px 12px; font-size: 0.92rem; }
}
.site-header nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.98rem; }
.site-header nav a:hover { color: var(--olive); }
.site-header nav .nav-cta { background: var(--olive); color: var(--olive-ink); padding: 8px 14px; border-radius: var(--radius-sm); }
.site-header nav .nav-cta:hover { color: var(--olive-ink); filter: brightness(1.08); }

/* Hero */
.hero { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
.hero h1 { max-width: 11ch; }
.lede { margin-top: 22px; max-width: var(--measure); font-size: 1.22rem; color: var(--muted); }

.equation {
  margin: clamp(36px, 6vw, 64px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 0.8fr) auto minmax(0, 1.5fr);
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
}
.eq-term { margin: 0; min-width: 0; }
.eq-term img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); background: var(--paper); }
.eq-result img { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); box-shadow: 0 24px 48px -28px rgba(29, 34, 25, 0.55); }
.eq-term figcaption { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
.eq-result figcaption { color: var(--ink); font-weight: 600; }
.eq-op {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1;
  color: var(--brass); padding-bottom: 28px;
}
@media (prefers-reduced-motion: no-preference) {
  .eq-result img { animation: develop 1.4s cubic-bezier(.2,.7,.2,1) 0.35s both; }
  @keyframes develop { from { filter: saturate(0) brightness(1.25) blur(6px); } to { filter: none; } }
}
@media (max-width: 720px) {
  .equation { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .eq-result { grid-column: 1 / -1; }
  .eq-op:nth-of-type(2) { grid-column: 1 / -1; justify-self: center; padding-bottom: 0; transform: rotate(90deg); font-size: 3rem; }
}

/* Bands */
.band { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head p { color: var(--muted); max-width: var(--measure); }

/* Showcase: mock placements. The mock sites are "screenshots", so they stay light in both themes. */
:root {
  --mock-bg: #ffffff; --mock-ink: #22251f; --mock-dim: #6d7268; --mock-line: #e2e4de; --mock-skel: #eceee9;
  --mock-chrome: #d9dcd4; --market: #2f3d52; --market-ink: #ffffff; --market-accent: #e3a33b; --ad-bg: #f3efe6;
}
.showcase { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 980px) { .showcase { grid-template-columns: minmax(0, 1fr); } }
.placement { margin: 0; display: grid; gap: 14px; min-width: 0; }
.placement figcaption { color: var(--muted); max-width: 60ch; font-size: 0.97rem; }
.placement figcaption strong { color: var(--ink); }
.browser { border-radius: 10px; overflow: hidden; background: var(--mock-bg); color: var(--mock-ink);
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -30px rgba(29, 34, 25, 0.6); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--mock-chrome); }
.browser-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--mock-bg); opacity: 0.8; }
.browser-bar p { margin-left: 10px; font-size: 0.74rem; color: var(--mock-dim); background: var(--mock-bg);
  padding: 2px 10px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.site { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; padding: 18px; }
.article { display: grid; gap: 9px; align-content: start; min-width: 0; }
.site-name { font: 700 0.8rem var(--body); color: var(--mock-dim); }
.article-title { font: 700 1.15rem/1.25 Georgia, "Times New Roman", serif; }
.article-photo { aspect-ratio: 16 / 9; background: var(--mock-skel); border-radius: 4px; }
.article i { display: block; height: 8px; border-radius: 4px; background: var(--mock-skel); }
.article i.short { width: 62%; }
.ad-300 { position: relative; display: grid; align-content: start; background: var(--ad-bg);
  border: 1px solid var(--mock-line); overflow: hidden; }
.ad-300 img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 35% 20%; }
.ad-flag { font-size: 0.62rem; color: var(--mock-dim); margin-bottom: 2px; }
.ad-copy { display: grid; gap: 2px; padding: 9px 10px 11px; }
.ad-head { font: 800 1.15rem/1.05 var(--display); color: var(--mock-ink); }
.ad-sub { font-size: 0.74rem; color: var(--mock-dim); }
.ad-cta { justify-self: start; margin-top: 6px; font: 600 0.74rem var(--body); background: #4e5a35; color: #f4f6ee;
  padding: 5px 10px; border-radius: 4px; }
@media (max-width: 520px) {
  .site { grid-template-columns: minmax(0, 1fr); }
  .ad-300 { max-width: 300px; justify-self: center; }
}

.market-head { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--market); color: var(--market-ink); }
.market-logo { font: 700 0.95rem Georgia, serif; white-space: nowrap; }
.market-search { flex: 1; min-width: 0; font-size: 0.74rem; color: var(--mock-dim); background: var(--mock-bg);
  padding: 5px 10px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; padding: 18px; }
.gallery { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: start; }
.thumbs { display: grid; gap: 8px; }
.thumb { position: relative; padding: 0; border: 1.5px solid var(--mock-line); border-radius: 5px; background: var(--mock-bg);
  cursor: pointer; overflow: hidden; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumb.is-active { border-color: var(--market-accent); }
.thumb-you span { position: absolute; inset: auto 0 0; font: 700 0.6rem var(--body); background: var(--market-accent);
  color: var(--mock-ink); text-align: center; }
.main-photo { position: relative; border-radius: 6px; overflow: hidden; background: var(--mock-skel); }
.main-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.main-photo.developing img { filter: saturate(0) blur(5px) brightness(1.1); transition: filter 0.4s; }
.you-badge { position: absolute; left: 8px; bottom: 8px; font: 600 0.72rem var(--body); background: var(--market-accent);
  color: var(--mock-ink); padding: 3px 8px; border-radius: 4px; }
.buy { display: grid; gap: 10px; align-content: start; min-width: 0; }
.pdp-title { font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.pdp-price { font: 700 1.4rem var(--body); font-variant-numeric: tabular-nums; }
.see-you { font: 700 0.92rem var(--body); background: var(--market-accent); color: var(--mock-ink); border: 0;
  border-radius: 20px; padding: 10px 14px; cursor: pointer; }
.see-you:hover { filter: brightness(1.05); }
.see-you[disabled] { opacity: 0.6; cursor: progress; }
/* Invites the first click: a soft ring pulses out from the button until the visitor uses it. */
@media (prefers-reduced-motion: no-preference) {
  .see-you.is-inviting { animation: see-you-pulse 2.4s ease-out infinite; }
  .see-you.is-inviting:hover, .see-you.is-inviting:focus-visible { animation-play-state: paused; }
}
@keyframes see-you-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--market-accent) 65%, transparent); transform: scale(1); }
  12% { transform: scale(1.03); }
  24% { transform: scale(1); }
  70% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--market-accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--market-accent) 0%, transparent); }
}
.see-you-note { font-size: 0.74rem; color: var(--mock-dim); }
.pdp-cart { font: 600 0.88rem var(--body); text-align: center; border: 1.5px solid var(--mock-line); border-radius: 20px; padding: 8px; }
@media (max-width: 560px) { .pdp { grid-template-columns: minmax(0, 1fr); } }

/* Gallery */
.examples-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1040px) { .examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .examples-grid { grid-template-columns: minmax(0, 1fr); } }
.example { margin: 0; display: grid; gap: 10px; align-content: start; min-width: 0; }
.example-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.example-inputs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.example-result { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.example figcaption { font-size: 0.93rem; color: var(--muted); }
.example figcaption strong { color: var(--ink); }
.gallery-note { margin-top: 24px; font-size: 0.88rem; color: var(--muted); }

/* Demo */
.demo-band { background: var(--paper); }
.demo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.demo-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.drop {
  position: relative; display: grid; gap: 6px; cursor: pointer;
  padding: 10px; border: 1.5px dashed var(--line); border-radius: var(--radius-sm);
  background: var(--stone);
}
.drop:hover, .drop:focus-within, .drop.dragging { border-color: var(--olive); }
.drop img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.drop-label { font-weight: 600; }
.drop-hint { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.demo-controls { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: 0.95rem; }
.optional { font-weight: 400; color: var(--muted); }
select, textarea {
  font: inherit; font-weight: 400; color: var(--ink); background: var(--stone);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
textarea { resize: vertical; min-height: 84px; }
.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: 0.92rem; align-items: start; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--olive); }
.button {
  display: inline-block; text-align: center; font: 600 1rem var(--body);
  background: var(--olive); color: var(--olive-ink); border: 0; cursor: pointer;
  padding: 13px 20px; border-radius: var(--radius-sm); text-decoration: none;
}
.button:hover { filter: brightness(1.08); }
.button[disabled] { opacity: 0.55; cursor: not-allowed; }
.button-quiet { background: transparent; color: var(--olive); box-shadow: inset 0 0 0 1.5px var(--olive); }
.status { font-size: 0.92rem; color: var(--muted); min-height: 1.4em; }
.status.error { color: var(--danger); }
.demo-output img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--stone); }
.demo-output.loading img { filter: saturate(0) blur(4px); opacity: 0.6; transition: filter .3s, opacity .3s; }
.result-caption { margin-top: 10px; font-size: 0.9rem; color: var(--muted); }
@media (max-width: 960px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
}

/* Steps: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 3px solid var(--olive); }
.steps li::before { content: counter(step); font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--brass); }
.steps p { color: var(--muted); }
@media (max-width: 800px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* API */
.api-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.api-copy { display: grid; gap: 18px; }
.api-copy > p { color: var(--muted); max-width: var(--measure); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.facts li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.facts strong { font-family: var(--display); font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.code { background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius-lg); overflow-x: auto; min-width: 0; }
.code pre { margin: 0; padding: 24px; font: 0.86rem/1.65 var(--mono); }
.code .c { color: var(--code-dim); }
@media (max-width: 880px) { .api-grid { grid-template-columns: minmax(0, 1fr); } }

/* Uses */
.uses { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.uses div { display: grid; gap: 6px; }
.uses dt { font-family: var(--display); font-weight: 600; font-size: 1.6rem; }
.uses dd { margin: 0; color: var(--muted); max-width: 52ch; }
@media (max-width: 700px) { .uses { grid-template-columns: minmax(0, 1fr); } }

/* Trust */
.trust-band { background: var(--olive); color: var(--olive-ink); border-top: 0; }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; }
.trust-list { display: grid; gap: 18px; max-width: var(--measure); }
@media (max-width: 800px) { .trust-grid { grid-template-columns: minmax(0, 1fr); } }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { display: grid; gap: 12px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); }
.plan p { color: var(--muted); }
.plan .price { color: var(--ink); }
.price span { font-family: var(--display); font-weight: 800; font-size: 2.6rem; font-variant-numeric: tabular-nums; }
.plan .button { margin-top: 8px; }
.plan-featured { border: 2px solid var(--olive); }
@media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* Patent */
.patent { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: baseline; }
.patent p { max-width: var(--measure); }
@media (max-width: 800px) { .patent { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 28px; }
.footer-row nav { display: flex; gap: 18px; }
.footer-row a { color: var(--muted); }

/* Simple content pages (dashboard, legal) */
.page { padding-block: 48px 80px; display: grid; gap: 28px; }
.page h1 { font-size: clamp(2.6rem, 6vw, 4rem); }
.page .prose { max-width: var(--measure); display: grid; gap: 14px; }
.page .prose h2 { font-size: 1.8rem; margin-top: 18px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 24px; display: grid; gap: 14px; max-width: 640px; }
.panel input[type=text], .panel input[type=email], .panel input[type=password], .panel input[type=number] {
  font: inherit; color: var(--ink); background: var(--stone); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
.keybox { font: 0.9rem var(--mono); background: var(--stone); border: 1px dashed var(--brass); padding: 12px; border-radius: var(--radius-sm); word-break: break-all; }
.meter { height: 10px; background: var(--stone); border-radius: 5px; overflow: hidden; border: 1px solid var(--line); }
.meter > span { display: block; height: 100%; background: var(--olive); }
.draft-note { border-left: 3px solid var(--brass); padding-left: 12px; color: var(--muted); }
table.list { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
table.list th, table.list td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table-wrap { overflow-x: auto; }
.panel-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 760px) { .panel-row { grid-template-columns: minmax(0, 1fr); } }
.panel h2 { font-size: 1.9rem; }
.panel p { color: var(--muted); }
.upgrade { display: flex; flex-wrap: wrap; gap: 10px; }
#signed-in { display: grid; gap: 20px; }
#signed-in[hidden] { display: none; }
code { font: 0.9em var(--mono); }