/* Homepage (2026-10-25, the companion revamp): layout and components only this page uses. Tokens and shared
   components come from styles.css (docs/design-system.md); the room and the character from companion.css. Everything
   here is on the cream ground with one accent, her gold; blue only for information, green only for verified states. */

/* ------------------------------------------------------------------ hero -- */
.hero--companion { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; max-width: 1200px; padding-top: clamp(8px, 2vw, 28px); }
.hero--companion .hero__glow { right: auto; left: 50%; top: 44%; width: min(860px, 92vw); display: none; }
.hero__status-row { display: flex; min-width: 0; }
.hero__status-row .pill { white-space: normal; min-width: 0; }   /* at very large text the pill wraps instead of pushing the page wider than the screen */
.hero__title { font-size: var(--step-5); line-height: 1; }
.hero__accent { color: var(--gold-ink); }
.hero__lede { max-width: 30ch; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.hero__desc { max-width: 50ch; color: var(--ink-2); }
.hero__fine { max-width: 54ch; }

.hero__stage { display: grid; gap: 16px; min-width: 0; container-type: inline-size; }   /* a container, so the buttons below can follow the room they have in the reader's own text size */
.hero__room { position: relative; width: 100%; max-width: 640px; margin-inline: auto; }
.hero__room .room { aspect-ratio: 4 / 3; }
/* her size in these wide rooms (the app's stage is tall): she, her cushion and her shadow are scaled together by 1.35
   from the app's 48cqh, and her seat moves up the cushion by the same factor, so she still sits in its dent; nothing in the room moves but her.
   --k scales the three together (1 in the wide rooms; a phone's tall room sets it a little lower so the wall above her head has room for her words). */
.hero__room .room, .cta__room .room { --k: 1; --seat: calc(26cqh * var(--k) * 400 / 150); }   /* the cushion is one seat wide and the rugs 1.3 / 1.42 seats (companion.css), so they scale with her */
.hero__room .ch, .hero__room .hit, .hero__room .fx, .cta__room .ch, .cta__room .fx, .room--still .hero__still-box { width: min(94%, calc(65cqh * var(--k) * 1112 / 1005)); bottom: 16%; }
/* these wide rooms get a deeper floor (42%, the app's tall stage has 34%): with her this big the rug needs room behind the cushion, or it would climb the wall */
.hero__room .room__wall, .cta__room .room__wall { inset: 0 0 42%; }
.hero__room .room__floor, .cta__room .room__floor { height: 42%; }
.hero__room .room__skirt, .cta__room .room__skirt { bottom: 42%; }
.hero__room .room__shadow, .cta__room .room__shadow { width: min(68%, calc(51cqh * var(--k))); bottom: 14.5%; }
/* the one-minute focus taste: the timer sits at the foot of the room and her words keep their place on the wall. (With the
   timer at the top her line was pushed down a fifth of the room and lay across her face on a phone.) */
.hero__room .room.is-focusing .focus { top: auto; bottom: 4%; }
.hero__room .room.is-focusing .bubble { top: 4%; }
/* before the script runs (and without scripts): the same room, with her still on the cushion's spot, in the same box */
.room--still .hero__still-box { position: absolute; left: 50%; aspect-ratio: 1112 / 1005; transform: translateX(-50%); }   /* her box: the still picture fills it */
.room--still .hero__still { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the four things you can do, under the room: one row of pills, big enough for thumbs */
.deck { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 640px; margin-inline: auto; }
.deck__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 10px 10px; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink); font: 500 1rem/1 var(--font-display); cursor: pointer; box-shadow: var(--elev-1); -webkit-tap-highlight-color: transparent;
  transition: transform .22s var(--ease-spring), border-color .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.deck__btn .icon { width: 18px; height: 18px; color: var(--gold-ink); }
.deck__btn:hover { border-color: var(--gold); transform: translateY(-1px); box-shadow: var(--elev-2); }
.deck__btn[data-on="1"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }   /* running: the button says Stop */
.deck__btn[data-on="1"] .icon { color: var(--gold); }
.deck__btn:disabled, .deck__btn[aria-busy="true"] { cursor: progress; opacity: .72; transform: none; box-shadow: none; }
.deck__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.deck__hint { margin: 0; text-align: center; font-size: var(--text-sm); color: var(--ink-2); min-height: 1.45em; transition: color var(--dur-2) var(--ease-out); }   /* one line that changes as she is looked after: what to do next */
.deck__hint.is-on { color: var(--ink); }
/* "Meet her" lights the deck up for a moment: a soft gold ring that breathes once on each button */
.deck.is-cue .deck__btn { animation: deck-cue 1.4s var(--ease-out) both; }
.deck.is-cue .deck__btn:nth-child(2) { animation-delay: .08s; } .deck.is-cue .deck__btn:nth-child(3) { animation-delay: .16s; } .deck.is-cue .deck__btn:nth-child(4) { animation-delay: .24s; }
@keyframes deck-cue { 0% { box-shadow: 0 0 0 0 rgba(217, 160, 82, 0); } 30% { transform: translateY(-3px); box-shadow: 0 0 0 6px rgba(217, 160, 82, .28), var(--elev-2); border-color: var(--gold); } 100% { box-shadow: 0 0 0 0 rgba(217, 160, 82, 0); } }
.hero__state { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; min-height: 1.5em; margin: 0; font-size: var(--text-sm); color: var(--ink-3); }
.hero__state b { color: var(--ink); font-weight: 700; }
html:not(.js) .deck, html:not(.js) .hero__state { display: none; }

@media (max-width: 900px) {
  .hero--companion { grid-template-columns: 1fr; gap: 16px; padding-top: 4px; }
  /* phones read: the pill, the headline, her, then the rest */
  .hero--companion .hero__copy { display: contents; }
  .hero--companion .hero__copy > * { margin-top: 0; }
  .hero__status-row { order: 1; } .hero__title { order: 2; } .hero__stage { order: 3; margin-top: 6px; } .hero__lede { order: 4; margin-top: 8px; } .hero__desc { order: 5; } .hero__actions { order: 6; margin-top: 12px !important; } .hero__where { order: 7; } .hero__fine { order: 8; }
  .hero--companion .hero__glow { left: 50%; translate: -50% -50%; top: 34%; width: min(620px, 100vw); }
}
@media (max-width: 420px) {
  .deck { gap: 8px; }
  .deck__btn { gap: 8px; padding-inline: 6px; font-size: var(--text-sm); }
  .deck__btn .icon { width: 16px; height: 16px; }
}
@media (max-width: 380px) {   /* the narrowest phones: the icon over the word, like the app's own care bar, so the four stay in one row */
  .deck { gap: 6px; }
  .deck__btn { flex-direction: column; gap: 4px; min-height: 56px; padding: 8px 4px; border-radius: var(--radius-md); }
}
/* the same two steps by the reader's text size (the width in em, so they follow a browser's or a phone's larger-text
   setting): little room → the icon over the word; very little (text at about 200 %) → two rows of two. At 200 % the four
   in one row forced the whole page 40 px wider than the screen. */
@container (max-width: 19em) { .deck { gap: 6px; } .deck__btn { flex-direction: column; gap: 4px; min-height: 56px; padding: 8px 4px; border-radius: var(--radius-md); } }
@container (max-width: 13em) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* where the two buttons lead, and the way straight in for someone who already joined */
.hero__where { margin: 0; max-width: 54ch; font-size: var(--text-sm); color: var(--ink-2); }
.hero__where a { color: var(--ink); font-weight: 700; }

/* A phone (2026-11): the room is as tall as the screen allows instead of a flat 4:3 strip. Her words then have the wall
   above her head (the bubble used to lie on her ears, and on her eye on the smallest phones), she is bigger, and the
   care buttons stay on the first screen: the room gives way to them, never the other way round (330 px = the header,
   the headline and the buttons). svh is the screen with the browser's bars showing; vh is the fallback. */
@media (max-width: 600px) {
  .hero__title { font-size: min(var(--step-5), 10.4vw); }   /* "Your AI Companion." stays one line down to 320 px */
  .hero__room .room { aspect-ratio: auto; height: clamp(62vw, calc(100vh - 330px), 116vw); height: clamp(62vw, calc(100svh - 330px), 116vw); --k: .9; }
  .hero__room .room__wall { inset: 0 0 38%; } .hero__room .room__floor { height: 38%; } .hero__room .room__skirt { bottom: 38%; }   /* a taller room needs less of itself as floor */
  .deck__hint { min-height: 2.9em; }   /* two lines kept, so the page never jumps when the words change */
}
@media (max-width: 340px) { .hero__title { font-size: 9.6vw; } .hero__room .room { --k: .84; } .hero__room .bubble p { font-size: .875rem; line-height: 1.3; } }   /* 320 px: she a little smaller and her words a size down, so three lines still end above her eyes */
@media (max-width: 360px) { .hero__room .bubble { width: 92%; padding: 8px 12px; } .hero__room .bubble p { font-size: .9375rem; line-height: 1.35; } }   /* the smallest phones: her words a size down, so three lines still end above her eyes */
/* a phone on its side: the room never taller than the screen, so she and her buttons fit one screen together */
@media (max-height: 560px) and (orientation: landscape) {
  .hero__room, .deck { max-width: min(640px, calc((100vh - 130px) * 4 / 3)); }
  .hero__room .bubble { left: 50%; transform: translateX(-50%); width: min(92%, 34ch); padding: 8px 12px; }   /* a small room: her words across the top, short, never down to her eyes */
  .hero__room .bubble::after { left: 50%; }
  .hero__room .bubble p { font-size: .9375rem; line-height: 1.35; }
}

/* The first-visit notice on a phone sits in the page, right under her buttons (index.html has the copy inside the
   stage): the floating sheet covered Pet / Snack / Play / Focus on every phone shorter than about 800 px. Wide screens
   keep the floating sheet; both say the same words and either "Got it" closes both. */
html.needs-notice .terms-notice--inline { display: none; }
@media (max-width: 700px) {
  html.needs-notice .terms-notice[data-phone="page"] { display: none; }
  html.needs-notice .terms-notice--inline { display: flex; position: static; transform: none; animation: none; width: 100%; max-width: 640px; margin: 4px auto 0; align-items: flex-end; gap: 12px; padding: 12px 14px; box-shadow: var(--elev-1); }
  html.needs-notice .terms-notice--inline .btn { min-height: 44px; }
  html.needs-notice body { padding-bottom: 0; }   /* nothing floats over the page's foot any more */
}

/* ------------------------------------------------- a day with her (2026-11) -- */
/* Three real screens of the app, each in a plain phone outline. Side by side on a wide screen; on a phone a row that
   scrolls sideways and snaps, with the next one peeking in so it is clear there is more. The pictures keep their box
   (width/height on the img), so nothing moves when they arrive. */
.day { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-6) auto 0; padding: 0; list-style: none; max-width: 980px; }
.day:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--radius); }
.day__step { display: grid; gap: 8px; align-content: start; text-align: center; }
.day__shot { margin: 0 auto 8px; width: min(100%, 260px); padding: 8px; border-radius: 34px; background: var(--ink); box-shadow: var(--elev-2); }
.day__shot img { display: block; width: 100%; height: auto; border-radius: 26px; background: var(--cream); }
.day__when { margin: 0; font: 400 var(--text-xs)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); }
.day__step h3 { margin: 0; font-size: var(--text-xl); }
.day__step p:last-child { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); max-width: 30ch; justify-self: center; }
@media (max-width: 760px) {
  .day { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(72%, 280px); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin-inline: -20px; padding: 4px 20px 16px; -webkit-overflow-scrolling: touch; }
  .day__step { scroll-snap-align: start; }
}

/* ------------------------------------------------------------- meet her -- */
.meet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.meet-card { display: grid; gap: 12px; align-content: start; }
.meet-card__title { font-size: var(--text-xl); }
.meet-card__note { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.meters { display: grid; gap: 12px; margin: 0; }
.meter { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); align-items: center; gap: 12px; }
.meter dt { font-size: var(--text-sm); color: var(--ink-2); }
.meter dd { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; }
.meter dd b { min-width: 7ch; font-size: var(--text-sm); font-weight: 700; text-align: right; }
.meter__bar { position: relative; display: block; height: 10px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; }
.meter__bar::before { content: ''; position: absolute; inset: 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--gold); transition: width .6s var(--ease-out); }
.meter__bar--gold::before { background: var(--gold-deep); }
.bond-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bond-level { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; }
.bond-points { font-size: var(--text-sm); color: var(--ink-2); white-space: nowrap; }
.bond-points b { font-size: var(--text-lg); color: var(--ink); font-variant-numeric: tabular-nums; }
#companion-bond.is-up .bond-level { color: var(--gold-ink); animation: bond-up .9s var(--ease-spring); }
@keyframes bond-up { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 10px; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), transform .22s var(--ease-spring); }
.swatch i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.swatch:hover { border-color: var(--gold); }
.swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: var(--ring); }
.meet-notes { display: grid; gap: 12px; }
.meet-notes li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.meet-notes .icon { flex: none; margin-top: 2px; color: var(--gold-ink); }
.meet-notes strong { color: var(--ink); }
.meet-card--notes .btn { justify-self: start; margin-top: 4px; }
@media (max-width: 760px) { .meet-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ what she can do -- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 44px) 0; }
.feature + .feature { border-top: 1px solid var(--line); }
#can .section__head + .feature { margin-top: var(--space-4); }
.feature--flip .feature__copy { order: 2; }
.feature__copy, .feature__visual { min-width: 0; }
.feature__copy > * + * { margin-top: 12px; }
.feature__copy h3 { font-size: var(--step-2); }
.feature__copy p { max-width: 46ch; color: var(--ink-2); }
.feature__quote { margin: 14px 0 0; padding-left: 14px; border-left: 3px solid var(--gold); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.feature__status { margin-top: 16px !important; }
.feature__status .pill { white-space: normal; text-align: left; line-height: 1.3; }   /* a long status wraps on a 320 px phone */
.feature__visual { display: grid; place-items: center; align-content: center; gap: 16px; min-height: 250px; padding: clamp(18px, 3vw, 28px); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--elev-2); }
.objs { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.obj { display: grid; place-items: center; gap: 8px; min-width: 92px; padding: 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); font: 700 var(--text-xs)/1 var(--font-body); color: var(--ink-2); }
.obj .icon { width: 30px; height: 30px; color: var(--gold-ink); }
.bowl { position: relative; width: 44px; height: 24px; margin-top: 8px; border-radius: 0 0 22px 22px / 0 0 100% 100%; background: linear-gradient(180deg, #EFE6D4, #D9CAB0); box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .08); }
.bowl i { position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 40%; background: #B4803F; }
.bowl i:nth-child(1) { left: 8px; } .bowl i:nth-child(2) { left: 18px; top: -7px; } .bowl i:nth-child(3) { left: 28px; }
.reddot { width: 18px; height: 18px; margin: 6px 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FF7A6B, #E0362A 65%); box-shadow: 0 0 12px 3px rgba(255, 70, 50, .5); }
.lines { display: grid; gap: 8px; width: 100%; max-width: 36ch; margin: 4px 0 0; }
.lines__item { padding: 10px 14px; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) var(--radius-xs); background: var(--surface-2); font-size: var(--text-sm); line-height: 1.4; color: var(--ink); }
.obj--timer { padding: 20px 24px; gap: 12px; }
.timer__ring { width: 68px; height: 68px; border-radius: 50%; background: conic-gradient(var(--gold) calc(var(--p, 0) * 1turn), var(--surface-3) 0); box-shadow: inset 0 0 0 9px var(--surface-1); }
.timer__time { font: 600 var(--step-2)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.timer__label { font-weight: 500; letter-spacing: 0; text-transform: none; }
/* the example conversation: two short exchanges in bubbles, labelled as prewritten */
.feature__visual--chat, .feature__visual--memory { display: block; }
.chat { display: grid; gap: 12px; width: min(100%, 420px); margin-inline: auto; }
.chat__label { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); }
.chat__label .icon { width: 14px; height: 14px; }
.chat__msg { position: relative; max-width: 88%; margin: 0; padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.45; color: var(--ink); }
.chat__msg--you { justify-self: end; border-bottom-right-radius: 4px; background: var(--surface-2); }
.chat__msg--her { justify-self: start; border-bottom-left-radius: 4px; background: var(--gold-soft); }
.chat__who { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ink-3); }
.chat__msg--her .chat__who { color: var(--gold-ink); }
.obj--memory { place-items: stretch; width: min(100%, 360px); margin-inline: auto; padding: 16px; gap: 12px; text-align: left; }
.memory__live { margin: -4px 0 0; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--ok); }
.memory__list li { align-items: baseline; }
.memory__list li span { color: var(--ink-2); }
.memory__list b { text-align: right; overflow-wrap: anywhere; }
.memory__actions { flex-wrap: wrap; justify-content: flex-start; }
.memory__btn { min-height: 36px; cursor: pointer; color: var(--ink); transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.memory__btn:hover { border-color: var(--gold); }
.memory__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.memory__btn--yes { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.memory__confirm { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-1); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); }
.memory__confirm .memory__btn { margin-top: 6px; }
.memory__note { margin: 0; font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
#memory-panel[data-state="live"] .memory__note { display: none; }
html:not(.js) .memory__live, html:not(.js) .memory__actions { display: none; }
.memory__head { font: 600 1rem/1.2 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.memory__list { display: grid; gap: 8px; }
.memory__list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-1); font-size: var(--text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; }
.memory__list b { color: var(--ink); }
.memory__actions { display: flex; justify-content: flex-end; gap: 8px; }
.memory__btn { padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface-1); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); }
.obj--cushions { grid-template-columns: repeat(3, auto); column-gap: 4px; }
.obj--cushions > span:last-child { grid-column: 1 / -1; }
.cush { display: inline-block; width: 30px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.lampo { position: relative; width: 34px; height: 44px; }
.lampo::before { content: ''; position: absolute; left: 50%; top: 0; width: 34px; height: 24px; transform: translateX(-50%); border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 40% 35%, #FFF3D2, #F2D9A3 55%, #D9B778); box-shadow: 0 0 18px 4px rgba(255, 214, 140, .5); }
.lampo::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 6px; height: 22px; transform: translateX(-50%); border-radius: var(--radius-xs); background: #8C6235; }
.lampo i { position: absolute; left: 50%; bottom: 0; width: 20px; height: 4px; transform: translateX(-50%); border-radius: var(--radius-xs); background: #8C6235; }
.wino { width: 36px; height: 46px; border: 3px solid #B07F45; border-radius: var(--radius) var(--radius) var(--radius-xs) var(--radius-xs); background: linear-gradient(180deg, #DDEFF8, #BFE0EC); box-shadow: inset 0 -12px 0 -6px #BBD1A3; }
@media (max-width: 760px) {
  .feature { grid-template-columns: minmax(0, 1fr); gap: 18px; }   /* minmax(0, …): a long line can never widen the page */
  .feature--flip .feature__copy { order: 0; }
  .feature__visual { min-height: 200px; }
}

/* ------------------------------------------------------- the relationship -- */
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.stage { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); box-shadow: var(--elev-1); }
.stage__n { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #E5C68A; border-radius: var(--radius-md); background: var(--gold-soft); font: 600 1rem/1 var(--font-display); color: var(--gold-deep); }
.stage h3 { font-size: var(--text-xl); }
.stage p { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.stage__meta { margin-top: 4px; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .06em; color: var(--ink-3); }
.section__note { display: flex; gap: 12px; align-items: flex-start; max-width: 72ch; margin-top: var(--space-5); padding: 12px 14px; border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--text-sm); color: var(--ink-2); }
.section__note .icon { flex: none; margin-top: 2px; color: var(--ok); }

/* -------------------------------------------------------- recently shipped -- */
.section__head--left { max-width: none; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter { min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink-2); font: 700 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out), transform .22s var(--ease-spring); }
.filter:hover { border-color: var(--gold); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
@media (pointer: coarse) { .filter { min-height: 44px; } }
.shipped__mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); }
.shipped__mark .icon { width: 15px; height: 15px; stroke-width: 2; }
.shipped__mark[data-cat="companion"] { background: var(--gold-soft); color: var(--gold-ink); border-color: #E7C98F; }
.shipped__mark[data-cat="onchain"] { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.shipped__mark[data-cat="product"] { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.shipped__mark[data-cat="community"] { background: #FBECEC; color: #8A3A3A; border-color: #EDC3C3; }
.shipped__item.is-last::after { display: none; }
.shipped__details { margin-top: 4px; font-size: var(--text-sm); }
.shipped__details > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); }
.shipped__details > summary::-webkit-details-marker { display: none; }
.shipped__details > summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.shipped__details[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.shipped__details p { max-width: 62ch; padding: 4px 0 6px; line-height: 1.55; }
.shipped__item code { padding: 1px 5px; border-radius: var(--radius-sm); background: var(--surface-2); font-family: var(--font-mono); font-size: .85em; }
.shipped__empty { padding: 10px 0 12px 26px; font-size: var(--text-sm); color: var(--ink-3); }

/* ------------------------------------------------------------- community -- */
#community .community__links { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-6); }
#community .spotlight-empty { margin-top: var(--space-5); }
@media (max-width: 900px) { #community .community__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #community .community__links { grid-template-columns: minmax(0, 1fr); } }
#community .community__links li, #community .community__links a, #community .community__links a > span { min-width: 0; }
#community .community__links a span { overflow-wrap: anywhere; }   /* a long handle wraps at very large text instead of widening the page */

/* -------------------------------------------------------------- the close -- */
.cta { position: relative; }
.cta__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.cta__room { aspect-ratio: 16 / 10; }                 /* keeps its room before the script draws the room: nothing moves */
.cta__room .room { aspect-ratio: 16 / 10; }
.cta__copy > * + * { margin-top: 16px; }
.cta__copy h2 { font-size: var(--step-3x); }
.cta__copy .btn { margin-top: 24px; }
.cta__fine { max-width: 44ch; font-size: var(--text-sm); color: var(--ink-3); }
.cta__fine a { color: var(--ink); }
html:not(.js) .cta__room { display: none; }
html:not(.js) .cta__grid { grid-template-columns: 1fr; }
@media (max-width: 900px) { .cta__grid { grid-template-columns: 1fr; } .cta__room { max-width: 560px; margin-inline: auto; width: 100%; } }

/* --------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .deck.is-cue .deck__btn { animation: none; border-color: var(--gold); }
  .meter__bar::before, .deck__btn, .swatch, .filter { transition: none; }
  .deck__btn:hover { transform: none; }
  #companion-bond.is-up .bond-level { animation: none; }
}