/* Four Mirrors v5: the inner pages (sample, consult, preview, terms, privacy).
   Loaded after site.css on those pages only. Tokens from site.css only; no raw colours
   except where a third-party embed needs a literal value (noted inline).
   Documented in _build/DESIGN.md (page notes) and _build/SKILLS-LEDGER-PAGES.md. */

/* ---------- Shared bits ---------- */
.label__group { display: block; text-wrap: balance; }
.label__star { display: inline-block; width: 9px; height: 9px; margin: 0 7px; vertical-align: 0.08em; fill: var(--color-accent); }
@media (max-width: 479.98px) {
  /* a long label would break around its side rules on a phone; it drops the rules and wraps as one balanced line pair */
  .label--long { display: block; text-align: center; line-height: 1.8; padding-inline: 0.22em 0; }
  .label--long::before, .label--long::after { display: none; }
}
.page-head__note { max-width: 40em; margin: var(--space-4) auto 0; }
.page-head--short { padding-bottom: clamp(32px, 4vw, 56px); }
.nowrap { white-space: nowrap; }
/* A one or two line paragraph: justification only widens the gaps, so it is centred and balanced instead */
.prose--center p { text-align: center; text-align-last: center; text-wrap: balance; }
.icon-chev--back { transform: rotate(180deg); }
.icon-chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* A round line button for in-widget navigation (reader arrows); the ring echoes .ic */
.ring-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--color-display); background: rgba(4, 7, 14, 0.4);
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.ring-btn:hover { color: var(--color-display-bright); background-color: rgba(201, 162, 74, 0.12); box-shadow: inset 0 0 0 1px var(--color-display); }
.ring-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 50%; }
.ring-btn[aria-disabled="true"] { opacity: 0.38; cursor: default; }
.ring-btn[aria-disabled="true"]:hover { color: var(--color-display); background-color: rgba(4, 7, 14, 0.4); box-shadow: inset 0 0 0 1px var(--color-line); }
.ring-btn svg { width: 16px; height: 16px; }

/* Closing band with a supporting sentence (sample) */
.cta-band__lead { max-width: 46ch; margin: var(--space-5) auto 0; color: var(--color-ink-soft); text-wrap: balance; }

/* ---------- Sample: the reader ---------- */
/* One page at a time on phones; a two-page spread from 1100px, pairs chosen so each chapter opens on its own spread.
   Native horizontal scroll with snap does the swiping (works with no script); pages.js adds the arrows, keys and counter. */
.reader {
  --rd-gap: 14px;
  --rd-w: min(calc(100vw - 48px), 460px);
  position: relative; padding-bottom: var(--section-y);
}
@media (min-width: 720px) {
  .reader { --rd-gap: 28px; --rd-w: min(calc(100vw - 240px), calc((100svh - var(--head-h) - 184px) * 2 / 3), 520px); }
}
@media (min-width: 1100px) {
  .reader { --rd-gap: 24px; --rd-w: min(calc((100vw - 2 * var(--gutter) - 200px) / 2), calc((100svh - var(--head-h) - 184px) * 2 / 3), 560px); }
}
.reader__port {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scroll-padding-inline: calc(50% - var(--rd-w) / 2);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.reader__port::-webkit-scrollbar { display: none; }
.reader__port:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.reader__pages {
  list-style: none; display: flex; gap: var(--rd-gap); width: max-content;
  padding: var(--space-5) calc(50% - var(--rd-w) / 2) var(--space-4);
}
@media (max-width: 719.98px) {
  /* a narrower padding so the next page shows a sliver at the right edge: the cue that the row swipes */
  .reader__pages { padding-left: 24px; padding-right: 24px; }
  .reader__port { scroll-padding-inline: 24px; }
}
.rd-page { flex: none; width: var(--rd-w); scroll-snap-align: start; }
@media (min-width: 720px) { .rd-page { scroll-snap-align: center; } }
@media (min-width: 1100px) {
  .reader__port { scroll-padding-inline: calc(50% - var(--rd-w) - var(--rd-gap) / 2); }
  .reader__pages { padding-left: calc(50% - var(--rd-w) - var(--rd-gap) / 2); padding-right: calc(50% - var(--rd-w) - var(--rd-gap) / 2); }
  .rd-page { scroll-snap-align: none; }
  .rd-page:nth-child(odd) { scroll-snap-align: start; }
  /* An odd page count leaves the last page alone: an empty right-hand slot lets it open as its own spread */
  .reader__pages:has(> .rd-page:last-child:nth-child(odd))::after { content: ""; flex: none; width: var(--rd-w); }
}
.rd-page figure { margin: 0; }
.rd-page__sheet { position: relative; aspect-ratio: 2 / 3; background: var(--color-surface); box-shadow: var(--shadow-page); }
.rd-page__sheet picture, .rd-page__sheet img { width: 100%; height: 100%; }
.rd-page__sheet img { object-fit: cover; }
.rd-page figcaption { margin-top: var(--space-4); text-align: center; }
.rd-page figcaption .caption { display: inline-block; }
/* The pages either side of the open one rest in shadow; script marks the open page(s) */
.js .rd-page { opacity: 0.4; transition: opacity var(--dur-slow) var(--ease-out); cursor: pointer; }
.js .rd-page.is-open { opacity: 1; cursor: auto; }
@media (hover: hover) { .js .rd-page:not(.is-open):hover { opacity: 0.62; } }

.reader__bar { display: flex; align-items: center; justify-content: center; gap: var(--space-5); margin-top: var(--space-4); padding-inline: var(--gutter) var(--gutter-r); }
.reader__count { min-width: 12.5em; text-align: center; font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-ink-soft); padding-left: 0.24em; font-variant-numeric: lining-nums tabular-nums; }
html:not(.js) .reader__bar .ring-btn, html:not(.js) .reader__count { display: none; }

/* Contents: native disclosure, closed by default so the reader stays quiet */
.reader__toc { max-width: 720px; margin: var(--space-6) auto 0; padding-inline: var(--gutter) var(--gutter-r); text-align: center; }
.reader__toc summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-accent); padding-left: 0.24em;
  transition: color var(--dur-fast) var(--ease-out);
}
.reader__toc summary::-webkit-details-marker { display: none; }
.reader__toc summary:hover, .reader__toc[open] summary { color: var(--color-display); }
.reader__toc summary .icon-chev { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease-out); }
.reader__toc[open] summary .icon-chev { transform: rotate(-90deg); }
.reader__toc ol { list-style: none; columns: 2; column-gap: 48px; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-line-faint); text-align: left; }
.reader__toc li { break-inside: avoid; }
.reader__toc a {
  display: flex; align-items: baseline; gap: 14px; min-height: 44px; padding: 8px 0;
  color: var(--color-ink); text-decoration: none; font-size: 1.03rem; line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out);
}
.reader__toc a span { flex: none; min-width: 2.2em; font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--color-accent); font-variant-numeric: lining-nums tabular-nums; }
.reader__toc a:hover, .reader__toc a[aria-current="true"] { color: var(--color-display); }
@media (max-width: 559.98px) { .reader__toc ol { columns: 1; } }

/* ---------- Consult ---------- */
.cs-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 0; margin-top: var(--space-6); }
.cs-facts li { display: inline-flex; align-items: center; font-family: var(--font-caps); font-size: var(--text-label); letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink); }
.cs-facts li + li::before { content: ""; width: 5px; height: 5px; margin: 0 18px 0 calc(18px - 0.22em); background: var(--color-accent); transform: rotate(45deg); }
.page-head .cs-facts + .page-head__actions { margin-top: var(--space-6); }
@media (max-width: 559.98px) {
  /* three facts do not fit one phone line; stacked, so no separator is left leading a line */
  .cs-facts { flex-direction: column; gap: 10px; }
  .cs-facts li + li::before { display: none; }
}
.page-head__lead strong { font-weight: 400; color: var(--color-display); }

/* Three things to talk through: one ruled row, divided like the homepage's four details */
.cs-topics { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.cs-topics li { position: relative; padding: var(--space-3) clamp(18px, 3vw, 40px); text-align: center; }
.cs-topics li + li::before { content: ""; position: absolute; left: 0; top: 6%; bottom: 6%; width: 1px; background: linear-gradient(180deg, transparent, var(--gold-600), transparent); }
.cs-topics h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--text-h3); line-height: 1.2; color: var(--color-display); }
.cs-topics p { margin: var(--space-3) auto 0; max-width: 24ch; font-size: 1.06rem; line-height: 1.55; color: var(--color-ink-soft); text-wrap: balance; }
@media (max-width: 719.98px) {
  .cs-topics { grid-template-columns: 1fr; max-width: 420px; }
  .cs-topics li { padding: var(--space-5) var(--space-2); }
  .cs-topics li + li::before { left: 18%; right: 18%; top: 0; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-600), transparent); }
}

/* The offer, set as the single arch (priced item) */
.cs-offer { max-width: 460px; margin-inline: auto; }
.cs-offer .arch-card { padding-bottom: clamp(36px, 4vw, 48px); }
.cs-offer__price { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem); line-height: 1; color: var(--color-ink); font-variant-numeric: lining-nums; }
.cs-offer__price span { font-family: var(--font-caps); font-size: 0.8125rem; letter-spacing: 0.2em; color: var(--color-accent); vertical-align: 1.5em; margin-right: 10px; }
.cs-offer__per { margin-top: var(--space-3); }
.cs-terms { width: 100%; max-width: 330px; margin: var(--space-6) auto 0; border-top: 1px solid var(--color-line-faint); text-align: left; }
.cs-terms div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--color-line-faint); }
.cs-terms dt { flex: none; font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-ink-soft); }
.cs-terms dd { margin: 0; text-align: right; color: var(--color-ink); }

/* How it works: a real ordered list, numbered the way the readings number nothing else */
.cs-steps { list-style: none; counter-reset: cs; max-width: 560px; margin-inline: auto; border-top: 1px solid var(--color-line-faint); }
.cs-steps li { counter-increment: cs; display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 8px; padding: 20px 4px; border-bottom: 1px solid var(--color-line-faint); }
.cs-steps li::before { content: counter(cs, upper-roman) "."; font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--color-accent); }
.cs-steps p { font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink); }

/* The booking frame: Cal.com renders inside; the ground stays midnight */
.cal-shell { max-width: 1040px; margin: clamp(40px, 5vw, 56px) auto 0; padding-inline: var(--gutter) var(--gutter-r); }
.cal-frame { position: relative; min-height: 600px; width: 100%; overflow: auto; background: var(--color-ground); box-shadow: inset 0 0 0 1px var(--color-line-faint); }
.cal-frame__wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; text-align: center; pointer-events: none; transition: opacity var(--dur-slow) var(--ease-out); }
.cal-frame__wait svg { width: 44px; height: 44px; }
.cal-frame.is-ready .cal-frame__wait { opacity: 0; }
.js-motion .cal-frame:not(.is-ready) .cal-frame__wait svg { animation: cal-breathe 2.4s var(--ease-in-out) infinite alternate; }
@keyframes cal-breathe { from { opacity: 0.45; } to { opacity: 1; } }
.cal-placeholder { max-width: 560px; margin: clamp(40px, 5vw, 56px) auto 0; padding: 52px 28px; text-align: center; box-shadow: inset 0 0 0 1px var(--color-line-soft); }
.cal-placeholder svg { width: 44px; height: 44px; margin: 0 auto 20px; }
.cal-placeholder .t { font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.2; color: var(--color-ink); text-wrap: balance; }
.cal-placeholder .s { max-width: 38ch; margin: 12px auto 0; color: var(--color-ink-soft); text-wrap: pretty; }
.cs-after, .cs-back, .cs-consent { text-align: center; color: var(--color-ink-soft); }
.cs-after { margin-top: var(--space-5); }
.cs-back { margin-top: var(--space-6); }
.cs-consent { margin-top: var(--space-3); }
.cs-after a, .cs-back a, .cs-consent a, .cal-placeholder a, .legal a {
  color: var(--color-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; text-decoration-color: var(--gold-600);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
.cs-after a, .cs-back a { display: inline-flex; align-items: center; min-height: 44px; }
.cs-after a:hover, .cs-back a:hover, .cs-consent a:hover, .cal-placeholder a:hover, .legal a:hover { color: var(--color-display-bright); text-decoration-color: var(--color-display); }
.cs-note { max-width: 600px; margin-inline: auto; text-align: center; }
.cs-note .note { font-size: 1.0625rem; }

/* ---------- Preview: the birth-date form and its two readings ---------- */
.pv-form { max-width: 600px; margin: clamp(40px, 5vw, 56px) auto 0; padding: clamp(28px, 4vw, 40px) clamp(18px, 4vw, 40px) clamp(26px, 3.4vw, 36px); text-align: left; box-shadow: inset 0 0 0 1px var(--color-line-soft); background-color: var(--color-ground); }
.pv-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.pv-form legend { display: block; width: 100%; margin-bottom: var(--space-5); padding: 0; text-align: center; }
.pv-fields { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 14px; }
.pv-field label { display: block; margin-bottom: 8px; font-family: var(--font-caps); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-ink-soft); }
.pv-field select {
  width: 100%; min-height: 52px; padding: 0 40px 0 14px; margin: 0;
  font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.2; color: var(--color-ink);
  background-color: var(--color-ground); border: 0; border-radius: var(--radius-btn); box-shadow: inset 0 0 0 1px var(--color-line-soft);
  -webkit-appearance: none; appearance: none; cursor: pointer;
  /* chevron in gold-400 (#C9A24A), drawn inline because a select cannot hold an SVG child */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5' fill='none' stroke='%23C9A24A' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
  transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pv-field select:hover { box-shadow: inset 0 0 0 1px var(--color-line); }
.pv-field select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; box-shadow: inset 0 0 0 1px var(--color-display); }
.pv-field select:invalid { color: var(--color-ink-faint); }
.pv-field select[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--color-display-bright); }
.pv-field select option { color: var(--color-ink); background-color: var(--color-surface); }
/* The live script toggles .err / .err.show and writes the message with textContent, so the marker is a pseudo-element */
.pv-form .err { display: none; justify-content: center; align-items: baseline; gap: 10px; margin-top: var(--space-4); font-style: italic; font-size: 1.0625rem; line-height: 1.5; color: var(--color-display-bright); text-align: center; text-wrap: balance; }
.pv-form .err.show { display: flex; }
.pv-form .err::before { content: ""; flex: none; width: 10px; height: 10px; transform: translateY(-0.05em); background: var(--color-signal); /* the page's one signal star */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.6 6.4 13.6 9.4 20 10C13.6 10.6 10.6 13.6 10 20C9.4 13.6 6.4 10.6 0 10C6.4 9.4 9.4 6.4 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 0C10.6 6.4 13.6 9.4 20 10C13.6 10.6 10.6 13.6 10 20C9.4 13.6 6.4 10.6 0 10C6.4 9.4 9.4 6.4 10 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pv-submit { margin-top: var(--space-5); display: flex; justify-content: center; }
.pv-trust { margin-top: var(--space-4); text-align: center; }
@media (max-width: 519.98px) {
  /* day and month share a row, year takes the next: the visual order stays the source and tab order */
  .pv-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .pv-field--year { grid-column: 1 / -1; }
  .pv-submit .btn { width: 100%; }
}

.pv-result { scroll-margin-top: var(--head-h); }
/* The verdict is a sentence the script writes, often two clauses long: set at statement size so it holds to two or three lines */
.pv-verdict { max-width: 22em; margin-inline: auto; font-size: var(--text-statement); line-height: 1.22; }
.pv-verdict:focus { outline: none; } /* focus is moved here by script for screen readers; it is not an interactive stop */
.pv-result .title em { font-style: normal; } /* the script sets the verdict in <em>; the headline stays one face, one colour */
.pv-result__sub { max-width: 34em; margin: var(--space-5) auto 0; text-align: center; color: var(--color-ink-soft); text-wrap: balance; }
.pv-pair { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; margin-inline: auto; border-top: 1px solid var(--color-line-faint); border-bottom: 1px solid var(--color-line-faint); }
.pv-mirror { position: relative; padding: clamp(32px, 4vw, 48px) clamp(18px, 4vw, 48px); text-align: center; }
.pv-mirror + .pv-mirror { border-left: 1px solid var(--color-line-faint); }
.pv-mirror .caption { display: block; }
.pv-mirror__value { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.7rem + 1.3vw, 2.75rem); line-height: 1.08; color: var(--color-display); font-variant-numeric: lining-nums; text-wrap: balance; }
.pv-mirror__text { max-width: 36ch; margin: var(--space-4) auto 0; font-size: 1.06rem; line-height: 1.6; color: var(--color-ink-soft); text-wrap: pretty; }
@media (max-width: 699.98px) {
  .pv-pair { grid-template-columns: 1fr; }
  .pv-mirror + .pv-mirror { border-left: 0; border-top: 1px solid var(--color-line-faint); }
}
.pv-two { max-width: 36em; margin: clamp(32px, 4vw, 48px) auto 0; text-align: center; }
.pv-ctas { margin-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
@media (max-width: 519.98px) { .pv-ctas .btn { width: 100%; } }

/* ---------- Terms and privacy: a calm reading column ---------- */
.legal-band { padding-top: clamp(8px, 2vw, 24px); }
.legal { max-width: 62ch; margin-inline: auto; }
/* The column keeps one left edge: crumb, date, headings and paragraphs all start on it */
.legal__crumb { display: flex; justify-content: flex-start; }
.legal__crumb .link-quiet { gap: 10px; font-size: 1.1875rem; text-decoration: none; }
.legal .legal__updated { text-align: left; padding-left: 0; }
.legal__crumb .icon-chev { color: var(--color-accent); }
.legal__updated { margin-top: var(--space-4); }
.legal h2 {
  margin: clamp(40px, 5vw, 52px) 0 var(--space-3);
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-h4); line-height: 1.25; color: var(--color-display); text-wrap: balance;
}
.legal__updated + h2 { margin-top: clamp(32px, 4vw, 40px); }
.legal p { text-align: left; text-align-last: auto; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; } /* ragged legal text: hyphenation only adds breaks */
.legal p + p { margin-top: 1em; }
.legal__keep { margin-top: 2px; padding: 4px 0 4px 20px; border-left: 1px solid var(--color-line); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .rd-page { transition-property: opacity; transition-duration: 1ms; }
  .ring-btn { transition-property: color, background-color, box-shadow, opacity; }
}

/* Consult: the closing note follows the booking after one star, not after two full chapter gaps */
#book { padding-bottom: clamp(48px, 6vw, 80px); }
.cs-note-band { padding-top: clamp(48px, 6vw, 80px); }