/* 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; }
.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; }
.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 */
.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 * 1112 / 1005)); bottom: 16%; }
.hero__room .room, .cta__room .room { --seat: calc(26cqh * 400 / 150); }   /* the cushion is one seat wide and the rugs 1.3 / 1.42 seats (companion.css), so they scale with her */
/* 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%, 51cqh); bottom: 14.5%; }
/* 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, a costume sits on it in % of 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-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[aria-pressed="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.deck__btn[aria-pressed="true"] .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-3); transition: color var(--dur-2) var(--ease-out); }
.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__fine { order: 7; }
  .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: 340px) { .deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

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

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