/*
  Smart Cap page skin.
  Family: Minimal Prestige (product-led). Section rhythm: white hero and
  spec register, light-gray system band, near-black evidence band, white
  readiness ledger, near-black footer. Sentence-case display type with
  full stops; hairline rules; flat product stage.
*/

/* --- Section register ---------------------------------------------------- */

.section-register {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
}

.section-register .tech {
  flex-shrink: 0;
}

.section-register::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--line);
  transform: translateY(-0.2rem);
}

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

.cap-hero {
  border-bottom: 1px solid var(--line);
}

/* The stage bleeds to the right edge, but the split is pinned to the centre of
   the content area (gutter + half the page width) instead of to a share of the
   viewport. Without this the copy keeps its gutter while the stage takes all
   the extra space, so the hero reads lopsided on very wide screens. The first
   column may still shrink below that width, which is what keeps the mid-range
   from overflowing before the stacked breakpoint takes over. */
.cap-hero__shell {
  display: grid;
  grid-template-columns:
    minmax(0, calc(var(--gutter) + var(--content-max) / 2))
    minmax(28rem, 1fr);
  min-height: min(50rem, calc(100vh - 8rem));
}

.cap-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.8rem, 5vw, 4.6rem) clamp(2rem, 4vw, 4.4rem) clamp(2.8rem, 5vw, 4.6rem) var(--gutter);
}

.cap-hero__subhead {
  max-width: 26ch;
  margin: 0 0 1.5rem;
  color: var(--soft);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-wrap: balance;
}

.cap-hero h1 {
  max-width: 21ch;
  margin: 1.1rem 0 0.7rem;
  font-family: var(--font-display);
  /* Capped at 4.5rem: past that "Upgrade the cap." no longer fits the copy
     column, which is a fixed 610px once the gutter starts growing. */
  font-size: clamp(2.6rem, 4.6vw, 4.5rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}

.cap-hero__deck {
  max-width: 36rem;
  margin: 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.25vw, 1.13rem);
  line-height: 1.6;
}

/* Fit picker: measured segmented control in the spec-table register.
   Explanatory only -- selecting a size never rescales the visualization. */

.fit-picker {
  margin-top: clamp(1.9rem, 4.5vh, 3rem);
  padding-block: 1.1rem;
  border-block: 1px solid var(--line);
}

.fit-picker__topline {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.fit-picker__topline p,
.fit-picker__topline output,
.fit-picker > p {
  margin: 0;
}

.fit-picker__topline p {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fit-picker__topline output {
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fit-picker__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}

.fit-picker__buttons button {
  display: grid;
  gap: 0.1rem;
  min-height: 3.4rem;
  padding: 0.55rem 0.4rem;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: transparent;
  text-align: center;
  transition: background 140ms ease, color 140ms ease;
}

.fit-picker__buttons button:last-child {
  border-right: 0;
}

.fit-picker__buttons strong {
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fit-picker__buttons small {
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 140ms ease;
}

.fit-picker__buttons button:hover {
  background: var(--card);
}

.fit-picker__buttons button[aria-pressed="true"] {
  color: var(--white);
  background: var(--ink);
}

.fit-picker__buttons button[aria-pressed="true"] small {
  color: color-mix(in srgb, var(--white) 72%, var(--ink));
}

.fit-picker > p {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.cap-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.5rem;
  margin-top: 1.7rem;
}

.cap-hero__actions .target-price {
  margin-left: auto;
  text-align: right;
}

.target-price {
  display: grid;
  gap: 0.15rem;
}

.target-price strong {
  font-size: 1.12rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.target-price small {
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mock-status {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.cap-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 2.4rem 0 0;
  list-style: none;
}

.cap-hero__facts li {
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-strong);
}

.cap-hero__facts strong,
.cap-hero__facts span {
  display: block;
}

.cap-hero__facts strong {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cap-hero__facts span {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Product stage -------------------------------------------------------- */

.cap-hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}

.cap-viewer {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.cap-viewer__stage {
  --orbit-x: 50%;
  position: relative;
  flex: 1;
  min-height: 30rem;
  overflow: hidden;
  background: var(--surface);
}

.cap-viewer__poster,
.cap-viewer__element {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  transition:
    opacity 340ms var(--ease-out),
    visibility 340ms var(--ease-out);
}

.cap-viewer__poster {
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 3.4rem);
}

.cap-viewer__poster-frame {
  position: relative;
  height: 100%;
  max-height: 42rem;
  max-width: 100%;
  aspect-ratio: 1;
}

.cap-viewer__poster-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2.4rem 2.2rem color-mix(in srgb, var(--ink) 18%, transparent));
}

/* Dimension callouts: measured figures anchored to the fixed poster
   composition. They restate source dimensions; they do not measure the
   render, and they fade out while the 3D view is active. */

.cap-callout {
  position: absolute;
  z-index: 2;
  color: var(--soft);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}

.cap-callout__line {
  position: absolute;
  background: var(--line-strong);
}

.cap-callout--dia {
  top: 8%;
  left: 35%;
  width: 31%;
  height: 1px;
  background: var(--soft);
}

.cap-callout--dia::before,
.cap-callout--dia::after {
  position: absolute;
  top: -0.28rem;
  width: 1px;
  height: 0.6rem;
  content: "";
  background: var(--soft);
}

.cap-callout--dia::before {
  left: 0;
}

.cap-callout--dia::after {
  right: 0;
}

.cap-callout--dia span {
  position: absolute;
  bottom: 0.45rem;
  left: 50%;
  white-space: nowrap;
  transform: translateX(-50%);
}

.cap-callout--height {
  top: 11%;
  left: 69%;
  width: 1px;
  height: 24%;
  background: var(--soft);
}

.cap-callout--height::before,
.cap-callout--height::after {
  position: absolute;
  left: -0.28rem;
  width: 0.6rem;
  height: 1px;
  content: "";
  background: var(--soft);
}

.cap-callout--height::before {
  top: 0;
}

.cap-callout--height::after {
  bottom: 0;
}

.cap-callout--height span {
  position: absolute;
  top: 50%;
  left: 0.65rem;
  white-space: nowrap;
  transform: translateY(-50%);
}

.cap-callout--adapter {
  top: 40%;
  right: 64%;
  text-align: right;
}

.cap-callout--adapter span {
  display: block;
  white-space: nowrap;
}

.cap-callout--adapter span:last-child {
  color: var(--muted);
}

.cap-callout--adapter .cap-callout__line {
  position: absolute;
  top: 0.55rem;
  right: -2.6rem;
  width: 2.2rem;
  height: 1px;
}

.cap-viewer[data-viewer-state="model"] .cap-callout {
  opacity: 0;
}

.cap-viewer__poster-label {
  position: absolute;
  z-index: 3;
  top: 1.25rem;
  left: 1.4rem;
  margin: 0;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cap-viewer__poster-label span,
.cap-viewer__poster-label strong {
  display: block;
}

.cap-viewer__poster-label span {
  margin-bottom: 0.25rem;
  color: var(--muted);
}

.cap-viewer__poster-label strong {
  max-width: 16rem;
  color: var(--soft);
  font-weight: var(--font-body-weight);
  text-transform: none;
  letter-spacing: 0.02em;
}

.cap-viewer__mode {
  position: absolute;
  z-index: 3;
  top: 1.25rem;
  right: 1.4rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

.cap-viewer__element {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  --poster-color: transparent;
  background: transparent;
}

.cap-viewer[data-viewer-state="model"] .cap-viewer__element {
  opacity: 1;
  visibility: visible;
}

.cap-viewer[data-viewer-state="model"] .cap-viewer__poster {
  opacity: 0;
  visibility: hidden;
}

/* Status lamp: quiet ink when idle, live signal-red pulse in 3D. */

.cap-viewer__signal {
  position: absolute;
  z-index: 3;
  bottom: 1.5rem;
  left: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cap-viewer__signal::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  content: "";
  background: var(--line-strong);
}

.cap-viewer[data-viewer-state="model"] .cap-viewer__signal::before {
  background: var(--signal);
  animation: signal-pulse 1.6s ease-in-out infinite;
}

@keyframes signal-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--signal) 45%, transparent);
  }

  55% {
    box-shadow: 0 0 0 0.42rem transparent;
  }
}

/* Instrument panel: control strip in normal flow */

.cap-viewer__panel {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem 1.2rem;
  align-items: center;
  padding: 0.9rem clamp(1.2rem, 2.5vw, 1.9rem) 0.95rem;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.cap-viewer__toggle {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  gap: 1.1rem;
  padding: 0.7rem 1.2rem;
  color: var(--white);
  border: 1px solid var(--ink);
  border-radius: var(--radius-s);
  background: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background 160ms ease, border-color 160ms ease;
}

.cap-viewer__toggle:hover,
.cap-viewer__toggle[aria-pressed="true"] {
  border-color: var(--band);
  background: var(--band);
}

.cap-viewer__toggle[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--paper);
}

.cap-viewer__state {
  margin: 0;
  color: var(--soft);
  font-size: 0.78rem;
}

.cap-viewer__rail {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.cap-viewer__rail label span,
.cap-viewer__rail label small {
  display: block;
}

.cap-viewer__rail label span {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cap-viewer__rail label small {
  color: var(--muted);
  font-size: 0.62rem;
}

.cap-viewer__rail input {
  width: 100%;
  accent-color: var(--ink);
}

.cap-viewer__rail output {
  min-width: 2.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cap-viewer__help {
  grid-column: 1 / -1;
  margin: -0.2rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.cap-viewer__ar {
  position: absolute;
  z-index: 6;
  right: 1.4rem;
  bottom: 1.5rem;
}

/* Platform note: docked under the panel, no overlay collisions */

.capability-note {
  padding: 0.95rem clamp(1.2rem, 2.5vw, 1.9rem);
  color: var(--dark-copy);
  border-top: 1px solid var(--line);
  background: var(--band);
}

.capability-note span {
  color: var(--white);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.capability-note p {
  max-width: 44rem;
  margin: 0.3rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
}

/* --- Subpage hero --------------------------------------------------------- */

.page-hero {
  padding: clamp(2.8rem, 6vw, 4.6rem) var(--gutter) clamp(2.4rem, 5vw, 3.8rem);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 {
  max-width: 16ch;
  margin: 1rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}

.page-hero__deck {
  max-width: 40rem;
  margin: 0;
  color: var(--soft);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.6;
}

/* --- Note card ------------------------------------------------------------ */

.note-section {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.note-card {
  max-width: 52rem;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--card);
}

.note-card h2 {
  margin: 0.9rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.note-card__body p {
  margin: 0;
  color: var(--soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

.note-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  padding: 0;
  margin: 1.4rem 0 0;
  list-style: none;
}

.note-card__links a {
  font-size: 0.85rem;
}

/* --- Page crosslink ------------------------------------------------------- */

.page-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(2.4rem, 5vw, 3.6rem) var(--gutter);
  border-top: 1px solid var(--line);
}

.page-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* --- Spec strip: the measured register ----------------------------------- */

.spec-strip {
  padding-inline: max(0px, calc(var(--gutter) - 1.4rem));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.spec-strip__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.spec-strip__grid > div {
  padding: 1.3rem 1.4rem 1.4rem;
  border-right: 1px solid var(--line);
}

.spec-strip__grid > div:last-child {
  border-right: 0;
}

.spec-strip__grid strong,
.spec-strip__grid span {
  display: block;
}

.spec-strip__grid strong {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.spec-strip__grid span {
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --- Sections shared shell ------------------------------------------------ */

.system-section,
.boundary-section,
.readiness-section {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: clamp(2.6rem, 6vw, 4.5rem);
}

.section-heading h2 {
  max-width: 22ch;
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.7rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
}

/* --- System loop ---------------------------------------------------------- */

.system-section {
  background: var(--surface);
}

.system-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.system-steps li {
  position: relative;
  min-height: 15rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--paper);
  transition: border-color 200ms ease;
}

.system-steps li:hover {
  border-color: var(--line-strong);
}

.system-steps span {
  color: var(--muted);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.system-steps h3 {
  margin: 3.6rem 0 0.7rem;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.system-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

/* --- Evidence boundary ---------------------------------------------------- */

.boundary-section {
  color: var(--dark-copy);
  background: var(--band);
  border-bottom: 0;
}

.boundary-section .section-register::after {
  background: var(--dark-line);
}

.boundary-section .eyebrow,
.boundary-section .tech {
  color: var(--dark-copy);
}

.boundary-section .section-heading h2 {
  color: var(--white);
}

.boundary-section :focus-visible {
  outline-color: var(--white);
}

.boundary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.boundary-card {
  padding: clamp(1.8rem, 4vw, 3.2rem);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-m);
}

.boundary-card h3 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 1.9rem;
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
}

.boundary-card h3 small {
  font-size: 0.62rem;
  font-weight: var(--font-body-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.boundary-card--can h3 small {
  color: var(--white);
}

.boundary-card--cannot h3 small {
  color: var(--dark-copy);
}

.boundary-card ul {
  display: grid;
  gap: 0.95rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.boundary-card li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.9rem;
}

.boundary-card li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.boundary-card--can li::before {
  content: "+";
  color: var(--white);
}

.boundary-card--cannot li::before {
  content: "\2212";
  color: var(--dark-copy);
}

/* The one place signal red owns the layout. Keep it loud and plain. */

.ingestion-disclosure {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: center;
  padding: 1.4rem clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 1rem;
  color: #ffe7e2;
  border-left: 4px solid var(--signal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: color-mix(in srgb, var(--signal) 32%, #1a0f0d);
}

.ingestion-disclosure strong {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ingestion-disclosure p {
  margin: 0;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  font-weight: 600;
}

/* --- Readiness ledger ----------------------------------------------------- */

.readiness-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 8vw, 9rem);
}

.readiness-intro h2 {
  margin: 0.9rem 0 1.3rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.7rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-wrap: balance;
}

.readiness-intro > p:last-child {
  max-width: 32rem;
  color: var(--muted);
}

.readiness-list {
  display: grid;
  gap: 0;
  margin: 0;
  align-content: start;
}

.readiness-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--line);
}

.readiness-row:last-child {
  border-bottom: 1px solid var(--line);
}

.readiness-row dt {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.readiness-row dd {
  margin: 0;
  color: var(--soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* --- Product template ----------------------------------------------------- */

.product-page {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
  max-width: var(--content-max);
  margin-inline: auto;
  border-bottom: 1px solid var(--line);
}

.product-page__media {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.product-page__media .cap-viewer {
  flex: 1;
}

.product-page__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.4rem, 5vw, 5rem) clamp(2rem, 4vw, 4.2rem);
}

.product-page__info h1 {
  margin: 1rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.2vw, 4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
}

.product-price {
  margin: 0 0 1.2rem;
  font-size: 1.12rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-description {
  color: var(--soft);
  font-size: 0.92rem;
}

.product-buy-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
}

.product-buy-form label {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-buy-form select,
.product-buy-form input {
  min-height: 3rem;
  padding: 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
}

.quantity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem;
  align-items: center;
  gap: 1rem;
}

/* Form controls carry an intrinsic min width (roughly 180px) that grid and
   flex tracks honour as a floor, which pushes panels wider than a phone
   viewport. Let them shrink with their container instead. */
input,
select,
textarea {
  min-width: 0;
}

.product-page__info .ingestion-disclosure {
  margin-top: 2.2rem;
}

/* --- Hero details accordion ----------------------------------------------- */

.hero-details {
  margin-top: 1.9rem;
  border-top: 1px solid var(--line);
}

.hero-details details {
  border-bottom: 1px solid var(--line);
}

.hero-details summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.1rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}

.hero-details summary::-webkit-details-marker {
  display: none;
}

.hero-details summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
}

.hero-details details[open] summary::after {
  content: "\2212";
}

.hero-details__body {
  padding: 0 0.1rem 1rem;
  color: var(--soft);
  font-size: 0.85rem;
  line-height: 1.6;
}

.hero-details__body p,
.hero-details__body ul {
  margin: 0;
}

.hero-details__body ul {
  display: grid;
  gap: 0.35rem;
  padding-left: 1.1rem;
}

/* --- Demo bag drawer ------------------------------------------------------ */

.bag {
  position: fixed;
  z-index: 120;
  inset: 0;
  visibility: hidden;
}

.bag.is-open {
  visibility: visible;
}

.bag__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  opacity: 0;
  transition: opacity 260ms var(--ease-out);
}

.bag.is-open .bag__backdrop {
  opacity: 1;
}

.bag__panel {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  display: flex;
  flex-direction: column;
  width: min(26rem, calc(100vw - 1.4rem));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 25%, transparent);
  transform: translateX(calc(100% + 1.4rem));
  transition: transform 300ms var(--ease-out);
}

.bag.is-open .bag__panel {
  transform: translateX(0);
}

.bag__head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.1rem 1.2rem 1rem;
  border-bottom: 1px solid var(--line);
}

.bag__head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-display-weight);
}

.bag__tag {
  margin: 0;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--muted);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bag__close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-left: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: transparent;
  font-size: 1rem;
  line-height: 1;
}

.bag__close:hover {
  border-color: var(--ink);
}

.bag__note {
  margin: 0;
  padding: 0.7rem 1.2rem;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font-size: 0.72rem;
}

.bag__items {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 0 1.2rem;
  list-style: none;
}

.bag__item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.9rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.bag__item strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.bag__item span {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.bag__controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bag__controls button {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: transparent;
  font-size: 0.85rem;
  line-height: 1;
}

.bag__controls button:hover {
  border-color: var(--ink);
}

.bag__controls span {
  min-width: 1.2rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bag__line-price {
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.bag__empty {
  margin: 0;
  padding: 2rem 1.2rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.bag__foot {
  display: grid;
  gap: 0.7rem;
  padding: 1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--line);
}

.bag__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.9rem;
}

.bag__subtotal strong {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bag__small {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
}

.bag__checkout.is-disabled {
  cursor: default;
  opacity: 0.4;
}

/* --- Footer email capture (demo-labeled) ---------------------------------- */

.footer-capture {
  margin-top: 1.8rem;
  max-width: 22rem;
}

.footer-capture p {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
}

.footer-capture form {
  display: flex;
  gap: 0.6rem;
}

.footer-capture input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.1rem;
  border: 0;
  border-bottom: 1px solid var(--dark-line);
  border-radius: 0;
  background: transparent;
  color: var(--white);
  font-size: 0.85rem;
}

.footer-capture input::placeholder {
  color: color-mix(in srgb, var(--white) 45%, var(--band));
}

.footer-capture button {
  padding: 0.45rem 1rem;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
}

.footer-capture button:hover {
  border-color: var(--white);
}

.footer-capture [data-capture-status] {
  min-height: 1rem;
  margin: 0.55rem 0 0;
  color: var(--dark-copy);
  font-size: 0.68rem;
}

/* --- Simulated checkout page ---------------------------------------------- */

.co-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
}

.co-note {
  display: grid;
  gap: 0.25rem;
  margin: clamp(1.6rem, 3vw, 2.4rem) var(--gutter) 0;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--signal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: color-mix(in srgb, var(--signal) 8%, var(--paper));
}

.co-note strong {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.co-note p {
  margin: 0;
  font-size: 0.88rem;
}

.co-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
}

.co-panel h2 {
  margin: 2rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-display-weight);
}

.co-panel h2:first-child {
  margin-top: 0;
}

.co-field {
  display: grid;
  gap: 0.3rem;
  margin-bottom: 0.8rem;
}

.co-field label {
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.co-field input {
  min-height: 2.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--muted);
  cursor: not-allowed;
  font-size: 0.88rem;
}

.co-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.co-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.co-actions .button[disabled] {
  cursor: not-allowed;
  opacity: 0.4;
}

.co-summary {
  align-self: start;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--card);
}

.co-summary h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-display-weight);
}

.co-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.co-summary li,
.co-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}

.co-row--total {
  border-bottom: 0;
  font-weight: 600;
}

.co-row span:last-child,
.co-summary li span:last-child {
  font-variant-numeric: tabular-nums;
}

.co-summary .bag__small {
  margin-top: 0.8rem;
}

/* --- Theme cart page ------------------------------------------------------ */

.cart-page {
  max-width: 52rem;
  padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  margin-inline: auto;
}

.cart-page h1 {
  margin: 0.8rem 0 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.01em;
}

.cart-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}

.cart-row:last-of-type {
  border-bottom: 1px solid var(--line);
}

.cart-row img {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}

.cart-row__info p {
  margin: 0 0 0.2rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.cart-row__info a {
  color: var(--muted);
  font-size: 0.75rem;
}

.cart-row__qty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.cart-row__qty input[type="text"] {
  width: 3.4rem;
  min-height: 2.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.cart-page__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
}

.cart-page__total {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cart-page__empty {
  color: var(--muted);
  border-block: 1px solid var(--line);
  padding: 2rem 0;
}

/* --- Generic content pages (policies, about, contact) --------------------- */

.content-page {
  max-width: 46rem;
  padding: clamp(2.6rem, 5vw, 4.2rem) var(--gutter) clamp(3.5rem, 7vw, 5.5rem);
  margin-inline: auto;
}

.content-page h1 {
  margin: 1rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.content-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  padding-bottom: 1.4rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

.rte h2 {
  margin: 2.2rem 0 0.8rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-display-weight);
  line-height: 1.2;
}

.rte h3 {
  margin: 1.6rem 0 0.6rem;
  font-size: 1rem;
  font-weight: 600;
}

.rte p,
.rte li {
  color: var(--soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

.rte p {
  margin: 0 0 1rem;
}

.rte ul,
.rte ol {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 1.2rem;
  padding-left: 1.2rem;
}

.rte a {
  color: var(--ink);
}

/* Draft banner: policy text in a mock is unreviewed by counsel. */

.draft-note {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.3rem;
  margin-bottom: 2rem;
  border-left: 4px solid var(--signal);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: color-mix(in srgb, var(--signal) 8%, var(--paper));
}

.draft-note strong {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.draft-note p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
}

/* --- Collection and product cards ---------------------------------------- */

.collection-head {
  display: grid;
  gap: 1rem;
  padding: clamp(2.6rem, 5vw, 4rem) var(--gutter) clamp(1.8rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--line);
}

.collection-head h1 {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.collection-head p {
  max-width: 42rem;
  margin: 0;
  color: var(--soft);
  font-size: 0.95rem;
}

.collection-count {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* auto-fit, not auto-fill: empty tracks would otherwise show the grid's
   hairline background as a gray block. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.product-card__media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.6rem;
  aspect-ratio: 1;
  max-height: 20rem;
  background: var(--surface);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-card__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
  color: var(--muted);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem 1.3rem;
}

.product-card__body h2,
.product-card__body h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--font-display-weight);
  line-height: 1.2;
}

.product-card__body h2 a,
.product-card__body h3 a {
  text-decoration: none;
}

.product-card__body h2 a:hover,
.product-card__body h3 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.product-card__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.product-card__price {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-card__foot {
  margin-top: auto;
  padding-top: 0.9rem;
}

.product-card__foot .button {
  width: 100%;
  min-height: 2.7rem;
  font-size: 0.82rem;
}

/* --- Search ---------------------------------------------------------------- */

.search-page {
  padding: clamp(2.6rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
}

.search-page h1 {
  margin: 0.9rem 0 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
}

.search-form {
  display: flex;
  gap: 0.7rem;
  max-width: 34rem;
  margin-bottom: 1.2rem;
}

.search-form input {
  flex: 1;
  min-width: 0;
  min-height: 3rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
}

.search-summary {
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.search-results {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.search-result {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line);
}

.search-result:last-child {
  border-bottom: 1px solid var(--line);
}

.search-result img {
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}

.search-result__body p {
  margin: 0;
}

.search-result__body a {
  font-size: 0.95rem;
  font-weight: 600;
}

.search-result__kind {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.search-empty {
  max-width: 34rem;
  padding: 2rem 0 0;
  color: var(--soft);
}

.search-empty ul {
  display: grid;
  gap: 0.4rem;
  padding-left: 1.2rem;
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
}

/* --- Journal --------------------------------------------------------------- */

.journal-head {
  padding: clamp(2.6rem, 5vw, 4rem) var(--gutter) clamp(1.8rem, 3vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}

.journal-head h1 {
  margin: 0.9rem 0 0.9rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.journal-head p {
  max-width: 42rem;
  margin: 0;
  color: var(--soft);
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: var(--line);
  list-style: none;
}

.journal-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
}

.journal-card__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.journal-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.journal-card h2 a {
  text-decoration: none;
}

.journal-card h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.journal-card p {
  margin: 0;
  color: var(--soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.journal-card__more {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.article-page {
  max-width: 44rem;
  padding: clamp(2.6rem, 5vw, 4.2rem) var(--gutter) clamp(3rem, 6vw, 4.5rem);
  margin-inline: auto;
}

.article-page h1 {
  margin: 1rem 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.article-page__meta {
  padding-bottom: 1.4rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.article-comments {
  padding-top: 2rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.article-comments h2 {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--font-display-weight);
}

.comment {
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.comment__meta {
  margin: 0 0 0.3rem;
  color: var(--muted);
  font-size: 0.72rem;
}

.comment p:last-child {
  margin: 0;
  font-size: 0.9rem;
}

.comment-form {
  display: grid;
  gap: 0.8rem;
  max-width: 32rem;
  margin-top: 1.6rem;
}

.comment-form label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
}

.comment-form textarea {
  min-height: 7rem;
  resize: vertical;
}

/* --- 404 -------------------------------------------------------------------- */

.error-page {
  display: grid;
  align-content: center;
  gap: 1rem;
  min-height: 60vh;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}

.error-page h1 {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.error-page p {
  max-width: 34rem;
  margin: 0;
  color: var(--soft);
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1rem;
}

/* --- Password gate ---------------------------------------------------------- */

.password-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
}

.password-main {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.2rem;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}

.password-main .wordmark {
  justify-items: start;
  text-align: left;
}

.password-main h1 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: var(--font-display-weight);
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.password-main > p {
  max-width: 36rem;
  margin: 0;
  color: var(--soft);
}

.password-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.6rem;
}

.password-form input {
  min-width: min(18rem, 100%);
  min-height: 3.1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--paper);
}

.password-foot {
  padding: 1.2rem var(--gutter);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}

/* --- Consent banner --------------------------------------------------------- */
/* Decline is a peer of accept, never hidden behind a preferences step. */

.consent {
  position: fixed;
  z-index: 130;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  display: none;
  width: min(26rem, calc(100vw - 2rem));
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  background: var(--paper);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}

.consent.is-visible {
  display: block;
}

/* The bag drawer is a dialog the visitor opened; it takes the screen back
   from the banner until it is closed. */
.bag-open .consent.is-visible {
  display: none;
}

.consent p {
  margin: 0.5rem 0 0;
  color: var(--soft);
  font-size: 0.82rem;
  line-height: 1.55;
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}

.consent__actions .button {
  flex: 1;
  min-height: 2.7rem;
  padding-inline: 1rem;
  font-size: 0.82rem;
}

/* --- Footer link columns ---------------------------------------------------- */

.footer-links {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.footer-links a {
  font-size: 0.85rem;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1180px) {
  .spec-strip__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .spec-strip__grid > div:nth-child(3) {
    border-right: 0;
  }

  .spec-strip__grid > div:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .spec-strip__grid > div:nth-child(4) {
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 1040px) {
  .cap-hero__shell {
    grid-template-columns: 1fr;
  }

  .cap-hero__copy {
    padding-inline: var(--gutter);
  }

  .cap-hero__visual {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .cap-viewer__stage {
    min-height: 0;
    aspect-ratio: 1 / 1.02;
  }

  .system-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .product-page {
    grid-template-columns: 1fr;
  }

  .product-page__media {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .cap-hero__copy {
    padding: 2.6rem var(--gutter);
  }

  .cap-hero h1 {
    font-size: clamp(2.1rem, 8.8vw, 3.6rem);
  }

  .cap-hero__catalog {
    margin-bottom: 2.2rem;
  }

  .cap-hero__facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cap-hero__facts li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.7rem;
    border-top: 1px solid var(--line);
  }

  .cap-hero__facts li:first-child {
    border-top: 1px solid var(--line-strong);
  }

  .cap-hero__facts span {
    margin-top: 0.15rem;
  }

  .cap-viewer__stage {
    aspect-ratio: 1 / 1.06;
  }

  .cap-viewer__poster-frame {
    width: min(96%, 30rem);
  }

  .cap-viewer__panel {
    grid-template-columns: 1fr;
  }

  .cap-viewer__state {
    order: 2;
  }

  .cap-viewer__toggle {
    justify-content: space-between;
  }

  .cap-callout--adapter span:last-child {
    display: none;
  }

  .spec-strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .spec-strip__grid > div {
    border-bottom: 1px solid var(--line);
  }

  .spec-strip__grid > div:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .spec-strip__grid > div:nth-child(even),
  .spec-strip__grid > div:nth-child(3) {
    border-right: 0;
  }

  .spec-strip__grid > div:nth-child(n + 5) {
    border-bottom: 0;
  }

  .section-heading,
  .readiness-grid {
    grid-template-columns: 1fr;
  }

  .system-steps,
  .boundary-grid {
    grid-template-columns: 1fr;
  }

  .system-steps li {
    min-height: 0;
  }

  .system-steps h3 {
    margin-top: 2.2rem;
  }

  .readiness-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .ingestion-disclosure {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .page-next {
    flex-direction: column;
    align-items: flex-start;
  }

  .cap-hero__actions .target-price {
    margin-left: 0;
    text-align: left;
  }

  .bag__panel {
    inset: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    transform: translateX(100%);
  }

  .co-wrap {
    grid-template-columns: 1fr;
  }

  .co-grid-2 {
    grid-template-columns: 1fr;
  }

  .cart-row {
    grid-template-columns: 3.6rem 1fr;
  }

  .cart-row__qty {
    grid-column: 2;
    justify-content: flex-start;
  }

  .search-result {
    grid-template-columns: 3.6rem 1fr;
  }

  .product-grid,
  .journal-grid {
    grid-template-columns: 1fr;
  }

  .content-page__meta {
    gap: 0.35rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .cap-viewer__poster-label strong {
    display: none;
  }
}