/* 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: #f5f2ee;
  --paper-2: #ece7e1;
  --surface: #fcfbfa;
  --field: #ffffff;
  --ink: #211c18;
  --ink-2: #5f564e;
  --line: #ddd6ce;
  --line-strong: #bcb3a8;
  --accent: #6f5345;
  --accent-hover: #5a4337;
  --accent-ink: #ffffff;
  --accent-glow: rgba(111, 83, 69, 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: #24211e;
    --paper-2: #2a2724;
    --surface: #2e2b28;
    --field: #1f1c1a;
    --ink: #ede8e2;
    --ink-2: #b3a99f;
    --line: #433e3a;
    --line-strong: #5e5752;
    --accent: #b89784;
    --accent-hover: #c9ab9a;
    --accent-ink: #1d1814;
    --accent-glow: rgba(184, 151, 132, 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;
}
/* The header shows the full logo, scan brackets included, so it is larger. */
.wordmark__mark--full {
  width: 34px;
  height: 34px;
  border-radius: 8.5px;
}

/* ---------- 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;
}

/* ---------- 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: 122px; /* phones: 100px above the shelf edge; wider screens below */
  /* at least 1.25rem in, so the enlarged label isn't cut off at the screen edge */
  left: max(1.25rem, 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;
  scale: 1.2;
  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,
     150px above the shelf edge */
  .qr-label {
    bottom: 172px;
    left: calc(max(0px, 50% - var(--phone-w) / 2 - 3.25rem) - 30px);
  }
}

/* ---------- 1b. hero: the app's Items list ----------
   Drawn in HTML in the app's look (templates/landing/_hero_list.html) and
   scrolled by hero-list.js. It opens on the Scan screenshot with one sweep of
   the scan line. The screen's font size is its width / 22.4, so a 402 pt wide
   iPhone screen is 22.4 em (1 em = about 18 pt) and every part scales with it. */

.hero .phone {
  container-type: inline-size;
}

.hlist {
  /* the screen is the phone minus its bezel (2 x 3.2%) */
  font-size: calc(100cqw * 0.936 / 22.4);
  line-height: 1.25;
  background: var(--app-bg);
  color: var(--app-ink);
}

/* the Dynamic Island stays above the Scan screenshot */
.hlist::before {
  z-index: 4;
}

.hlist__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.4em;
  padding: 0.5em 2em 0;
  font-weight: 600;
}

/* the rows scroll under a soft top edge */
.hlist__viewport {
  position: absolute;
  inset: 11.2em 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1em);
  mask-image: linear-gradient(to bottom, transparent 0, #000 1em);
}

.hlist__rows {
  padding: 0.3em 0 7em;
}

/* the Scan screenshot, shown first (with JS and motion), then faded out by
   hero-list.js */
.hero-scan {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  background: var(--app-bg);
}

.js .hero-scan {
  display: block;
}

.hero-scan.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s 0.35s;
}

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

/* one sweep of the scanner across the screenshot */
.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;
  animation: scan 1.6s cubic-bezier(0.45, 0, 0.3, 1) 0.25s 1 forwards;
}

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

@media (prefers-reduced-motion: reduce) {
  .js .hero-scan {
    display: none;
  }
}

/* ---------- 1c. the app's parts ----------
   Shared by the hero list and the How it works demo (templates/landing/
   _app_*.html), measured from the app on an iPhone 17 simulator. Sizes are in
   em of the screen font (screen width / 22.4, 1 em = about 18 pt). */

.ai {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
}

/* the iOS 26 glass of buttons and the tab bar */
.app-glass {
  background: color-mix(in srgb, var(--app-surface) 90%, transparent);
  border: 0.06em solid var(--app-line);
  box-shadow: 0 0.3em 1em rgba(0, 0, 0, 0.08), inset 0 0.06em 0 var(--app-shine);
  backdrop-filter: blur(0.5em);
}

.app-top {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 2.8em;
  padding: 0 0.9em;
}

.app-top__space {
  position: absolute;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--app-accent);
}

.app-top__star {
  width: 1.05em;
  height: 1.05em;
  color: #f2b705;
}

.app-top__updown {
  width: 0.85em;
  height: 0.85em;
  color: var(--app-muted);
}

.app-top__pill {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 5.6em;
  height: 2.45em;
  color: var(--app-ink);
  border-radius: 999px;
}

.app-top__pill .ai {
  width: 1.3em;
  height: 1.3em;
}

.app-search {
  display: flex;
  gap: 0.5em;
  align-items: center;
  height: 2.4em;
  margin: 0.35em 0.9em 0;
  padding: 0 0.8em;
  overflow: hidden;
  white-space: nowrap;
  color: var(--app-ink);
  background: var(--app-chip-2);
  border-radius: 999px;
}

.app-search > .ai {
  width: 1.1em;
  height: 1.1em;
}

.app-search__text,
.app-search .demo__query {
  overflow: hidden;
  font-size: 0.95em;
}

.app-search__text {
  color: var(--app-muted);
}

.app-search .ai.app-search__scan {
  width: 1.3em;
  height: 1.3em;
  margin-left: auto;
}

.app-count {
  margin: 1.45em 1.2em 0;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
}

.app-row {
  display: flex;
  gap: 0.67em;
  align-items: center;
  padding-left: 0.9em;
}

.app-row img,
.app-row__ph {
  flex: none;
  width: 2.45em;
  height: 2.45em;
  object-fit: cover;
  border-radius: 0.4em;
}

.app-row__ph {
  position: relative;
  background: var(--app-ph);
}

.app-row__ph::after {
  content: "";
  position: absolute;
  inset: 32%;
  border: 0.1em solid var(--app-muted);
  border-radius: 0.15em;
  opacity: 0.7;
}

/* the line under a row starts at the text, as in the app */
.app-row__body {
  flex: 1;
  display: flex;
  gap: 0.5em;
  align-items: center;
  min-width: 0;
  margin-right: 0.9em;
  padding: 1.05em 0;
  border-bottom: 0.05em solid var(--app-line);
}

.app-row__text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.app-row__name {
  overflow: hidden;
  font-size: 0.95em;
  text-overflow: ellipsis;
}

.app-row__meta {
  display: flex;
  gap: 0.7em;
  align-items: center;
  margin-top: 0.2em;
  overflow: hidden;
  font-size: 0.75em;
}

.app-row__code {
  font-family: var(--mono);
  color: var(--app-muted);
}

.app-row__tags {
  display: flex;
  gap: 0.3em;
  align-items: center;
  min-width: 0;
  color: var(--app-accent);
}

.app-row__tags .ai {
  width: 1.1em;
  height: 1.1em;
}

.app-row__where {
  margin-top: 0.2em;
  overflow: hidden;
  font-size: 0.84em;
  text-overflow: ellipsis;
  color: var(--app-ink-2);
}

.app-row__chev {
  width: 0.75em;
  height: 0.75em;
  color: var(--app-muted);
}

.app-tabs {
  position: absolute;
  z-index: 2;
  inset-inline: 1.14em;
  bottom: 1.2em;
  display: flex;
  align-items: center;
  height: 3.4em;
  padding: 0 0.25em;
  border-radius: 999px;
}

.app-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  justify-content: center;
  align-items: center;
  height: 2.9em;
  color: var(--app-ink);
  border-radius: 999px;
}

.app-tab .ai {
  width: 1.25em;
  height: 1.25em;
}

.app-tab span {
  font-size: 0.6em;
  font-weight: 500;
}

.app-tab.is-on {
  color: var(--app-accent);
  background: var(--app-chip-2);
}

/* ---------- 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);
}

/* a thing on the place itself, below its boxes */
.nest__level--place > .nest__level--loose {
  margin-top: 1.1rem;
}

.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;
  /* the phone keeps its full height and is cut off by the card's bottom edge
     (stretched to this box, its frame stopped short of the screen) */
  align-items: flex-start;
  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__body > p:not(.simple__lead) {
  max-width: 34rem;
  color: var(--ink-2);
}

.simple__body > p.simple__closing {
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 600;
}

@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;
}

@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));
  }

  /* the demo is 38 x 52 em, its phone 24 em wide */
  .how--story .how__stage .demo {
    width: min(100%, calc(var(--phone-w) * 38 / 24));
  }

  .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;
  }

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

/* ---------- 2c. how it works demo ----------
   The phone screens are drawn in the app's look, with props beside the phone
   (templates/landing/_how_demo.html, animated by how-demo.js). The demo is one
   38 x 52 em box whose font size follows its width, so everything scales
   together; sizes are the mockup's pixels / 10. */

:root {
  --app-bg: #f5f2ee;
  --app-surface: #fcfbfa;
  --app-field: #ffffff;
  --app-ink: #211c18;
  --app-ink-2: #5f564e;
  --app-muted: #8b827b;
  --app-line: #ddd6ce;
  --app-accent: #6f5345;
  --app-on-accent: #ffffff;
  --app-chip: #e4ddd6;
  --app-chip-2: #ece7e2;
  --app-ph: #e8e3de;
  --app-hit: rgba(111, 83, 69, 0.1);
  --app-toast: #2f2a26;
  --app-shine: rgba(255, 255, 255, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-bg: #24211e;
    --app-surface: #2e2b28;
    --app-field: #1f1c1a;
    --app-ink: #ede8e2;
    --app-ink-2: #c9c0b7;
    --app-muted: #a39a92;
    --app-line: #433e3a;
    --app-accent: #a5816e;
    --app-on-accent: #1d1814;
    --app-chip: #3a3531;
    --app-chip-2: #383330;
    --app-ph: #3a3531;
    --app-hit: rgba(165, 129, 110, 0.16);
    --app-toast: #4d4540;
    --app-shine: rgba(255, 255, 255, 0.06);
  }
}

.demo {
  container-type: inline-size;
  width: min(100%, 380px);
}

.demo__box {
  position: relative;
  width: 100cqw;
  height: calc(100cqw * 52 / 38);
  font-size: calc(100cqw / 38);
  line-height: 1.25;
}

/* props: crate, wall shelf with its tape label, the item's copies */
.demo__crate {
  position: absolute;
  left: 26.2em;
  bottom: 0;
  width: 10.8em;
  height: 5.4em;
  background: #c9a77f;
  border-radius: 0.3em 0.3em 0.2em 0.2em;
  box-shadow: inset 0 0.6em 0 rgba(0, 0, 0, 0.08);
}

.demo__crate::before {
  content: "";
  position: absolute;
  left: -0.4em;
  right: -0.4em;
  top: -0.5em;
  height: 0.7em;
  background: #b8946b;
  border-radius: 0.2em;
}

.demo__crate span {
  position: absolute;
  inset-inline: 0;
  bottom: 0.7em;
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.08em;
  color: #6d5435;
}

.demo__shelf {
  position: absolute;
  left: 25.2em;
  top: 27.6em;
  width: 12.8em;
  height: 1em;
  background: var(--shelf);
  border-top: 0.3em solid var(--shelf-top);
  border-radius: 0.2em;
}

.demo__tape {
  position: absolute;
  left: 30.8em;
  top: 34.4em;
  max-width: 14em;
  overflow: hidden;
  padding: 0.3em 0.6em;
  background: var(--tape);
  color: var(--tape-ink);
  font-family: var(--mono);
  font-size: 0.85em;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: 0 0.1em 0.2em var(--tape-edge);
  rotate: -2deg;
}

.demo__prop {
  position: absolute;
  z-index: 2;
  left: var(--cx);
  top: var(--cy);
  width: 2em;
  height: 2em;
}

.demo__prop.is-shelved {
  left: var(--sx);
  top: var(--sy);
}

.demo__prop.is-away {
  opacity: 0;
  translate: 0 -12em;
}

.demo__prop--knob {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff6c8 0 8%, #e8c25a 22%, #b8892c 52%, #7a5714 74%, #a77b26 76%, #d9b04a 86%, #8a6418 100%);
  box-shadow: 0 0.2em 0.3em rgba(0, 0, 0, 0.35);
}

img.demo__prop {
  object-fit: contain;
  filter: drop-shadow(0 0.2em 0.2em rgba(0, 0, 0, 0.3));
}

.demo__prop--knob.is-glow {
  box-shadow: 0 0 0 0.2em #fff, 0 0 1em 0.3em var(--accent);
}

img.demo__prop.is-glow {
  filter: drop-shadow(0 0 0.4em var(--accent));
}

/* the phone */
.demo__phone {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 24em;
  height: 52em;
  padding: 0.8em;
  background: var(--bezel);
  border-radius: 3.9em;
  box-shadow: inset 0 0 0 0.15em var(--bezel-edge), var(--shadow);
}

.demo__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-ink);
  border-radius: 3.15em;
}

/* Dynamic Island */
.demo__screen::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0.9em;
  left: 50%;
  width: 7em;
  height: 2.1em;
  translate: -50% 0;
  background: #000;
  border-radius: 999px;
}

.demo__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.1em;
  padding: 0.5em 1.8em 0;
  font-size: 1.1em;
  font-weight: 600;
}

.demo__icons {
  display: flex;
  gap: 0.35em;
  align-items: center;
}

.demo__bars {
  width: 1.2em;
  height: 0.75em;
  background: currentColor;
  clip-path: polygon(0 100%, 0 75%, 20% 75%, 20% 100%, 27% 100%, 27% 50%, 47% 50%, 47% 100%, 54% 100%, 54% 25%, 74% 25%, 74% 100%, 81% 100%, 81% 0, 100% 0, 100% 100%);
}

.demo__wifi {
  width: 1em;
  height: 0.75em;
  background: currentColor;
  clip-path: polygon(50% 100%, 0 30%, 22% 5%, 50% 0, 78% 5%, 100% 30%);
}

.demo__battery {
  width: 1.7em;
  height: 0.8em;
  padding: 0.1em;
  border: 0.1em solid currentColor;
  border-radius: 0.25em;
  background: linear-gradient(90deg, currentColor 75%, transparent 0) content-box;
}

.demo__view {
  position: absolute;
  inset: 3.4em 0 0;
  padding: 0 1em;
  background: var(--app-bg);
  opacity: 0;
  visibility: hidden;
}

/* the Items screen runs edge to edge, like the app's list */
.demo__view--list {
  padding: 0;
}

.demo__view.is-active {
  opacity: 1;
  visibility: visible;
}

.demo__nav {
  position: relative;
  display: flex;
  align-items: center;
  height: 3.4em;
}

.demo__nav b {
  position: absolute;
  inset-inline: 0;
  overflow: hidden;
  padding-inline: 3em;
  text-align: center;
  font-size: 1.05em;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}

.demo__round {
  display: grid;
  place-items: center;
  width: 2.45em;
  height: 2.45em;
  color: var(--app-ink);
  border-radius: 50%;
}

.demo__round .ai {
  width: 1.05em;
  height: 1.05em;
}

.demo__pill {
  padding: 0.7em 1em;
  color: var(--app-accent);
  border-radius: 999px;
}

.demo__label {
  display: flex;
  justify-content: space-between;
  margin: 0.8em 0.8em 0.4em;
  color: var(--app-muted);
}

.demo__label em {
  color: var(--app-accent);
  font-style: normal;
}

.demo__card {
  overflow: hidden;
  padding: 0.9em 1em;
  background: var(--app-surface);
  border-radius: 1.4em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.demo__card + .demo__card {
  margin-top: 1em;
}

.demo__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo__sub {
  margin-top: 0.2em;
  overflow: hidden;
  color: var(--app-muted);
  text-overflow: ellipsis;
}

.demo__small {
  font-size: 0.85em;
}

.demo__muted,
.demo__placeholder {
  color: var(--app-muted);
  font-weight: 400;
}

.demo__mono {
  font-family: var(--mono);
  font-size: 0.9em;
}

.demo__photos {
  display: flex;
  gap: 0.6em;
}

.demo__photos img,
.demo__photos .demo__ph {
  display: block;
  width: 6.2em;
  height: 6.2em;
  object-fit: cover;
  border-radius: 0.9em;
}

.demo__plus {
  display: grid;
  place-items: center;
  width: 3.1em;
  height: 3.1em;
  font-size: 2em;
  color: var(--app-muted);
  background: var(--app-chip-2);
  border-radius: 0.45em;
}

.demo__ph {
  position: relative;
  flex: none;
  background: var(--app-ph);
}

.demo__ph::after {
  content: "";
  position: absolute;
  inset: 32%;
  border: 0.12em solid var(--app-muted);
  border-radius: 0.2em;
  opacity: 0.7;
}

/* the bottom buttons: 50 pt tall, 9 pt apart, above the tab bar (sizes in
   the button's own em, 1.1 x the screen's) */
.demo__btn {
  position: absolute;
  inset-inline: 0.82em; /* 16 pt, like the cards */
  display: flex;
  gap: 0.45em;
  justify-content: center;
  align-items: center;
  height: 2.55em;
  font-size: 1.1em;
  color: var(--app-on-accent);
  background: var(--app-accent);
  border-radius: 999px;
}

.demo__btn .ai {
  width: 1.05em;
  height: 1.05em;
}

.demo__btn--add {
  bottom: 7.64em;
}

.demo__btn--alt {
  bottom: 4.65em;
  color: var(--app-ink);
  background: var(--app-chip);
}

.demo__save {
  bottom: 2.2em;
}

.demo__save.is-pressed {
  transform: scale(0.96);
  filter: brightness(0.85);
}

.demo__qtyrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.2em;
}

.demo__qty {
  width: 5.3em;
  padding: 0.35em 0.55em;
  text-align: right;
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
  background: var(--app-field);
  border: 0.1em solid var(--app-line);
  border-radius: 0.55em;
}

.demo__stepper {
  display: flex;
  gap: 0.5em;
  align-items: center;
  padding: 0.3em 0.9em;
  background: var(--app-chip);
  border-radius: 999px;
}

.demo__stepper i {
  width: 0.1em;
  height: 1em;
  background: var(--app-muted);
}

.demo__toast {
  position: absolute;
  z-index: 3;
  inset-inline: 1.5em;
  bottom: 6em;
  padding: 0.8em 1em;
  color: #fff;
  background: var(--app-toast);
  border-radius: 1.2em;
  opacity: 0;
  transform: translateY(0.8em);
}

.demo__toast.is-shown {
  opacity: 1;
  transform: none;
}

.demo__query:empty::before {
  content: "Search things";
  color: var(--app-muted);
}

.demo__caret {
  flex: none;
  width: 0.1em;
  height: 1.25em;
  margin-left: -0.45em;
  background: var(--app-accent);
}

.demo__row {
  max-height: 6em;
  overflow: hidden;
}

.demo__row.is-out {
  max-height: 0;
  opacity: 0;
}

/* the found row, inset like a selected row in the app */
.demo__row.is-hit {
  margin-inline: 0.45em;
  padding-left: 0.45em;
  background: var(--app-hit);
  border-radius: 0.8em;
}

.demo__row.is-hit .app-row__body {
  margin-right: 0.45em;
  border-bottom-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .demo__view {
    transition: opacity 0.3s, visibility 0.3s;
  }

  .demo__prop {
    transition: left 0.45s cubic-bezier(0.3, 0.7, 0.3, 1), top 0.45s cubic-bezier(0.3, 1.4, 0.4, 1), opacity 0.25s, translate 0.45s cubic-bezier(0.3, 1.4, 0.4, 1), box-shadow 0.4s, filter 0.4s;
  }

  .demo__prop.is-instant {
    transition: none;
  }

  .demo__save {
    transition: transform 0.12s, filter 0.12s;
  }

  .demo__toast {
    transition: opacity 0.3s, transform 0.3s;
  }

  .demo__row {
    transition: max-height 0.3s, opacity 0.25s, padding 0.3s, background 0.4s;
  }

  .demo__caret {
    animation: demo-blink 1s steps(1) infinite;
  }
}

@keyframes demo-blink {
  50% {
    opacity: 0;
  }
}