/* ==========================================================================
   Concept Development — site styles
   One stylesheet, no dependencies, no web fonts.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Neutrals — light. The site is light whatever the system is set to; there
     is no dark palette. The dark one is in git history. */
  --bg:          #fbfbfa;
  --bg-raised:   #ffffff;
  --bg-sunken:   #f2f2f0;
  --ink:         #16161a;
  --ink-muted:   #5b5b63;
  --ink-faint:   #86868f;
  --rule:        rgba(22, 22, 26, 0.10);
  --rule-strong: rgba(22, 22, 26, 0.18);
  --shadow-sm:   0 1px 2px rgba(16, 16, 22, 0.05), 0 4px 12px rgba(16, 16, 22, 0.05);
  --shadow-lg:   0 2px 6px rgba(16, 16, 22, 0.06), 0 24px 60px rgba(16, 16, 22, 0.12);

  /* Accents — company gold, taken from the mark and darkened until it can carry text */
  --accent:              #6b5f1c;   /* 5.9:1 on --bg */
  --accent-ink:          #ffffff;
  --gold:                #9c8a34;   /* the mark's own gold, for fills only */
  --accent-foodie:       #9a3412;   /* paprika, darkened for text — 7.4:1 */
  --accent-conversion:   #0f5c66;   /* teal, darkened for text  — 7.1:1 */
  --accent-stiction:     #2f6b1e;   /* neon green, darkened for text — 5.8:1 */
  --accent-astronomical: #8a5a0f;   /* icon amber, darkened for text — 5.6:1 */
  --accent-mojo:         #5b4bd6;   /* the icon's indigo — 5.9:1 */

  /* Type scale — fluid */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.34rem + 0.80vw, 2.10rem);
  --step-3:  clamp(1.95rem, 1.62rem + 1.65vw, 3.10rem);
  --step-4:  clamp(2.45rem, 1.80rem + 3.25vw, 4.60rem);

  /* Space */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --section: clamp(4rem, 2.5rem + 7vw, 9rem);
  --measure: 62ch;

  --radius:    14px;
  --radius-lg: 22px;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
}

@media (prefers-contrast: more) {
  :root {
    --ink-muted: var(--ink);
    --rule: var(--rule-strong);
  }
}

/* --- Base ----------------------------------------------------------------- */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 640;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: var(--bg);
  padding: 0.7em 1.1em;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0.5rem; }

/* --- Layout --------------------------------------------------------------- */

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

.section { padding-block: var(--section); }
.section--sunken { background: var(--bg-sunken); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

.rule-top { border-top: 1px solid var(--rule); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 88px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  font-size: var(--step-0);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark__mark {
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
  transition: transform 0.5s cubic-bezier(0.34, 1.25, 0.5, 1);
}
/* The header lockup runs at double size; the footer stays modest. */
.site-header .wordmark { font-size: var(--step-1); gap: 0.7rem; }
.site-header .wordmark__mark { width: 56px; height: 56px; }
.wordmark:hover .wordmark__mark { transform: rotate(180deg); }
.wordmark__mark .mark-ink  { fill: var(--ink); }
.wordmark__mark .mark-gold { fill: var(--gold); }
.wordmark__sub { color: var(--ink-faint); font-weight: 450; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.4rem + 1.6vw, 2rem);
  font-size: var(--step--1);
}
.nav a {
  text-decoration: none;
  color: var(--ink-muted);
  padding-block: 0.6rem;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 560; }

/* The wordmark is the one thing on the page that must not wrap, so the header
   is the first place to run out of room. Below 560px the mark carries the
   brand on its own and the nav keeps the width. */
@media (max-width: 700px) {
  .site-header__inner { min-height: 72px; gap: 0.75rem; }
  .site-header .wordmark { font-size: var(--step-0); gap: 0.55rem; }
  .site-header .wordmark__mark { width: 40px; height: 40px; }
  .nav { gap: 0.9rem; }
}
@media (max-width: 460px) {
  /* Mark only. The name stays in the DOM, so the link keeps its accessible name. */
  .site-header__inner { min-height: 64px; }
  .site-header .wordmark { font-size: 0; gap: 0; }
  .site-header .wordmark__mark { width: 36px; height: 36px; }
  .nav { font-size: 0.8rem; gap: 0.7rem; }
}

/* --- Eyebrow / labels ----------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.eyebrow--accent { color: var(--accent); }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  padding-block: clamp(4rem, 2rem + 10vw, 11rem) clamp(3rem, 2rem + 5vw, 7rem);
}
.hero h1 {
  font-size: var(--step-4);
  max-width: 16ch;
  margin-bottom: clamp(1.2rem, 0.8rem + 1.2vw, 2rem);
}
.hero p {
  font-size: var(--step-1);
  color: var(--ink-muted);
  max-width: 46ch;
  line-height: 1.5;
}

.lede {
  font-size: var(--step-1);
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: var(--measure);
}

/* --- Buttons -------------------------------------------------------------- */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.8rem, 1.2rem + 1.5vw, 2.8rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.82em 1.4em;
  border-radius: 100px;
  border: 1px solid transparent;
  font-size: var(--step--1);
  font-weight: 560;
  text-decoration: none;
  min-height: 44px;
  transition: transform 0.2s cubic-bezier(0.34, 1.3, 0.6, 1), background 0.2s ease,
              border-color 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { opacity: 0.86; }

.btn--ghost { border-color: var(--rule-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: var(--bg-raised); }

.btn__arrow { transition: transform 0.25s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Product cards (home) ------------------------------------------------- */

.products {
  display: grid;
  gap: clamp(1.25rem, 0.8rem + 1.8vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .products--3 { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.3, 1.2, 0.5, 1),
              border-color 0.3s ease, box-shadow 0.3s ease;
}
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(120% 90% at 90% 0%,
              color-mix(in srgb, var(--card-accent, var(--accent)) 13%, transparent), transparent 70%);
  transition: opacity 0.4s ease;
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-lg);
}
.product-card:hover::after,
.product-card:focus-within::after { opacity: 1; }

.product-card__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.product-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.product-card h3 {
  font-size: var(--step-2);
  margin-bottom: 0.15rem;
}
.product-card__kind {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-accent, var(--ink-faint));
}
.product-card p { color: var(--ink-muted); }

/* Badge for an app that isn't out yet */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.32em 0.75em;
  border-radius: 100px;
  border: 1px solid currentColor;
  color: var(--card-accent, var(--accent));
  white-space: nowrap;
}
.product-card__head .badge { margin-left: auto; align-self: flex-start; }

/* Nothing to click, so no lift and no pointer affordance */
.product-card--soon:hover,
.product-card--soon:focus-within {
  transform: none;
  box-shadow: none;
  border-color: var(--rule);
}
.product-card--soon:hover::after { opacity: 0; }

.product-card__list {
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.product-card__list li {
  font-size: var(--step--1);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.3em 0.8em;
}

.product-card__link {
  margin-top: auto;
  padding-top: 1.8rem;
  font-weight: 560;
  font-size: var(--step--1);
  color: var(--card-accent, var(--accent));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.product-card__link::after {
  content: "→";
  transition: transform 0.25s ease;
}
.product-card:hover .product-card__link::after { transform: translateX(4px); }
/* Whole card clickable, link text stays the accessible name */
.product-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* --- Section headings ----------------------------------------------------- */

.section-head { margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem); }
.section-head h2 {
  font-size: var(--step-3);
  max-width: 20ch;
  margin-bottom: 0.9rem;
}
.section-head p {
  color: var(--ink-muted);
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.5;
}

/* --- Feature grid --------------------------------------------------------- */

.features {
  display: grid;
  gap: clamp(1.6rem, 1rem + 2.5vw, 3rem) clamp(1.6rem, 1rem + 2vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features--3 { grid-template-columns: repeat(3, 1fr); } }

.feature h3 {
  font-size: var(--step-1);
  margin-bottom: 0.55rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.feature h3::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent-page, var(--accent));
  flex: none;
  transform: translateY(-2px);
}
.feature p { color: var(--ink-muted); font-size: var(--step-0); }
.feature p + p { margin-top: 0.7rem; }

/* --- Stat strip ----------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } }

.stat__value {
  font-size: var(--step-3);
  font-weight: 640;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-page, var(--ink));
  font-variant-numeric: tabular-nums;
}
.stat__label {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
  line-height: 1.4;
}

/* --- Shots ---------------------------------------------------------------- */

/* No overflow:hidden here. The figure is taller than the image, so clipping
   turns the image's soft shadow into a hard grey slab behind the caption.
   The image carries its own radius, so the figure needs neither. */
.shot {
  margin: 0;
}
.shot img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--bg-sunken);
  /* Tighter than --shadow-lg on purpose: a 60px blur reaches well past the
     image and muddies the caption sitting under it. */
  box-shadow: 0 1px 3px rgba(16, 16, 22, 0.06), 0 10px 28px rgba(16, 16, 22, 0.10);
}
.shot figcaption {
  margin-top: 1.75rem;
  font-size: var(--step--1);
  color: var(--ink-muted);   /* --ink-faint is ~3.9:1 here, under AA at this size */
  line-height: 1.45;
}

.shot--phone img {
  border-radius: 30px;
  border-width: 1px;
}

/* A captured Mac window arrives with its own rounded corners and a transparent
   surround, so the border and background the base rule adds would draw a box
   behind them. `drop-shadow` follows the alpha instead of the border box, which
   is what puts the shadow under the window's actual shape. */
.shot--mac img {
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  filter: drop-shadow(0 1px 2px rgba(16, 16, 22, 0.10))
          drop-shadow(0 14px 34px rgba(16, 16, 22, 0.16));
}

.shot-hero { margin-top: clamp(2rem, 1rem + 4vw, 4rem); }

/* A copy point: the screenshot on top, the words under it. Side by side down a
   single column, nine shots make a page that is thin and very tall, so they go
   two to a row instead, and the lead shot takes the full width. */
.points {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 2rem + 2.5vw, 4rem) clamp(1.5rem, 0.9rem + 2.5vw, 3rem);
}

@media (min-width: 820px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .points > .point--wide { grid-column: 1 / -1; }
}

.point {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* The nine captures arrive at nine different shapes and sizes. Each one is
   given a panel of a fixed shape to sit on, which is what levels the rows:
   both panels in a row are the same height, and the words under every shot sit
   the same distance below it.

   The shape is set on the IMAGE, not the panel, and the panel takes its height
   from that. Sizing the panel and fitting the image to it reads the same way
   round but is not: the image's own height then feeds back into the panel's,
   and the pair collapses. */
/* Captures arrive at every shape, size and colour there is, so each one sits
   on a panel — that is what makes a row of them read as one set rather than a
   jumble. Every shot gets the same panel, whether it is a lone .point or one
   tile in a .gallery; only the padding differs, because a gallery tile is a
   fraction of a point's width. */
.point .shot,
.gallery .shot {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--bg-sunken);
}
.point .shot   { padding: clamp(1rem, 0.5rem + 1.8vw, 2.25rem); }
.gallery .shot { padding: clamp(0.6rem, 0.45rem + 0.6vw, 1rem); }

/* The panel has to stay off the section's own colour to read as a panel. */
.section--sunken .point .shot,
.section--sunken .gallery .shot { background: var(--bg); }

/* Inside a panel the image's own hairline just doubles the panel's, so it
   goes. The radius and the shadow stay: they are what lift the shot off it. */
.gallery .shot img { border: 0; }

.point .shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* Two portrait captures share a row, so that row gets an upright panel. */
.point--tall .shot img { aspect-ratio: 4 / 5; }

/* The lead shot is the app itself. It keeps its own shape at full width. */
.point--wide .shot img { aspect-ratio: auto; }

/* The words are a caption now, not a facing column, so they sit at caption
   size and start at the panel's left edge. */
.point__body h3 {
  font-size: var(--step-1);
  margin-bottom: 0.35rem;
  text-wrap: balance;
}
.point--wide .point__body h3 { font-size: var(--step-2); }

.point__body p {
  color: var(--ink-muted);
  max-width: 46ch;
}
.point__body .langs { margin-top: 0.85rem; }

/* Split: text one side, shot the other */
.split {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split--reverse > *:first-child { order: 2; }
  .split--phone { grid-template-columns: 1fr 0.72fr; }
}
.split + .split { margin-top: clamp(3.5rem, 2rem + 6vw, 7rem); }
.split__body h3 { font-size: var(--step-2); margin-bottom: 1rem; }
.split__body p { color: var(--ink-muted); }
.split__body p + p { margin-top: 0.9rem; }

.split__points {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.6rem;
}
.split__points li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-muted);
  font-size: var(--step--1);
}
.split__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--accent-page, var(--accent));
}

/* Gallery */
.gallery {
  display: grid;
  gap: clamp(1.2rem, 0.8rem + 1.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .gallery--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .gallery--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery--3 { grid-template-columns: repeat(3, 1fr); } }
/* Tiles: many small shots read as one swatch board rather than a few hero
   images. Five across so a ten-shot set lands as two full rows. */
.gallery--tiles {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.7rem, 0.4rem + 1vw, 1.4rem);
}
@media (min-width: 520px) { .gallery--tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery--tiles { grid-template-columns: repeat(5, 1fr); } }
/* Same board, four across, so an eight-shot set lands as two full rows.
   After the tiles rule above, which it overrides. */
@media (min-width: 900px) { .gallery--4 { grid-template-columns: repeat(4, 1fr); } }

/* The phone radius is drawn for a full-width shot. At tile size the same 30px
   eats the screen corners, so it scales down with the image. */
.gallery--tiles .shot--phone img { border-radius: 14px; }

/* A gallery read as one comparison rather than a few separate shots: the
   captions are labels, so they sit tight under the image and stay short. */
.gallery--compare figcaption {
  margin-top: 0.7rem;
  text-align: center;
  text-wrap: balance;
}

/* --- Comparison table ----------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 560px;
}
caption {
  text-align: left;
  color: var(--ink-faint);
  font-size: var(--step--1);
  padding-bottom: 0.9rem;
}
th, td {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
thead th {
  font-weight: 580;
  color: var(--ink);
  white-space: nowrap;
  background: var(--bg-sunken);
}
tbody th { font-weight: 560; color: var(--ink); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
td { color: var(--ink-muted); }
.yes { color: var(--accent-page, var(--accent)); font-weight: 600; }

/* --- Pull quote / callout ------------------------------------------------- */

.callout {
  border-left: 2px solid var(--accent-page, var(--accent));
  padding: 0.2rem 0 0.2rem 1.5rem;
  margin-block: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  max-width: var(--measure);
}
.callout p {
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: -0.012em;
}
.callout cite {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --- Status note ---------------------------------------------------------- */

.note {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: var(--step--1);
  color: var(--ink-muted);
  max-width: var(--measure);
}
.note strong { color: var(--ink); font-weight: 580; }

/* --- Language marquee ----------------------------------------------------- */

.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.6rem;
}
.langs li {
  font-size: var(--step--1);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.28em 0.75em;
  white-space: nowrap;
}

/* --- Contact / CTA -------------------------------------------------------- */

.cta h2 { font-size: var(--step-3); max-width: 18ch; margin-bottom: 1rem; }
.cta p { color: var(--ink-muted); font-size: var(--step-1); max-width: 48ch; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.site-footer nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.site-footer a { text-decoration: none; color: var(--ink-muted); }
.site-footer a:hover { color: var(--ink); }

/* --- Page accent theming -------------------------------------------------- */

.page-foodie     { --accent-page: var(--accent-foodie); }
.page-conversion { --accent-page: var(--accent-conversion); }
.page-mojo       { --accent-page: var(--accent-mojo); }
.page-stiction   { --accent-page: var(--accent-stiction); }
.page-foodie .eyebrow--accent     { color: var(--accent-foodie); }
.page-conversion .eyebrow--accent { color: var(--accent-conversion); }
.page-mojo .eyebrow--accent       { color: var(--accent-mojo); }
.page-stiction .eyebrow--accent   { color: var(--accent-stiction); }

/* App hero header on product pages */
.app-hero {
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2rem, 1.4rem + 3vw, 4rem);
}

/* The points section opens with its own padding, so the two together left a
   band of dead space between the pitch and the first shot. */
.page-mojo .app-hero { padding-bottom: 0; }
.app-hero__id {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.app-hero__icon {
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  flex: none;
}
.app-hero__id h1 { font-size: var(--step-3); margin-bottom: 0.1rem; }
.app-hero__id p {
  color: var(--ink-muted);
  font-size: var(--step-0);
}
.app-hero__pitch {
  font-size: var(--step-2);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 24ch;
  font-weight: 620;
  margin-bottom: 1.4rem;
}


/* --- Lightbox ------------------------------------------------------------- */

/* Script wraps each shot in this button so it can be opened full size. Without
   script there is no button and no wrapper — the image is simply an image. */
.shot__zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shot__zoom:focus-visible {
  outline: 2px solid var(--accent-page, var(--accent));
  outline-offset: 8px;
  border-radius: var(--radius);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 0.4rem + 3vw, 3.5rem);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(22px);
  -webkit-backdrop-filter: saturate(160%) blur(22px);
  cursor: zoom-out;
}
.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  filter: drop-shadow(0 2px 6px rgba(16, 16, 22, 0.18))
          drop-shadow(0 24px 60px rgba(16, 16, 22, 0.28));
}

.lightbox__close {
  position: absolute;
  top: clamp(0.7rem, 0.3rem + 1.5vw, 1.6rem);
  right: clamp(0.7rem, 0.3rem + 1.5vw, 1.6rem);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 100px;
  cursor: pointer;
}
.lightbox__close:hover { background: var(--bg-sunken); }

/* --- Reveal on scroll ----------------------------------------------------- */

/* Gated behind `.js`, which the inline script in each page's head sets before
   the first paint. Without it — scripting off, the file blocked, the request
   failed — every target keeps its natural opacity and the page is whole.
   Hiding content by default and relying on script to bring it back is how a
   blocked stylesheet-plus-script turns a page into a blank one. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* Print */
@media print {
  .site-header, .btn-row, .js .reveal { position: static; opacity: 1; transform: none; }
  body { background: #fff; color: #000; }
}

/* --- Nav call to action --------------------------------------------------- */

/* One nav item is the action, so it takes the button's shape. The rest stay
   plain text — three pills in a row would read as three equal choices. */
.nav__cta {
  background: var(--ink);
  color: var(--bg) !important;
  border-radius: 100px;
  padding: 0.55em 1.1em;
  font-weight: 560;
  transition: opacity 0.2s ease;
}
.nav__cta:hover { opacity: 0.86; }

@media (max-width: 460px) {
  /* At mark-only width the row is tight enough without the extra padding. */
  .nav__cta { padding: 0.4em 0.8em; }
}

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

/* The home page hero: the headline centred over a wash of light, with the
   product sitting in it. */
.hero--stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 1.5rem + 7vw, 7rem) 0;
}

/* The light source. Sized in vw so it stays a wash behind the headline rather
   than a visible disc, and pinned behind everything by z-index. */
.hero--stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -30vw;
  z-index: -1;
  width: 140vw;
  height: 100vw;
  max-height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(50% 55% at 50% 50%,
              color-mix(in srgb, var(--accent-mojo) 9%, transparent),
              transparent 70%);
  pointer-events: none;
}

.hero--stage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
}

/* The h1 and lede are left-aligned and width-capped above; centred here, so
   both caps are re-cut for a centred measure. */
.hero--stage h1 {
  font-size: var(--step-4);
  max-width: 17ch;
  margin-bottom: 0;
}
.hero--stage p { max-width: 52ch; }
.hero--stage .btn-row {
  justify-content: center;
  margin-top: clamp(0.6rem, 0.3rem + 1vw, 1.2rem);
}

/* --- Hero shot ------------------------------------------------------------ */

.hero-shot {
  margin-top: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  margin-bottom: clamp(3rem, 2rem + 5vw, 7rem);
}

/* The lead shot sits deeper than the shots down a product page, so it carries
   a heavier pair of its own. No coloured halo: on paper it needs an edge. */
.hero-shot img {
  filter: drop-shadow(0 1px 2px rgba(16, 16, 22, 0.10))
          drop-shadow(0 18px 44px rgba(16, 16, 22, 0.18));
}

/* A Mac window is wide, and on a phone every pixel of it counts: the shot
   takes back the wrap's gutter so it runs edge to edge. Even then it is a
   glimpse rather than something to read, which is the point of it here. */
@media (max-width: 700px) {
  .hero-shot { margin-inline: calc(var(--gutter) * -1); }
}

/* --- Shelf ---------------------------------------------------------------- */

.shelf {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.7rem + 1.2vw, 1.25rem);
}
@media (min-width: 720px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.shelf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s cubic-bezier(0.3, 1.2, 0.5, 1),
              border-color 0.3s ease, box-shadow 0.3s ease;
}

/* The accent arrives as a wash from the top-left corner, not a border colour:
   five saturated outlines in a grid fight each other. */
.shelf-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg,
              color-mix(in srgb, var(--card-accent, var(--accent)) 13%, transparent),
              transparent 62%);
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.shelf-card:hover,
.shelf-card:focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 40%, var(--rule));
  box-shadow: var(--shadow-lg);
}
.shelf-card:hover::after,
.shelf-card:focus-within::after { opacity: 1; }

/* Nothing to click, so no lift and no pointer affordance. */
.shelf-card--soon:hover,
.shelf-card--soon:focus-within {
  transform: none;
  box-shadow: none;
  border-color: var(--rule);
}
.shelf-card--soon:hover::after { opacity: 0.55; }

.shelf-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  flex: none;
}

.shelf-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.shelf-card__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.shelf-card h3 { font-size: var(--step-2); }

.shelf-card__kind {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--card-accent, var(--ink-faint));
}
.shelf-card p { color: var(--ink-muted); }

.shelf-card__list {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.shelf-card__list li {
  font-size: var(--step--1);
  color: var(--ink-muted);
  border: 1px solid var(--rule);
  border-radius: 100px;
  padding: 0.3em 0.8em;
}

.shelf-card__link {
  margin-top: auto;
  padding-top: 1.2rem;
  font-weight: 560;
  font-size: var(--step--1);
  color: var(--card-accent, var(--accent));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
}
.shelf-card__link::after {
  content: "→";
  transition: transform 0.25s ease;
}
.shelf-card:hover .shelf-card__link::after { transform: translateX(4px); }
/* Whole card clickable, link text stays the accessible name. */
.shelf-card__link::before {
  content: "";
  position: absolute;
  inset: 0;
}

/* --- Contact -------------------------------------------------------------- */

.cta--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.cta--split .btn-row { margin-top: 0; }

/* The one gold thing on the page, kept for the single action that matters. */
.btn--gold {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn--gold:hover { opacity: 0.88; }