/* Stylesheet of the nativtap.com marketing pages (/, /features, /how-it-works, /pricing, /faq, /about,
   /early-access). Red, black and white like aura.com (owner, 19/10/2026): the page is black, light panels
   alternate with it, red is the one accent. Every colour is a token in :root; dark and light contexts only
   re-point the context tokens (--bg, --text, --muted, --surface, --line, --accent, --link). Type scale
   measured on aura.com (docs/research/2026-10-19-website-reference/typography.md). No scripts beyond
   /assets/site.js, no fonts or images from other hosts. Motion is CSS only and stops when the visitor asks
   for reduced motion. Design, logo and images are Nativtap's own. */

/* Instrument Sans variable (weight 400-700, width 75-100), Latin subset, self-hosted (SIL OFL 1.1,
   fonts/OFL.txt). Closest open font to aura.com's commercial Basel Grotesk. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("fonts/instrument-sans-latin-wdth-wght-normal.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;
}
/* Arial resized to Instrument Sans metrics, so the swap does not shift the layout. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 101.3%;
  ascent-override: 95.8%;
  descent-override: 24.7%;
  line-gap-override: 0%;
}

:root {
  /* palette: red, black, white; neutrals measured on aura.com (change here) */
  --black: #161616; /* page, hero, footer */
  --graphite: #2a2a2a; /* cards on black */
  --white: #ffffff;
  --grey-100: #efefef; /* cards on white panels, the second light panel */
  --grey-200: #dddddd; /* hairlines on light */
  --grey-400: #888888; /* labels on black (5.1:1) */
  --grey-450: #a4a4a4; /* small print on black (7.3:1) */
  --grey-500: #bababa; /* body text on black (9.3:1, 7.4:1 on --graphite) */
  --grey-700: #4d4d4d; /* hairlines on black; body text on white (8.5:1) */
  --red: #d92d20; /* brand, buttons and chips with white text (4.8:1) */
  --red-hover: #b42318; /* hover; red text on white (6.6:1) */
  --red-bright: #f04438; /* red text and icons on black (4.8:1); not on --graphite */
  --red-deep: #4a0b07; /* textured card gradients */
  /* dark context (default) */
  --bg: var(--black);
  --text: var(--white);
  --muted: var(--grey-500);
  --label: var(--grey-400);
  --surface: var(--graphite);
  --line: var(--grey-700);
  --accent: var(--red-bright);
  --link: var(--white);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  /* film grain for the textured cards (decorative SVG noise) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* shape */
  --radius-xl: 24px;
  --radius-l: 20px;
  --radius-m: 14px;
  --radius-pill: 999px;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --panel-inset: clamp(8px, 2.2vw, 32px);
  --header-h: 68px;
  --section-y: clamp(64px, 9vw, 128px);
  /* type: aura.com scale, desktop >= 1280 px (tablet and phone values in the responsive section) */
  --font: "Instrument Sans", "Instrument Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Arial, sans-serif;
  --w-book: 400;
  --w-medium: 580; /* optical match of Basel Grotesk Medium (500) */
  --stretch-head: 95%;
  --fs-display: 64px;
  --fs-page: 58px;
  --fs-h2: 44px;
  --fs-card: 32px;
  --fs-h3: 24px;
  --fs-lead: 24px;
  --fs-body: 18px;
  --fs-btn: 18px;
  --fs-big: 64px;
  --fs-footer: 22px;
  --ls-head: -0.02em;
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}

/* light panels: the same components, re-pointed context tokens */
.white,
.tint {
  --bg: var(--white);
  --text: var(--black);
  --muted: var(--grey-700);
  --label: var(--grey-700);
  --surface: var(--grey-100);
  --line: var(--grey-200);
  --accent: var(--red);
  --link: var(--red-hover);
  --shadow: 0 30px 60px -30px rgba(22, 22, 22, 0.28);
  color-scheme: light;
}
.tint {
  --bg: var(--grey-100);
  --surface: var(--white);
  --line: #d4d4d4;
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}
/* the open mobile menu covers the page: keep the page behind it still */
html:has(.menu[open]) {
  overflow: hidden;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-book);
  line-height: 1.3;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p,
blockquote,
figure {
  margin: 0;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type ---------- */
.display,
.h2 {
  font-weight: var(--w-medium);
  font-stretch: var(--stretch-head);
  line-height: 1.15;
  letter-spacing: var(--ls-head);
  text-wrap: balance;
}
.display {
  font-size: var(--fs-display);
}
.display--page {
  font-size: var(--fs-page);
  max-width: 16em;
}
.h2 {
  font-size: var(--fs-h2);
}
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: var(--w-book);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.333;
  color: var(--muted);
  max-width: 34em;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}
.note,
.caption {
  font-size: 14px;
  color: var(--muted);
}
.caption {
  margin-top: 12px;
  font-size: 12px;
}
.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Inline "chip" inside a headline: an icon and a word in a white pill (aura.com: 36 px word in a 64 px
   headline, 12 px 20 px padding, 8 px gap). */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22em;
  padding: 0.333em 0.555em;
  margin: 0 0.06em;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 0.5625em;
  letter-spacing: 0;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}
.chip svg {
  width: 1em;
  height: 1em;
  flex: none;
  color: var(--red);
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 32px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--fs-btn);
  font-weight: var(--w-book);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--red);
  color: var(--white);
}
.btn--primary:hover {
  background: var(--red-hover);
}
.btn--ghost {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--text);
  color: var(--bg);
}
.btn--small {
  min-height: 40px;
  padding: 0 18px;
  font-size: 16px;
}
.btn .arrow {
  transition: transform 0.2s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(3px);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* white on black with a red underline, red (#b42318) on light panels */
.text-link {
  font-weight: 500;
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--red-bright);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-thickness 0.2s var(--ease);
}
.white .text-link,
.tint .text-link {
  text-decoration-color: currentColor;
}
.text-link:hover {
  text-decoration-thickness: 3px;
}

/* ---------- brand (logo) ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--text);
}
.brand img {
  width: auto;
  height: 32px;
}

/* ---------- header ----------
   Fixed over the page like aura.com. Without site.js it always has its dark glass background. site.js sets
   data-scrolled: "false" at the top of the page (transparent over the hero), "true" once the page moved
   48 px (aura.com: rgba(22, 22, 22, 0.7) with a 48 px blur, 0.2 s). An open menu always gets the background. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(22, 22, 22, 0.7);
  -webkit-backdrop-filter: blur(48px);
  backdrop-filter: blur(48px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), -webkit-backdrop-filter 0.2s,
    backdrop-filter 0.2s;
}
.site-header[data-scrolled="false"]:not(:has(.menu[open])) {
  background: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header > .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav > a,
.nav__link {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: var(--w-book);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav > a:hover,
.nav__link:hover {
  background: rgba(255, 255, 255, 0.1);
}
.nav > a[aria-current="page"],
.nav__link[aria-current="page"] {
  background: rgba(255, 255, 255, 0.16);
}
/* Features: a plain link without JS; site.js turns it into the button that opens the mega menu */
button.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
button.nav__link::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}
[data-mega][data-open] button.nav__link::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}
[data-mega][data-open] .nav__link {
  text-decoration: underline;
  text-underline-offset: 6px;
}
/* ---------- mega menu (aura.com "Solutions" panel: full width under the header, solid black) ---------- */
.mega {
  position: absolute;
  inset: 100% 0 auto;
  display: none;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, 0.7);
}
[data-mega][data-open] .mega {
  display: block;
}
.site-header:has([data-mega][data-open]) {
  background: var(--black);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mega__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 0.95fr);
  align-items: start;
  padding-top: 24px;
  padding-bottom: 24px;
}
.mega__col {
  padding: 8px 24px 24px;
  border-left: 1px solid var(--line);
}
.mega__col:first-child {
  padding-left: 0;
  border-left: 0;
}
.mega__label {
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--muted);
}
.mega__col ul {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mega__col a {
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}
.mega__col a:hover {
  text-decoration: underline;
  text-decoration-color: var(--red-bright);
  text-underline-offset: 4px;
}
.mega__promo {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(110, 110, 110, 0.1);
}
.mega__media {
  position: relative;
  height: 120px;
  overflow: hidden;
  background: linear-gradient(170deg, var(--graphite) 0%, var(--red-deep) 48%, var(--red-hover) 100%);
}
.mega__media img {
  position: absolute;
  right: 8%;
  top: -40%;
  width: 34%;
}
.mega__chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 13px;
  font-weight: 500;
}
.mega__chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.mega__body {
  display: grid;
  gap: 10px;
  padding: 20px 24px 18px;
}
.mega__title {
  font-size: 20px;
  line-height: 1.3;
}
.mega__text {
  color: var(--muted);
  font-size: 14px;
}
.mega__cards {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.mega__cards a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--graphite);
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}
.mega__cards a:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mega__cards svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--red-bright);
}
.mega__cards span {
  flex: 1;
}
.mega__cards b {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
}
.mega__fine {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.mega__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.mega__foot svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.mega__foot a {
  color: var(--text);
  text-underline-offset: 4px;
}
.mega__all {
  margin-left: auto;
}
.menu {
  display: none;
}
.menu > summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.menu > summary::-webkit-details-marker {
  display: none;
}
.menu > summary svg {
  width: 20px;
  height: 20px;
}
.menu .icon-close,
.menu[open] .icon-open {
  display: none;
}
.menu[open] .icon-close {
  display: block;
}
.menu__panel {
  /* absolute, not fixed: the header's backdrop-filter makes it the containing block anyway */
  position: absolute;
  inset: 100% 0 auto;
  height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 32px;
  background: var(--black);
  border-top: 1px solid var(--line);
}
.menu__panel > a:not(.btn) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  font-size: 22px;
  font-weight: var(--w-book);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu__panel .btn {
  width: 100%;
  margin-top: 20px;
}
/* Features in the mobile menu: an accordion (works without JS) */
.menu__group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  list-style: none;
  cursor: pointer;
}
.menu__group summary::-webkit-details-marker {
  display: none;
}
.menu__group summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.25s var(--ease);
}
.menu__group[open] summary::after {
  transform: rotate(45deg);
}
.menu__sub {
  display: grid;
  padding: 8px 0 16px 12px;
  border-bottom: 1px solid var(--line);
}
.menu__sub a {
  padding: 8px 0;
  font-size: 17px;
  text-decoration: none;
}
.menu__label {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- sections ---------- */
.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section--tight {
  padding-top: calc(var(--section-y) * 0.5);
}
.section--flush {
  padding-top: 0;
}
/* light panels: rounded, inset from the screen edge (aura.com rhythm: black page, light panels) */
.white,
.tint {
  margin-inline: var(--panel-inset);
  border-radius: var(--radius-xl);
  background: var(--bg);
  color: var(--text);
}
.white + .white,
.tint + .tint,
.white + .tint,
.tint + .white {
  margin-top: var(--panel-inset);
}
.section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.split--top {
  align-items: start;
}
.split--flip > :first-child {
  order: 2;
}
.stack {
  display: grid;
  gap: 20px;
  align-content: start;
}
.stack > .eyebrow,
.stack > .badge,
.stack > .text-link {
  justify-self: start;
}
.narrow {
  max-width: calc(880px + 2 * var(--gutter));
}

/* ---------- hero (inset card) ---------- */
.hero {
  padding: 12px var(--panel-inset) 0;
}
.hero__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  /* the transparent header sits over the top of the card */
  padding: calc(var(--header-h) + clamp(28px, 5vw, 64px)) clamp(20px, 5vw, 72px) clamp(48px, 7vw, 96px);
  border-radius: var(--radius-xl);
  background: radial-gradient(60% 55% at 50% 100%, rgba(217, 45, 32, 0.38), transparent 70%),
    radial-gradient(40% 50% at 100% 0%, rgba(217, 45, 32, 0.16), transparent 70%), var(--graphite);
}
.hero__card::before {
  /* faint grid (decorative) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 30% 40%, #000 20%, transparent 75%);
}
.hero__inner {
  display: grid;
  gap: 24px;
  justify-items: start;
}
.hero__card--compact {
  /* one centred column: the title, the lead, the buttons and the note share one axis */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.hero__card--compact .hero__inner {
  justify-items: center;
  max-width: 760px;
}
.hero__card--compact .actions {
  justify-content: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
}
.badge b {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- hero: scan stage (P19) ----------
   Title and buttons, then a 480 px tall stage: a MacBook showing a Shopify store and an iPhone showing the app made from
   it, on a turntable. The rules below draw the FINAL frame with CSS alone (what shows without hero.js, with reduced
   motion, and before the first frame is drawn): iPhone in front (angle 0), laptop behind (angle 180), every block of the
   app visible. hero.js sets [data-mode] on the section, writes --scan-w and --scan-scale on [data-scan-box]
   and then drives transform, opacity, filter and z-index of the devices and blocks from one timeline.
   [data-mode]: "scroll" pins the stage for 480vh while the page scrolls; "auto" plays by itself; "still" or none = this frame.
   Turntable at angle a: z = (cos a + 1) / 2, translate(R sin a, lerp(-70, 0, z)), scale lerp(.5, front, z),
   brightness lerp(.4, 1, z), blur lerp(2.5, 0, z); the closer one has z-index 2. */
.hero__card--scan {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(32px, 4vw, 64px);
  text-align: center;
  background: radial-gradient(70% 60% at 50% 85%, rgba(217, 45, 32, 0.45), transparent 70%),
    linear-gradient(180deg, var(--graphite) 0%, #1d1110 100%);
}
.hero__card--scan .hero__inner {
  justify-items: center;
  max-width: 980px;
}
.hero__card--scan .actions {
  justify-content: center;
}
.hero--scan[data-mode="scroll"] .hero__track {
  height: 480vh;
}
.hero--scan[data-mode="scroll"] .hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
}
.hero--scan[data-mode="scroll"] .hero__card--scan {
  flex: 1;
  grid-template-rows: auto minmax(0, 1fr);
  /* the pinned card is one screen tall: every pixel above the stage is a pixel the devices lose, so the top just clears
     the transparent header and the bottom is nearly flush */
  gap: clamp(12px, 2.2vh, 22px);
  padding-top: calc(var(--header-h) + clamp(6px, 1.4vh, 14px));
  padding-bottom: clamp(6px, 1.4vh, 14px);
}
.hero--scan[data-mode="scroll"] .hero__card--scan .hero__inner {
  gap: clamp(10px, 2vh, 20px);
}
.hero--scan[data-mode="scroll"] .display {
  font-size: clamp(30px, min(3.6vw, 6.2vh), 54px);
}
.hero--scan[data-mode="scroll"] .scan {
  /* the stage may use the card's whole width, side padding included */
  width: calc(100% + 2 * clamp(20px, 5vw, 72px)); /* the card centres it, so it grows evenly on both sides */
  align-self: stretch; /* the card centres its items: without this the box has no height to measure */
  height: auto;
  min-height: 0;
  margin-block: 0;
}

/* Phones: the title, both buttons and the whole stage must fit the first screen, so this hero gets a smaller head than the
   other pages (30 px title, two small buttons side by side). The buttons wrap only when they cannot share a row. */
@media (max-width: 600px) {
  .hero--scan .hero__card--scan {
    gap: 20px;
    padding-top: calc(var(--header-h) + 12px);
    padding-bottom: 20px;
  }
  .hero--scan .hero__inner {
    gap: 14px;
  }
  .hero--scan .display {
    font-size: 30px;
    line-height: 1.1;
  }
  .hero--scan .actions {
    width: auto;
    justify-content: center;
    gap: 8px;
  }
  .hero--scan .actions .btn {
    width: auto;
    min-height: 41px;
    padding: 0 13px;
    font-size: 14px;
  }
}

/* The stage is 640 px wide on narrow screens and 1200 px on wide ones, scaled to fit. Without hero.js the media
   queries pick the scale from the viewport width, never wider than the screen. */
.scan {
  --scan-w: 640px;
  --scan-scale: 0.5;
  --scan-front: 1.45; /* the iPhone in front, bigger on narrow stages */
  position: relative;
  width: 100%;
}
/* The box always has a height of its own, so what hero.js writes (scale, front size, offset: transforms only) never moves
   anything. Scroll: the pinned screen (above). Auto and still, which is also what shows before hero.js runs: the card is
   one screen tall and the box takes what the title and buttons leave. */
.hero--scan:is([data-mode="auto"], [data-mode="still"]) .hero__card--scan {
  min-height: calc(100vh - 24px);
  min-height: calc(100svh - 24px);
  grid-template-rows: auto minmax(0, 1fr);
}
.hero--scan:is([data-mode="auto"], [data-mode="still"]) .scan {
  align-self: stretch; /* the card centres its items: without this the box has no height to fill */
  min-height: 0;
  container-type: size; /* the stage centres itself with cqh until hero.js has measured */
}
/* On a screen where the pinned layout is the usual one, the section after the hero must not peek in at the bottom before
   hero.js pins the stage (and moves it away): the card is a little more than one screen tall. */
@media (min-width: 720px) and (min-height: 560px) {
  .hero--scan:is([data-mode="auto"], [data-mode="still"]) .hero__card--scan {
    min-height: 100vh;
    min-height: 100svh;
  }
}
/* A short landscape screen cannot hold the title, the buttons and the stage at once. The box is then the screen under the
   fixed header, so that after a short scroll the whole stage (and its card or replay button) is in view. */
@media (max-height: 559px) {
  .hero--scan:is([data-mode="auto"], [data-mode="still"]) .hero__card--scan {
    min-height: 0;
  }
  .hero--scan:is([data-mode="auto"], [data-mode="still"]) .scan {
    align-self: auto;
    height: calc(100vh - var(--header-h) - 16px);
    height: calc(100svh - var(--header-h) - 16px);
  }
}
@media (min-width: 360px) {
  .scan {
    --scan-scale: 0.56;
  }
}
@media (min-width: 400px) {
  .scan {
    --scan-scale: 0.62;
  }
}
@media (min-width: 480px) {
  .scan {
    --scan-scale: 0.75;
  }
}
@media (min-width: 560px) {
  .scan {
    --scan-scale: 0.87;
  }
}
@media (min-width: 640px) {
  .scan {
    --scan-scale: 1;
  }
}
@media (min-width: 1000px) {
  .scan {
    --scan-w: 1200px;
    --scan-scale: 0.83;
    --scan-front: 1;
  }
}
@media (min-width: 1200px) {
  .scan {
    --scan-scale: 1;
  }
}
.scan__stage {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--scan-w, 1200px);
  height: 480px;
  transform-origin: top center;
  /* --scan-top: where hero.js starts the stage (px); until then, the middle of the stage is the middle of the box */
  transform: translateX(-50%) translateY(var(--scan-top, var(--scan-top-auto, 0px)))
    scale(var(--scan-scale, 1));
}
.hero--scan:is([data-mode="auto"], [data-mode="still"]) .scan__stage {
  --scan-top-auto: calc(50cqh - 240px * var(--scan-scale, 1));
}
.scan__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.scan__orbit {
  position: absolute;
  left: 50%;
  top: 400px;
  width: 72%;
  height: 100px;
  margin-left: -36%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.04), transparent);
}
.scan__dev {
  position: absolute;
  left: 50%;
  top: 240px;
  will-change: transform, filter;
}
.scan__serif {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* laptop: a 640 px bezel, a 616 x 380 screen and a base; the box is 420 px tall so it turns around its middle */
.scan__laptop {
  z-index: 1;
  width: 640px;
  height: 420px;
  transform: translate(-50%, -50%) translate(0, -70px) scale(0.5);
  filter: brightness(0.4) blur(2.5px);
}
.scan__laptop::before {
  content: "";
  position: absolute;
  inset: 0 0 16px;
  border: 1px solid #3a3a3a;
  border-radius: 18px 18px 0 0;
  background: #0b0b0b;
}
.scan__laptop::after {
  content: "";
  position: absolute;
  left: -50px;
  bottom: 0;
  width: 740px;
  height: 16px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#777, #777) center top / 110px 6px no-repeat, linear-gradient(#cfcfcf, #8d8d8d);
}
.scan__screen {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 616px;
  height: 380px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--white);
}
.scan__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid #d8d8d8;
  background: #ececec;
}
.scan__chrome i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d0d0d0;
}
.scan__url {
  flex: 1;
  max-width: 300px;
  height: 16px;
  margin-left: 40px;
  border-radius: 5px;
  background: var(--white);
  font: 9px / 16px -apple-system, Arial, sans-serif;
  color: #555;
  text-align: center;
}
.scan__page {
  position: absolute;
  inset: 26px 0 0;
  overflow: hidden;
}

/* scanning card: sits on the laptop screen, or right under the laptop when the stage is small (class --out and top, set by hero.js) */
.scan__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 4;
  width: min(320px, 100%); /* never wider than the stage box (304 px on a 360 px screen); the box is centred on the screen */
  margin-inline: auto;
  padding: 13px 16px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(22, 22, 22, 0.95);
  box-shadow: 0 24px 50px -16px #000;
  color: var(--white);
  text-align: left;
}
.scan__progress--out {
  bottom: auto;
}
.scan__progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
}
.scan__pct {
  min-width: 4ch; /* "100%" and "0%" take the same room */
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--red-bright);
}
.scan__bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.scan__bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 99px;
  transform: scaleX(0); /* hero.js grows it from the left: transform only, no layout */
  transform-origin: left;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  box-shadow: 0 0 10px var(--red-bright);
}
/* Two lines, the step and under it the domain, neither can wrap: the card is the same height at every step, so it never
   moves the layout (a footer that wrapped only next to the long steps made the card grow and shrink). */
.scan__progress-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin-top: 8px;
  font: 11px / 1.3 ui-monospace, monospace;
  color: var(--grey-450);
}
.scan__progress-foot > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* phone: a 232 x 478 bezel around a 390 x 847 app scaled to 210 x 456 */
.scan__phone {
  z-index: 2;
  width: 232px;
  height: 478px;
  border: 1px solid #3a3a3a;
  border-radius: 44px;
  background: #0b0b0b;
  box-shadow: 0 40px 80px -30px #000;
  transform: translate(-50%, -50%) scale(var(--scan-front, 1));
}
.scan__island {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 5;
  width: 64px;
  height: 19px;
  margin-left: -32px;
  border-radius: 11px;
  background: #000;
}

/* hint and replay button: hero.js shows them, so they are hidden by default */
.scan__hint {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  font-size: 13px;
  white-space: nowrap;
  color: var(--grey-450);
}
.scan__hint[hidden],
.scan__replay[hidden] {
  display: none;
}
.scan__mouse {
  position: relative;
  width: 16px;
  height: 24px;
  border: 1.5px solid var(--grey-450);
  border-radius: 9px;
}
.scan__mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 2px;
  height: 5px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--grey-450);
}
.scan__replay {
  position: absolute;
  left: 50%;
  /* just below the iPhone in front: its bottom edge is 240 + 239 x front stage pixels down */
  top: calc(var(--scan-top, 0px) + (240px + 239px * var(--scan-front, 1)) * var(--scan-scale, 1) + 14px);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.8);
  color: var(--white);
  cursor: pointer;
}
.scan__replay svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* the store: a 1280 px desktop page scaled into the laptop. Colours: warm neutrals and one terracotta (#8a3b22). */
.store {
  width: 1280px;
  transform-origin: 0 0;
  transform: scale(0.48125);
  background: #f7f3ee;
  color: #2b2522;
  font: 400 16px / normal -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  will-change: transform;
}
.store__ann {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  background: #8a3b22;
  color: #f7e9df;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.store__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 86px;
  padding: 0 48px;
  border-bottom: 1px solid #e4dcd3;
  background: #f7f3ee;
}
.store__nav {
  display: flex;
  gap: 28px;
  font-size: 15px;
  color: #4a403a;
}
.store__logo {
  font-size: 30px;
  letter-spacing: 0.02em;
}
.store__icons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}
.store__icons svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #2b2522;
  stroke-width: 1.6;
}
.store__cart {
  position: relative;
}
.store__cart b {
  position: absolute;
  right: -7px;
  bottom: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8a3b22;
  color: var(--white);
  font-size: 10px;
  font-weight: 400;
}
.store__banner {
  position: relative;
  height: 560px;
  overflow: hidden;
}
.store__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
.store__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 18, 12, 0.55), rgba(30, 18, 12, 0) 60%);
}
.store__banner-text {
  position: absolute;
  left: 72px;
  bottom: 84px;
  z-index: 1;
  max-width: 520px;
  color: var(--white);
}
.store__banner-text > span {
  display: block;
}
.store__eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}
.store__title {
  margin: 14px 0 18px;
  font-size: 64px;
  line-height: 1.02;
}
.store__lede {
  margin-bottom: 26px;
  font-size: 17px;
  opacity: 0.9;
}
.store__banner-text > .store__btn,
.store__split-body > .store__btn {
  display: inline-block;
}
.store__btn {
  padding: 15px 30px;
  background: var(--white);
  color: #2b2522;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store__btn--dark {
  background: #2b2522;
  color: var(--white);
}
.store__sec {
  padding: 64px 48px 24px;
}
.store__sec-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 26px;
}
.store__sec-title {
  font-size: 36px;
}
.store__sec-link {
  font-size: 14px;
  color: #4a403a;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.store__colls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.store__coll-img,
.store__prod-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.store__coll-name {
  display: block;
  margin-top: 12px;
  font-size: 16px;
}
.store__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.store__prod {
  position: relative;
}
.store__prod-img {
  object-position: 50% 70%;
}
.store__prod-name {
  display: block;
  margin-top: 14px;
  font-size: 15px;
}
.store__prod-price {
  display: block;
  margin-top: 6px;
  font-size: 15px;
}
.store__was {
  margin-left: 8px;
  color: #998d84;
}
.store__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 99px;
  background: #8a3b22;
  color: var(--white);
  font-size: 12px;
}
.store__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 64px;
  background: #eadfd3;
}
.store__split-img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: 50% 60%;
}
.store__split-body {
  padding: 90px 72px;
}
.store__split-body > span {
  display: block;
}
.store__split-title {
  margin-bottom: 18px;
  font-size: 44px;
}
.store__split-text {
  margin-bottom: 28px;
  font-size: 17px;
  line-height: 1.6;
  color: #5a4d45;
}
.store__foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 56px 48px;
  background: #2b2522;
  color: #cfc5bc;
  font-size: 14px;
  line-height: 2;
}
.store__foot b {
  display: block;
  margin-bottom: 8px;
  color: var(--white);
  font-weight: 500;
}
.store__foot .store__foot-brand {
  font-size: 22px;
}

/* the app: a 390 x 847 iPhone screen; the six [data-scan-pop] blocks are visible here, hero.js pops them in one by one */
.app {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 390px;
  height: 847px;
  overflow: hidden;
  border-radius: 63px;
  transform-origin: 0 0;
  transform: scale(0.53846);
  background: #f7f3ee;
  color: #2b2522;
  font: 400 16px / normal -apple-system, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
}
.app__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 6px 30px 0 34px;
  font-size: 16px;
  font-weight: 600;
}
.app__status svg {
  width: auto;
  height: 12px;
}
.app__top {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 50px;
  padding: 0 12px;
}
.app__top svg {
  justify-self: center;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #2b2522;
  stroke-width: 1.7;
}
.app__logo {
  font-size: 22px;
  letter-spacing: 0.02em;
  text-align: center;
}
.app__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  margin: 4px 16px 14px;
  padding: 0 14px;
  border-radius: 12px;
  background: #ece4db;
  color: #8b7f76;
  font-size: 15px;
}
.app__search svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #8b7f76;
  stroke-width: 2;
}
.app__hero {
  position: relative;
  height: 300px;
  margin: 0 16px;
  border-radius: 18px;
  overflow: hidden;
}
.app__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 50%;
}
.app__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(30, 18, 12, 0.65), rgba(30, 18, 12, 0) 55%);
}
.app__hero-body {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  color: var(--white);
}
.app__hero-title {
  display: block;
  margin-bottom: 12px;
  font-size: 32px;
  line-height: 1.02;
}
.app__hero-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 99px;
  background: var(--white);
  color: #2b2522;
  font-size: 14px;
  font-weight: 600;
}
.app__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 22px 16px 12px;
}
.app__title-text {
  font-size: 21px;
}
.app__title-link {
  font-size: 14px;
  font-weight: 600;
  color: #8a3b22;
}
.app__circles {
  display: flex;
  gap: 14px;
  padding: 0 16px;
  overflow: hidden;
}
.app__circle {
  flex: none;
  width: 74px;
  font-size: 12px;
  color: #4a403a;
  text-align: center;
}
.app__circle-img {
  width: 74px;
  height: 74px;
  margin-bottom: 7px;
  border-radius: 50%;
  object-fit: cover;
}
.app__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 16px;
}
.app__prod {
  position: relative;
}
.app__prod-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.1;
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 70%;
}
.app__prod-name {
  display: block;
  margin-top: 9px;
  font-size: 14px;
}
.app__prod-price {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 600;
}
.app__heart {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
}
.app__heart svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #2b2522;
  stroke-width: 2;
}
.app__tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  justify-content: space-around;
  height: 84px;
  padding-top: 10px;
  border-top: 1px solid #e4dcd3;
  background: rgba(251, 248, 244, 0.95);
}
.app__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #8b7f76;
}
.app__tab svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.app__tab--on {
  color: #8a3b22;
}
.app__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 5;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: #111;
}

/* ---------- social proof (placeholder data until the owner replaces it) ---------- */
.logo-strip {
  padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 40px);
}
.logo-strip__label {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
  padding: 0 var(--gutter);
  text-align: center;
}
.logo-word {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--label);
}
.logo-word--serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
}
.logo-word--caps {
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.logo-word--light {
  font-weight: 350;
  letter-spacing: 0.02em;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat {
  display: grid;
  gap: 6px;
  padding: clamp(24px, 3vw, 40px) clamp(12px, 2vw, 28px);
}
.stat + .stat {
  border-left: 1px solid var(--line);
}
.stat__num {
  font-size: var(--fs-big);
  font-weight: var(--w-book);
  letter-spacing: var(--ls-head);
  line-height: 1;
  color: var(--accent);
}
.stat__label {
  color: var(--muted);
  font-size: 16px;
}
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.quote {
  display: grid;
  gap: 20px;
  align-content: space-between;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.quote blockquote {
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.quote blockquote::before {
  content: "\201C";
  display: block;
  height: 32px;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
}
.quote__person {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.quote__person span span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-weight: 500;
}
.quote__metric {
  justify-self: start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
}
.quote--spaced {
  margin-top: 32px;
}
.quote--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
}

/* ---------- endless logo strip (CSS animation in the motion section; site.js adds the pause button) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 16px 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* spacing as a margin on every item (not gap), so the duplicated half ends exactly where it started */
.marquee__track > * {
  flex: none;
  margin-right: clamp(40px, 5vw, 72px);
  white-space: nowrap;
}
.marquee__toggle {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg);
}
.marquee[data-paused] .marquee__track {
  animation-play-state: paused;
}
.marquee__toggle[aria-pressed="true"] svg {
  /* paused: a play triangle instead of the pause bars */
  clip-path: polygon(25% 15%, 85% 50%, 25% 85%);
}

/* ---------- home "five steps": accordion + preview that follows the open step ---------- */
.step-list {
  border-top: 1px solid var(--line);
}
.step-item {
  border-bottom: 1px solid var(--line);
}
.step-item summary {
  display: grid;
  grid-template-columns: 76px 1fr 16px;
  align-items: center;
  column-gap: 16px;
  min-height: 64px;
  padding: 12px 0;
  list-style: none;
  cursor: pointer;
}
.step-item summary::-webkit-details-marker {
  display: none;
}
.step-item summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.25s var(--ease);
}
.step-item[open] summary::after {
  transform: rotate(45deg);
}
.step-item .step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.step-item .step::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--accent);
}
.step-item p {
  padding: 0 0 20px 92px;
  color: var(--muted);
}
.step-preview__frame {
  display: grid;
  aspect-ratio: 3 / 2;
}
.step-preview__img {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
/* default (and without :has()): the first step's picture */
.step-preview__img:first-child,
.how-steps:has(.step-item:nth-child(1)[open]) .step-preview__img:nth-child(1),
.how-steps:has(.step-item:nth-child(2)[open]) .step-preview__img:nth-child(2),
.how-steps:has(.step-item:nth-child(3)[open]) .step-preview__img:nth-child(3),
.how-steps:has(.step-item:nth-child(4)[open]) .step-preview__img:nth-child(4),
.how-steps:has(.step-item:nth-child(5)[open]) .step-preview__img:nth-child(5),
.how-steps[data-step="2"] .step-preview__img:nth-child(2),
.how-steps[data-step="3"] .step-preview__img:nth-child(3),
.how-steps[data-step="4"] .step-preview__img:nth-child(4),
.how-steps[data-step="5"] .step-preview__img:nth-child(5) {
  opacity: 1;
}
.how-steps:has(.step-item:nth-child(n + 2)[open]) .step-preview__img:first-child:not(:only-child),
.how-steps[data-step]:not([data-step="1"]) .step-preview__img:first-child {
  opacity: 0;
}

/* ---------- hairline lists (promise, steps) ---------- */
.lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.lines > li {
  display: grid;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.lines p {
  color: var(--muted);
}
.lines--steps > li {
  grid-template-columns: 76px 1fr;
  column-gap: 16px;
}
.lines--steps .step {
  grid-row: span 2;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 5px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.lines--steps .step::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.lines--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin-top: clamp(32px, 4vw, 48px);
}
.lines--compact > li {
  padding: 12px 0;
}
.lines--compact.lines--steps > li {
  grid-template-columns: 32px 1fr;
}
.mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.mini-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.mini-list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* ---------- media frames ---------- */
.frame {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(18px, 3vw, 36px);
  border-radius: var(--radius-xl);
  background: radial-gradient(70% 70% at 15% 10%, rgba(217, 45, 32, 0.3), transparent 70%), var(--surface);
}
.frame--photo {
  max-width: 460px;
  padding: 0;
  background: var(--surface);
}
.frame--photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the portrait picture of the early-access page (1122 x 1402) is shown whole */
  aspect-ratio: 1122 / 1402;
}
.shot {
  width: 100%;
  justify-self: stretch;
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(22, 22, 22, 0.08);
}

/* ---------- notification cards (HTML text over photos) ---------- */
.notif {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 2px 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--black);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  line-height: 1.35;
}
.notif::before {
  content: "";
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='7' y='3' width='10' height='18' rx='2.5' fill='none' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='16.5' r='1.6' fill='white'/%3E%3C/svg%3E")
    center / 22px no-repeat;
}
.notif strong {
  font-weight: 600;
}
.notif time {
  font-size: 12px;
  color: var(--grey-700);
}
.notif p {
  grid-column: 2 / -1;
  color: var(--grey-700);
}

/* ---------- push cards: textured dark red card, lock-screen iPhone cut at the bottom, HTML clock and banner ---------- */
.push-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.push-card {
  display: grid;
  gap: 14px;
  align-content: start;
}
.push-card__media,
.showcard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  background: linear-gradient(170deg, var(--graphite) 0%, var(--red-deep) 48%, var(--red-hover) 100%);
}
.push-card--2 .push-card__media {
  background: linear-gradient(170deg, var(--red-deep) 0%, var(--red-hover) 55%, var(--red) 100%);
}
.push-card--3 .push-card__media {
  background: linear-gradient(200deg, var(--graphite) 0%, var(--red-deep) 52%, var(--red) 110%);
}
.push-card__media::before,
.showcard::before {
  /* film grain over the gradient (decorative) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}
.push-card__title {
  position: absolute;
  top: clamp(20px, 2.4vw, 28px);
  left: clamp(20px, 2.4vw, 28px);
  right: 24px;
  color: var(--white);
  font-size: var(--fs-card);
  font-weight: var(--w-book);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.push-card__device {
  position: absolute;
  left: 50%;
  top: 28%;
  width: 80%;
  transform: translateX(-50%);
  container-type: inline-size;
}
.push-card__device > img {
  width: 100%;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
}
.lock {
  position: absolute;
  inset: 0;
  /* darken the top of the wallpaper so the white clock keeps its contrast */
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.42) 0%, rgba(22, 22, 22, 0.12) 22%, transparent 34%)
    4.2cqw 4.2cqw / calc(100% - 8.4cqw) 60% no-repeat;
  border-radius: 19cqw;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 0 7cqw;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(22, 22, 22, 0.35);
}
.lock__date {
  margin-top: 17cqw;
  font-size: 5.6cqw;
  font-weight: 500;
}
.lock__time {
  font-size: 21cqw;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.notif--lock {
  width: 100%;
  margin-top: 5cqw;
  grid-template-columns: 9cqw 1fr auto;
  gap: 0.4cqw 2.8cqw;
  padding: 3cqw 3.4cqw;
  border-radius: 5cqw;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 4.4cqw;
  text-shadow: none;
}
.notif--lock::before {
  width: 9cqw;
  height: 9cqw;
  border-radius: 2.2cqw;
  background: url("img/clay-linen-icon.webp") center / cover no-repeat;
}
.notif--lock time {
  font-size: 3cqw;
}
.notif--lock p {
  color: var(--black);
}
.notif--lock p b {
  display: block;
  font-weight: 600;
}
.notif__image {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2cqw;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3cqw;
}
.push-card > p {
  padding: 0 4px;
  color: var(--muted);
}
.push-card > p strong {
  display: block;
  color: var(--text);
}

/* ---------- showcard: the merchant's own app-store-style listing with floating status chips ---------- */
.showcard {
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}
.showcard__device {
  position: absolute;
  left: 50%;
  top: 15%;
  width: 64%;
  transform: translateX(-50%);
}
.showcard__device > img {
  width: 100%;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
}
.float-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6);
}
.float-chip svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--red);
}
.float-chip i {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--red);
}
.float-chip--1 {
  top: 6%;
  right: 5%;
}
.float-chip--2 {
  top: 47%;
  left: 4%;
}
.float-chip--3 {
  right: 5%;
  bottom: 9%;
}

/* ---------- pills (anchor links) and rails (horizontal scroll-snap) ---------- */
.pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 28px;
  scrollbar-width: none;
}
.pills::-webkit-scrollbar {
  display: none;
}
.pills a {
  flex: none;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pills a:hover,
.pills a[aria-current] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-card, min(88%, 1040px));
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  padding: 0 var(--gutter) 16px;
  margin: 0 calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.rail > * {
  scroll-snap-align: start;
}
.rail--cards {
  --rail-card: clamp(260px, 30vw, 360px);
}
.rail-nav:not([hidden]) {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
}
.rail-nav--head:not([hidden]) {
  margin-top: 0;
  justify-self: end;
}
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.icon-btn:hover {
  border-color: var(--text);
}
.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ---------- feature cards (rail on the home page) ---------- */
.feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 520px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
}
.feature-card__text {
  display: grid;
  align-content: space-between;
  gap: 32px;
  padding: clamp(24px, 3.4vw, 44px);
}
.feature-card__text .stack {
  gap: 14px;
}
.feature-card__icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
}
.feature-card__media {
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background: radial-gradient(70% 70% at 30% 20%, rgba(217, 45, 32, 0.32), transparent 70%), var(--black);
}
.feature-card__media .shot {
  width: 135%;
  max-width: none;
  justify-self: start;
}
.feature-card__media--phones {
  display: flex;
  justify-content: center;
  align-items: end;
  padding: 24px 24px 0;
}
.feature-card__media--phones img {
  width: 40%;
  margin-bottom: -18%;
}
.feature-card__media--phones img + img {
  margin-left: -10%;
  transform: translateY(-8%);
}

/* ---------- tall cards (what shoppers get) ---------- */
.tall-card {
  display: grid;
  gap: 16px;
  align-content: start;
}
.tall-card__media {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  height: 440px;
  padding: 72px 20px 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: radial-gradient(80% 60% at 50% 0%, rgba(217, 45, 32, 0.22), transparent 70%), var(--surface);
}
.tall-card:nth-child(3n + 2) .tall-card__media {
  background: radial-gradient(80% 60% at 50% 100%, rgba(217, 45, 32, 0.3), transparent 70%), var(--surface);
}
.tall-card:nth-child(3n) .tall-card__media {
  background: var(--surface);
}
.tall-card__media .h3 {
  position: absolute;
  top: 24px;
  left: 24px;
  right: 24px;
}
.tall-card__media > img {
  width: 66%;
  margin-bottom: -34%;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.4));
}
.tall-card p {
  padding: 0 4px;
  color: var(--muted);
}

/* ---------- about: phone in the middle, feature and sales bubbles around it (owner, 19/10/2026) ---------- */
.bubbles {
  position: relative;
  max-width: 1100px;
  aspect-ratio: 2 / 1;
  margin: 0 auto clamp(40px, 6vw, 72px);
}
.bubbles::before {
  /* soft red rings behind the phone (decorative) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 52%, rgba(217, 45, 32, 0.38), transparent 32%),
    repeating-radial-gradient(circle at 50% 52%, transparent 0 70px, rgba(255, 255, 255, 0.05) 70px 71px);
  mask-image: radial-gradient(circle at 50% 52%, #000 30%, transparent 70%);
}
.bubbles__phone {
  position: absolute;
  left: 50%;
  top: 6%;
  height: 88%;
  width: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));
}
.bubbles__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bubble {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 16px 32px -14px rgba(0, 0, 0, 0.6);
  transition: scale 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.bubble:hover {
  scale: 1.05;
  box-shadow: 0 20px 36px -12px rgba(217, 45, 32, 0.55);
}
.bubble svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--red);
}
.bubble--sale {
  background: var(--red);
  color: var(--white);
}
.bubble--sale i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
}
.bubble--sale b {
  font-weight: 600;
}
/* positions: five on each side of the phone, sales next to its edges */
.bubble--1 {
  left: 2%;
  top: 6%;
}
.bubble--2 {
  left: 12%;
  top: 24%;
}
.bubble--3 {
  left: 4%;
  top: 42%;
}
.bubble--4 {
  left: 10%;
  top: 60%;
}
.bubble--5 {
  left: 1%;
  top: 80%;
}
.bubble--6 {
  right: 3%;
  top: 4%;
}
.bubble--7 {
  right: 12%;
  top: 22%;
}
.bubble--8 {
  right: 2%;
  top: 40%;
}
.bubble--9 {
  right: 13%;
  top: 58%;
}
.bubble--10 {
  right: 4%;
  top: 78%;
}
.bubble--s1 {
  left: 21%;
  top: 13%;
}
.bubble--s2 {
  right: 19%;
  top: 47%;
}
.bubble--s3 {
  left: 17%;
  top: 71%;
}
.bubbles__text {
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- headline split around a device ---------- */
.split-headline {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
}
.split-headline .h2:first-child {
  text-align: right;
}
.split-headline__phone {
  width: clamp(150px, 16vw, 210px);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.4));
}
.icon-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.icon-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 16px;
  font-weight: 500;
}
.icon-row svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

/* ---------- plan card (one free plan; layout learned from aura.com/pricing: 24 px radius, 32 x 24 px padding,
   price 44 px, full-width button, tick list; featured style: black card with a red band) ---------- */
.plan {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 32px 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.plan--featured {
  --text: var(--white);
  --muted: var(--grey-500);
  --label: var(--grey-400);
  --line: var(--grey-700);
  --accent: var(--red-bright);
  background: var(--black);
  border-color: var(--red);
  box-shadow: 0 30px 70px -28px rgba(217, 45, 32, 0.7);
  padding-top: 64px;
  color-scheme: dark;
}
.plan__band {
  position: absolute;
  inset: 0 0 auto;
  padding: 9px 16px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.plan__tag {
  justify-self: start;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
}
.plan__name {
  font-size: 24px;
  font-weight: var(--w-medium);
  line-height: 1.3;
}
.plan__desc,
.plan__note {
  color: var(--muted);
  font-size: 14px;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 6px;
}
.plan__amount {
  font-size: 44px;
  font-weight: var(--w-book);
  letter-spacing: var(--ls-head);
  line-height: 1;
}
.plan__per {
  font-size: 24px;
  line-height: 1;
}
.plan__cta {
  width: 100%;
  margin: 6px 0 4px;
}
.plan__list {
  display: grid;
  gap: 10px;
  margin: 8px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: 16px;
}
.plan__list li {
  position: relative;
  padding-left: 26px;
}
.plan__list li::before {
  /* tick */
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 16px;
  height: 16px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.plan__more {
  justify-self: start;
  margin-top: 8px;
}
.plan--featured .text-link {
  --link: var(--white);
  text-decoration-color: var(--red-bright);
}
/* pricing page: one wide card, price on the left, everything included on the right */
.plan--wide {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: 48px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 40px 40px;
}
.plan__main,
.plan__side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.plan--wide .plan__side {
  padding-left: 48px;
  border-left: 1px solid var(--line);
}
.plan--wide .plan__list {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.plan__list--two {
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
}
.label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--label);
}
.boxes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.boxes--spaced {
  margin-top: clamp(28px, 4vw, 48px);
}
.box {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.box p,
.box li {
  color: var(--muted);
}
.box ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.table-wrap {
  overflow-x: auto;
}
.limits,
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.limits th,
.limits td,
.compare th,
.compare td {
  padding: 16px 12px 16px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.limits th {
  width: 45%;
  font-weight: 500;
}
.limits td,
.compare td {
  color: var(--muted);
}
.compare {
  font-size: 15px;
}
.compare thead th {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare tbody th {
  width: 36%;
  font-weight: 500;
}

/* ---------- FAQ (details/summary, no script) ---------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  font-size: var(--fs-h3);
  font-weight: var(--w-book);
  cursor: pointer;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 0 24px;
  max-width: 46em;
  color: var(--muted);
}
.faq-page {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: var(--section-y);
}
.faq-group {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
  gap: 24px 64px;
  scroll-margin-top: 140px;
}
.faq-group .h3 {
  padding-top: 22px;
}

/* ---------- final CTA band ---------- */
.cta-band {
  padding: clamp(16px, 2vw, 24px) clamp(8px, 1.6vw, 24px) clamp(8px, 1.6vw, 24px);
}
.cta-band__card {
  display: grid;
  justify-items: center;
  gap: 24px;
  padding: clamp(64px, 9vw, 120px) var(--gutter);
  border-radius: var(--radius-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--red-deep) 0%, var(--red-hover) 55%, var(--red) 100%);
  --muted: rgba(255, 255, 255, 0.86);
}
.cta-band__card::before {
  /* film grain over the gradient (decorative) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: var(--grain);
}
.cta-band__card .lead {
  margin: 0 auto;
}
.cta-band__card .btn--primary {
  background: var(--white);
  color: var(--black);
}
.cta-band__card .btn--primary:hover {
  background: var(--grey-100);
}

/* ---------- inner pages ---------- */
.page-hero {
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  background: radial-gradient(40% 70% at 50% 0%, rgba(217, 45, 32, 0.28), transparent 75%), var(--bg);
}
.page-hero .wrap {
  display: grid;
  justify-items: center;
  gap: 20px;
}
.page-hero .lead {
  margin: 0 auto;
}
.anchor-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(22, 22, 22, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.anchor-bar .pills {
  margin: 0;
  padding: 12px 0;
}
/* centred while the pills fit, scrollable from the first pill when they do not */
.anchor-bar .pills a:first-child {
  margin-left: auto;
}
.anchor-bar .pills a:last-child {
  margin-right: auto;
}
.group {
  scroll-margin-top: 140px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(32px, 4vw, 48px);
}
.card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 24px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.card p {
  color: var(--muted);
  font-size: 16px;
}
.card .text-link {
  margin-top: 6px;
  font-size: 16px;
}
.card--list {
  grid-column: 1 / -1;
}
.theme-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.theme-trio figure {
  display: grid;
  gap: 10px;
  justify-items: center;
}
.theme-trio img {
  width: 100%;
  border-radius: var(--radius-m);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}
.theme-trio figcaption {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.theme-trio--compact img:nth-child(2) {
  transform: translateY(-18px);
}
.phone-trio {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.phone-trio img {
  width: 31%;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.4));
}
.phone-trio img:nth-child(2) {
  position: relative;
  z-index: 1;
  margin: 0 -8%;
  transform: translateY(-6%);
}
.phone-solo {
  display: grid;
  justify-items: center;
}
.phone-solo img {
  width: min(50%, 240px);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.4));
}
.journey {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 3vw, 32px);
}
.journey__step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.journey__step--box {
  grid-template-columns: 1fr;
  background: radial-gradient(60% 90% at 100% 0%, rgba(217, 45, 32, 0.3), transparent 70%), var(--surface);
}
.journey__step--box .lead {
  max-width: 46em;
}
/* red pill with white text: readable on black, --graphite and light panels alike (4.8:1) */
.step-num {
  justify-self: start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--red);
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ---------- help center (/help and /help/<slug>): same header, footer and tokens as the marketing pages ---------- */
.page-hero--help .wrap,
.page-hero--article .wrap {
  justify-items: center;
}
.page-hero--article {
  text-align: left;
}
.page-hero--article .wrap {
  justify-items: start;
  max-width: calc(1040px + 2 * var(--gutter));
}
.page-hero--article .lead {
  margin: 0;
}
.crumbs {
  font-size: 14px;
  color: var(--muted);
}
.crumbs a {
  color: var(--text);
  text-decoration-color: var(--red-bright);
  text-underline-offset: 4px;
}
.help-search {
  position: relative;
  width: min(100%, 560px);
}
.help-search svg {
  position: absolute;
  left: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.help-search input {
  width: 100%;
  min-height: 56px;
  padding: 0 20px 0 50px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 18px;
}
.help-search input::placeholder {
  color: var(--muted);
}
.help-pills {
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
}
.help-group {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: 16px 48px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.help-group:first-child {
  border-top: 0;
  padding-top: 0;
}
/* site.js sets `hidden` on a group with no match; the `display: grid` above would otherwise win over the browser's [hidden] rule. */
.help-group[hidden] {
  display: none;
}
.help-cards,
.related-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.help-card {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 4px 12px;
  align-items: start;
  height: 100%;
  padding: 20px;
  border-radius: var(--radius-l);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.help-card strong {
  font-weight: 500;
}
.help-card span {
  grid-column: 1;
  color: var(--muted);
  font-size: 16px;
}
.help-card svg {
  grid-column: 2;
  grid-row: 1;
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}
.help-card:hover svg {
  transform: translateX(3px);
}
.help-card:hover {
  background: var(--grey-200);
}
.help-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--muted);
}
.help-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.help-contact .lead {
  max-width: 36em;
  margin-top: 8px;
}
.help-contact--inline {
  margin-top: 48px;
  padding: 24px;
}
/* article: sticky "On this page" list + a readable body (about 70 characters a line) */
.article-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 70ch);
  gap: 56px;
  justify-content: center;
}
.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  display: grid;
  gap: 12px;
}
.toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}
.toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
}
.toc a:hover,
.toc a[aria-current] {
  color: var(--text);
  border-left-color: var(--red);
}
.prose {
  font-size: 18px;
  line-height: 1.6;
}
.prose > * + * {
  margin-top: 16px;
}
.prose h2 {
  margin-top: 48px;
  font-size: var(--fs-h2);
  font-weight: var(--w-medium);
  font-stretch: var(--stretch-head);
  line-height: 1.15;
  letter-spacing: var(--ls-head);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.prose h2:first-child {
  margin-top: 0;
}
.prose a:not(.btn, .help-card) {
  color: var(--link);
  text-underline-offset: 3px;
}
.prose ol,
.prose ul:not(.related-cards) {
  display: grid;
  gap: 10px;
  padding-left: 24px;
}
.prose ol li::marker {
  color: var(--accent);
  font-weight: 500;
}
.prose code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--grey-100);
  font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.4;
}
.prose th,
.prose td {
  padding: 12px 12px 12px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.prose thead th {
  font-weight: 500;
}
.prose td:first-child {
  font-weight: 500;
}
.problems {
  margin: 0;
  border-top: 1px solid var(--line);
}
.problems dt {
  padding-top: 18px;
  font-weight: 500;
}
.problems dd {
  margin: 6px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.related-cards .help-card {
  align-items: center;
}
/* callout box inside an article (not the one-line .note caption used elsewhere) */
.callout {
  padding: 16px 20px;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--grey-100);
}
.callout p {
  margin-top: 4px;
}
.prose figure img {
  width: 100%;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
}
.prose figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
/* P37: screenshots, the review date, "Before you begin" and the mistake line of a help article (docs/prototypes/p37/p37.css) */
/* a screenshot inside an article or a step: full text width, sharp edge against the white panel */
.prose figure {
  margin: 20px 0 8px;
  /* P37g-T2: the browser skips a figure until it is near the viewport, so the screenshots do not download with the text on a
     slow network (+220 ms to the text paint on the longest article); `auto` keeps the real height once it has been drawn.
     Height only: a width here widened the page at 360 px */
  content-visibility: auto;
  contain-intrinsic-block-size: auto 320px;
}
.prose li > figure {
  margin-bottom: 12px;
}
.prose figure img {
  display: block;
  height: auto;
}
/* a phone shows a wide screenshot small: the image links to its full size, no script needed */
.figure-link {
  display: block;
}
/* the figure above is clipped to its own box (content-visibility), so the focus ring goes inside it */
.prose .figure-link:focus-visible {
  outline-offset: -3px;
}
/* a screenshot of a phone is already narrow: it stays the width of a phone instead of filling the column */
.figure-link--phone {
  max-width: 390px;
}
/* article head: when the text was last checked against the product */
.article-meta {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}
/* "Before you begin": the callout box, with a real list inside */
.callout--before h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0;
}
.callout--before ul {
  margin: 0;
  font-size: 16px;
}
.prose h3 {
  margin-top: 28px;
  font-size: 20px;
  font-weight: 500;
}
/* one line under the article, a mail link: no form, no network request, no tracking */
.article-feedback {
  margin-top: 32px;
  font-size: 15px;
  color: var(--muted);
}

/* ---------- blog (docs/prototypes/p37/p37.css): a grid of posts, the Featured post, a post page ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 64px 40px; /* rows, columns: posts must read as separate items (owner, 01/11/2026) */
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-card {
  display: grid;
  gap: 12px;
  align-content: start;
  height: 100%;
  color: var(--text);
  text-decoration: none;
}
.blog-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius-m);
  background: var(--surface);
}
.blog-card strong {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
}
.blog-card:hover strong {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.blog-card span {
  color: var(--muted);
  font-size: 16px;
}
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 14px;
  color: var(--muted);
}
/* the one post a person pinned in Sanity. Sits on the black page, under the hero, before the white panel of posts. */
.blog-featured {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
}
.blog-featured__text {
  display: grid;
  gap: 20px;
  justify-items: start;
}
.blog-featured__text .lead {
  margin: 0;
}
.blog-featured__text .blog-meta {
  margin: 0;
}
.blog-featured__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-l);
  background: var(--surface);
}
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 70ch);
  justify-content: center;
}
.post-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-m);
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* one column, image first, like the post cards below it */
  .blog-featured {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .blog-featured__media {
    order: -1;
  }
}
@media (max-width: 600px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 56px;
  }
}

/* ---------- legal pages and 404 (same layout as the help article) ---------- */
.legal-updated {
  font-size: 16px;
}
/* the boxed summary at the top of a legal page (its markup is kept as is: <div class="note">) */
.prose--legal .note {
  padding: 16px 20px;
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--grey-100);
  color: var(--text);
  font-size: 18px;
}
.prose--legal h3 {
  margin-top: 28px;
  font-size: 20px;
  font-weight: 500;
}
.page-hero--404 {
  min-height: 70vh;
  display: grid;
  align-content: center;
}

/* ---------- footer (on the black page, like aura.com) ---------- */
.site-footer {
  padding: clamp(64px, 8vw, 112px) 0 40px;
  background: var(--bg);
  color: var(--text);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
  margin: 0;
  padding: 24px 0 40px;
  list-style: none;
}
.footer-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  font-size: var(--fs-footer);
  font-weight: var(--w-book);
  text-decoration: none;
}
.footer-links a svg {
  width: 22px;
  height: 22px;
  transition: transform 0.25s var(--ease);
}
.footer-links a:hover svg {
  transform: translateX(4px);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer-legal a {
  color: inherit;
}
.footer-trademarks {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--grey-450);
}

/* ---------- motion (progressive, CSS only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .marquee__track {
    animation: marquee 36s linear infinite;
  }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track {
    animation-play-state: paused;
  }
  @keyframes marquee {
    to {
      transform: translateX(-50%);
    }
  }
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
    @keyframes reveal {
      from {
        opacity: 0;
        transform: translateY(36px);
      }
    }
  }
  .scan__mouse::after {
    animation: scan-wheel 1.6s ease-in-out 3;
  }
  @keyframes scan-wheel {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    70% {
      transform: translateY(7px);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  [data-mega][data-open] .mega {
    animation: mega-in 0.18s var(--ease);
  }
  @keyframes mega-in {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  /* about bubbles: each floats a little, out of step; sales bubbles pop in one after another */
  .bubble {
    animation: bubble-float var(--float, 5s) ease-in-out infinite alternate;
  }
  .bubble:nth-child(3n) {
    --float: 6.2s;
  }
  .bubble:nth-child(3n + 1) {
    --float: 4.4s;
    animation-delay: -1.5s;
  }
  .bubble:nth-child(4n) {
    --float: 5.6s;
    animation-delay: -2.8s;
  }
  .bubble--sale {
    animation: bubble-float 5s ease-in-out infinite alternate, bubble-pop 9s ease-out infinite;
  }
  .bubble--s2 {
    animation-delay: -1s, 3s;
  }
  .bubble--s3 {
    animation-delay: -2s, 6s;
  }
  @keyframes bubble-float {
    to {
      translate: 0 -9px;
    }
  }
  @keyframes bubble-pop {
    0% {
      opacity: 0;
      scale: 0.8;
    }
    6%,
    30% {
      opacity: 1;
      scale: 1;
    }
    38%,
    100% {
      opacity: 1;
      scale: 1;
    }
  }
  .js-reveal .reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  }
  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .site-header,
  .step-preview__img,
  .step-item summary::after {
    transition: none;
  }
  .marquee {
    mask-image: none;
  }
  .marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 12px;
    width: auto;
    padding: 0 var(--gutter);
  }
  .marquee__track > * {
    margin: 0 clamp(16px, 2.5vw, 36px);
  }
  .marquee__track [aria-hidden="true"],
  .marquee__toggle {
    display: none;
  }
}

/* ---------- responsive ---------- */
/* aura.com type steps: >= 1280 px desktop, 768-1279 px tablet, <= 767 px phone */
@media (max-width: 1279px) {
  :root {
    --fs-display: 48px;
    --fs-page: 48px;
    --fs-big: 36px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-display: 44px;
    --fs-page: 36px;
    --fs-h2: 28px;
    --fs-card: 20px;
    --fs-h3: 20px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --fs-btn: 16px;
    --fs-footer: 18px;
    --ls-head: -0.01em;
  }
}
@media (max-width: 1024px) {
  .feature-card {
    grid-template-columns: 1fr;
  }
  .feature-card__media {
    min-height: 320px;
  }
  .boxes,
  .cards,
  .quotes {
    grid-template-columns: 1fr 1fr;
  }
  .quote--wide {
    grid-template-columns: 1fr;
  }
}
/* The desktop nav needs about 1100px for one line; below that it moves into the burger menu (owner decision 01/11/2026) */
@media (max-width: 1099px) {
  .nav {
    display: none;
  }
  .header-cta {
    margin-left: auto;
  }
  .menu {
    display: block;
  }
}
@media (max-width: 860px) {
  .push-cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 340px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 var(--gutter) 12px;
    margin: 0 calc(var(--gutter) * -1);
  }
  .push-card {
    scroll-snap-align: start;
  }
  .plan--wide {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding: 64px 24px 32px;
  }
  .plan--wide .plan__side {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .plan__list--two {
    grid-template-columns: 1fr;
  }
  .hero__card,
  .lines--pair,
  .section-head,
  .split,
  .footer-links,
  .journey__step,
  .faq-group {
    grid-template-columns: 1fr;
  }
  .split--flip > :first-child {
    order: 0;
  }
  .split-headline {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .split-headline .h2:first-child {
    text-align: center;
  }
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stat:nth-child(3) {
    border-left: 0;
  }
  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
  .faq-group .h3 {
    padding-top: 0;
  }
  .help-group,
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc {
    position: static;
  }
  .bubbles {
    aspect-ratio: auto;
    display: grid;
    justify-items: center;
    gap: 20px;
  }
  .bubbles__phone {
    position: static;
    height: auto;
    width: min(56%, 230px);
    transform: none;
  }
  .bubbles__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  .bubble {
    position: static;
    font-size: 14px;
  }
  .bubble--6,
  .bubble--7,
  .bubble--9,
  .bubble--10 {
    display: none;
  }
}
@media (max-width: 600px) {
  .boxes,
  .cards,
  .quotes {
    grid-template-columns: 1fr;
  }
  .actions,
  .actions .btn {
    width: 100%;
  }
  .site-header > .wrap {
    gap: 10px;
  }
  .brand {
    font-size: 17px;
  }
  .brand img {
    height: 28px;
  }
  .header-cta {
    min-height: 40px;
    padding: 0 14px;
    font-size: 14px;
  }
  .lines--steps > li {
    grid-template-columns: 1fr;
  }
  .help-cards,
  .related-cards {
    grid-template-columns: 1fr;
  }
  .lines--steps .step {
    grid-row: auto;
  }
  .step-item summary {
    grid-template-columns: 64px 1fr 16px;
    column-gap: 10px;
  }
  .step-item p {
    padding-left: 0;
  }
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
  .tall-card__media {
    height: 400px;
  }
}

/* ---------- store preview (P36c) ---------- */
/* Store preview page (/preview). Layout of the seven states and of the phone, from docs/prototypes/p36/preview.css.
   The phone is NativTap's own drawing of the preview app: the colours inside .sp-phone are the phone's, not the site's. */

/* bất khả kháng: the state sections and phone tabs set display, so the hidden attribute must still win inside the page */
.sp [hidden] {
  display: none !important;
}
.sp {
  padding: calc(var(--header-h, 72px) + 24px) 0 64px;
}
.sp__stage {
  display: grid;
  gap: 40px;
  align-items: center;
  min-height: min(760px, calc(100svh - 120px));
}
.sp__stage--center {
  display: flex;
  justify-content: center;
  min-height: calc(100svh - var(--header-h, 68px) - 24px - 44px - 24px); /* header, page top padding, step bar, air */
}
.sp__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.sp__title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: var(--w-medium);
  font-stretch: var(--stretch-head);
  letter-spacing: var(--ls-head);
  text-wrap: balance;
  max-width: 14em;
  overflow-wrap: anywhere;
}
.sp__title:focus {
  outline: none;
}
.sp__sub {
  font-size: 18px;
  line-height: 1.3;
  color: var(--muted);
  max-width: 30em;
}

/* card of steps 1-3 */
.sp-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 440px;
  padding: 32px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.sp-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-field label {
  font-size: 14px;
  color: var(--muted);
}
.sp-input {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--black);
  color: var(--white);
  font: inherit;
  font-size: 16px;
}
.sp-input::placeholder {
  color: var(--grey-400);
}
.sp-input:focus {
  outline: 2px solid var(--red-bright);
  outline-offset: 1px;
  border-color: var(--red-bright);
}
.sp-input[aria-invalid="true"] {
  border-color: var(--red-bright);
}
.sp-input--code {
  font-size: 24px;
  letter-spacing: 0.3em;
  text-align: center;
}
.sp-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}
.sp-check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--red);
}
.sp-form .btn {
  width: 100%;
}
.sp-link {
  align-self: center;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--white);
  font: inherit;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--red-bright);
  text-underline-offset: 4px;
  cursor: pointer;
}
.sp-error {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--white);
}
.sp-error svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--red-bright);
}
.sp-noscript {
  font-size: 14px;
  color: var(--muted);
}

/* early access form (/early-access, early-access.js): the sp-form look in one card; 'hidden' is how the script shows, hides and swaps it */
.ea-form,
.ea-done {
  width: min(100%, 440px);
  padding: 28px;
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: left;
}
.ea-form[hidden],
.ea-form [hidden],
.ea-done[hidden],
[data-ea-fallback][hidden] {
  display: none;
}
.ea-optional {
  color: var(--muted);
}
.ea-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.ea-done {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ea-done strong {
  overflow-wrap: anywhere;
}

/* step bar: Email > Code > Store > Build > Preview (preview.js moves data-done and aria-current) */
.sp-stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--label);
}
.sp-stepper li {
  display: flex;
  align-items: center;
}
/* connector before each step: grey, filled red from the left once the step is reached */
.sp-stepper li + li::before {
  content: "";
  width: 28px;
  height: 2px;
  margin: 0 10px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--red), var(--red-bright)) no-repeat 0 0 / 0% 100%, var(--grey-700);
}
.sp-stepper li[data-done]::before,
.sp-stepper li[aria-current="step"]::before {
  background-size: 100% 100%, auto;
}
.sp-stepper li[data-done] {
  color: var(--white);
}
.sp-stepper li[aria-current="step"] {
  color: var(--red-bright);
}

/* steps 1-3: one column in the middle of the first screen */
.sp__stage.sp__stage--single {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--header-h, 68px) - 24px - 44px - 24px);
}
.sp__stage--single .sp__copy {
  gap: 16px;
}
.sp__stage--single .sp-card {
  margin-top: 8px;
}
.sp__stage--single .sp__sub {
  max-width: none;
}

/* the button that is sending shows a small spinner (preview.js sets aria-busy) */
.sp .btn[aria-busy="true"] {
  gap: 10px;
  cursor: progress;
}
.sp .btn[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}

/* "Your code is on its way": a push-style card under the header; it never shows the code */
.sp-toast {
  position: fixed;
  top: calc(var(--header-h, 68px) + 12px);
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(380px, calc(100% - 32px));
  padding: 12px 16px;
  border-radius: 22px;
  background: var(--grey-100);
  color: var(--black);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  transform: translateX(-50%);
}
.sp-toast__icon {
  flex: none;
  width: 24px;
  height: 32px;
}
.sp-toast__app {
  font-size: 12px;
  color: var(--grey-700);
}
.sp-toast__msg {
  font-size: 15px;
  line-height: 1.3;
  font-weight: var(--w-medium);
}

/* error, limit, building: one centred column (mockups Error-*, Building-*) */
.sp-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  text-align: center;
}
.sp-panel .sp-form {
  width: 100%;
  text-align: left;
}
.sp-panel__icon {
  width: 40px;
  height: 40px;
  color: var(--red-bright);
}
.sp-panel .sp__title {
  font-size: 30px;
  max-width: none;
}
.sp-panel .actions {
  justify-content: center;
}

/* building: progress and "while you wait" on the left, the phone putting itself together on the right */
.sp-build__copy {
  gap: 18px;
  max-width: 480px;
}
.sp-build .sp__title {
  font-size: 32px;
}
.sp-spinner {
  width: 48px;
  height: 48px;
}
.sp-bar {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.sp-bar__fill {
  position: relative;
  overflow: hidden;
  width: var(--sp-progress, 2%); /* preview.js sets --sp-progress: the mark of the steps done, drifting up to 22 points past it */
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red-deep), var(--red) 55%, var(--red-bright));
}
.sp-bar__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent) no-repeat -60% 0 /
    40% 100%;
}
.sp-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.sp-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--muted);
}
.sp-steps li::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
}
.sp-steps li[aria-current="step"] {
  color: var(--white);
}
.sp-steps li[aria-current="step"]::before {
  border-color: var(--red-bright);
}
.sp-steps li[data-done] {
  color: var(--white);
}
.sp-steps li[data-done]::before {
  border: 0;
  background: var(--red-bright)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}

/* "While you wait": a card with a slowly turning red gradient border, the NativTap mark, dots and Pause.
   The six facts sit in one grid cell, one visible, so the height never jumps. */
@property --sp-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.sp-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 36px; /* well apart from the step list */
  padding: 14px 20px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-l);
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(
      from var(--sp-angle),
      var(--red-deep),
      var(--red),
      var(--red-bright),
      var(--grey-700),
      var(--red-deep)
    )
    border-box;
  box-shadow: 0 20px 50px -30px rgba(217, 45, 32, 0.7);
}
.sp-facts__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sp-facts__logo {
  width: 15px;
  height: 20px;
}
.sp-facts__label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--white);
}
.sp-facts__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-facts__list li {
  grid-area: 1 / 1;
  font-size: 20px;
  line-height: 1.3;
  font-weight: var(--w-medium);
  letter-spacing: var(--ls-head);
  color: var(--white);
  text-wrap: balance;
  opacity: 0;
  visibility: hidden;
}
.sp-facts__list li[data-active] {
  opacity: 1;
  visibility: visible;
}
.sp-facts__dots {
  display: flex;
  gap: 6px;
  margin-left: auto; /* the dots and Pause share the label's row */
}
.sp-facts__dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--grey-700);
}
.sp-facts__dots i[data-active] {
  width: 20px;
  background: var(--red-bright);
}
.sp-facts__pause {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--white);
  cursor: pointer;
}
.sp-facts__pause svg {
  width: 14px;
  height: 14px;
}
.sp-facts__pause[aria-pressed="true"] .sp-facts__icon-pause,
.sp-facts__pause[aria-pressed="false"] .sp-facts__icon-play {
  display: none;
}

/* The building phone is a drawing; each part shows as data-sp-parts lists it (products chips brand banner ready). */
.sp-phone--build {
  box-shadow: var(--shadow), 0 0 90px 4px rgba(217, 45, 32, 0.32);
}
.sp-phone--build .sp-phone__body {
  overflow: hidden;
}
.sp-sk-line,
.sp-sk-card b {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--grey-200);
}
.sp-sk-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  opacity: 0;
}
.sp-sk-brand__logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--sp-accent);
}
.sp-sk-line--name {
  width: 92px;
  height: 10px;
  background: var(--grey-700);
}
.sp-sk-chips {
  display: flex;
  gap: 10px;
  height: 46px;
}
.sp-sk-chips span {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grey-100);
  opacity: 0;
  transform: translateX(40px);
}
.sp-sk-banner {
  display: flex;
  align-items: flex-end;
  max-height: 0;
  padding: 0 14px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sp-accent), var(--graphite));
  opacity: 0;
}
.sp-sk-banner .sp-sk-line {
  width: 55%;
  height: 10px;
  margin-bottom: 14px;
  background: rgba(255, 255, 255, 0.7);
}
.sp-sk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sp-sk-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--grey-200);
  opacity: 0;
  transform: translateY(14px);
}
.sp-sk-card i {
  display: block;
  height: 84px;
  background: var(--grey-100);
}
.sp-sk-card b {
  width: 70%;
  margin: 0 8px;
}
.sp-sk-card b + b {
  width: 40%;
}
.sp-sk-tabs {
  align-items: center;
}
.sp-sk-tabs span {
  width: 28px;
  height: 8px;
  border-radius: 4px;
  background: var(--grey-200);
}
.sp-phone__ready {
  position: absolute;
  left: 50%;
  bottom: 76px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--sp-accent);
  color: var(--sp-on-accent);
  font-size: 14px;
  font-weight: var(--w-medium);
  opacity: 0;
  transform: translate(-50%, 12px);
}
.sp-phone__ready svg {
  width: 16px;
  height: 16px;
}
.sp-phone--build[data-sp-parts~="products"] .sp-sk-card,
.sp-phone--build[data-sp-parts~="chips"] .sp-sk-chips span,
.sp-phone--build[data-sp-parts~="brand"] .sp-sk-brand,
.sp-phone--build[data-sp-parts~="banner"] .sp-sk-banner {
  opacity: 1;
  transform: none;
}
.sp-phone--build[data-sp-parts~="brand"] .sp-sk-chips span {
  box-shadow: 0 0 0 2px var(--sp-bg), 0 0 0 3px var(--sp-accent);
}
.sp-phone--build[data-sp-parts~="brand"] .sp-sk-tabs span:first-child {
  background: var(--sp-accent);
}
.sp-phone--build[data-sp-parts~="banner"] .sp-sk-banner {
  height: 96px;
  max-height: 96px;
}
/* step 4: the product cells fill in */
.sp-phone--build[data-sp-parts~="banner"] .sp-sk-card i {
  background: linear-gradient(160deg, var(--grey-100), var(--grey-200));
}
.sp-phone--build[data-sp-parts~="banner"] .sp-sk-card b {
  background: var(--grey-700);
}
.sp-phone--build[data-sp-parts~="banner"] .sp-sk-card b + b {
  background: var(--grey-400);
}
.sp-phone--build[data-sp-parts~="ready"] .sp-phone__ready {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* result: a headline and two buttons; the phone has a glow in the store's colour */
.sp-result .actions {
  margin-top: 4px;
  scroll-margin-bottom: 24px; /* a low screen: preview.js scrolls the buttons in with this much air under them */
}
.sp-result__title {
  font-size: 28px;
}
.sp-result .sp-phone {
  box-shadow: var(--shadow), 0 0 100px 6px color-mix(in srgb, var(--sp-accent) 45%, transparent);
}

/* one light that runs once round the building phone's border when the build is done: a conic gradient on a masked ring (preview.js: data-sp-reveal) */
@property --sp-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.sp-sweep {
  position: absolute;
  inset: -4px;
  padding: 3px;
  border-radius: 44px;
  background: conic-gradient(
    from var(--sp-sweep),
    transparent 0deg 250deg,
    var(--red) 305deg,
    var(--white) 345deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  pointer-events: none;
}

/* The phone is NativTap's own drawing of the preview app; its accent colour (--sp-accent) never leaves it. */
.sp-phone {
  --sp-accent: #8a3b22;
  /* the look of the direction in view (preview.js sets these from look.colors / corners / fonts; the defaults are the site's own greys) */
  --sp-on-accent: #fff;
  --sp-bg: #fff;
  --sp-surface: #efefef;
  --sp-ink: #161616;
  --sp-muted: #4d4d4d;
  --sp-secondary: #efefef;
  --sp-on-secondary: #161616;
  --sp-radius: 10px;
  --sp-btn-radius: 12px;
  --sp-form-radius: 999px;
  --sp-font-display: var(--font);
  --sp-font-body: var(--font);
  --sp-display-weight: 600;
  --sp-display-case: none;
  --sp-display-tracking: -0.005em;
  --black: var(--sp-ink);
  --grey-700: var(--sp-muted);
  --grey-100: var(--sp-surface);
  --grey-200: color-mix(in srgb, var(--sp-ink) 13%, var(--sp-bg));
  --sp-tabbar-h: 56px; /* the tab bar's height */
  --sp-dock: 0px; /* how far above the screen's bottom edge a bar stuck to the bottom stays: nothing while the tab bar is a row under the pages */
  position: relative;
  justify-self: center;
  width: 300px;
  height: 620px;
  padding: 10px;
  border-radius: 40px;
  background: #000;
  box-shadow: var(--shadow);
}
.sp-phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background: var(--sp-bg);
  color: var(--black);
  container-type: inline-size; /* the Dynamic Island is sized from the screen's width */
}
/* Dynamic Island in iPhone proportions on every phone (building, result, full screen): 26 % x 7.5 % of the screen's width, 2.5 % from the top;
   the status area is 12 % of the width */
.sp-phone__notch {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  height: 12cqw;
  padding-top: 2.5cqw;
}
.sp-phone__notch::after {
  content: "";
  width: 26cqw;
  height: 7.5cqw;
  border-radius: 999px;
  background: #000;
}
/* Sample push banner (P40b-T9) on the centre / full-screen phone, under the island. Material by tone: frosted light (light, colour) or frosted dark (dark);
   the icon is the store's tile. Not clickable; pointer events only for the swipe up (touch-action none). A static copy of the phone drops it. */
.sp-push {
  position: absolute;
  top: 11cqw;
  left: 3cqw;
  right: 3cqw;
  z-index: 6;
  display: flex;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 6cqw;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  --push-ink: #1c1c1e;
  --push-muted: #4a4a4d;
  color: var(--push-ink);
  font-family: -apple-system, var(--font);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.sp-phone[data-sp-tone="dark"] .sp-push {
  background: rgba(28, 28, 30, 0.78);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7), inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
  --push-ink: #fff;
  --push-muted: #c7c7cc;
  color: var(--push-ink);
}
.sp-push[hidden] {
  display: none;
}
.sp-push__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--sp-accent);
  color: var(--sp-on-accent);
  font-family: var(--sp-font-display);
  font-size: 16px;
}
.sp-push__icon > * {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.sp-push__text {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.sp-push__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--push-muted);
  font-size: 11px;
}
.sp-push__top b {
  overflow: hidden;
  color: var(--push-ink);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sp-push__title {
  font-weight: 600;
}
.sp-phone__view {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* the pages are stacked in the screen, one shown; each one scrolls by itself */
.sp-phone__view > .sp-phone__body {
  position: absolute;
  inset: 0;
  padding-bottom: calc(16px + var(--sp-dock));
  background: var(--sp-bg);
}
.sp-phone__body:focus {
  outline: none; /* a page takes the focus when it opens, it is not a control */
}
.sp-phone__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 10px 16px 16px;
  overflow: hidden auto;
  scrollbar-width: none;
}
.sp-phone__body::-webkit-scrollbar {
  display: none;
}
.sp-phone__body > * {
  flex: none;
}
.sp-phone__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sp-top-name);
  font-weight: var(--w-medium);
}
.sp-phone__brand [data-sp-phone-name] {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sp-phone__logo {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--sp-accent);
  overflow: hidden;
}
.sp-phone__logo:has(img) {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 110px;
  height: 28px;
  border-radius: 0;
  background: none;
}
.sp-phone__logo img {
  width: auto;
  max-width: 110px;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}
/* Home: top bar, banner, collection circles, Featured, a collection tile, a grid, New in */
.sp-home {
  gap: 22px;
  padding-top: 4px;
  overflow-anchor: none; /* the header shrinks as Home scrolls: anchoring would move the page back across the line, and it would shake */
}
.sp-home__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--sp-top-btn);
}
.sp-home__top .sp-phone__icon {
  width: var(--sp-top-btn);
  height: var(--sp-top-btn);
}
/* a long store name with a logo (Baboon to the Moon at 240 px) ellipsizes; Search and Bag keep their room */
.sp-home__top .sp-phone__brand {
  min-width: 0;
}
.sp-home__top .sp-home__icons {
  flex: none;
}
.sp-home__icons {
  display: flex;
  gap: 2px;
  margin-right: -6px;
}
.sp-phone__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}
.sp-phone__icon svg {
  width: 20px;
  height: 20px;
}
.sp-home__hero,
.sp-home__editorial {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--grey-100);
}
.sp-home__hero {
  height: 230px;
  margin: 0 -16px;
  padding: 18px 16px;
}
.sp-home__hero img,
.sp-home__editorial img,
.sp-home__editorial .sp-phone__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-home__hero::after,
.sp-home__editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.55));
}
.sp-home__hero span,
.sp-home__editorial span:last-child {
  position: relative;
  z-index: 1;
  color: #fff;
  font-weight: var(--w-medium);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.sp-home__hero span {
  max-width: 80%;
  font-size: 20px;
  line-height: 1.2;
}
.sp-home__editorial {
  height: 180px;
  padding: 16px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sp-home__editorial span:last-child {
  font-size: 22px;
}
.sp-phone__chips,
.sp-phone__rail {
  display: flex;
  gap: 10px;
  margin: 0 -16px;
  padding: 4px 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-phone__chips::-webkit-scrollbar,
.sp-phone__rail::-webkit-scrollbar {
  display: none;
}
.sp-phone__chip {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 54px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font: inherit;
  font-size: 10px;
  line-height: 1.3;
  cursor: pointer;
}
.sp-phone__chip img,
.sp-phone__chip .sp-phone__ph {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--grey-100);
  box-shadow: 0 0 0 2px var(--sp-bg), 0 0 0 3px var(--sp-accent);
}
.sp-phone__chip span:last-child {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.sp-home__sec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-home__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.sp-home__h {
  font-size: 15px;
  font-weight: var(--w-medium);
}
.sp-phone__seeall {
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  white-space: nowrap; /* never two lines: a long title gives way instead (.sp-home__h has min-width 0) */
  flex: none;
  cursor: pointer;
}
/* product cards are buttons: one style on Home, in a collection and in Bag */
.sp-phone__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sp-phone__card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--sp-bg);
  box-shadow: 0 0 0 1px var(--grey-200);
  color: var(--black);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sp-phone__card img,
.sp-phone__card .sp-phone__ph {
  display: block;
  width: 100%;
  height: 84px;
  object-fit: cover;
  background: var(--grey-100);
}
.sp-phone__card-text {
  display: block;
  padding: 8px 8px 9px;
  font-size: 11px;
  line-height: 1.3;
}
.sp-phone__card-text span {
  display: block;
  color: var(--grey-700);
}
/* a long name (Kith: "Birkenstock WMNS Amsterdam Wrapped Suede - Carafe") stops at two lines; the price stays under it */
.sp-phone__card-text .sp-phone__card-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: inherit;
}
.sp-phone__rail {
  gap: 8px;
}
.sp-phone__rail .sp-phone__card {
  flex: none;
  width: 104px;
}
.sp-phone__rail .sp-phone__card img,
.sp-phone__rail .sp-phone__card .sp-phone__ph {
  height: 104px;
}
.sp-home__rail--lg .sp-phone__card {
  width: 140px;
}
.sp-home__rail--lg .sp-phone__card img,
.sp-home__rail--lg .sp-phone__card .sp-phone__ph {
  height: 170px;
}

/* every page after Home: a header with the brand in the middle (sticky), a title */
.sp-phone__view > .sp-phone__body > .sp-phone__bar--brand,
.sp-phone__view > .sp-phone__body > .sp-home__top {
  position: sticky;
  top: -10px;
  z-index: 3;
  margin: -10px -16px 0;
  padding: 10px 16px 8px;
  background: var(--sp-bg);
}
/* the Home header is compact (owner, 03/11/2026: it was too big), 14 px from the first block, and smaller once Home scrolls */
.sp-phone__view > .sp-phone__body > .sp-phone__bar--brand {
  padding: var(--sp-top-pad) 16px var(--sp-top-pad);
}
.sp-phone__view > .sp-phone__body > .sp-home__top {
  top: -4px; /* the padding-top of .sp-home: stuck, the bar starts at the very top, with nothing showing above it */
  margin: -4px -16px -8px;
  padding: var(--sp-top-pad) 16px var(--sp-top-pad);
}
.sp-phone__bar--brand {
  display: grid;
  grid-template-columns: var(--sp-top-btn) 1fr var(--sp-top-btn);
  align-items: center;
}
.sp-phone__brand--center {
  justify-content: center;
  min-width: 0;
}
.sp-phone__back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-top-btn);
  height: var(--sp-top-btn);
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--black);
  cursor: pointer;
}
.sp-phone__back svg {
  width: 20px;
  height: 20px;
}
.sp-phone__title {
  font-size: 18px;
  font-weight: var(--w-medium);
}
.sp-phone__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-phone__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.sp-phone__row img,
.sp-phone__row .sp-phone__ph {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--grey-100);
}
.sp-phone__note {
  font-size: 12px;
  color: var(--grey-700);
}

/* the product page (P40b-T6): a long page, the bar with Add to bag stuck to its bottom */
.sp-phone__view > .sp-phone__pdp,
.sp-phone__view > .sp-bag {
  padding-bottom: var(--sp-dock); /* the bar stuck to the bottom is the end of the page */
}
.sp-pdp__media {
  position: relative;
  margin: 0 -16px;
}
.sp-pdp__gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sp-pdp__gallery:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: -2px; /* a keyboard user scrolls the pictures with the arrow keys (tabindex 0 in the page) */
}
.sp-pdp__gallery::-webkit-scrollbar {
  display: none;
}
.sp-pdp__gallery img,
.sp-pdp__gallery .sp-phone__ph {
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--grey-100);
  scroll-snap-align: center;
}
/* Previous and Next are for the keyboard: they show when they have the focus (a finger swipes) */
.sp-pdp__shot {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sp-bg);
  box-shadow: 0 0 0 1px var(--grey-200);
  color: var(--black);
  opacity: 0;
  pointer-events: none; /* invisible, so a finger on the picture is not caught by it */
  cursor: pointer;
}
.sp-pdp__shot:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
.sp-pdp__shot--prev {
  left: 8px;
}
.sp-pdp__shot--next {
  right: 8px;
}
.sp-pdp__shot svg {
  width: 16px;
  height: 16px;
}
.sp-pdp__dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: -4px;
}
.sp-pdp__dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--grey-200);
}
.sp-pdp__dots i[data-active] {
  width: 16px;
  background: var(--sp-accent);
}
.sp-phone__pdp-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.25;
  font-weight: var(--w-medium);
}
.sp-pdp__price {
  margin-top: -6px;
  font-size: 15px;
  font-weight: var(--w-medium);
}
.sp-pdp__price s {
  margin-left: 6px;
  font-weight: 400;
  color: var(--grey-700);
}
.sp-pdp__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-pdp__options:empty {
  display: none;
}
.sp-pdp__label {
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--grey-700);
}
.sp-pdp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sp-pdp__chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: var(--sp-bg);
  color: var(--black);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sp-pdp__chip[aria-pressed="true"] {
  border-color: var(--sp-accent);
  box-shadow: inset 0 0 0 1px var(--sp-accent);
  font-weight: var(--w-medium);
}
.sp-pdp__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--grey-200);
}
.sp-pdp__h {
  font-size: 13px;
  font-weight: var(--w-medium);
}
.sp-pdp__desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--grey-700);
}
.sp-pdp__desc[data-collapsed] {
  max-height: 5.8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.sp-pdp__desc-img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin-block: 4px;
  border-radius: 10px;
  object-fit: cover;
}
.sp-pdp__desc[data-collapsed]:has(.sp-pdp__desc-img) {
  max-height: 190px; /* a part of the first picture shows */
}
.sp-pdp__more,
.sp-pdp__write {
  font: inherit;
  cursor: pointer;
}
.sp-pdp__more {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font-size: 12px;
  font-weight: var(--w-medium);
  text-decoration: underline;
  text-decoration-color: var(--sp-accent);
  text-underline-offset: 3px;
}
.sp-pdp__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.sp-pdp__rating span {
  color: var(--grey-700);
}
.sp-pdp__stars {
  display: inline-flex;
  gap: 1px;
}
.sp-pdp__stars svg {
  width: 14px;
  height: 14px;
  fill: var(--grey-200);
}
.sp-pdp__stars svg.on {
  fill: var(--sp-accent);
}
.sp-pdp__stars--small svg {
  width: 11px;
  height: 11px;
}
.sp-pdp__reviews {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sp-pdp__review {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
}
.sp-pdp__author {
  font-size: 11px;
  color: var(--grey-700);
}
.sp-pdp__noreviews {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.sp-pdp__noreviews-title {
  font-size: 13px;
  color: var(--grey-700);
}
.sp-pdp__write {
  padding: 8px 14px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  background: var(--sp-bg);
  color: var(--black);
  font-size: 13px;
  font-weight: var(--w-medium);
}
.sp-bag__variant {
  font-size: 11px;
  color: var(--grey-700);
}
.sp-phone__add {
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--sp-accent);
  color: var(--sp-on-accent);
  font: inherit;
  font-size: 15px;
  font-weight: var(--w-medium);
  cursor: pointer;
}
.sp-phone__add[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* the two bars stuck to the bottom: Add to bag and Checkout. --sp-dock keeps them above a floating tab bar. */
.sp-pdp__buy,
.sp-bag__buy {
  position: sticky;
  bottom: var(--sp-dock);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto -16px 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--grey-200);
  background: var(--sp-bg);
}
.sp-pdp__buy .sp-phone__add,
.sp-bag__buy .sp-phone__add {
  width: 100%;
}

/* Bag: a quiet empty state, then the lines with a quantity step, the total and a Checkout that is off */
.sp-bag__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 40px;
  text-align: center;
}
.sp-bag__icon {
  display: flex;
  color: var(--grey-700);
}
.sp-bag__icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}
.sp-bag__title {
  font-size: 17px;
  font-weight: var(--w-medium);
}
.sp-bag__start.sp-phone__add {
  height: auto;
  margin-top: 4px;
  padding: 10px 22px;
  font-size: 14px;
}
.sp-bag__like {
  align-self: stretch;
  margin-top: 40px;
  text-align: left;
}
.sp-bag__full {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 12px;
}
.sp-bag__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--grey-200);
}
.sp-bag__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--grey-200);
}
.sp-bag__thumb img,
.sp-bag__thumb .sp-phone__ph {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--grey-100);
}
.sp-bag__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sp-bag__name,
.sp-bag__price {
  font-size: 13px;
  font-weight: var(--w-medium);
}
/* a long name stops at two lines beside its price (Kith, "Filling Pieces Loafer Chess - Black" took five) */
.sp-bag__item .sp-bag__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sp-bag__qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 6px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  font-size: 12px;
}
.sp-bag__qty button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.sp-bag__qty span {
  min-width: 14px;
  text-align: center;
}
.sp-bag__sum {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: var(--w-medium);
}
.sp-bag__buy .sp-phone__note {
  text-align: center;
}

/* Account */
.sp-phone__menu {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--grey-200);
}
.sp-phone__menu li {
  border-bottom: 1px solid var(--grey-200);
}
.sp-phone__menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  font: inherit;
  font-size: 13px;
  text-align: left;
}
button.sp-phone__menu-row {
  cursor: pointer;
}
.sp-phone__chev {
  width: 16px;
  height: 16px;
  color: var(--grey-700);
}
.sp-phone__menu-value {
  font-size: 12px;
  color: var(--grey-700);
}

.sp-phone__tabs {
  display: flex;
  flex: none;
  justify-content: space-around;
  height: var(--sp-tabbar-h);
  border-top: 1px solid var(--grey-200);
  background: var(--sp-bg);
}
.sp-phone__tabs button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 56px;
  border: 0;
  background: none;
  color: var(--grey-700);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}
.sp-phone button:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: -2px; /* drawn inside the control, so it never runs out of the phone */
  border-radius: 8px;
}
.sp-phone__tabs button:focus-visible {
  outline-offset: -3px;
}
.sp-phone__tab-icon {
  position: relative;
  display: flex;
}
.sp-phone__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--sp-accent);
  color: var(--sp-on-accent);
  font-size: 10px;
  font-weight: var(--w-medium);
  line-height: 16px;
  text-align: center;
}
.sp-phone__tabs button[aria-pressed="true"] {
  color: var(--black);
  font-weight: var(--w-medium);
}
.sp-phone__tabs svg {
  width: 16px;
  height: 16px;
}
/* tab bar style floating_icons (P40b-T8 sets data-tab-bar from look.tabBar): a pill over the pages, so the bars stuck to the bottom and the end of
   every page stay above it: --sp-dock = its gap under it + its height + the same gap over it */
.sp-phone[data-tab-bar="floating_icons"] {
  --sp-tabbar-h: 50px;
  --sp-tabbar-gap: 10px;
  --sp-dock: calc(var(--sp-tabbar-h) + 2 * var(--sp-tabbar-gap));
}
.sp-phone[data-tab-bar="floating_icons"] .sp-phone__tabs {
  position: absolute;
  right: 12%;
  bottom: var(--sp-tabbar-gap);
  left: 12%;
  z-index: 4;
  border: 0;
  border-radius: 999px;
  background: var(--sp-ink);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.5);
}
.sp-phone[data-tab-bar="floating_icons"] .sp-phone__tabs button {
  flex: 1; /* icons only: four share the pill, 182 px on a 390 px screen (4 x 56 px cut Account off) */
  min-width: 0;
  font-size: 0;
  color: color-mix(in srgb, var(--sp-bg) 60%, transparent);
}
.sp-phone[data-tab-bar="floating_icons"] .sp-phone__tabs button[aria-pressed="true"] {
  color: var(--sp-bg);
}
.sp-phone[data-tab-bar="floating_icons"] .sp-phone__tabs svg {
  width: 20px;
  height: 20px;
}

/* ---------- a freestyle Home (P43b): the API's document of the sample in a sandboxed iframe as tall as the page, scrolling inside ----------
   preview.js sets data-sp-free on a phone whose direction has one. The design draws its own header; the tab bar is the direction's, the same
   bar as on Shop, Bag and Account (a bar of its own changed shape at every tab: the owner chose the direction's, 04/11/2026). */
.sp-home__frame {
  display: none;
}
/* the sample is drawn at an iPhone's 390 px, the width it was designed and checked at (P43a), and scaled down to the screen:
   --sp-k is the screen's width over 390 (preview.js, ResizeObserver), so a design with a fixed 390 px body is not cut */
.sp-phone[data-sp-free] .sp-home__frame {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: calc(100% / var(--sp-k, 1));
  border: 0;
  background: var(--sp-bg);
  transform: scale(var(--sp-k, 1));
  transform-origin: 0 0;
}
.sp-phone[data-sp-free] .sp-home {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.sp-phone[data-sp-free] .sp-home > :not(.sp-home__frame) {
  display: none;
}
.sp-side__phone .sp-home__frame {
  pointer-events: none; /* the click is the side button's */
}
/* the line under the phone while a freestyle Home is shown */
.sp-result__concept {
  max-width: 300px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grey-450);
  text-align: center;
}
.sp-result__concept[hidden] {
  display: none;
}
@media (min-width: 960px) {
  .sp-result__concept {
    order: 3;
  }
}

/* ---------- the look and the Home of a design direction (P40b-T8) ----------
   preview.js writes the variables of the phone (--sp-accent, --sp-on-accent, --sp-bg, --sp-surface, --sp-ink, --sp-muted, --sp-secondary,
   --sp-on-secondary, the radii, the fonts) and data-sp-tone, data-tab-bar, data-sp-header. Small text uses --sp-ink and --sp-muted, never --sp-accent. */
.sp-phone__screen {
  font-family: var(--sp-font-body);
}
.sp-phone__brand,
.sp-banner__h,
.sp-tiles__tile span,
.sp-home__h,
.sp-phone__title,
.sp-phone__pdp-title,
.sp-bag__title,
.sp-phone__pill {
  font-family: var(--sp-font-display);
  font-weight: var(--sp-display-weight);
  letter-spacing: var(--sp-display-tracking);
  text-transform: var(--sp-display-case);
}
.sp-phone__card,
.sp-phone__row img,
.sp-bag__item img,
.sp-pdp__desc-img,
.sp-tiles__tile,
.sp-banner--collection {
  border-radius: var(--sp-radius);
}
.sp-phone__add,
.sp-banner__btn {
  border-radius: var(--sp-btn-radius);
}
.sp-pdp__chip,
.sp-pdp__write,
.sp-bag__qty,
.sp-phone__pill {
  border-radius: var(--sp-form-radius);
}
.sp-home__h {
  min-width: 0;
  line-height: 1.15;
}
.sp-phone[data-tab-bar="labels"] .sp-phone__tabs svg {
  display: none;
}
.sp-phone[data-tab-bar="labels"] .sp-phone__tabs button {
  flex-direction: row; /* the word and its count side by side */
  font-size: 11px;
  letter-spacing: 0.03em;
}
.sp-phone[data-tab-bar="labels"] .sp-phone__tab-icon {
  display: contents; /* no icon: its box is empty, so the badge would sit on the word */
}
.sp-phone[data-tab-bar="labels"] .sp-phone__badge {
  position: static;
  order: 1; /* after the word */
}
.sp-phone[data-sp-header="logo_center"] .sp-home__top {
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
}
.sp-phone[data-sp-header="logo_center"] .sp-home__top .sp-phone__brand {
  grid-column: 2;
  grid-row: 1;
}
.sp-phone[data-sp-header="logo_center"] .sp-home__icons {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}
/* the blocks sit in the Home's column, so its gap falls between them */
.sp-home__blocks {
  display: contents;
}
.sp-home__blocks > * {
  flex: none;
}
/* image_banner: the picture keeps its proportions (--sp-ar, set by preview.js); words and button over a scrim */
.sp-banner {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: var(--sp-ar, 4 / 3);
  margin: 0 -16px;
  padding: 18px 16px;
  overflow: hidden;
  background: var(--sp-surface);
  color: #fff;
}
.sp-banner img,
.sp-banner .sp-phone__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-banner:has(.sp-banner__text)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.55));
}
.sp-banner--button_center:has(.sp-banner__text)::after {
  background: rgba(0, 0, 0, 0.3);
}
.sp-banner--button_center {
  align-items: center;
  justify-content: center;
}
.sp-banner__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 85%;
}
.sp-banner--button_center .sp-banner__text {
  align-items: center;
  text-align: center;
}
.sp-banner__h {
  font-size: min(22px, 7.33cqw);
  line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.sp-banner__btn {
  padding: 8px 14px;
  border: 0;
  background: var(--sp-bg);
  color: var(--sp-ink);
  font: inherit;
  font-size: 12px;
  font-weight: var(--w-medium);
  cursor: pointer;
}
/* slideshow: the pictures side by side, one at a time, scrolled by hand */
.sp-slides {
  display: flex;
  margin: 0 -16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sp-slides::-webkit-scrollbar {
  display: none;
}
.sp-slides > * {
  flex: none;
  width: 100%;
  aspect-ratio: var(--sp-ar, 16 / 9);
  object-fit: cover;
  background: var(--sp-surface);
  scroll-snap-align: start;
}
.sp-slides:focus-visible {
  outline: 2px solid var(--sp-ink);
  outline-offset: -2px;
}
/* collection_list chips: the names as pills */
.sp-phone__pills {
  display: flex;
  gap: 6px;
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-phone__pills::-webkit-scrollbar {
  display: none;
}
.sp-phone__pill {
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--grey-200);
  background: var(--sp-bg);
  color: var(--sp-ink);
  font-size: 11px;
  cursor: pointer;
}
/* image_grid: tiles of the collections, in the proportions of their pictures */
.sp-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.sp-tiles__tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: var(--sp-ar, 1);
  padding: 10px;
  overflow: hidden;
  border: 0;
  background: var(--sp-surface);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sp-tiles__tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.sp-tiles__tile img,
.sp-tiles__tile .sp-phone__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-tiles__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(0, 0, 0, 0.5));
}
/* a packshot is a light photo: the white name needs a darker scrim there (Dawn and Kith tiles, QA of 03/11/2026) */
.sp-tiles__tile:has(img[data-sp-packshot])::after {
  background: linear-gradient(transparent 30%, rgba(0, 0, 0, 0.72));
}
.sp-tiles__tile span {
  position: relative;
  z-index: 1;
  font-size: 15px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
/* product_carousel two_rows */
.sp-home__rail--two {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;
}

/* phone under the headline, buttons under the phone (mockups/Result-Mobile, Preview-Mobile) */
@media (max-width: 959px) {
  .sp-result {
    gap: 16px;
  }
  .sp-result .sp__copy {
    display: contents;
  }
  .sp-result__device {
    order: 1;
  }
  .sp-result .sp-phone {
    margin: 12px 0;
  }
  .sp-result .actions {
    order: 2;
  }
}
@media (max-width: 959px) {
  .sp-build {
    gap: 32px;
  }
}
@media (min-width: 960px) {
  .sp__stage {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }
  /* A big phone, the same on Building and on the result (the reveal never shrinks it). Height = 100svh - header - page top (24) - 148 for what sits
     under it (gap 24, headline 34, gap 12, buttons 52, air 26), 480 to 720 px (560 at 1280 x 800); the width keeps 300:620. The Full screen pill
     (about 58 px with its margin) is not in that 148: it pushes the two buttons 32 to 39 px under the edge of an 800 or 900 px screen. Accepted
     (owner, round 5): the result opens full screen by itself, and closing it scrolls to the buttons (preview.js, toButtons). */
  .sp {
    --sp-ready-h: clamp(480px, calc(100svh - var(--header-h, 68px) - 24px - 148px), 720px);
  }
  .sp-build .sp-phone {
    width: calc(var(--sp-ready-h) * 300 / 620);
    height: var(--sp-ready-h);
  }
  /* result: one centred column, the phone on top, the headline and the two buttons under it */
  .sp__stage.sp-result {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    gap: 24px;
    min-height: 0;
    text-align: center;
  }
  .sp-result__device {
    order: -1;
  }
  .sp-result .sp-phone {
    width: calc(var(--sp-ready-h) * 300 / 620);
    height: var(--sp-ready-h);
    text-align: left; /* the stage is centred; the app inside is not */
  }
  .sp-result .sp__copy {
    align-items: center;
    gap: 12px;
  }
  .sp-result .sp__title {
    max-width: none;
  }
  .sp-result .actions {
    justify-content: center;
  }
}
@media (min-width: 601px) {
  .sp-stepper {
    justify-content: center;
  }
  .sp__stage.sp__stage--single {
    align-items: center;
  }
  .sp__stage--single .sp__copy {
    align-items: center;
    width: 100%;
    max-width: 640px;
    text-align: center;
  }
  .sp__stage--single .sp__title {
    font-size: 36px;
    max-width: none;
  }
  .sp__stage--single .sp-card {
    width: 100%;
    max-width: 440px;
    text-align: left;
  }
}
@media (max-width: 600px) {
  .sp-stepper {
    margin-bottom: 16px;
    font-size: 13px;
  }
  .sp-stepper li + li::before {
    width: 12px;
    margin: 0 6px;
  }
  .sp__title {
    font-size: 32px;
  }
  .sp-panel .sp__title,
  .sp-build .sp__title {
    font-size: 26px;
  }
  .sp-result__title {
    font-size: 24px;
  }
  .sp-facts {
    margin-top: 28px;
    padding: 12px 16px 14px;
  }
  .sp-facts__list li {
    font-size: 18px;
  }
  .sp-card {
    padding: 24px 20px;
  }
  .sp .btn {
    min-height: 48px;
  }
  .sp-panel .actions,
  .sp-result .actions {
    flex-direction: column;
    width: 100%;
  }
  .sp-panel .actions .btn,
  .sp-result .actions .btn {
    width: 100%;
  }
  .sp-phone {
    width: 260px;
    height: 538px;
  }
}

/* ---------- result: Full screen pill, QR code, and the full-screen dialog (P40b-T7) ---------- */
.sp-result__device {
  position: relative;
  min-width: 0; /* a grid item: the chips may be wider than the screen, the box is not */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* a small outlined pill centred right under the phone */
.sp-result__full {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--grey-450);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sp-result__full:hover {
  background: var(--surface);
  color: var(--white);
}
.sp-result__full svg {
  width: 14px;
  height: 14px;
}
/* the QR code of the result's address (preview.js draws the rects and sets --sp-qr-n, the modules across with the quiet zone): 2 px a module */
.sp-qr {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sp-qr__code {
  flex: none;
  width: calc(var(--sp-qr-n, 37) * 2px);
  height: calc(var(--sp-qr-n, 37) * 2px);
  border-radius: 6px;
  background: var(--white);
}
.sp-qr__code rect {
  fill: var(--black);
}
.sp-qr__title {
  font-size: 14px;
  color: var(--white);
}
@media (max-width: 959px) {
  .sp-qr {
    display: none;
  }
  .sp-result__device {
    order: 1;
    margin: 12px 0;
  }
  .sp-result__device .sp-phone {
    order: 0;
    margin: 0;
  }
}
@media (min-width: 960px) {
  .sp-result__device {
    order: -1;
  }
}
/* full screen: the result's phone, moved into a modal <dialog> (preview.js); nothing else but a cross */
.sp-phone__hold {
  flex: none;
}
.sp-full {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  overflow: hidden;
}
.sp-full[open] {
  display: flex;
  flex-direction: column; /* the phone, and under it the direction chips (P40b-T11) */
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.sp-full::backdrop {
  background: rgba(0, 0, 0, 0.82);
}
:root:has(.sp-full[open]) {
  overflow: hidden;
}
.sp-full__slot {
  display: flex;
  justify-content: center;
}
.sp-full .sp-phone {
  --sp-full-h: min(860px, 92svh);
  width: calc(var(--sp-full-h) * 300 / 620);
  height: var(--sp-full-h);
  box-shadow: 0 0 120px 10px color-mix(in srgb, var(--sp-accent) 40%, transparent);
}
.sp-full__close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--graphite);
  color: var(--white);
  cursor: pointer;
}
.sp-full__close svg {
  width: 20px;
  height: 20px;
}
/* up to 600 px the app fills the screen: no bezel, no radius, no shadow; the cross is a plain dark disc */
@media (max-width: 600px) {
  .sp-full[open] {
    gap: 0;
  }
  .sp-full__slot {
    flex: 1;
    width: 100%;
    min-height: 0;
  }
  .sp-full .sp-phone {
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .sp-full .sp-phone__screen {
    border-radius: 0;
  }
  .sp-full__close {
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-color: var(--black);
    background: var(--black);
  }
}

/* ---------- the three design directions (P40b-T11) ----------
   Chips: a quiet radiogroup of three outlined pills (dots of background, primary and text + the name), the checked one in white. Never red, so
   they do not compete with Apply. Above the phone; in full screen the same element sits under it (a slim black bar up to 600 px). */
.sp-dirs {
  display: flex;
  flex-wrap: wrap; /* on a narrow screen the third chip goes to a second row; a nowrap row would widen the column and scroll the page */
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  margin-bottom: 14px;
}
.sp-dirs[hidden] {
  display: none;
}
.sp-dir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--grey-450);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.sp-dir:hover {
  color: var(--white);
}
.sp-dir[aria-checked="true"] {
  border-color: var(--white);
  color: var(--white);
}
.sp-dir:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.sp-dir__dots {
  display: inline-flex;
}
.sp-dir__dots i {
  width: 10px;
  height: 10px;
  margin-left: -3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
}
.sp-dir__dots i:first-child {
  margin-left: 0;
}
.sp-full .sp-dirs {
  margin: 0;
}
.sp-full .sp-dir {
  height: 28px;
  font-size: 12px;
}
/* with the chips under it the phone gives them their room */
.sp-full:has(.sp-dirs:not([hidden])) .sp-phone {
  --sp-full-h: min(860px, calc(92svh - 66px));
}
@media (max-width: 600px) {
  .sp-dir {
    padding: 0 9px 0 7px;
    font-size: 12px;
  }
  /* full screen on a phone: a slim bar under the app, never over its tab bar */
  .sp-full .sp-dirs {
    flex: none;
    width: 100%;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: var(--black);
  }
}

/* From 960 px three phones: the chosen direction in the middle (interactive, 1), a still copy of each other direction behind it, turned 14 degrees
   toward it with perspective, 85 % size, dimmed. The copies are one button each ("Show <name>"); the chips stay for the keyboard, out of sight
   until they have focus. */
.sp-side,
.sp-trio__name {
  display: none;
}
@media (min-width: 960px) {
  .sp-result__device {
    --sp-trio-w: calc(var(--sp-ready-h) * 300 / 620);
    --sp-trio-shift: calc(var(--sp-trio-w) * 0.66);
  }
  .sp-result__device > .sp-phone {
    z-index: 1;
  }
  .sp-side {
    position: absolute;
    top: 0;
    left: calc(50% - var(--sp-trio-w) / 2);
    z-index: 0;
    display: block;
    width: var(--sp-trio-w);
    height: var(--sp-ready-h);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .sp-side[hidden],
  .sp-trio__name[hidden] {
    display: none;
  }
  .sp-result__full {
    order: 2;
  }
  .sp-side--left {
    translate: calc(-1 * var(--sp-trio-shift)) 0;
  }
  .sp-side--right {
    translate: var(--sp-trio-shift) 0;
  }
  .sp-side .sp-side__phone {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: perspective(1600px) rotateY(14deg) scale(0.85);
    filter: brightness(0.86) saturate(0.92);
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.75);
  }
  .sp-side--right .sp-side__phone {
    transform: perspective(1600px) rotateY(-14deg) scale(0.85);
  }
  .sp-side__name {
    position: absolute;
    top: calc(92.5% + 12px);
    left: 0;
    right: 0;
    font-size: 13px;
    color: var(--grey-450);
    text-align: center;
  }
  .sp-side:hover .sp-side__name {
    color: var(--white);
  }
  .sp-trio__name {
    display: block;
    order: 1; /* under the middle phone, above the Full screen pill (which comes first in the page, so it stays the phone's next sibling) */
    margin-top: 12px;
    font-size: 13px;
    color: var(--white);
  }
  /* the reveal: the copies wait behind the phone until it has landed (preview.js) */
  .sp-result__device[data-sp-fan="pending"] .sp-side {
    opacity: 0;
    pointer-events: none; /* opacity 0 still takes a click: no swap before the reveal has landed */
  }
  :root:has(.sp-full[open]) .sp-side {
    visibility: hidden; /* full screen shows the one phone */
  }
  /* Keyboard chips: under the trio, in one row of their own width. Above the phone they would sit under the fixed site header; and `left: 50%` of a
     box only as wide as the phone would squeeze the three into rows. The name of the direction sits where they come, so it gives way. */
  .sp-result__device .sp-dirs {
    position: absolute;
    top: calc(var(--sp-ready-h) + 12px);
    bottom: auto;
    left: 50%;
    z-index: 2;
    translate: -50% 0;
    width: max-content;
    max-width: none;
    margin: 0;
  }
  .sp-result__device:has(.sp-dirs:focus-within) .sp-trio__name {
    visibility: hidden;
  }
  .sp-result__device .sp-dirs:not(:focus-within) {
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) {
  .sp-side .sp-side__phone {
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), filter 300ms ease;
  }
  .sp-side--left:hover .sp-side__phone {
    transform: perspective(1600px) translateY(-8px) rotateY(9deg) scale(0.865);
    filter: brightness(0.94) saturate(0.97);
  }
  .sp-side--right:hover .sp-side__phone {
    transform: perspective(1600px) translateY(-8px) rotateY(-9deg) scale(0.865);
    filter: brightness(0.94) saturate(0.97);
  }
}

/* motion of the preview page: only when the visitor has not asked for less; outside this block every rule above is the end state */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes sp-screen-in {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
  @keyframes sp-screen-out {
    to {
      opacity: 0;
      transform: translateY(-8px);
    }
  }
  @keyframes sp-toast-in {
    from {
      transform: translate(-50%, -140%);
    }
  }
  @keyframes sp-toast-out {
    to {
      opacity: 0;
      transform: translate(-50%, -140%);
    }
  }
  /* preview.js sets data-sp-leave on the screen that goes (180 ms), then data-sp-enter on the one that comes (260 ms) */
  [data-sp-state][data-sp-enter] {
    animation: sp-screen-in 260ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  [data-sp-state][data-sp-leave] {
    animation: sp-screen-out 180ms ease-in both;
  }
  .sp-stepper li {
    transition: color 250ms ease;
  }
  .sp-stepper li + li::before {
    transition: background-size 450ms ease;
  }
  .sp .btn[aria-busy="true"]::before {
    animation: sp-spin 0.9s linear infinite;
  }
  .sp-toast:not([hidden]) {
    animation: sp-toast-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
  }
  .sp-toast[data-sp-leave] {
    animation: sp-toast-out 300ms ease-in both;
  }

  /* building: the ring turns, the bar moves and shimmers, the step marks pop, the card border turns, the phone glows */
  @keyframes sp-pop {
    0% {
      transform: scale(0.4);
    }
    60% {
      transform: scale(1.18);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes sp-pulse {
    50% {
      box-shadow: 0 0 0 5px rgba(240, 68, 56, 0.25);
    }
  }
  @keyframes sp-bounce-in {
    0% {
      opacity: 0;
      transform: translateY(18px) scale(0.96);
    }
    60% {
      opacity: 1;
      transform: translateY(-4px) scale(1.02);
    }
    100% {
      transform: none;
    }
  }
  @keyframes sp-turn {
    to {
      --sp-angle: 360deg;
    }
  }
  @keyframes sp-shimmer {
    from {
      background-position: -60% 0;
    }
    to {
      background-position: 160% 0;
    }
  }
  @keyframes sp-glow {
    50% {
      box-shadow: var(--shadow), 0 0 120px 14px rgba(217, 45, 32, 0.45);
    }
  }
  .sp-spinner {
    animation: sp-spin 0.9s linear infinite;
  }
  .sp-bar__fill {
    transition: width 600ms linear;
  }
  .sp-bar__fill::after {
    animation: sp-shimmer 1.6s ease-in-out infinite;
  }
  .sp-steps li {
    transition: color 250ms ease;
  }
  .sp-steps li[data-done]::before {
    animation: sp-pop 360ms cubic-bezier(0.3, 1.4, 0.5, 1) both;
  }
  .sp-steps li[aria-current="step"]::before {
    animation: sp-pulse 1.4s ease-in-out infinite;
  }
  .sp-facts {
    animation: sp-turn 8s linear infinite;
  }
  .sp-facts__list li {
    transition: opacity 400ms ease, visibility 0s linear 400ms;
  }
  .sp-facts__list li[data-active] {
    transition: opacity 400ms ease 200ms, visibility 0s;
  }
  .sp-facts__dots i {
    transition: width 300ms ease, background-color 300ms ease;
  }
  .sp-phone--build {
    animation: sp-glow 2.4s ease-in-out infinite;
  }
  /* Pause stops the turning border and the glow too, not only the facts */
  .sp-build:has(.sp-facts__pause[aria-pressed="true"]) :is(.sp-facts, .sp-phone--build) {
    animation-play-state: paused;
  }
  .sp-result__full {
    transition: background-color 0.15s, color 0.15s;
  }
  .sp-sk-card {
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .sp-sk-card:nth-child(2) {
    transition-delay: 90ms;
  }
  .sp-sk-card:nth-child(3) {
    transition-delay: 180ms;
  }
  .sp-sk-card:nth-child(4) {
    transition-delay: 270ms;
  }
  .sp-sk-chips span {
    transition: opacity 320ms ease, transform 420ms cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 400ms ease,
      background-color 300ms ease;
  }
  /* the colour glide of the building phone (preview.js: --sp-* on the phone) */
  .sp-phone--build .sp-phone__screen,
  .sp-sk-brand__logo,
  .sp-sk-line {
    transition: background-color 300ms ease;
  }
  .sp-sk-chips span:nth-child(2) {
    transition-delay: 70ms;
  }
  .sp-sk-chips span:nth-child(3) {
    transition-delay: 140ms;
  }
  .sp-sk-chips span:nth-child(4) {
    transition-delay: 210ms;
  }
  .sp-sk-chips span:nth-child(5) {
    transition-delay: 280ms;
  }
  .sp-sk-brand {
    transition: opacity 500ms ease;
  }
  .sp-sk-tabs span {
    transition: background-color 500ms ease;
  }
  .sp-sk-banner {
    transform: translateY(-16px);
    transition: max-height 450ms cubic-bezier(0.2, 0.8, 0.3, 1), height 450ms cubic-bezier(0.2, 0.8, 0.3, 1),
      opacity 350ms ease, transform 450ms cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .sp-phone--build[data-sp-parts~="banner"] .sp-sk-card {
    animation: sp-bounce-in 520ms cubic-bezier(0.3, 1.3, 0.5, 1) both;
  }
  .sp-phone--build[data-sp-parts~="banner"] .sp-sk-card:nth-child(1) {
    animation-delay: 250ms;
  }
  .sp-phone--build[data-sp-parts~="banner"] .sp-sk-card:nth-child(2) {
    animation-delay: 350ms;
  }
  .sp-phone--build[data-sp-parts~="banner"] .sp-sk-card:nth-child(3) {
    animation-delay: 450ms;
  }
  .sp-phone--build[data-sp-parts~="banner"] .sp-sk-card:nth-child(4) {
    animation-delay: 550ms;
  }
  .sp-sk-card i,
  .sp-sk-card b {
    transition: background-color 400ms ease;
  }
  .sp-phone__ready {
    transition: opacity 500ms ease, transform 500ms cubic-bezier(0.3, 1.4, 0.5, 1);
  }

  /* the reveal (preview.js piles the phases up as data-sp-reveal: ready sweep leave move copy) */
  @keyframes sp-sweep {
    0% {
      --sp-sweep: 0deg;
      opacity: 0;
    }
    12%,
    80% {
      opacity: 1;
    }
    100% {
      --sp-sweep: 360deg;
      opacity: 0;
    }
  }
  @keyframes sp-bloom {
    0%,
    100% {
      box-shadow: var(--shadow), 0 0 90px 4px rgba(217, 45, 32, 0.32);
    }
    45% {
      box-shadow: var(--shadow), 0 0 150px 26px rgba(240, 68, 56, 0.5);
    }
  }
  @keyframes sp-rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .sp[data-sp-reveal~="sweep"] .sp-sweep {
    animation: sp-sweep 1100ms cubic-bezier(0.45, 0, 0.2, 1) both;
  }
  .sp[data-sp-reveal~="sweep"] .sp-phone--build {
    animation: sp-bloom 1100ms ease-in-out both;
  }
  .sp-build__copy,
  .sp-stepper {
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .sp[data-sp-reveal~="leave"] .sp-build__copy,
  .sp[data-sp-reveal~="leave"] .sp-stepper {
    opacity: 0;
  }
  .sp[data-sp-reveal~="leave"] .sp-build__copy {
    transform: translateX(-24px);
  }
  /* the phone flies (preview.js, 1100 ms); its words wait, then rise 120 ms apart from 70 % of the flight */
  .sp[data-sp-reveal~="move"] .sp-result .sp__copy > * {
    opacity: 0;
  }
  .sp[data-sp-reveal~="copy"] .sp-result .sp__copy > * {
    animation: sp-rise 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .sp[data-sp-reveal~="copy"] .sp-result .sp__copy > :nth-child(2) {
    animation-delay: 120ms;
  }
  .sp[data-sp-reveal~="copy"] .sp-result .sp__copy > :nth-child(3) {
    animation-delay: 240ms;
  }
  .sp[data-sp-reveal~="move"] .sp-result .sp-dirs {
    opacity: 0;
  }
  .sp[data-sp-reveal~="copy"] .sp-result .sp-dirs {
    animation: sp-rise 500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* the phone: a page pushed slides in from the right while the one below moves back 30 %; Back is the reverse; a tab fades (preview.js: data-sp-enter, data-sp-leave) */
  @keyframes sp-page-in-forward {
    from {
      transform: translateX(100%);
    }
  }
  @keyframes sp-page-out-forward {
    to {
      transform: translateX(-30%);
    }
  }
  @keyframes sp-page-in-back {
    from {
      transform: translateX(-30%);
    }
  }
  @keyframes sp-page-out-back {
    to {
      transform: translateX(100%);
    }
  }
  @keyframes sp-fade-in {
    from {
      opacity: 0;
    }
  }
  @keyframes sp-fade-out {
    to {
      opacity: 0;
    }
  }
  /* full screen: the backdrop fades in under the phone's growth (preview.js, 700 ms) and the cross after it; on close both fade out with the shrink */
  .sp-full[open]:not([data-sp-still])::backdrop {
    animation: sp-fade-in 500ms ease both;
  }
  .sp-full[open]:not([data-sp-still]) .sp-full__close {
    animation: sp-fade-in 300ms ease 450ms both;
  }
  .sp-full[data-sp-closing]::backdrop,
  .sp-full[data-sp-closing] .sp-full__close {
    animation: sp-fade-out 400ms ease-in both;
  }
  .sp-phone__view > [data-sp-enter="forward"] {
    z-index: 2;
    animation: sp-page-in-forward 280ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sp-phone__view > [data-sp-leave="forward"] {
    z-index: 1;
    animation: sp-page-out-forward 280ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sp-phone__view > [data-sp-enter="back"] {
    z-index: 1;
    animation: sp-page-in-back 280ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sp-phone__view > [data-sp-leave="back"] {
    z-index: 2;
    animation: sp-page-out-back 280ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }
  .sp-phone__view > [data-sp-enter="fade"] {
    z-index: 2;
    animation: sp-fade-in 200ms ease both;
  }
  .sp-phone__badge[data-bump] {
    animation: sp-pop 360ms cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .sp-phone__note[data-flash] {
    animation: sp-fade-in 400ms ease;
  }
  .sp-phone__card,
  .sp-phone__chip,
  .sp-phone__add {
    transition: transform 120ms ease;
  }
  .sp-phone__card:active,
  .sp-phone__chip:active,
  .sp-phone__add:active {
    transform: scale(0.97);
  }
}

/* nothing turns for a visitor who asked for less motion, so the dots and Pause have no job */
@media (prefers-reduced-motion: reduce) {
  .sp-facts__dots,
  .sp-facts__pause {
    display: none;
  }
}

/* ---------- store preview blocks (P40e) ---------- */
/* the logo of the store (preview-blocks.js, plan decision 3): a wordmark alone, an icon with the name, the initial on the accent.
   One-colour logos on a dark or colour tone are a mask in the text colour; many-coloured ones sit on a white chip. */
.sp-phone__logo:has(.sp-logo) {
  flex: 0 1 auto;
  display: flex; /* no line box: the logo sits on the centre line of Search and Bag */
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.sp-phone__brand:has(.sp-logo) [data-sp-phone-name] {
  display: none;
}
.sp-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.sp-logo__mark {
  display: block;
  flex: none;
  width: auto;
  max-width: 60cqw;
  object-fit: contain;
}
/* stronger than the P40b rule `.sp-phone__logo img` (max-width 110px, height 100%, object-position left), which stays as it is */
.sp-phone__logo .sp-logo__mark {
  height: auto;
  max-width: 60cqw;
  object-position: center;
}
.sp-logo--wide .sp-logo__mark {
  height: 22px;
  max-width: 60cqw;
}
.sp-logo--icon .sp-logo__mark {
  height: 28px;
}
.sp-logo__mark--mask {
  background: var(--sp-ink);
  -webkit-mask-image: var(--sp-logo-url);
  mask-image: var(--sp-logo-url);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* thin: 2 px around the logo, so the chip does not weigh more than the name beside it (sizes: the header's below, the story's further on) */
.sp-logo__chip {
  display: inline-flex;
  flex: none;
  padding: 2px;
  border-radius: var(--sp-radius);
  background: #fff;
}
.sp-logo__chip .sp-logo__mark {
  max-width: calc(60cqw - 4px);
}
.sp-logo__name {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--sp-font-display);
  font-weight: var(--sp-display-weight);
  font-size: 14px;
  letter-spacing: var(--sp-display-tracking);
  text-transform: var(--sp-display-case);
}
/* the logo in the header follows the header's sizes (compact, smaller on a scrolled Home); in a brand story it keeps its own */
.sp-phone {
  --sp-top-icon: 24px;
  --sp-top-word: 18px;
  --sp-top-name: 13px;
  --sp-top-pad: 6px;
  --sp-top-btn: 28px;
}
.sp-phone__brand .sp-logo--icon .sp-logo__mark {
  height: var(--sp-top-icon);
}
.sp-phone__brand .sp-logo--wide .sp-logo__mark {
  height: var(--sp-top-word);
}
.sp-phone__brand .sp-logo--icon .sp-logo__chip .sp-logo__mark {
  height: calc(var(--sp-top-icon) - 4px);
  border-radius: calc(var(--sp-radius) * 0.6);
}
.sp-phone__brand .sp-logo--wide .sp-logo__chip .sp-logo__mark {
  height: calc(var(--sp-top-word) - 4px);
}
.sp-phone__brand .sp-logo__name {
  font-size: var(--sp-top-name);
}
.sp-phone__brand .sp-logo__initial {
  width: var(--sp-top-icon);
  height: var(--sp-top-icon);
  font-size: calc(var(--sp-top-icon) / 2);
}
@media (prefers-reduced-motion: no-preference) {
  .sp-home[data-sp-scrolled] {
    --sp-top-icon: 18px;
    --sp-top-word: 14px;
    --sp-top-name: 12px;
    --sp-top-pad: 3px;
    --sp-top-btn: 24px;
  }
  .sp-home__top,
  .sp-home__top .sp-logo__mark,
  .sp-home__top .sp-logo__name,
  .sp-home__top .sp-logo__initial,
  .sp-home__top .sp-phone__icon {
    transition: height 0.2s ease, width 0.2s ease, font-size 0.2s ease, padding 0.2s ease;
  }
}
.sp-logo__initial {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: calc(var(--sp-radius) * 0.6);
  background: var(--sp-accent);
  color: var(--sp-on-accent);
  font-family: var(--sp-font-display);
  font-size: 14px;
  line-height: 1;
}
/* the icon of the push banner: a square tile that fills the room it is given */
.sp-logo--push {
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 20px;
  aspect-ratio: 1;
  border-radius: 22%;
  overflow: hidden;
}
.sp-logo--push .sp-logo__mark,
.sp-logo--push .sp-logo__chip {
  width: 100%;
  height: 100%;
  max-width: none;
}
.sp-logo--push .sp-logo__chip {
  box-sizing: border-box;
  padding: 3px;
  border-radius: inherit;
}
.sp-logo--push .sp-logo__chip .sp-logo__mark {
  max-width: none;
  height: 100%;
  border-radius: 0;
}
.sp-logo--push:has(.sp-logo__mark--mask) {
  background: var(--sp-accent);
}
.sp-logo--push .sp-logo__mark--mask {
  width: 70%;
  height: 70%;
  background: var(--sp-on-accent);
}
.sp-logo--push .sp-logo__initial {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: inherit;
}

/* ---------- store preview blocks (P40e-T3): tones and packshots ---------- */
/* The ground behind a packshot photo, by tone: pale from the colours of the direction. A phone with no tone (an older result) uses the surface. */
.sp-phone {
  --sp-blk-tint: var(--sp-surface);
}
.sp-phone[data-sp-tone="light"] {
  --sp-blk-tint: color-mix(in srgb, var(--sp-secondary) 12%, var(--sp-bg));
}
.sp-phone[data-sp-tone="colour"] {
  --sp-blk-tint: var(--sp-surface);
}
.sp-phone[data-sp-tone="dark"] {
  --sp-blk-tint: color-mix(in srgb, var(--sp-surface) 94%, #fff);
}
/* The picture of a packshot (preview.js marks the <img> of cards, gallery, Bag and tiles with data-sp-packshot; the drawers of P40e
   too): it fills its frame like any photo (owner, 03/11/2026: contain left bars around it), and the tint only shows through a
   picture that is really transparent. The selector is as specific as the rules it overrides (0,2,1) and comes last. */
.sp-phone img[data-sp-packshot] {
  padding: 0;
  object-fit: cover;
  background: var(--sp-blk-tint);
}

/* ---------- store preview blocks (P40e-T4): text, marquee, spacer ---------- */
.sp-blk-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  color: var(--sp-ink);
}
.sp-blk-text--left {
  align-items: flex-start;
  text-align: left;
}
.sp-blk-text--center {
  align-items: center;
  text-align: center;
}
.sp-blk-text--right {
  align-items: flex-end;
  text-align: right;
}
.sp-blk-text__h,
.sp-blk-text__b {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.sp-blk-text__h {
  font-weight: var(--w-medium);
  line-height: 1.2;
}
.sp-blk-text--small .sp-blk-text__h {
  font-size: 15px;
}
.sp-blk-text--medium .sp-blk-text__h {
  font-size: 18px;
}
.sp-blk-text--large .sp-blk-text__h {
  font-family: var(--sp-font-display);
  font-size: min(26px, 8.67cqw);
  font-weight: var(--sp-display-weight);
  letter-spacing: var(--sp-display-tracking);
  text-transform: var(--sp-display-case);
}
.sp-blk-text--bold .sp-blk-text__h {
  font-weight: 700;
}
.sp-blk-text--italic .sp-blk-text__h {
  font-style: italic;
}
.sp-blk-text__b {
  font-size: 14px;
  line-height: 1.4;
}
.sp-blk-text--small .sp-blk-text__b {
  font-size: 13px;
}
.sp-blk-text--band {
  margin: 0 -16px;
  padding: 14px 16px;
  background: var(--sp-secondary);
  color: var(--sp-on-secondary);
}
.sp-blk-marquee {
  display: block;
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 10px 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-family: var(--sp-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.sp-blk-marquee--fill-primary {
  background: var(--sp-accent);
  color: var(--sp-on-accent);
}
.sp-blk-marquee--fill-secondary {
  background: var(--sp-secondary);
  color: var(--sp-on-secondary);
}
.sp-blk-marquee--fill-text {
  background: var(--sp-ink);
  color: var(--sp-bg);
}
button.sp-blk-marquee {
  cursor: pointer;
}
/* the ring sits inside the bar (it clips what is outside) in the text colour of the fill */
.sp-phone .sp-blk-marquee:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: -4px;
  border-radius: 0; /* the phone's ring rounds a focused button; the bar stays square */
}
.sp-phone .sp-blk-marquee--fill-primary:focus-visible {
  outline-color: var(--sp-on-accent);
}
.sp-phone .sp-blk-marquee--fill-secondary:focus-visible {
  outline-color: var(--sp-on-secondary);
}
.sp-phone .sp-blk-marquee--fill-text:focus-visible {
  outline-color: var(--sp-bg);
}
.sp-blk-marquee__track {
  display: flex;
  min-width: 200%;
  width: max-content;
}
.sp-blk-marquee__run {
  flex: 1 0 auto;
  padding: 0 6px;
  text-align: center;
}
.sp-blk-marquee__track > .sp-blk-marquee__run::after {
  content: " ·";
}
.sp-blk-marquee--static .sp-blk-marquee__run {
  display: block;
  padding: 0 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* a spacer takes the place of one 22 px gap of .sp-home instead of adding to both (11 px less on each side) */
.sp-blk-spacer--space {
  height: var(--sp-blk-space);
  margin-block: -11px;
}
.sp-blk-spacer--line_thin {
  height: 0;
  margin-block: calc(var(--sp-blk-space) / 2 - 11px);
  border-top: 1px solid var(--sp-muted);
}
.sp-blk-spacer--line_thick {
  height: 0;
  margin-block: calc(var(--sp-blk-space) / 2 - 11px);
  border-top: 3px solid var(--sp-muted);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-blk-marquee {
    to {
      transform: translateX(-50%);
    }
  }
  .sp-blk-marquee--slow {
    --sp-blk-dur: 30s;
  }
  .sp-blk-marquee--normal {
    --sp-blk-dur: 20s;
  }
  .sp-blk-marquee--fast {
    --sp-blk-dur: 12s;
  }
  .sp-blk-marquee--scroll_left .sp-blk-marquee__track,
  .sp-blk-marquee--scroll_right .sp-blk-marquee__track {
    animation: sp-blk-marquee var(--sp-blk-dur) linear infinite;
  }
  .sp-blk-marquee--scroll_right .sp-blk-marquee__track {
    animation-direction: reverse;
  }
  /* the button stops it for good (pressed); hover, only where there is a pointer, and focus hold it for a while */
  .sp-blk-marquee[aria-pressed="true"] .sp-blk-marquee__track {
    animation-play-state: paused;
  }
  .sp-blk-marquee[aria-pressed="false"]:focus-visible .sp-blk-marquee__track {
    animation-play-state: paused;
  }
  @media (hover: hover) {
    .sp-blk-marquee[aria-pressed="false"]:hover .sp-blk-marquee__track {
      animation-play-state: paused;
    }
  }
  /* the inert copies of the side phones stay still (after the rules that animate) */
  .sp-side__phone .sp-blk-marquee__track {
    animation: none;
  }
}

/* ---------- store preview blocks (P40e-T5): image grid, slideshow, product grid, collection list ---------- */
.sp-blk-ig {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: 110px 110px;
  gap: 8px;
}
.sp-phone .sp-blk-ig > .sp-tiles__tile {
  grid-column: 2;
  aspect-ratio: auto;
}
.sp-phone .sp-blk-ig > .sp-tiles__tile:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.sp-blk-sl {
  position: relative;
  margin: 0 -16px;
}
.sp-blk-sl__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sp-blk-sl__track::-webkit-scrollbar {
  display: none;
}
.sp-blk-sl__track img {
  flex: none;
  width: 100%;
  aspect-ratio: var(--sp-blk-ar, 16 / 9);
  object-fit: cover;
  background: var(--sp-surface);
  scroll-snap-align: start;
}
.sp-phone .sp-blk-sl__track:focus-visible {
  outline: 2px solid var(--sp-ink);
  outline-offset: -2px;
}
.sp-blk-sl__dots {
  position: absolute;
  bottom: 6px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
}
.sp-blk-sl__dots:empty {
  display: none;
}
.sp-blk-sl__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sp-blk-sl__dot::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.6);
}
.sp-blk-sl__dot[aria-current="true"]::before {
  left: 3px;
  width: 18px;
  background: #fff;
}
.sp-phone .sp-blk-sl__dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 12px;
}
.sp-blk-sl__pause {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.sp-blk-sl__pause::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 9px;
  box-sizing: content-box;
  width: 4px;
  height: 12px;
  border: solid #fff;
  border-width: 0 3px;
}
.sp-blk-sl__pause[aria-pressed="true"]::before {
  left: 11px;
  width: 0;
  height: 0;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
}
.sp-phone .sp-blk-sl__pause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.sp-blk-pg {
  display: grid;
  gap: 8px;
}
.sp-blk-pg--list {
  grid-template-columns: minmax(0, 1fr);
}
.sp-blk-pg--list .sp-phone__card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
}
.sp-blk-pg--list .sp-phone__card img,
.sp-blk-pg--list .sp-phone__card .sp-phone__ph {
  height: 84px;
}
.sp-blk-pg--three_columns {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sp-blk-pg--three_columns .sp-phone__card img,
.sp-blk-pg--three_columns .sp-phone__card .sp-phone__ph {
  height: 92px;
}
.sp-blk-pg--three_columns .sp-phone__card-text {
  padding: 6px 6px 8px;
  font-size: 10px;
}
.sp-blk-cg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 120px;
  gap: 8px;
}
.sp-blk-cg .sp-tiles__tile {
  aspect-ratio: auto;
}
.sp-blk-cg .sp-tiles__tile:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.sp-blk-cr {
  gap: 8px;
}
.sp-blk-cr .sp-tiles__tile {
  flex: none;
  width: 130px;
  height: 160px;
  aspect-ratio: auto;
}

/* ---------- store preview blocks (P40e-T6): brand story, image and text ---------- */
/* both sit on the secondary colour of the direction, which is what makes the colour tone differ from the light one */
.sp-blk-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 -16px;
  padding: 26px 20px;
  background: var(--sp-secondary);
  color: var(--sp-on-secondary);
  text-align: center;
}
.sp-blk-story__logo {
  display: flex;
  justify-content: center;
  min-width: 0;
  max-width: 100%; /* in a column of image_left a long store name ends with an ellipsis, inside the block */
}
/* the story sits on the secondary colour, so a one-colour logo takes the text colour of the story, not the ink of the phone */
.sp-blk-story .sp-logo__mark--mask {
  background: currentcolor;
}
.sp-blk-story__text,
.sp-blk-it__title {
  font-family: var(--sp-font-display);
  font-weight: var(--sp-display-weight);
  text-transform: var(--sp-display-case);
  letter-spacing: var(--sp-display-tracking);
  line-height: 1.2;
}
.sp-blk-story__text {
  font-size: min(20px, 6.67cqw);
  overflow-wrap: anywhere;
}
.sp-blk-story__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--sp-radius);
}
.sp-blk-story--image_left {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "pic logo" "pic text" "pic btn";
  align-content: center;
  align-items: center;
  justify-items: start;
  gap: 10px 14px;
  text-align: left;
}
.sp-blk-story--image_left .sp-blk-story__img {
  grid-area: pic;
  aspect-ratio: 4 / 5;
}
.sp-blk-story--image_left .sp-blk-story__logo {
  grid-area: logo;
}
.sp-blk-story--image_left .sp-logo__mark {
  max-width: 100%;
}
.sp-blk-story--image_left .sp-logo__chip {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
/* in a brand story the chip keeps the story's own sizes: no taller than a bare icon (28 px) */
.sp-blk-story .sp-logo--icon .sp-logo__chip .sp-logo__mark {
  height: 24px;
  border-radius: calc(var(--sp-radius) * 0.6);
}
.sp-blk-story .sp-logo--wide .sp-logo__chip .sp-logo__mark {
  height: 18px;
}
.sp-blk-story--image_left .sp-blk-story__text {
  grid-area: text;
}
.sp-blk-story--image_left .sp-blk-story__btn {
  grid-area: btn;
}
.sp-blk-story__btn,
.sp-blk-it__btn {
  padding: 9px 16px;
  border: 1px solid currentcolor;
  border-radius: var(--sp-btn-radius);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
/* on the secondary colour the accent ring of the phone's buttons can vanish: draw it in the text colour */
.sp-phone .sp-blk-story__btn:focus-visible,
.sp-phone .sp-blk-it__btn:focus-visible {
  outline-color: currentcolor;
}
.sp-blk-it {
  container-type: inline-size;
}
.sp-blk-it__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: var(--sp-radius);
  background: var(--sp-secondary);
  color: var(--sp-on-secondary);
}
.sp-blk-it--image_right .sp-blk-it__img {
  order: 2;
}
.sp-blk-it--bare .sp-blk-it__row {
  grid-template-columns: 1fr;
}
.sp-blk-it__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--sp-radius);
}
.sp-blk-it__words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.sp-blk-it__title {
  font-size: 19px;
}
.sp-blk-it__text {
  font-size: 13px;
  line-height: 1.4;
}
/* 327 px of block = a phone narrower than 360 px minus its 16 px gutters: picture above, words below */
@container (max-width: 327px) {
  .sp-blk-it__row {
    grid-template-columns: 1fr;
  }
  .sp-blk-it--image_right .sp-blk-it__img {
    order: 0;
  }
}

/* ---------- store preview blocks (P40e-T7): shop by option, featured product ---------- */
.sp-blk-opt__chips {
  display: flex;
  gap: 6px;
}
.sp-blk-opt__chips--row {
  margin: 0 -16px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sp-blk-opt__chips--wrap {
  flex-wrap: wrap;
}
.sp-blk-opt__chip {
  flex: none;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--sp-ink) 13%, var(--sp-bg));
  border-radius: var(--sp-form-radius);
  background: var(--sp-bg);
  color: var(--sp-ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.sp-blk-opt__chip[aria-pressed="true"] {
  border-color: var(--sp-ink);
  background: var(--sp-ink);
  color: var(--sp-bg);
}
.sp-blk-feat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-blk-feat__card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-blk-feat__img {
  margin: 0 -16px;
  padding: 0;
  border: 0;
  background: var(--sp-surface);
  cursor: pointer;
}
.sp-blk-feat__img img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* a packshot (the picture carries data-sp-packshot) fills the frame like any photo: the rule of P40e-T3 */
.sp-blk-feat__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* a block title, not a display line: a long product name (55 characters is common) stays two lines in a 300 px phone */
.sp-blk-feat__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}
.sp-blk-feat__chips {
  flex-direction: row;
  flex-wrap: wrap;
}
.sp-blk-feat__chips > * {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.sp-blk-feat__price {
  font-size: 15px;
  font-weight: 600;
}
.sp-blk-feat__price s {
  margin-left: 8px;
  color: var(--sp-muted);
  font-weight: 400;
}
.sp-blk-feat__add {
  width: 100%;
}