/* Simplytory landing — "labels and shelves".
   Paper + ink (light), deep charcoal (dark), one teal accent.
   Familjen Grotesk for text, Martian Mono for codes on label tape. */

/* ---------- fonts ----------
   Self-hosted (SIL Open Font License), so nothing is fetched from Google and
   the headline font can be preloaded (see index.html). "Familjen Fallback" is
   the system Arial scaled to take the same space as Familjen Grotesk, so if
   the real font arrives late the text doesn't rewrap or jump when it swaps. */

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin.c5d0fcda30d9.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/familjen-grotesk-latin-ext.1df2b918923e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("fonts/martian-mono-latin.9fc94a3d1ad7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url("fonts/martian-mono-latin-ext.be309b3ebb4c.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metrics measured from the font files: average glyph width and the
   ascent/descent of Familjen Grotesk relative to Arial. */
@font-face {
  font-family: "Familjen Fallback";
  font-weight: 400 600;
  src: local("Arial"), local("ArialMT");
  size-adjust: 94.5%;
  ascent-override: 108.5%;
  descent-override: 23.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Familjen Fallback";
  font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT");
  size-adjust: 92.2%;
  ascent-override: 111.2%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light dark;

  --paper: #f1efe9;
  --paper-2: #e8e4da;
  --surface: #fbfaf7;
  --field: #ffffff;
  --ink: #1b1d1f;
  --ink-2: #565a5d;
  --line: #d8d3c7;
  --line-strong: #b9b3a5;
  --accent: #0a6b69;
  --accent-hover: #085856;
  --accent-ink: #ffffff;
  --accent-glow: rgba(10, 107, 105, 0.22);
  --error: #b42318;
  --tape: #ffffff;
  --tape-ink: #1b1d1f;
  --tape-edge: rgba(27, 29, 31, 0.14);
  --shelf: #2c3033;
  --shelf-top: #4a5054;
  --bezel: #1b1d1f;
  --bezel-edge: #3a3f42;
  --shadow: 0 30px 50px -28px rgba(40, 34, 20, 0.45);

  --font: "Familjen Grotesk", "Familjen Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 16px;
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius-card: 14px;
  --radius-control: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1e1f;
    --paper-2: #232628;
    --surface: #272a2c;
    --field: #1f2223;
    --ink: #ece9e2;
    --ink-2: #a9adaf;
    --line: #373b3d;
    --line-strong: #565b5e;
    --accent: #5cc7b9;
    --accent-hover: #7dd6ca;
    --accent-ink: #0d2523;
    --accent-glow: rgba(92, 199, 185, 0.22);
    --error: #ff8f80;
    --tape: #e9e5db;
    --tape-ink: #1b1d1f;
    --tape-edge: rgba(0, 0, 0, 0.4);
    --shelf: #43494c;
    --shelf-top: #5d6467;
    --bezel: #0c0d0e;
    --bezel-edge: #4a5054;
    --shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.7);
  }
}

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }
}

/* ---------- base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

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

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

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-control);
}

.skip:focus {
  top: 0.75rem;
}

.section-title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---------- label tape: the recurring motif ---------- */

.tape {
  display: inline-block;
  padding: 0.38em 0.85em 0.34em;
  background: var(--tape);
  color: var(--tape-ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  font-stretch: 87.5%;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--tape-edge),
    0 1px 2px rgba(0, 0, 0, 0.12);
  transform: rotate(-1.5deg);
}

.tape--inline {
  transform: none;
  font-size: 0.85em;
  padding: 0.15em 0.55em;
  vertical-align: 0.05em;
}

.tape--teal {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.45rem;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.button:hover {
  background: var(--accent-hover);
}

.button--small {
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.95rem;
  border-radius: 10px;
}

.button--wide {
  width: 100%;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark__mark {
  width: 26px;
  height: 26px;
  border-radius: 7px;
}

/* ---------- iPhone frame (CSS only) ---------- */

.phone {
  --w: var(--phone-w, 280px);
  position: relative;
  width: var(--w);
  flex: none;
  padding: calc(var(--w) * 0.032);
  background: var(--bezel);
  border-radius: calc(var(--w) * 0.165);
  box-shadow:
    inset 0 0 0 1.5px var(--bezel-edge),
    var(--shadow);
}

/* side button */
.phone::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 24%;
  width: 3px;
  height: 11%;
  background: var(--bezel-edge);
  border-radius: 0 2px 2px 0;
}

.phone__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1206 / 2622;
  background: #000;
  border-radius: calc(var(--w) * 0.135);
}

/* Dynamic Island */
.phone__screen::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1.35%;
  left: 50%;
  width: 31%;
  height: 4%;
  translate: -50% 0;
  background: #000;
  border-radius: 999px;
}

.phone__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* One sweep of the scanner across the hero phone (started by landing.js). */
.phone__scan {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 16%;
  background: linear-gradient(to bottom, transparent, var(--accent-glow));
  border-bottom: 2px solid var(--accent);
  box-shadow: 0 6px 18px var(--accent-glow);
  opacity: 0;
  pointer-events: none;
}

.is-scanning .phone__scan {
  animation: scan 1.7s cubic-bezier(0.45, 0, 0.3, 1) 1 forwards;
}

@keyframes scan {
  0% {
    transform: translateY(-20%);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(560%);
    opacity: 0;
  }
}

/* ---------- shelves: phones stand on them ---------- */

.shelf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shelf .phone {
  margin-bottom: -1px;
}

.shelf__edge {
  position: relative;
  align-self: stretch;
  display: block;
  height: 22px;
  background: var(--shelf);
  border-top: 3px solid var(--shelf-top);
  border-radius: 2px;
  box-shadow: 0 18px 22px -16px rgba(0, 0, 0, 0.45);
}

.shelf__edge .tape {
  position: absolute;
  left: 14%;
  top: 50%;
  translate: 0 -50%;
}

/* ---------- 1. hero ---------- */

.hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) var(--section);
}

.hero__grid {
  display: grid;
  gap: 3rem;
  align-items: end;
}

.hero__title {
  font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.4rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__title-2 {
  display: block;
  margin-top: 0.3em;
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero__sub {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem);
  color: var(--ink-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2rem;
}

.hero__note {
  font-size: 0.95rem;
  color: var(--ink-2);
}

.hero__shelf {
  --phone-w: min(72vw, 330px);
}

/* the hero shelf's tape sits at the right end, clear of the QR label */
.hero__shelf .shelf__edge .tape {
  left: auto;
  right: 10%;
}

/* a printed QR label leaning on the phone's lower-left corner, on the shelf */
.qr-label {
  position: absolute;
  z-index: 3;
  bottom: 22px; /* stands on the shelf edge */
  left: max(0px, calc(50% - var(--phone-w) / 2 - 3.25rem));
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.6rem 0.6rem 0.45rem;
  background: #ffffff;
  border: 1px solid var(--tape-edge);
  border-radius: 6px;
  box-shadow: 0 14px 22px -14px rgba(0, 0, 0, 0.55);
  rotate: -4deg;
  transform-origin: 50% 100%;
}

.qr-label img {
  display: block;
  width: clamp(64px, 18vw, 84px);
  height: auto;
  image-rendering: pixelated;
}

.qr-label figcaption {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1b1d1f;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.25fr 0.85fr;
    gap: 4rem;
  }

  .hero__copy {
    padding-bottom: 4.5rem;
  }

  .hero__shelf {
    /* as big as fits: about 2.25 × the width tall, plus room for the shelf */
    --phone-w: min(360px, 28vw, calc((100svh - 9rem) / 2.3));
  }

  /* wide screens: the label stands a bit further out, past the column edge */
  .qr-label {
    left: calc(max(0px, 50% - var(--phone-w) / 2 - 3.25rem) - 50px);
  }
}

/* ---------- 2. how it works ---------- */

.how {
  padding-block: var(--section);
  background: var(--paper-2);
}

.steps {
  --gap: 2.5rem;
  display: grid;
  gap: var(--gap);
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

/* narrow screens: phone on its shelf, then the text at full width */
.step {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.step .shelf {
  --phone-w: min(250px, 66vw);
}

.step__title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.step__n {
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  flex: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 50%;
  translate: 0 -0.15em;
}

.step p {
  margin-top: 0.5rem;
  max-width: 22rem;
  color: var(--ink-2);
}

.how__intro {
  max-width: 38rem;
  margin-top: 1rem;
  font-size: 1.15rem;
  color: var(--ink-2);
}

/* the facts under each step: short lines with a small teal tick of tape */
.step__points {
  display: grid;
  gap: 0.45rem;
  max-width: 26rem;
  margin-top: 1rem;
  padding: 0;
  list-style: none;
  color: var(--ink);
}

.step__points li {
  position: relative;
  padding-left: 1.35rem;
}

.step__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 0.3rem;
  background: var(--accent);
  border-radius: 1px;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap);
    row-gap: 0;
  }

  .step {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-content: start;
  }

  .step .shelf {
    grid-row: auto;
    --phone-w: min(270px, 26vw);
  }

  /* one continuous shelf under all three phones */
  .step .shelf__edge {
    margin-inline: calc(var(--gap) / -2 - 1px);
    border-radius: 0;
  }

  .step:first-child .shelf__edge {
    margin-left: 0;
  }

  .step:last-child .shelf__edge {
    margin-right: 0;
  }

  .step__title {
    margin-top: 1.75rem;
  }
}

/* ---------- 3. places and boxes ---------- */

.nesting {
  padding-block: var(--section);
}

.nesting__grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.nesting__copy p {
  max-width: 32rem;
  margin-top: 1.25rem;
  color: var(--ink-2);
}

.nest {
  max-width: 34rem;
}

/* the search above the shelf: type a name, see where it is (landing.js
   types the query when it scrolls into view; without JS or with reduced
   motion the found state shows at once) */
.nest-search {
  position: relative;
  margin-bottom: 2.25rem;
  font-size: 1rem;
}

.nest-search__field {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 1rem;
  background: var(--field);
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.5);
}

.nest-search__icon {
  flex: none;
  color: var(--ink-2);
}

.nest-search__query {
  font-weight: 600;
  white-space: nowrap;
}

.nest-search__caret {
  width: 2px;
  height: 1.2em;
  margin-left: -0.45rem;
  background: var(--accent);
  opacity: 0;
}

.nest-search__result {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.6rem 0 0;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-control);
  box-shadow: 0 16px 30px -24px rgba(0, 0, 0, 0.55);
}

.nest-search__name {
  font-weight: 700;
}

.nest-search__qty {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
}

.nest-search__where {
  grid-column: 1 / -1;
  font-size: 0.8rem;
  color: var(--ink-2);
}

.nest-search__path {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: -0.2rem;
}

.nest-search__sep {
  color: var(--ink-2);
}

/* the thing the search found, inside its box */
.nest__level--found {
  transition:
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.nest-demo.is-found .nest__level--found {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.nest-demo.is-found .nest__level--found .nest__thing {
  color: var(--accent);
}

.js .nest-demo:not(.is-found) .nest-search__result {
  opacity: 0;
  translate: 0 -6px;
}

.nest-search__result {
  transition:
    opacity 0.35s ease,
    translate 0.35s ease;
}

.nest-demo.is-typing .nest-search__caret {
  opacity: 1;
  animation: caret 0.9s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

/* boxes on the same place: stacked on narrow screens, side by side when wide */
.nest__boxes {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.5rem;
}

.nest__boxes > .nest__level--box {
  margin-top: 0;
}

.nest__level {
  position: relative;
  padding: 2.1rem 1.25rem 1.25rem;
  border-radius: var(--radius-card);
}

.nest__level > .tape {
  position: absolute;
  top: -0.85em;
  left: 1rem;
}

.nest__kind {
  position: absolute;
  top: 0.65rem;
  right: 1rem;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.nest__level--place {
  border: 2px solid var(--ink);
  border-bottom-width: 14px;
  border-radius: var(--radius-card) var(--radius-card) 4px 4px;
}

.nest__level--box {
  margin-top: 0.5rem;
  background: var(--paper-2);
  border: 1.5px dashed var(--line-strong);
}

.nest__level--thing {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}

.nest__thing {
  font-size: 1.15rem;
  font-weight: 600;
}

.nest__qty {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--accent);
}

@media (min-width: 900px) {
  .nesting__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 4rem;
  }

  .nest {
    max-width: none;
  }

  .nest__boxes {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .nest__boxes > .nest__level--box {
    padding: 2.3rem 0.9rem 0.9rem;
  }

  .nest__boxes .nest__level--thing {
    font-size: 0.95rem;
  }

  .nest__level {
    padding: 2.4rem 1.75rem 1.75rem;
  }

  /* the things in the box stay compact rows */
  .nest__level.nest__level--thing {
    padding: 0.8rem 1.1rem;
  }
}

/* ---------- 3b. web admin: the inventory on a desk ---------- */

.desk {
  padding-block: var(--section);
  border-top: 1px solid var(--line);
}

.desk__head {
  max-width: 44rem;
}

.desk__lead {
  margin-top: 1rem;
  font-size: 1.15rem;
  color: var(--ink-2);
}

.desk__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-top: 3rem;
}

/* a plain browser window drawn in CSS around the screenshot */
.browser {
  margin: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 40px 70px -40px rgba(30, 26, 18, 0.55);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}

.browser__bar > span:not(.browser__url) {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--line-strong);
}

.browser__url {
  flex: 0 1 22rem;
  margin-left: 12px;
  padding: 3px 12px;
  overflow: hidden;
  font-size: 0.75rem;
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: var(--surface);
  border-radius: 999px;
}

.browser img {
  display: block;
  width: 100%;
  height: auto;
}

.desk__points {
  gap: 0.85rem;
  max-width: none;
  margin-top: 0;
  font-size: 1.05rem;
}

@media (min-width: 900px) {
  .desk__grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

/* ---------- 4. use it for… ---------- */

.uses {
  padding-block: var(--section);
  background: var(--paper-2);
}

.uses__grid {
  display: grid;
  gap: 2.25rem 1.25rem;
  margin-top: 3.25rem;
  padding: 0;
  list-style: none;
}

.use {
  position: relative;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

.use__text {
  padding: 2rem 1.5rem 1.6rem;
}

.use__text > .tape:first-child {
  position: absolute;
  top: -0.8em;
  left: 1.25rem;
}

.use__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-2);
}

.use__q {
  margin: 0.35rem 0 0.6rem;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.use__text p:last-child {
  color: var(--ink-2);
}

.use__shot {
  display: flex;
  justify-content: center;
  align-self: end;
  height: 280px;
  overflow: hidden;
  padding-top: 0.5rem;
  --phone-w: 240px;
}

.use__shot .phone {
  box-shadow: inset 0 0 0 1.5px var(--bezel-edge);
}

@media (min-width: 760px) {
  .uses__grid {
    grid-template-columns: repeat(6, 1fr);
  }

  .use {
    grid-column: span 2;
  }

  .use--wide {
    grid-column: span 4;
    grid-template-columns: 1fr auto;
  }

  .use--wide .use__shot {
    height: 100%;
    min-height: 300px;
    max-height: 340px;
    padding: 1.75rem 1.75rem 0 0;
    --phone-w: 230px;
  }

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

  .use--full .use__text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
  }

  .use--full .use__text > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin-bottom: 0.6rem;
  }
}

/* ---------- 5. deliberately simple ---------- */

.simple {
  padding-block: var(--section);
}

.simple__grid {
  display: grid;
  gap: 1.75rem;
}

.simple__lead {
  max-width: 34rem;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  line-height: 1.35;
}

.simple__not {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.simple__not li {
  padding: 0.5em 1em 0.45em;
  font-family: var(--mono);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  font-stretch: 87.5%;
  color: var(--ink-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: 3px;
}

.simple__not li:nth-child(2) {
  transform: rotate(1.2deg);
}

.simple__not li:nth-child(3) {
  transform: rotate(-1deg);
}

.simple__not s {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}

.simple__body > p:last-child {
  max-width: 34rem;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .simple__grid {
    grid-template-columns: 1fr 1.25fr;
    gap: 5rem;
  }
}

/* ---------- 6. join ---------- */

.join {
  padding-block: var(--section);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}

.join__grid {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}

.join__copy p {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: var(--ink-2);
}

.join__card {
  padding: 1.5rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .join__grid {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 5rem;
  }

  .join__copy {
    position: sticky;
    top: 6rem;
  }

  .join__card {
    padding: 2.25rem 2.25rem 2rem;
  }
}

/* form */

.signup {
  display: grid;
  gap: 1.35rem;
}

.signup__row {
  display: grid;
  gap: 1.35rem;
}

@media (min-width: 560px) {
  .signup__row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field > label,
.field > legend {
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
}

.field > legend {
  margin-bottom: 0.55rem;
}

.optional {
  font-weight: 400;
  color: var(--ink-2);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control);
}

.field textarea {
  resize: vertical;
  min-height: 6rem;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: 3px solid var(--accent-glow);
  outline-offset: 0;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  position: relative;
  cursor: pointer;
}

.pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.pill span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.6rem;
  padding: 0.45rem 1rem;
  font-size: 0.98rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.pill:hover span {
  border-color: var(--ink-2);
}

.pill input:checked + span {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
  font-weight: 600;
}

.pill--check input:checked + span::before {
  content: "✓";
  font-size: 0.9em;
}

.pill input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.error {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--error);
}

.error--form {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--error);
  border-radius: var(--radius-control);
}

.privacy {
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* honeypot */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* success */
.signup-done {
  padding: 1.5rem 0 1rem;
}

.signup-done:focus {
  outline: none;
}

.signup-done__title {
  margin-top: 1.25rem;
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.signup-done__text {
  margin-top: 0.5rem;
  color: var(--ink-2);
}

/* ---------- 7. footer ---------- */

.footer {
  padding-block: 2.5rem;
  font-size: 0.95rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}

.footer__by {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--ink);
}

.footer__by a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.footer__by a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__by .wordmark__mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}

.footer__privacy {
  flex-basis: 100%;
}

@media (min-width: 900px) {
  .footer__privacy {
    flex-basis: auto;
    margin-left: auto;
  }
}

/* ---------- 2b. how it works, told by scrolling ----------
   Wide screens with motion allowed: landing.js adds .how--story. One phone is
   pinned beside the steps and shows the screen of the step in the middle of
   the window. Everywhere else the stacked steps above are used as they are. */

.how__stage {
  display: none;
}

.how__stage .phone__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.how__stage .phone__layer.is-active {
  opacity: 1;
}

@media (min-width: 900px) {
  .how--story .how__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
    margin-top: 3rem;
  }

  .how--story .how__stage {
    --phone-w: min(340px, 26vw, calc((100svh - 9rem) / 2.3));
    display: block;
    position: sticky;
    /* the phone (about 2.25 × its width, plus shelf) centred in the window */
    top: max(5.5rem, calc(50vh - var(--phone-w) * 1.15));
  }

  .how--story .steps {
    --rail: 2.25rem;
    position: relative;
    display: block;
    margin-top: 0;
    padding-left: var(--rail);
  }

  /* the rail: a track, and a teal fill that follows the scroll */
  .how--story .steps::before,
  .how--story .steps::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 35vh;
    bottom: 35vh;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
  }

  .how--story .steps::after {
    background: var(--accent);
    transform-origin: top;
  }

  .how--story .step {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 58vh;
    opacity: 0.38;
    transition: opacity 0.4s ease;
  }

  .how--story .step.is-active {
    opacity: 1;
  }

  /* the per-step phones stay for screen readers, out of sight */
  .how--story .step .shelf {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .how--story .step__title {
    position: relative;
    margin-top: 0;
    font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  }

  /* the step number sits on the rail, centred on the title */
  .how--story .step__n {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(var(--rail) * -1 + 0.9rem + 1px);
    translate: -50% -50%;
    background: var(--paper-2);
    color: var(--ink-2);
    box-shadow: inset 0 0 0 2px var(--line-strong);
    transition:
      background 0.3s ease,
      color 0.3s ease,
      box-shadow 0.3s ease;
  }

  .how--story .step.is-active .step__n {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: none;
  }

  .how--story .step__lead {
    max-width: 32rem;
    font-size: 1.15rem;
  }

  .how--story .step__points {
    max-width: 32rem;
    margin-top: 1.25rem;
    font-size: 1.05rem;
  }
}

/* ---------- scroll-linked motion ----------
   Only in browsers with scroll-driven animations and only when motion is
   welcome. Elsewhere the page keeps the plain fade-in below. */

@media (prefers-reduced-motion: no-preference) {
  /* the hero shelf draws itself out from the middle on load */
  .js .hero__shelf .shelf__edge {
    animation: shelf-draw 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both;
  }

  @supports (animation-timeline: view()) {

    /* how it works: the rail fills while the steps scroll past */
    .how--story .steps {
      view-timeline: --how-steps block;
    }

    .how--story .steps::after {
      animation: rail-fill linear both;
      animation-timeline: --how-steps;
      animation-range: contain 0% contain 100%;
    }

    /* places and boxes: each level nests in after the one around it */
    .nest__level--box,
    .nest__level--thing {
      animation: nest-in linear both;
      animation-timeline: view();
    }

    .nest__level--box {
      animation-range: entry 40% cover 40%;
    }

    .nest__level--thing {
      animation-range: entry 70% cover 48%;
    }

    /* use it for: cards rise at slightly different speeds, phones drift */
    .use {
      animation: use-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }

    .use:nth-child(2) {
      --rise: 64px;
    }

    .use:nth-child(3) {
      --rise: 28px;
    }

    .use:nth-child(4) {
      --rise: 52px;
    }

    .use__shot .phone {
      animation: shot-drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes shelf-draw {
  from {
    transform: scaleX(0.12);
    opacity: 0;
  }
}

@keyframes rail-fill {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes nest-in {
  from {
    opacity: 0;
    scale: 0.94;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

@keyframes use-rise {
  from {
    translate: 0 var(--rise, 40px);
  }
  to {
    translate: 0 0;
  }
}

@keyframes shot-drift {
  from {
    translate: 0 16px;
  }
  to {
    translate: 0 -16px;
  }
}

/* ---------- scroll reveal (only when JS runs) ---------- */

.js [data-reveal] > .wrap {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

.js [data-reveal].is-in > .wrap {
  opacity: 1;
  transform: none;
}

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

  .js [data-reveal] > .wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .is-scanning .phone__scan {
    animation: none;
  }

  .button,
  .pill span {
    transition: none;
  }
}