/*
 * The hub, /home (and / once entered): the circle of ten (brief 8), then
 * the call band, the plain index of all nine, what Laura takes off your
 * plate, her apps and her own words. Phone first; the plate with its ten
 * annotations from 1180 px wide and 640 px tall. Geometry numbers come from
 * geometry.css (scripts/make-stamp.mjs).
 */

/* ===================== the circle ===================== */
.circle-stage { position: relative; perspective: 1400px; }
.circle-tilt {
  transform: rotateX(calc(var(--tx, 0) * 11deg)) rotateY(calc(var(--ty, 0) * 11deg));
  transition: transform 520ms var(--ease-out);
  transform-style: flat;
}
.plate[data-lit] .circle-tilt { transition-duration: 420ms; }
.circle-art { display: block; width: 100%; height: auto; overflow: visible; }
.c-paper { fill: var(--raised); stroke: var(--hair); stroke-width: 1; }
.c-ticks { fill: none; stroke: var(--boundary); stroke-width: 1; opacity: .8; }
.c-line { fill: none; stroke: var(--boundary); stroke-width: 1.2; }
.c-centre { fill: var(--tint); }
.seg-wash { fill: var(--seg-wash); }
.seg-turn--organise { --seg-wash: var(--wash-organise); } .seg-turn--simplify { --seg-wash: var(--wash-simplify); }
.seg-turn--juggle { --seg-wash: var(--wash-juggle); } .seg-turn--declutter { --seg-wash: var(--wash-declutter); }
.seg-turn--stage { --seg-wash: var(--wash-stage); } .seg-turn--style { --seg-wash: var(--wash-style); }
.seg-turn--celebrate { --seg-wash: var(--wash-celebrate); } .seg-turn--design { --seg-wash: var(--wash-design); }
.seg-turn--share { --seg-wash: var(--wash-share); } .seg-turn--apps { --seg-wash: var(--paper-tint); }
.seg-turn, .seg { transform-box: view-box; transform-origin: 50% 50%; }
.seg { transition: transform 180ms var(--ease-out), opacity 180ms ease-out; }
.seg-pat { transition: opacity 180ms ease-out; opacity: .82; }
/* the nine close up into ten as the apps segment slides in (3.3, 8.1) */
.seg-turn { transition: transform 360ms var(--ease-out), opacity 360ms ease-out; }
.plate.is-nine .seg-turn { transform: rotate(var(--nine)); }
.plate.is-nine .seg-turn--apps { transform: scale(.6); opacity: 0; }
/* pointing or focusing a segment: the circle tilts toward it (8.2) */
.plate[data-lit] .seg { opacity: .7; }
.plate[data-lit="organise"] .seg--organise, .plate[data-lit="simplify"] .seg--simplify, .plate[data-lit="juggle"] .seg--juggle,
.plate[data-lit="declutter"] .seg--declutter, .plate[data-lit="stage"] .seg--stage, .plate[data-lit="style"] .seg--style,
.plate[data-lit="celebrate"] .seg--celebrate, .plate[data-lit="design"] .seg--design, .plate[data-lit="share"] .seg--share,
.plate[data-lit="apps"] .seg--apps {
  opacity: 1;
  transform: translate(calc(var(--dx) * 6px), calc(var(--dy) * 6px)) scale(1.05);
}
.plate[data-lit="organise"] .seg--organise .seg-pat, .plate[data-lit="simplify"] .seg--simplify .seg-pat, .plate[data-lit="juggle"] .seg--juggle .seg-pat,
.plate[data-lit="declutter"] .seg--declutter .seg-pat, .plate[data-lit="stage"] .seg--stage .seg-pat, .plate[data-lit="style"] .seg--style .seg-pat,
.plate[data-lit="celebrate"] .seg--celebrate .seg-pat, .plate[data-lit="design"] .seg--design .seg-pat, .plate[data-lit="share"] .seg--share .seg-pat,
.plate[data-lit="apps"] .seg--apps .seg-pat { opacity: 1; }
.plate.is-arriving .seg { opacity: 1; }

.circle-centre {
  position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 0.5rem; text-align: center; pointer-events: none;
}
.circle-tagline { font-size: clamp(1.05rem, 0.7rem + 1.8vw, 2.6rem); line-height: 1.08; color: var(--ink); text-wrap: balance; }
.circle-line { font-family: var(--face-note); font-weight: 600; font-size: clamp(0.78rem, 0.6rem + 0.5vw, 1rem); line-height: 1.35; color: var(--ink-2); max-width: 22ch; }

/* phone labels round the ring (10.2) */
.clabel-text { font-family: var(--face-caps); font-weight: 650; font-size: 25px; letter-spacing: .04em; fill: var(--ink); }
.clabel--style .clabel-text { font-family: var(--face-style); font-weight: 400; letter-spacing: 0; font-size: 27px; }
.clabel--celebrate .clabel-text { font-family: var(--face-celebrate); font-style: italic; font-weight: 400; font-size: 29px; letter-spacing: 0; }
.clabel--stage .clabel-text { font-family: var(--face-head); font-weight: 600; letter-spacing: 0; }
.clabel--organise .clabel-text { fill: var(--say-organise); letter-spacing: -.01em; }
.clabel { transform-box: view-box; transform-origin: 50% 50%; }

/* ===================== the doors ===================== */
.doors { margin: 0; padding: 0; list-style: none; }
.door { color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.door-hit { position: absolute; pointer-events: none; overflow: visible; }
.door-hit path { pointer-events: all; fill: transparent; cursor: pointer; }
.door:focus-visible { outline: none; }
.door:focus-visible .door-hit path { stroke: var(--focus); stroke-width: 3; }
.door-name { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--face-caps); font-weight: 650; font-size: 1.3rem; line-height: 1.1; color: var(--ink); }
.door-trade { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.door-line { display: block; margin-top: 3px; font-size: 0.92rem; line-height: 1.38; color: var(--ink-2); }
.door-price { display: block; margin-top: 4px; font-size: 0.92rem; font-weight: 650; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.door--organise .door-name { color: var(--say-organise); letter-spacing: -0.01em; }
.door--style .door-name { font-family: var(--face-style); font-weight: 400; letter-spacing: 0; font-size: 1.45rem; }
.door--celebrate .door-name { font-family: var(--face-celebrate); font-style: italic; font-weight: 400; font-size: 1.6rem; letter-spacing: 0; }
.door--stage .door-name { font-family: var(--face-head); font-weight: 600; }
.door--juggle .door-name { font-weight: 720; }
.door-press .seal-icon { --seal-size: 1.3em; }
.door:hover .door-name, .door:focus-visible .door-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }

/* the words that do what they say (8.3): letters set by home.js, hidden from assistive technology behind the word */
.verb-l { display: inline-block; }

.plate-call { display: grid; justify-items: center; text-align: center; padding: var(--s-5) var(--gutter) 0; }

/* ---------- phone and tablet: the circle fills the width, labels on the ring ---------- */
.plate { position: relative; padding: var(--s-3) var(--gutter) var(--s-6); }
.plate .circle-stage { width: min(100%, 560px); margin-inline: auto; }
.plate .door-hit { inset: auto; left: 50%; top: var(--s-3); width: min(100% - 2 * var(--gutter), 560px); transform: translateX(-50%); aspect-ratio: 1; }
.plate .door-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plate-leaders { display: none; }

/* ---------- the plate: the circle and its ten annotations, one screen (8.1) ---------- */
@media (min-width: 1180px) and (min-height: 640px) {
  .plate {
    --u: clamp(0.8px, min((100vw - 48px) / 1360, (100svh - var(--header-h) - 40px) / 720), 1.3px);
    width: calc(1360 * var(--u)); height: calc(790 * var(--u)); margin: 0 auto; padding: 0;
  }
  .plate .circle-stage, .plate .door-hit { position: absolute; left: calc(340 * var(--u)); top: calc(20 * var(--u)); width: calc(680 * var(--u)); height: calc(680 * var(--u)); margin: 0; transform: none; }
  .plate .circle-stage { z-index: 1; }
  .plate .door-hit { z-index: 2; }
  .c-labels { display: none; }
  .plate-leaders { display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(720 * var(--u)); pointer-events: none; overflow: visible; z-index: 0; }
  .leader { fill: none; stroke: var(--boundary); stroke-width: 1; transition: stroke 180ms ease-out, opacity 180ms ease-out; vector-effect: non-scaling-stroke; }
  .plate[data-lit] .leader { opacity: .45; }
  .plate[data-lit="organise"] .leader--organise, .plate[data-lit="simplify"] .leader--simplify, .plate[data-lit="juggle"] .leader--juggle,
  .plate[data-lit="declutter"] .leader--declutter, .plate[data-lit="stage"] .leader--stage, .plate[data-lit="style"] .leader--style,
  .plate[data-lit="celebrate"] .leader--celebrate, .plate[data-lit="design"] .leader--design, .plate[data-lit="share"] .leader--share,
  .plate[data-lit="apps"] .leader--apps { opacity: 1; stroke: var(--lit-say, var(--ink)); stroke-width: 2; }
  .plate[data-lit="organise"] { --lit-say: var(--say-organise); } .plate[data-lit="simplify"] { --lit-say: var(--say-simplify); }
  .plate[data-lit="juggle"] { --lit-say: var(--say-juggle); } .plate[data-lit="declutter"] { --lit-say: var(--say-declutter); }
  .plate[data-lit="stage"] { --lit-say: var(--say-stage); } .plate[data-lit="style"] { --lit-say: var(--say-style); }
  .plate[data-lit="celebrate"] { --lit-say: var(--say-celebrate); } .plate[data-lit="design"] { --lit-say: var(--say-design); }
  .plate[data-lit="share"] { --lit-say: var(--say-share); }
  .plate .door-text {
    position: absolute; z-index: 3; width: calc(290 * var(--u)); height: auto; overflow: visible; clip: auto; white-space: normal;
    top: calc((var(--slot-y) - 16) * var(--u));
    padding: calc(4 * var(--u)) 0;
  }
  .door--organise { --say: var(--say-organise); } .door--simplify { --say: var(--say-simplify); } .door--juggle { --say: var(--say-juggle); }
  .door--declutter { --say: var(--say-declutter); } .door--stage { --say: var(--say-stage); } .door--style { --say: var(--say-style); }
  .door--celebrate { --say: var(--say-celebrate); } .door--design { --say: var(--say-design); } .door--share { --say: var(--say-share); } .door--apps { --say: var(--ink); }
  .door--organise .door-text, .door--simplify .door-text, .door--juggle .door-text, .door--declutter .door-text, .door--stage .door-text { left: calc(1030 * var(--u)); }
  .door--share .door-text, .door--design .door-text, .door--celebrate .door-text, .door--style .door-text, .door--apps .door-text { left: calc(40 * var(--u)); text-align: right; }
  .door--share .door-name, .door--design .door-name, .door--celebrate .door-name, .door--style .door-name, .door--apps .door-name { justify-content: flex-end; }
  .door-name { font-size: calc(23 * var(--u)); }
  .door--style .door-name { font-size: calc(26 * var(--u)); }
  .door--celebrate .door-name { font-size: calc(28 * var(--u)); }
  .door-line, .door-price { font-size: max(13px, calc(15 * var(--u))); }
  .door-trade { font-size: max(12px, calc(13 * var(--u))); }
  .door:hover .door-name, .door:focus-visible .door-name { color: var(--say); }
  .door:focus-visible .door-text { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: 6px; }
  .circle-tagline { font-size: calc(40 * var(--u)); }
  .circle-line { font-size: max(13px, calc(16 * var(--u))); }
  .plate-call { position: absolute; left: 0; right: 0; top: calc(706 * var(--u)); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: var(--s-4); row-gap: calc(8 * var(--u)); }
  .plate-call .call-note, .plate-call .legal-line { margin: 0; }
  .plate-call .legal-line { flex-basis: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .circle-tilt { transform: none; transition: none; }
  .seg, .seg-turn { transition: opacity 180ms ease-out; }
  .plate[data-lit] .seg { transform: none; }
}

/* ===================== the bands under the circle ===================== */
.band { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.band .pair { margin-bottom: var(--s-6); }
.band--call { background: var(--tint); }
.band-call { display: grid; gap: var(--s-6); }
.next-steps { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.next-steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-3); align-items: baseline; }
.next-mark { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--boundary); border-radius: 50%; font-family: var(--face-head); font-weight: 600; font-size: 1.1rem; }
@media (min-width: 900px) {
  .band-call { grid-template-columns: 1fr 1.3fr; align-items: start; }
  .band-call .pair { grid-row: span 2; }
  .next-steps { grid-template-columns: 1fr 1fr; }
}

.index-groups { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .index-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.index-group .caps { margin: 0 0 var(--s-2); }
.index-group .caps + .index-list + .caps, .index-list + .caps { margin-top: var(--s-6); }
.index-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.index-row {
  display: grid; grid-template-columns: 44px 1fr; column-gap: var(--s-3); row-gap: 2px; align-items: start;
  padding: var(--s-3) var(--s-2); border-top: 1px solid var(--hair); color: var(--ink); text-decoration: none; border-radius: 0;
  transition: background-color 180ms ease-out;
}
.index-row .seal-icon { --seal-size: 44px; grid-row: span 3; transition: transform 320ms var(--ease-out); }
.index-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.12rem; }
.index-trade { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); margin-left: 0.3em; }
.index-line { font-size: 0.95rem; line-height: 1.4; color: var(--ink-2); }
.index-price { font-weight: 650; font-size: 0.95rem; font-variant-numeric: tabular-nums lining-nums; }
.index-row:hover { background: var(--raised); }
.index-row:hover .seal-icon { transform: rotate(30deg); }
.index-row--organise .index-name { color: var(--say-organise); }
.index-row--style .index-name { font-family: var(--face-style); font-weight: 400; }
.index-row--celebrate .index-name { font-family: var(--face-celebrate); font-style: italic; font-weight: 400; font-size: 1.3rem; }
.index-row--stage .index-name { font-family: var(--face-head); font-weight: 600; }
.index-legal { margin-top: var(--s-5); }

.plate-list { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .plate-list { grid-template-columns: 1fr 1.2fr; align-items: center; } }

.app-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.app-tile { position: relative; display: grid; gap: var(--s-2); height: 100%; padding: var(--s-5); border: 1px solid var(--hair); border-radius: calc(var(--radius) + 4px); background: var(--raised); color: var(--ink); text-decoration: none; transition: border-color 180ms ease-out, transform 180ms var(--ease-out); }
.app-tile:hover { border-color: var(--boundary); }
.app-stamp .seal-icon { --seal-size: 48px; }
.app-name { font-family: var(--face-caps); font-weight: 650; font-size: 1.15rem; }
.app-line { color: var(--ink); }
.app-twin { font-size: var(--step-small); color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .app-tile:hover .app-stamp .seal-icon { animation: tile-press 260ms var(--ease-out); }
}
@keyframes tile-press { from { transform: scale(1.2); opacity: .4; } }

.band--words { background: var(--tint); }
.words { display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.words-quotes { display: grid; gap: var(--s-5); max-width: 46rem; }
.words-quotes p { font-family: var(--face-head); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.35; }
.words-tagline { font-size: var(--step-1); color: var(--ink); }

/* ===================== the arrival (3.3): names one by one, then details ===================== */
.door-text, .door-line, .door-price, .door-trade, .leader, .clabel { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.plate.is-waiting .door-text { opacity: 0; }
.plate.is-waiting .door.is-in .door-text { opacity: 1; }
.plate.is-waiting .leader { opacity: 0; }
.plate.is-waiting .leader.is-in { opacity: 1; }
.plate.is-waiting:not(.is-detailed) :is(.door-line, .door-price, .door-trade) { opacity: 0; transform: translateY(-8px); }
.plate.is-detailed :is(.door-line, .door-price, .door-trade) { transition-delay: var(--d, 0ms); }
.plate.is-waiting .clabel { opacity: 0; transform: rotate(-8deg); }
.plate.is-waiting .clabel.is-in { opacity: 1; transform: none; transition-duration: 520ms; }
.plate.is-snap *, .plate.is-snap { transition-duration: 200ms !important; transition-delay: 0ms !important; animation-duration: 200ms !important; }
@media (prefers-reduced-motion: no-preference) {
  .plate.is-short .door-text, .plate.is-short .clabel { animation: rise 400ms var(--ease-out) both; }
}

/* the words that do what they say (8.3): one move each, under a second */
.verb { position: relative; display: inline-block; white-space: nowrap; }
.verb-l { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .door-name.is-verb[data-verb="line-up"] .verb-l { animation: v-line-up 600ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="hop"] .verb-l { animation: v-hop 520ms var(--ease-out) both; animation-delay: calc(var(--i) * 80ms); }
  .door-name.is-verb[data-verb="stack"] .verb-l { animation: v-stack 620ms var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
  .door-name.is-verb[data-verb="rise"] .verb { animation: v-rise 640ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="rise"] .verb::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 1px; background: var(--say-stage); transform-origin: left; animation: v-line 640ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="rise"] .verb::before { content: ""; position: absolute; inset: -0.4em -0.6em; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--ink-stage) 22%, transparent), transparent); animation: v-glow 900ms ease-out both; z-index: -1; }
  .door-name.is-verb[data-verb="shed"] .verb::before, .door-name.is-verb[data-verb="shed"] .verb::after { content: ""; position: absolute; top: 0.1em; width: 0.5em; height: 0.5em; border-top: 2px solid var(--ink-simplify); border-radius: 50% 50% 0 0; animation: v-shed 520ms var(--ease-in) both; }
  .door-name.is-verb[data-verb="shed"] .verb::before { left: -0.45em; transform: rotate(-30deg); }
  .door-name.is-verb[data-verb="shed"] .verb::after { right: -0.45em; transform: rotate(30deg); }
  .door-name.is-verb[data-verb="try-on"] .verb { animation: v-settle 820ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="try-on"] .verb::before { content: attr(data-word); position: absolute; left: 0; top: 0; font-family: var(--face-head); font-weight: 600; animation: v-try 820ms ease-out both; }
  .door-name.is-verb[data-verb="try-on"] .verb-l { animation: v-try-in 820ms ease-out both; }
  .door-name.is-verb[data-verb="spark"] .verb { animation: v-hop 520ms var(--ease-out) both; }
  .verb-dot { position: absolute; width: 5px; height: 5px; border-radius: 1px; background: var(--ink-celebrate); opacity: 0; transform: rotate(45deg); }
  .verb-dot--0 { right: -0.5em; top: -0.1em; } .verb-dot--1 { right: -0.8em; top: 0.4em; } .verb-dot--2 { right: -0.35em; top: 0.85em; }
  .door-name.is-verb[data-verb="spark"] .verb-dot { animation: v-spark 720ms ease-out both; }
  .door-name.is-verb[data-verb="spark"] .verb-dot--1 { animation-delay: 80ms; } .door-name.is-verb[data-verb="spark"] .verb-dot--2 { animation-delay: 160ms; }
  .door-name.is-verb[data-verb="register"] .verb::before, .door-name.is-verb[data-verb="register"] .verb::after { content: attr(data-word); position: absolute; left: 0; top: 0; pointer-events: none; mix-blend-mode: multiply; }
  .door-name.is-verb[data-verb="register"] .verb::before { color: var(--ink-design); animation: v-ghost-a 560ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="register"] .verb::after { color: var(--ink-stage); animation: v-ghost-b 560ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="copies"] .verb::before, .door-name.is-verb[data-verb="copies"] .verb::after { content: attr(data-word); position: absolute; left: 0; top: 0; color: var(--ink-share); pointer-events: none; animation: v-copy 600ms var(--ease-out) both; }
  .door-name.is-verb[data-verb="copies"] .verb::after { animation-delay: 90ms; }
  .door-name.is-verb[data-verb="press"] .door-press .seal-icon { animation: v-press 260ms var(--ease-out) both; }
  .clabel.is-verb { animation: v-clabel 600ms var(--ease-out); }
}
@keyframes v-line-up { from { transform: translate(var(--ox), var(--oy)) rotate(var(--or)); opacity: .3; } }
@keyframes v-hop { 40% { transform: translateY(-0.32em); } }
@keyframes v-stack { from { transform: translateY(-0.7em) rotate(var(--or)); opacity: 0; } 70% { transform: translateY(0.05em); } }
@keyframes v-rise { from { transform: translateY(0.3em); } }
@keyframes v-line { from { transform: scaleX(0); } }
@keyframes v-glow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v-shed { from { opacity: 1; } to { opacity: 0; translate: 0 0.8em; } }
@keyframes v-settle { 60% { transform: scale(1.02); } }
@keyframes v-try { 0%, 40% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes v-try-in { 0%, 40% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes v-spark { 0% { opacity: 0; transform: rotate(45deg) scale(.4); } 40% { opacity: 1; transform: rotate(45deg) scale(1.2); } 100% { opacity: 0; transform: rotate(45deg) scale(.8) translate(4px, -4px); } }
@keyframes v-ghost-a { from { transform: translate(-6px, -3px); opacity: .9; } to { transform: none; opacity: 0; } }
@keyframes v-ghost-b { from { transform: translate(6px, 3px); opacity: .9; } to { transform: none; opacity: 0; } }
@keyframes v-copy { from { transform: none; opacity: .5; } to { transform: translateX(1.4em); opacity: 0; } }
@keyframes v-press { from { transform: scale(1.25); opacity: .3; } }
@keyframes v-clabel { 40% { transform: translateY(-4px); } }

/* ===================== the phone's reading card (10.2) ===================== */
.reading-card { display: none; }
@media not ((min-width: 1180px) and (min-height: 640px)) {
  .reading-card { display: grid; gap: 2px; width: min(100%, 30rem); margin: var(--s-3) auto 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--hair); border-radius: var(--radius); background: var(--raised); text-align: center; opacity: 0; transform: translateY(-6px); transition: opacity 160ms ease-out, transform 160ms var(--ease-out); pointer-events: none; min-height: 5.2rem; }
  .reading-card.is-shown { opacity: 1; transform: none; }
  .reading-name { font-family: var(--face-caps); font-weight: 650; }
  .reading-line { font-size: var(--step-small); color: var(--ink-2); }
  .reading-price { font-weight: 650; font-size: var(--step-small); }
}