/* The Round, the hub. Phone first; the tablet from 720 px; the plate from 1180 px wide and 640 px tall. */

/* ---------- The seal's moving parts ---------- */
.seal { --turn: 0deg; position: relative; }
.seal-turn, .dial-name {
  transition: transform var(--turn-duration, var(--t-turn)) var(--ease-turn);
}
.seal.is-arriving .seal-turn, .seal.is-arriving .dial-name { transition-duration: 1250ms; transition-timing-function: var(--ease-out); }
.seal.is-dragging .seal-turn, .seal.is-dragging .dial-name, .seal.is-instant .seal-turn, .seal.is-instant .dial-name { transition: none; }
.seal-turn { position: absolute; transform: rotate(var(--turn)); transform-origin: 50% 50%; }
.seal-flip { position: absolute; inset: 0; transition: transform var(--t-flip) var(--ease-turn); }
.plate.is-flipping .seal-flip, .plate[data-face="back"] .seal-flip { transform-style: preserve-3d; }
.seal-svg--back { visibility: hidden; }
.plate.is-flipping .seal-svg--back, .plate[data-face="back"] .seal-svg--back { visibility: visible; }
.plate[data-face="back"]:not(.is-flipping) .seal-svg--front { visibility: hidden; }
.seal-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.seal-svg--back { transform: rotateY(180deg); }
.plate[data-face="back"] .seal-flip { transform: rotateY(180deg); }
.seal-pointer { position: absolute; left: 50%; width: 3.2%; min-width: 16px; transform: translateX(-50%); fill: var(--seal); z-index: 2; }
.seg-hit { cursor: pointer; }
.seal-svg--back .rim-name { letter-spacing: 0.12em; }
@media (prefers-reduced-motion: reduce) {
  .seal-flip { transition: none; }
  .plate[data-face="back"] .seal-flip { transform: none; }
  .seal-svg--back { transform: none; opacity: 0; transition: opacity 180ms ease-out; }
  .seal-svg--front { transition: opacity 180ms ease-out; }
  .plate[data-face="back"] .seal-svg--back { opacity: 1; }
  .plate[data-face="back"] .seal-svg--front { opacity: 0; }
}

/* The two faces of every annotation and of the centre. */
.ann-face, .centre-face { transition: opacity 200ms ease-out, visibility 0s 200ms; }
.ann-face--back, .centre-face--back { opacity: 0; visibility: hidden; }
.plate[data-face="back"] .ann-face--front, .plate[data-face="back"] .centre-face--front { opacity: 0; visibility: hidden; }
.plate[data-face="back"] .ann-face--back, .plate[data-face="back"] .centre-face--back { opacity: 1; visibility: visible; transition: opacity 200ms ease-out 120ms, visibility 0s; }
.ann { position: relative; display: block; text-decoration: none; color: var(--ink); }
.ann-face--back { position: absolute; inset: 0 0 auto 0; }
.plate[data-face="back"] .ann-face--back { position: relative; }
.plate[data-face="back"] .ann-face--front { position: absolute; inset: 0 0 auto 0; }
.centre-face--back { position: absolute; inset: 0; display: grid; place-content: center; }
.plate[data-face="back"] .centre-face--back { position: relative; }
.plate[data-face="back"] .centre-face--front { position: absolute; inset: 0; }

.ann-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.area-mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--area); flex: none; align-self: center; }
.ann-name { font-family: var(--face-family); font-weight: 650; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em; transition: color var(--t-swap) ease-out; }
.ann-trade { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.ann-line { display: block; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); margin-top: 3px; }
.ann .price { margin-top: 6px; font-size: 0.9375rem; }
.ann .price-note { display: block; margin-top: 2px; }
.app-line { display: block; font-size: 0.875rem; line-height: 1.4; margin-top: 4px; }
.app-line b { font-weight: 650; color: var(--ink); }
.app-line .price-label { margin-left: 4px; }
.ann:hover .ann-name, .ann:focus-visible .ann-name { color: var(--area); }
.arc-title { font-family: var(--face-family); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.arc-title .alt { display: none; }
.plate[data-face="back"] .arc-title .main { display: none; }
.plate[data-face="back"] .arc-title .alt { display: inline; }

.centre-mono { width: 30px; height: 36px; color: var(--ink); }
.seal-centre h1 { font-size: clamp(2.125rem, 1.4rem + 3.6vw, 2.75rem); }
.lede { font-size: 1.125rem; line-height: 1.45; color: var(--ink-2); margin-top: var(--s-3); }
.lede strong { color: var(--ink); }
.centre-call { margin-top: var(--s-5); }
.centre-back-lines { display: grid; gap: var(--s-2); }
.centre-back-lines p:first-child { font-family: var(--face-family); font-weight: 650; font-size: 1.5rem; line-height: 1.15; color: var(--ink); letter-spacing: -0.01em; }
.centre-back-lines p { color: var(--ink-2); }
.centre-back-links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.face-switch { margin-top: var(--s-5); }

/* ---------- Phone: the answer, the card, the dial, the list of nine ---------- */
.plate { padding: var(--s-4) var(--gutter) 0; }
@media (max-width: 719px) {
  .centre-mono { display: none; }
  .seal-centre h1 { font-size: clamp(2rem, 1.3rem + 3.4vw, 2.5rem); }
  .lede { font-size: 1.0625rem; margin-top: var(--s-2); }
  .centre-call { margin-top: var(--s-4); }
  .centre-call .call { width: 100%; }
  .face-switch { margin-top: var(--s-4); display: grid; }
  .reading-card { margin-top: var(--s-4); padding: var(--s-4); }
  .card-name { font-size: 1.375rem; }
  .card-go { margin-top: var(--s-3); min-height: 48px; }
  .header-link--apps { display: none; }
  .brand-name { white-space: nowrap; }
}
.seal { display: flex; flex-direction: column; }
.seal-centre { position: relative; }
.reading-card {
  margin-top: var(--s-6); padding: var(--s-4) var(--s-5) var(--s-5);
  border-radius: var(--radius); background: var(--area-tint, var(--paper-raised)); position: relative; overflow: hidden;
}
.reading-card .card-face { animation: card-in 220ms var(--ease-out) both; }
.reading-card[data-from="left"] .card-face { --from: -16px; }
.reading-card[data-from="right"] .card-face { --from: 16px; }
@keyframes card-in { from { transform: translateX(var(--from, 0)); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .reading-card .card-face { animation: card-fade 120ms ease-out both; } @keyframes card-fade { from { opacity: .3; } } }
.card-name { font-family: var(--face-family); font-weight: 650; font-size: 1.625rem; line-height: 1.1; letter-spacing: -0.015em; }
.card-trade { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.card-line { margin-top: var(--s-2); font-size: 1rem; line-height: 1.45; }
.reading-card .price { margin-top: var(--s-3); }
.card-go { margin-top: var(--s-4); width: 100%; justify-content: space-between; background: var(--ink); color: var(--ground); border-color: var(--ink); min-height: 52px; font-size: 1rem; }
.card-go:hover { background: var(--ink); opacity: .92; }
.seal-stage { position: relative; height: min(64vw, 320px); margin: 0 calc(-1 * var(--gutter)); overflow: hidden; perspective: 2400px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.seal-stage .seal-turn, .dial-names { width: 150vw; max-width: 680px; aspect-ratio: 1; left: 50%; top: 18px; translate: -50% 0; }
.seal-stage .seal-pointer { top: 0; width: 18px; }
.plate-layer { display: none; }
.dial-names { position: absolute; container-type: inline-size; pointer-events: none; }
.dial-name {
  position: absolute; left: 50%; top: 50%; pointer-events: auto;
  min-height: var(--target); min-width: var(--target); padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent;
  font-family: var(--face-family); font-weight: 650; font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--ink-2);
  transform: translate(-50%, -50%) rotate(calc(var(--a) + var(--turn))) translateY(-39.1cqi) rotate(calc(-1 * (var(--a) + var(--turn)))) scale(calc(1 + var(--lit, 0) * 0.06));
}
.dial-name[aria-pressed="true"] { color: var(--ink); }
.dial-name { background: var(--ground); box-shadow: 0 0 0 1px var(--line-strong); min-height: 36px; padding: 0 14px; transition-property: transform, background-color, color; }
.dial-name[aria-pressed="true"] { background: var(--ink); color: var(--ground); box-shadow: none; }
@media (any-pointer: coarse) { .dial-name { min-height: var(--target); } }
.seal-stage .rim-names, .seal-stage .arc-labels { display: none; }
.seal-stage .bezel { stroke-width: 2.2; }

.arc { margin-top: var(--s-6); }
.arc + .arc { margin-top: var(--s-5); }
.arc-title { margin-bottom: var(--s-2); }
.arc .ann { display: grid; grid-template-columns: 1fr 20px; column-gap: var(--s-3); padding: var(--s-4) var(--s-1) var(--s-4) 0; min-height: 56px; border-top: 1px solid var(--line); }
.arc .ann::after { content: ""; position: absolute; left: -10px; top: 50%; width: 4px; height: 28px; margin-top: -14px; border-radius: 4px; background: var(--area); transform: scaleY(var(--faced, 0)); transition: transform var(--t-swap) var(--ease-out); }
.arc .ann::before { content: ""; grid-column: 2; grid-row: 1; align-self: center; width: 10px; height: 10px; border-right: 2px solid var(--ink-2); border-top: 2px solid var(--ink-2); transform: rotate(45deg); justify-self: center; }
.arc .ann-face { grid-column: 1; grid-row: 1; }
.arc .ann:active { background: var(--ground-raised); }
.arc-list { border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .arc.lt-arrived .area-mark { animation: mark-in 320ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 55ms); }
}
@keyframes mark-in { from { transform: scale(.3); } }
.days-legal { margin-top: var(--s-3); }

/* ---------- Tablet: the whole seal, the answer in its centre, the list beneath ---------- */
@media (min-width: 720px) {
  .plate { padding-top: var(--s-6); }
  .seal { width: min(86vw, 660px); aspect-ratio: 1; margin: 0 auto; display: block; container-type: inline-size; }
  .seal-stage { position: absolute; inset: 0; height: auto; margin: 0; overflow: visible; touch-action: pan-y; }
  .seal-stage .seal-turn { width: 100%; max-width: none; top: 0; left: 0; translate: none; inset: 0; }
  .seal-stage .seal-pointer { top: -0.2%; width: 3.2%; }
  .dial-names, .reading-card { display: none; }
  .seal-stage .rim-names, .seal-stage .arc-labels { display: inline; }
  .seal-stage .bezel { stroke-width: 1.6; }
  .seal-centre { position: absolute; inset: 20%; z-index: 3; display: grid; place-content: center; text-align: center; pointer-events: none; }
  .seal-centre a, .seal-centre button { pointer-events: auto; }
  .centre-face--front { display: grid; justify-items: center; }
  .centre-mono { width: 4.6cqi; height: 5.5cqi; margin-bottom: 1.6cqi; }
  .seal-centre h1 { font-size: clamp(1.5rem, 5.3cqi, 3.25rem); max-width: 15ch; }
  .lede { font-size: clamp(0.9375rem, 2.3cqi, 1.1875rem); max-width: 30ch; margin-top: 1.4cqi; }
  .centre-call { margin-top: 2.6cqi; display: grid; justify-items: center; }
  .centre-call .call-note { margin-top: 1cqi; }
  .face-switch { margin: 2.4cqi auto 0; }
  .centre-back-lines p:first-child { font-size: clamp(1.25rem, 3.6cqi, 2rem); }
  .centre-back-lines p { font-size: clamp(0.875rem, 2.1cqi, 1.0625rem); max-width: 32ch; margin: 0 auto; }
  .centre-back-links { justify-content: center; }
  .arcs-tablet { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-6); max-width: 960px; margin: var(--s-6) auto 0; }
  .arc, .arc + .arc { margin-top: var(--s-5); }
}

/* ---------- The plate: the seal and its nine annotations, one screen ---------- */
@media (min-width: 1180px) and (min-height: 640px) {
  .plate {
    --D: clamp(520px, min((100svh - var(--header-h) - 150px) / 1.0648, (100vw - 2 * var(--gutter) - 2 * 280px) / 1.13), 920px);
    --gap: calc(var(--D) * 0.0648);
    display: grid; justify-content: center;
    grid-template-columns: minmax(250px, 34ch) var(--D) minmax(250px, 34ch);
    grid-template-areas: "work seal home" ". days .";
    column-gap: var(--gap); row-gap: var(--gap);
    padding: var(--s-6) var(--gutter) var(--s-5);
  }
  .arcs-tablet { display: contents; }
  .seal { grid-area: seal; width: var(--D); height: var(--D); margin: 0; }
  .plate-layer { display: block; max-width: none; position: absolute; left: calc(-1 * var(--gap)); top: 0; width: calc(100% + 2 * var(--gap)); height: calc(100% + var(--gap)); overflow: visible; pointer-events: none; z-index: 1; }
  .leader { fill: none; stroke: var(--line-strong); stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke var(--t-swap) ease-out, opacity var(--t-swap); opacity: calc(.75 + var(--lit, 0) * .25); }
  .plate:has(.ann:hover, .ann:focus-visible) .leader { opacity: .35; }
  .plate .leader { --l: var(--lit, 0); }
  .plate .leader { stroke: color-mix(in srgb, var(--area) calc(var(--lit, 0) * 100%), var(--line-strong)); }
  .plate:has(.ann:hover, .ann:focus-visible) .leader { opacity: calc(.35 + var(--lit, 0) * .65); }
  .arc, .arc + .arc { position: relative; margin: 0; height: var(--D); }
  .arc--work { grid-area: work; text-align: right; }
  .arc--home { grid-area: home; }
  .arc--days { grid-area: days; height: auto; text-align: center; justify-self: center; width: min(64ch, calc(100% + 40ch)); }
  .arc--days .arc-title { display: none; }
  .arc--days .ann-face--front { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px var(--s-3); }
  .arc--days .ann-line { margin: 0; max-width: none; }
  .arc--days .ann-head { flex: none; }
  .arc--days .price { margin: 0; }
  .arc--days .ann .price-note { display: block; width: 100%; }
  .arc--days .days-legal { margin-top: 2px; }
  .arc-title { position: absolute; top: -1.9rem; left: 0; right: 0; margin: 0; }
  .arc--days .arc-title { position: static; margin-bottom: var(--s-2); }
  .arc-list { border: 0; }
  .arc .ann { position: absolute; left: 0; right: 0; top: var(--anchor); display: block; min-height: 0; padding: 0; border: 0; margin-top: -0.8rem; }
  .arc--days .ann { position: relative; top: 0; margin: 0; }
  .arc .ann::before, .arc .ann::after { display: none; }
  .arc--work .ann-head { justify-content: flex-end; }
  .arc--work .ann-head .area-mark { order: 3; }
  .arc--work .price { justify-content: flex-end; }
  .arc--days .ann-head, .arc--days .price { justify-content: center; }
  .ann-name { font-size: 1.375rem; }
  .ann-line { max-width: 34ch; }
  .arc--work .ann-line { margin-left: auto; }
  .arc--days .ann-line { margin-inline: auto; }
  .ann:active { transform: scale(.985); }
  .seal-centre { inset: 21%; }
  .seal-stage .seal-pointer { top: 0.1%; }
}

/* ---------- Under the seal: the call, Gift Trix, Laura's own words ---------- */
.under { display: grid; gap: var(--s-7); padding: var(--s-8) var(--gutter) var(--s-8); }
@media (min-width: 960px) { .under { grid-template-columns: 1fr 1.25fr 1fr; gap: var(--s-6); max-width: 1440px; margin: 0 auto; align-items: start; } }
.under h2 { font-size: var(--step-2); margin-bottom: var(--s-3); }
.under .band { position: relative; }
.steps { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-4); align-items: center; margin: var(--s-4) 0 var(--s-5); }
.steps-svg { width: 120px; height: 120px; overflow: visible; }
.step-dot { fill: var(--ground); stroke: var(--ink); stroke-width: 4; transition: fill var(--t-swap) ease-out; }
.step-num { font-family: var(--face-family); font-size: 30px; font-weight: 650; fill: var(--ink); }
.steps-list { display: grid; gap: var(--s-2); counter-reset: step; }
.steps-list li { display: grid; grid-template-columns: 1.5rem 1fr; font-size: 0.9375rem; line-height: 1.4; }
.steps-list li::before { counter-increment: step; content: counter(step); font-family: var(--face-family); font-weight: 650; color: var(--call); }
.steps-list b { font-weight: 650; }
.steps.lt-arrived .step-dot { animation: step-on 400ms var(--ease-out) both; }
.steps .step-dot--1 { animation-delay: 120ms !important; } .steps .step-dot--2 { animation-delay: 240ms !important; } .steps .step-dot--3 { animation-delay: 360ms !important; }
@keyframes step-on { 0% { fill: var(--ground); } 60% { fill: var(--seal); } 100% { fill: var(--ground); } }
@media (prefers-reduced-motion: reduce) { .steps.lt-arrived .step-dot { animation: none; } }
.routes { margin-top: var(--s-3); font-size: var(--step-small); color: var(--ink-2); }

.gift { background: var(--paper-raised); border-radius: 20px; padding: var(--s-5); }
.gift-intro { color: var(--ink-2); margin-bottom: var(--s-4); }
.gift-play { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: var(--s-4); align-items: center; }
@media (max-width: 479px) { .gift-play { grid-template-columns: 1fr; } .gift-ring { max-width: 240px; margin: 0 auto; } }
.gift-ring { position: relative; aspect-ratio: 1; container-type: inline-size; }
.gift-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gift-stop { fill: var(--paper-raised); stroke: var(--ink-2); stroke-width: 3; }
.gift-label { font-size: 30px; letter-spacing: 0.12em; }
.gift-dot { position: absolute; left: 50%; top: 50%; width: 9cqi; height: 9cqi; margin: -4.5cqi 0 0 -4.5cqi; border-radius: 50%; display: grid; place-items: center; font-family: var(--face-family); font-weight: 700; font-size: 3.6cqi; color: #fff; background: var(--who); border: 2px solid var(--paper-raised);
  transform: rotate(calc(var(--stage, 0) * 72deg)) translateY(-43.4cqi) rotate(calc(var(--stage, 0) * -72deg)) translate(var(--nudge-x, 0), var(--nudge-y, 0));
  transition: transform 360ms var(--ease-turn); }
@media (prefers-reduced-motion: reduce) { .gift-dot { transition: none; } }
.gift-dot--0 { --who: light-dark(#3662BA, #4F78C9); --nudge-x: -9px; }
.gift-dot--1 { --who: light-dark(#B43463, #C24A76); --nudge-y: 9px; }
.gift-dot--2 { --who: light-dark(#22752D, #2E8A3B); --nudge-x: 9px; }
.gift-centre { position: absolute; inset: 26%; display: grid; place-content: center; text-align: center; font-size: 0.8125rem; color: var(--ink-2); }
.gift-centre strong { display: block; font-family: var(--face-family); font-size: 1.125rem; color: var(--ink); }
.gift-people { display: grid; gap: var(--s-2); }
.gift-person { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.gift-person p { font-size: 0.9375rem; line-height: 1.35; }
.gift-person b { font-family: var(--face-family); font-weight: 650; }
.gift-person .who-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--who); margin-right: 6px; }
.gift-person .stage-name { color: var(--ink-2); font-size: 0.875rem; }
.gift-person .chip { min-height: var(--target); padding: 0 var(--s-3); font-size: 0.875rem; }
.gift-foot { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin-top: var(--s-4); }

.words { display: grid; gap: var(--s-3); }
.words blockquote { position: relative; padding-left: var(--s-5); font-size: 1rem; line-height: 1.45; }
.words blockquote::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--seal); }
.words .src { display: block; font-size: var(--step-quiet); color: var(--ink-2); margin-top: 2px; }
.tagline { font-family: var(--face-family); font-weight: 650; font-size: 1.125rem; letter-spacing: -0.005em; margin-top: var(--s-4); }

/* ---------- Inner hub pages ---------- */
.page { padding: var(--s-6) var(--gutter) var(--s-8); max-width: 1320px; margin: 0 auto; }
.crumb { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--target); font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); }
.crumb svg { width: 16px; height: 16px; }
.crumb:hover { color: var(--ink); }
.page-head h1 { font-size: var(--step-display); max-width: 18ch; }
.page-head .lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); max-width: 44ch; color: var(--ink-2); margin-top: var(--s-4); }

/* A summary: the line and its price beside the area's own dial. */
.summary { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head dial" "rest dial"; column-gap: var(--s-7); row-gap: 0; align-items: start; } .summary-words { grid-area: head; } .summary-rest { grid-area: rest; } .summary-dial { grid-area: dial; position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.summary-kicker { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.summary-kicker .area-mark { width: 14px; height: 14px; }
.summary h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); max-width: 16ch; }
.summary .lede { font-size: 1.1875rem; color: var(--ink-2); max-width: 42ch; margin-top: var(--s-4); }
.price-block { margin-top: var(--s-5); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-3); }
.price-block .price { justify-content: flex-start; }
.price-block .smallest { display: block; width: 100%; }
.price-block .price-item { font-weight: 600; }
.price-block .price-what { display: block; width: 100%; font-size: 0.875rem; color: var(--ink-2); line-height: 1.4; }
.price-block .smallest { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--area); }
.summary .centre-call { margin-top: var(--s-5); }
.facts { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact h2 { font-size: 1rem; font-family: var(--face-family); letter-spacing: var(--track-caps); text-transform: uppercase; font-weight: 600; color: var(--ink-2); margin-bottom: var(--s-2); }
.fact p { font-size: 1rem; }
.fact a { font-weight: 600; }
.summary-dial { display: grid; gap: var(--s-3); }
.summary-dial .dial { max-width: 620px; margin: 0 auto; }
.summary-dial .dial-svg .rim-name { fill: var(--area); }
.tryout-controls { display: grid; gap: var(--s-3); justify-items: center; text-align: center; }
.tryout-result { min-height: 1.5em; font-size: 0.9375rem; color: var(--ink-2); }
.summary-figure { margin-top: var(--s-7); }
.summary-figure img { width: 100%; border-radius: 18px; }
.neighbours { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); align-items: center; }
.neighbours .caps { margin-right: var(--s-2); }

/* Dial units. */
.loop-mark { fill: var(--ground); stroke: var(--area); stroke-width: 10; transition: fill 240ms ease-out, stroke-width 240ms; }
.loop-tick { fill: none; stroke: var(--ground); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.loop-path { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 10; }
.dial[data-state="hand"] .loop-mark { fill: var(--area); }
.dial[data-state="set"] .loop-mark { fill: var(--ground); stroke-width: 4; }
.dial[data-state="set"] .loop-day--0 .loop-mark { fill: var(--area); stroke-width: 10; }
.dial[data-state="set"] .loop-tick { opacity: 1; stroke: var(--area); }
.dial[data-state="set"] .loop-day--0 .loop-tick { stroke: var(--ground); }
.dial[data-state="hand"] .loop-tick { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .loop-day { transition: opacity 240ms; } .dial .loop-mark { transition-delay: calc(var(--d, 0) * 60ms); } }
.month-tick { stroke: var(--ink-2); stroke-width: 2; }
.year-dot { fill: var(--area); opacity: 0; transform-box: fill-box; transform-origin: center; transform: translateY(-30px) scale(.4); transition: transform 260ms var(--ease-out), opacity 200ms; }
.year-dot--birthdays { fill: var(--a-celebrate); } .year-dot--mot { fill: var(--a-stage); } .year-dot--passports { fill: var(--a-share); } .year-dot--renewals { fill: var(--a-style); }
.dial[data-terms] .year-dot--terms, .dial[data-birthdays] .year-dot--birthdays, .dial[data-mot] .year-dot--mot, .dial[data-passports] .year-dot--passports, .dial[data-renewals] .year-dot--renewals { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .year-dot { transition: opacity 120ms; transform: none; } }
.chip .key { width: 10px; height: 10px; border-radius: 50%; background: var(--k, var(--area)); }
.chip--terms { --k: var(--a-juggle); } .chip--birthdays { --k: var(--a-celebrate); } .chip--mot { --k: var(--a-stage); } .chip--passports { --k: var(--a-share); } .chip--renewals { --k: var(--a-style); }
.pile { fill: var(--ground-raised); stroke: var(--line-strong); stroke-width: 2; transition: fill 240ms ease-out; }
.pile-label { font-size: 26px; fill: var(--ink); }
.pile-count { position: absolute; font-family: var(--face-family); font-weight: 700; font-size: 6cqi; color: var(--area); transform: translate(-50%, -50%); }
.pile-count--0 { left: 61.5%; top: 38.5%; } .pile-count--1 { left: 61.5%; top: 61.5%; } .pile-count--2 { left: 38.5%; top: 61.5%; } .pile-count--3 { left: 38.5%; top: 38.5%; }
.dial[data-p0] .pile--0, .dial[data-p1] .pile--1, .dial[data-p2] .pile--2, .dial[data-p3] .pile--3 { fill: var(--area-tint); stroke: var(--area); }
.items { display: grid; gap: var(--s-2); width: 100%; max-width: 560px; }
.item { display: grid; grid-template-columns: 1fr; gap: 6px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); text-align: left; }
.item-name { font-weight: 600; font-size: 0.9375rem; }
.item .chip-row { gap: 6px; }
.item .chip { min-height: 40px; padding: 0 var(--s-3); font-size: 0.8125rem; }
@media (any-pointer: coarse) { .item .chip { min-height: var(--target); } }
.hour-tick { stroke: var(--ink); stroke-width: 3; } .quarter-tick { stroke: var(--ink-2); stroke-width: 1.5; }
.hour-label { font-size: 24px; letter-spacing: 0.05em; fill: var(--ink); }
.half-hour { fill: none; stroke: var(--line); stroke-width: 34; transition: stroke 200ms ease-out; }
.half-hour.is-lit { stroke: var(--area); }
.stage-mark { stroke: var(--seal); stroke-width: 4; }
.stage-label { font-size: 17px; fill: var(--ink-2); }
.wheel { stroke: var(--ground); stroke-width: 4; }
.wheel--0 { fill: #1F6F6B; } .wheel--1 { fill: #B5523A; } .wheel--2 { fill: #2F4A8A; } .wheel--3 { fill: #6B4E9B; } .wheel--4 { fill: #3D6B35; } .wheel--5 { fill: #A1366A; } .wheel--6 { fill: #8A6A1F; } .wheel--7 { fill: #2B2F36; }
.wheel-turn { position: absolute; inset: 0; transition: transform var(--t-turn) var(--ease-turn); transform: rotate(var(--wheel, 0deg)); }
@media (prefers-reduced-motion: reduce) { .wheel-turn { transition: none; } }
.brand-set { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 8px; width: 100%; max-width: 420px; }
.brand-set > div { border-radius: 10px; background: var(--p1); color: var(--p3); display: grid; place-items: center; aspect-ratio: 3 / 2; transition: background-color 240ms ease-out, color 240ms; }
.brand-set .post { aspect-ratio: 1; background: var(--p2); grid-row: span 2; }
.brand-set .sign { aspect-ratio: 2 / 3; background: var(--p3); color: var(--p1); }
.brand-set svg { width: 40%; height: auto; }
.brand-set span { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.palettes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.palette-swatch { width: var(--target); height: var(--target); border-radius: 50%; border: 2px solid var(--ground); outline: 1px solid var(--line-strong); padding: 0; background: var(--sw); }
.palette-swatch[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.day-tick { stroke: var(--ink-2); stroke-width: 2; }
.post { fill: var(--line); transform-box: fill-box; transform-origin: center; transition: fill 200ms ease-out, transform 220ms var(--ease-out); transform: scale(.55); }
.post.is-lit { fill: var(--area); transform: none; }
.post.is-reel { fill: var(--a-celebrate); }
.check { fill: var(--line); }
.check.is-lit { fill: var(--ink-2); }
.day-label { font-size: 20px; fill: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .post { transition: fill 100ms; transform: none; } }

/* Apps */
.apps-ring { width: min(300px, 70vw); margin: var(--s-5) 0; }
.moments { display: grid; gap: var(--s-7); margin-top: var(--s-6); }
.moment h2 { font-size: var(--step-1); display: flex; align-items: center; gap: var(--s-3); }
.moment h2 .area-mark { width: 14px; height: 14px; }
.app-list { margin-top: var(--s-4); border-top: 1px solid var(--line); }
.app { display: grid; gap: 4px var(--s-5); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .app { grid-template-columns: 1.1fr 1.4fr 1fr; align-items: baseline; } }
.app-name { font-family: var(--face-family); font-weight: 650; font-size: 1.25rem; }
.app-name small { display: block; font-family: var(--face-text); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.app-what { color: var(--ink); }
.app-price { font-size: 0.9375rem; }
.app-twin { font-size: 0.875rem; color: var(--ink-2); grid-column: 1 / -1; }
@media (min-width: 860px) { .app-twin { grid-column: 2 / -1; } }
.lead-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--seal); color: var(--ink); font-family: var(--face-text); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }

/* About, clients, call */
.still { display: grid; gap: var(--s-7); }
@media (min-width: 960px) { .still { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.still-seal { width: min(420px, 80vw); aspect-ratio: 1; }
.still-seal svg { width: 100%; height: 100%; overflow: visible; }
.still-mono { color: var(--ink); }
.quotes { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.quote { font-family: var(--face-family); font-weight: 560; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 34ch; }
.quote cite { display: block; font-family: var(--face-text); font-style: normal; font-weight: 450; font-size: var(--step-quiet); color: var(--ink-2); margin-top: var(--s-2); letter-spacing: 0.02em; }
.plain-list { display: grid; gap: var(--s-2); padding-left: 1.2em; }
.lost { display: grid; gap: var(--s-6); justify-items: center; text-align: center; padding: var(--s-7) var(--gutter) var(--s-8); }
.lost-seal { position: relative; width: min(420px, 78vw); aspect-ratio: 1; }
.lost-seal .seal-turn { inset: 0; width: 100%; height: 100%; }
.lost .doors { display: grid; gap: var(--s-2); width: min(420px, 100%); }
.lost .doors a { justify-content: space-between; min-height: 52px; }
@media (prefers-reduced-motion: no-preference) { .seal-turn--lost { animation: lost-turn 600ms var(--ease-turn) both; } }
@keyframes lost-turn { from { transform: rotate(-60deg); } }

/* The rim's names fade in round the seal on arrival, 55 ms apart. */
@media (prefers-reduced-motion: no-preference) {
  .seal.names-in .seal-svg--front .rim-name { animation: name-in 420ms ease-out both; }
  .seal.names-in .seal-svg--front .rim-name:nth-child(2) { animation-delay: 55ms; } .seal.names-in .seal-svg--front .rim-name:nth-child(3) { animation-delay: 110ms; }
  .seal.names-in .seal-svg--front .rim-name:nth-child(4) { animation-delay: 165ms; } .seal.names-in .seal-svg--front .rim-name:nth-child(5) { animation-delay: 220ms; }
  .seal.names-in .seal-svg--front .rim-name:nth-child(6) { animation-delay: 275ms; } .seal.names-in .seal-svg--front .rim-name:nth-child(7) { animation-delay: 330ms; }
  .seal.names-in .seal-svg--front .rim-name:nth-child(8) { animation-delay: 385ms; } .seal.names-in .seal-svg--front .rim-name:nth-child(9) { animation-delay: 440ms; }
}
@keyframes name-in { from { opacity: 0; } }
.seal-stage { view-transition-name: dial; }
.wheel.is-on { stroke: var(--ink); stroke-width: 8; }

/* Her apps: the back of the seal, one arc per life moment. */
.apps-head { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .apps-head { grid-template-columns: 1.3fr 1fr; } }
.moment-ring { display: grid; gap: var(--s-4); justify-items: center; }
.moment-svg { width: min(360px, 76vw); height: auto; overflow: visible; }
.moment-arc { fill: none; stroke: var(--area); stroke-width: 34; }
.moment-label { font-size: 22px; fill: var(--ink); }
.moment-svg .still-mono { color: var(--ink); }
.moment-doors { justify-content: center; }
.moment-doors .area-mark { width: 10px; height: 10px; border-width: 2.5px; }
.moment { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.apps-note { margin-top: var(--s-6); }
.still-mono { color: var(--ink); }

/* Gift Trix page */
.gift-page { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 960px) { .gift-page { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-7); } }
.gift-lines { font-size: 1.0625rem; max-width: 40ch; margin-top: var(--s-3); }
.gift--big .gift-play { grid-template-columns: minmax(0, 260px) 1fr; }
@media (max-width: 559px) { .gift--big .gift-play { grid-template-columns: 1fr; } }
.worries { margin-top: var(--s-7); }
.worries h2 { font-size: var(--step-2); margin-bottom: var(--s-4); }
.worry-list { display: grid; gap: var(--s-3); counter-reset: w; }
@media (min-width: 720px) { .worry-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }
.worry-list li { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--ink); font-size: 0.9375rem; line-height: 1.45; }
.worry-list li::before { counter-increment: w; content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--seal); }
.worry-list b { display: block; font-family: var(--face-family); font-size: 1.125rem; margin-bottom: 4px; }

/* About and clients */
.still-seal--small { width: min(280px, 60vw); }
.still--quiet .still-seal svg .bezel { opacity: .6; }
.client-list { display: grid; gap: var(--s-2); margin: var(--s-5) 0; padding: 0; }
.client-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.facts--one { grid-template-columns: 1fr; margin-top: var(--s-5); }
@media (max-width: 959px) { .still-seal { width: min(220px, 56vw); } }

/* Book the call */
.call-page { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .call-page { grid-template-columns: 1fr 1fr; } }
.next-ring { display: grid; gap: var(--s-4); justify-items: center; }
.dial--steps { max-width: 440px; }
.dial--steps .step-dot { fill: var(--ground); stroke: var(--ink); stroke-width: 4; transition: fill var(--t-swap) ease-out; }
.dial--steps[data-on="0"] .step-dot--0, .dial--steps[data-on="1"] .step-dot--1, .dial--steps[data-on="2"] .step-dot--2, .dial--steps[data-on="3"] .step-dot--3 { fill: var(--seal); stroke: var(--seal); }
.dial--steps .step-num { font-size: 30px; }
.dial--steps .dial-centre { inset: 24%; }
.dial--steps .dial-reading { font-size: clamp(1.5rem, 8cqi, 2.5rem); }
.dial--steps .dial-sub { font-size: clamp(0.9375rem, 3.6cqi, 1.125rem); color: var(--ink); }
.step-buttons { justify-content: center; }
.dial-swap { animation: card-in 220ms var(--ease-out) both; }

/* The small print */
.print-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.print-ring--inner { stroke: var(--seal); stroke-dasharray: 2 4; }
.print-dot { fill: var(--seal); }
.print-steps { display: grid; gap: 2px; margin-top: var(--s-4); padding: 0; counter-reset: ps; }
.print-steps a { display: flex; align-items: center; gap: var(--s-2); min-height: var(--target); font-size: 0.9375rem; text-decoration: none; color: var(--ink-2); }
.print-steps a::before { counter-increment: ps; content: counter(ps); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--seal); font-family: var(--face-family); font-weight: 650; font-size: 0.75rem; color: var(--ink); }
.print-steps a:hover { color: var(--ink); }
.print-foot { margin-top: var(--s-6); }
@media (max-width: 959px) { .print-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Per-dial centres: the reading always sits clear of the dial's own marks. */
.dial--stage .dial-centre { inset: 31%; }
.dial--stage .dial-reading, .dial--share .dial-reading { font-size: clamp(1.25rem, 6.4cqi, 2.4rem); }
.dial--share .dial-centre { inset: 33%; }
.dial--stage .dial-sub, .dial--share .dial-sub { font-size: clamp(0.75rem, 2.4cqi, 0.9375rem); }
.dial--design .dial-centre { inset: 27%; }
.dial--design .brand-set { display: flex; align-items: flex-end; justify-content: center; gap: 2.4cqi; max-width: none; width: 46cqi; }
.dial--design .brand-set > div { flex: none; border-radius: 1.6cqi; }
.dial--design .brand-set .card { width: 17cqi; aspect-ratio: 3 / 2; }
.dial--design .brand-set .post { width: 14cqi; aspect-ratio: 1; grid-row: auto; }
.dial--design .brand-set .sign { width: 10cqi; aspect-ratio: 2 / 3; }
.dial--declutter .dial-centre { inset: 39%; }
.dial--declutter .dial-sub { font-size: clamp(0.6875rem, 2.4cqi, 0.9375rem); }
@media (min-width: 1180px) and (min-height: 640px) { .arc.arc--days { height: auto; } }
.steps-svg { width: 132px; height: 132px; }
.steps .step-num { display: none; }
.steps .step-dot { stroke-width: 6; }
.steps-svg .ring-line { stroke-width: 6; }
.gift-centre { font-size: clamp(0.6875rem, 5cqi, 0.8125rem); inset: 24%; }
.gift-centre strong { font-size: clamp(0.8125rem, 7.2cqi, 1.125rem); line-height: 1.15; }

.switch button { white-space: normal; line-height: 1.2; padding: 6px var(--s-4); }
.head-price { margin-top: var(--s-4); font-size: 1.0625rem; }
.head-price .smallest, .price-block .smallest { display: block; width: 100%; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--area); }
@media (min-width: 960px) { .summary { align-content: start; } .summary-rest { margin-top: var(--s-2); } }
@media (min-width: 960px) { .head-price { display: none; } }
.dial-neighbour { background: transparent; }
@media (max-width: 719px) {
  .summary-dial { padding-top: var(--s-6); }
  .dial-neighbour { top: -7%; }
  .dial-neighbour--prev { left: 0; } .dial-neighbour--next { right: 0; }
}
@media (max-width: 559px) { .gift-ring { width: min(100%, 260px); margin-inline: auto; } }