/*
  The Contact page (design v3), layered over v2.css and dark.css like every
  other page, so the header, skip link and footer are the site's own.
  Everything this page adds lives here and is scoped to it:

    .cpage …          the page (tokens are defined on .cpage, never :root,
                      because v2.css/dark.css use --paper, --night, --line,
                      --card and --ink-body for other things)
    .cpage__foot      the footer spacing (the footer itself is .connect__foot)
    .cp-ambient       the drifting glow + pointer light, injected by
                      js/contact.js only when motion is allowed

  Maha's invitation sits on the left with the visitor's note writing itself
  beneath it; the questions sit on the right in a glass panel, one step at a
  time. One column below 1000px, where the note moves into the review step.
  Motion follows the v3 brief: --spring for anything that moves, --bounce
  only for small confirmations; v2.css switches CSS motion off under
  prefers-reduced-motion and js/contact.js skips its own.
*/

/* ---------- Tokens (v3), scoped to the page ---------- */
.cpage {
  --night: #120c1b; --night-3: #1e152c;
  --ink: #f3ede5; --ink-2: #d6cce0; --muted: #a395b4; --faint: #9a8cae;
  --line: rgba(243, 237, 229, .10); --line-2: rgba(243, 237, 229, .18);
  --field: rgba(243, 237, 229, .045); --field-hover: rgba(243, 237, 229, .07);
  --violet: #a996ff; --signal: #8f78ff; --deep: #5b3fd6;
  --copper: #d99a80; --copper-deep: #b06e57;
  --success: #7ee2a8; --error: #ff9e8f;
  --paper: #f3ede5; --paper-ink: #241935; --paper-body: #4b365f;
  --tone-violet: linear-gradient(140deg, #8f78ff, #5b3fd6);
  --tone-copper: linear-gradient(140deg, #e3a98f, #b06e57);
  --tone-cobalt: linear-gradient(140deg, #7d95d6, #3b2a66);
  --tone-rose: linear-gradient(140deg, #e2c1b8, #8d6a86);
  --fs-display: clamp(52px, 6.4vw, 96px);
  --fs-display-sm: clamp(44px, 4.4vw, 66px);
  --fs-title: clamp(32px, 3.4vw, 48px);
  --fs-lede: clamp(17px, 1.35vw, 19px);
  --r-panel: 32px; --r-card: 22px; --r-field: 16px; --r-tile: 14px;
  --h-field: 62px; --h-button: 54px; --h-button-lg: 60px;
  --shadow-panel: 0 50px 100px -40px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .07);
  --shadow-paper: 0 40px 80px -30px rgba(0, 0, 0, .7);
  --ring-focus: 0 0 0 4px rgba(143, 120, 255, .16);
  --spring: cubic-bezier(.16, 1, .3, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --top-h: 64px; /* the site header's height, for sticky and scroll offsets */
}

/* ---------- Page layout ---------- */
.cpage { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px);
  max-width: 1360px; margin: 0 auto; padding: clamp(112px, 14vh, 150px) var(--g) 72px; align-items: start; color: var(--ink); line-height: 1.55; }
.cpage__foot { position: relative; z-index: 1; margin: 0; padding: 20px var(--g) 28px; }
.cpage [hidden] { display: none !important; }
.cpage fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.cpage legend { padding: 0; }
.cpage button, .cpage input, .cpage select, .cpage textarea { font: inherit; color: inherit; }
.cpage ::selection { background: rgba(143, 120, 255, .45); color: #fff; }
/* A precise focus ring in the page's accent; it follows each control's own radius. */
.cpage :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.cpage .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Intro ---------- */
.cpage__intro { position: sticky; top: calc(var(--top-h) + 40px); }
.cpage__kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 700 12px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.cpage__kicker::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
.cpage__title { margin: 0; font: 400 var(--fs-display)/.95 var(--serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.cpage__title em { font-style: italic; color: var(--violet); padding-right: .06em; }
.cpage__lede { margin: 24px 0 0; max-width: 34ch; font-size: var(--fs-lede); line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.cpage__aside { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
.cpage .social { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 14px;
  transition: border-color .3s, background .3s, transform .4s var(--bounce); }
.cpage .social:hover { border-color: var(--line-2); background: rgba(243, 237, 229, .05); transform: translateY(-2px); }
.cpage .social:active { transform: scale(.97); }
.cpage .social svg { width: 16px; height: 16px; }

/* Once the visitor starts, the invitation steps back so the live note fits on screen (desktop). */
@media (min-width: 1000px) {
  .cpage__title { transition: font-size .8s var(--spring); }
  .cpage__lede, .cpage__aside { max-height: 320px; overflow: hidden; transition: max-height .8s var(--spring), opacity .4s, margin .8s var(--spring); }
  .cpage__intro.is-engaged .cpage__title { font-size: var(--fs-display-sm); }
  .cpage__intro.is-engaged .cpage__lede, .cpage__intro.is-engaged .cpage__aside { max-height: 0; opacity: 0; margin-top: 0; }
  .cpage__intro.is-engaged .dock { margin-top: 30px; }
}

/* ---------- The live note: a paper card that writes itself ---------- */
.cpage .dock { margin-top: 44px; perspective: 1400px; }
.cpage .dock__label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.cpage .dock__label b { width: 6px; height: 6px; border-radius: 50%; background: var(--success); transition: background .6s; }
.cpage .dock.is-sent .dock__label b { background: var(--copper); }
.cpage .letter { position: relative; isolation: isolate; background: var(--paper); color: var(--paper-body); border-radius: var(--r-card); padding: 30px 32px 28px;
  box-shadow: var(--shadow-paper), 0 1px 0 rgba(255, 255, 255, .6) inset; transform-style: preserve-3d;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .7s var(--spring), box-shadow .7s var(--spring); font-size: 15px; line-height: 1.6; overflow: hidden; }
.cpage .letter::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(500px circle at var(--lx, 30%) var(--ly, 0%), rgba(255, 255, 255, .55), transparent 55%); mix-blend-mode: soft-light; }
/* Review: the note lifts, ready to go. Sent: it settles back down, stamped. */
.cpage .dock.is-ready .letter { transform: translateY(-6px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); box-shadow: 0 56px 96px -34px rgba(0, 0, 0, .78), 0 1px 0 rgba(255, 255, 255, .6) inset; }
.cpage .dock.is-sent .letter { transform: translateY(4px) rotate(-.6deg); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .6) inset; }
.cpage .letter__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px dashed rgba(36, 25, 53, .18);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(36, 25, 53, .62); }
.cpage .letter__dear { margin: 0 0 10px; font: 400 28px/1.1 var(--serif); color: var(--paper-ink); }
.cpage .letter__lead { margin: 0 0 12px; color: var(--paper-ink); font-weight: 600; }
.cpage .letter__lead .w { display: inline-block; animation: cp-word .55s var(--spring) both; animation-delay: calc(var(--i) * 38ms); }
.cpage .letter__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.cpage .letter__tags:empty { display: none; }
.cpage .letter__tags li { padding: 3px 10px; border-radius: 999px; background: rgba(91, 63, 214, .09); color: var(--deep); font-size: 12px; font-weight: 600; }
.cpage .letter__tags li.is-in { animation: cp-pop .5s var(--bounce); }
.cpage .letter__tags li.is-out { animation: cp-out .26s var(--spring) forwards; pointer-events: none; }
.cpage .letter__tags li.t-time { background: rgba(176, 110, 87, .12); color: #9a5a44; }
.cpage .letter__body { margin: 0 0 18px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 210px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.cpage .letter__sign { margin: 0; color: var(--paper-body); }
.cpage .letter__name { display: block; font: 400 26px/1.15 var(--serif); color: var(--paper-ink); }
.cpage .letter__reply { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed rgba(36, 25, 53, .18); font-size: 12.5px; color: rgba(36, 25, 53, .68); }
.cpage .letter .is-ph { color: rgba(36, 25, 53, .52); font-style: italic; font-weight: 400; }
.cpage .letter__name.is-ph { font-style: normal; }
.cpage .caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--deep); animation: cp-blink 1s steps(2) infinite; }
.cpage .stamp { position: absolute; right: 22px; top: 52px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  border: 2px dashed var(--copper-deep); color: var(--copper-deep); font: 700 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-14deg) scale(1.8); opacity: 0; pointer-events: none; }
.cpage .stamp span { font: 400 19px/1 var(--serif); letter-spacing: 0; text-transform: none; display: block; margin-top: 2px; }
.cpage .letter.is-sent .stamp { animation: cp-stamp .7s var(--bounce) forwards .2s; }
.cpage .letter--inline { display: none; margin: 0 0 24px; }

/* ---------- The glass panel ---------- */
.cpage .panel { position: relative; border-radius: var(--r-panel); padding: clamp(24px, 3.6vw, 48px);
  background: linear-gradient(180deg, rgba(243, 237, 229, .065), rgba(243, 237, 229, .022)); border: 1px solid var(--line);
  backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); box-shadow: var(--shadow-panel); scroll-margin-top: calc(var(--top-h) + 16px); }
.cpage .panel.is-shake { animation: cp-shake .45s var(--spring); }

/* Progress */
.cpage .progress { margin-bottom: clamp(24px, 3vw, 34px); }
.cpage .progress__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cpage .progress__meta [data-step-label] { color: var(--ink); }
.cpage .progress__bar { display: flex; gap: 6px; }
.cpage .progress__bar button { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(243, 237, 229, .12); position: relative; overflow: hidden; cursor: default; transition: transform .3s var(--spring); }
.cpage .progress__bar button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--signal), var(--copper)); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--spring); }
.cpage .progress__bar button.is-done::after, .cpage .progress__bar button.is-now::after { transform: scaleX(1); }
.cpage .progress__bar button.is-now::after { background: var(--ink); }
.cpage .progress__bar button.is-done { cursor: pointer; }
.cpage .progress__bar button.is-done:hover { transform: scaleY(1.6); }
.cpage .progress__bar button:focus-visible { outline-offset: 4px; }

/* Steps: the stage morphs its height while the steps cross over (js/contact.js). */
.cpage .stage { position: relative; }
.cpage .step:focus { outline: none; }
.cpage .step[data-leaving] { pointer-events: none; }
.cpage .q { margin: 0; font: 400 var(--fs-title)/1.04 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.cpage .q em { font-style: italic; color: var(--violet); padding-right: .04em; }
.cpage .q label { cursor: text; }
.cpage .sub { margin: 10px 0 26px; color: var(--muted); font-size: 15px; }

/* The chosen intent, carried from the first step into the rest; pressing it goes back. */
.cpage .picked { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 4px 14px 4px 8px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color .3s, background .3s, color .3s, transform .45s var(--bounce); }
.cpage .picked:hover { border-color: var(--line-2); background: var(--field-hover); color: var(--ink); }
.cpage .picked:active { transform: scale(.97); }
.cpage .picked__icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transform-origin: 0 0; }
.cpage .picked__icon svg { width: 15px; height: 15px; }
.cpage .picked__back { width: 14px; height: 14px; color: var(--faint); transition: transform .45s var(--bounce), color .3s; }
.cpage .picked:hover .picked__back { transform: translateX(-2px); color: var(--ink); }

/* Tones: one fixed gradient per subject */
.cpage [data-tone="violet"] { background: var(--tone-violet); }
.cpage [data-tone="copper"] { background: var(--tone-copper); }
.cpage [data-tone="cobalt"] { background: var(--tone-cobalt); }
.cpage [data-tone="rose"] { background: var(--tone-rose); }

/* ---------- Choice cards ---------- */
.cpage .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cpage .choice { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  padding: 18px; min-height: 92px; border-radius: var(--r-card); cursor: pointer; isolation: isolate; overflow: hidden;
  background: var(--field); border: 1px solid var(--line); transition: border-color .35s, background .35s, box-shadow .35s, transform .5s var(--bounce); }
.cpage .choice::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(169, 150, 255, .2), transparent 65%); }
.cpage .choice:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cpage .choice:hover::before { opacity: 1; }
.cpage .choice:active { transform: scale(.98); transition-duration: .35s, .35s, .35s, .15s; }
.cpage .choice input { position: absolute; opacity: 0; pointer-events: none; }
.cpage .choice__icon { grid-row: 1 / 3; width: 46px; height: 46px; border-radius: var(--r-tile); display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .6s var(--bounce); }
.cpage .choice__icon svg { width: 22px; height: 22px; }
.cpage .choice:hover .choice__icon { transform: rotate(-6deg) scale(1.06); }
.cpage .choice__title { font-weight: 700; font-size: 16px; color: var(--ink); align-self: end; }
.cpage .choice__hint { grid-column: 2; font-size: 13.5px; color: var(--muted); align-self: start; }
.cpage .choice__key { grid-row: 1 / 3; grid-column: 3; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--faint); border: 1px solid var(--line); transition: background .35s var(--spring), border-color .35s var(--spring), color .35s; }
.cpage .choice:has(input:checked) { border-color: rgba(169, 150, 255, .7); background: rgba(143, 120, 255, .12); box-shadow: 0 0 0 4px rgba(143, 120, 255, .12); }
.cpage .choice:has(input:checked) .choice__key { background: var(--violet); border-color: var(--violet); color: var(--night); }
.cpage .choice:has(input:checked) .choice__key span { display: none; }
.cpage .choice:has(input:checked) .choice__key::after { content: ''; width: 5px; height: 10px; border: solid var(--night); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); animation: cp-pop .4s var(--bounce); }
.cpage .choice:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 3px; }

/* Keyboard hints: shown to keyboard users, never required, hidden on touch screens */
.cpage .tip { margin: 18px 0 0; font-size: 12.5px; color: var(--faint); }
.cpage .kbd { font: 600 11px/1 var(--sans); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--muted); }
@media (hover: none) {
  .cpage .tip, .cpage .btn .kbd { display: none; }
  /* No sticky hover after a tap */
  .cpage .btn--primary:hover { background: var(--ink); color: var(--night); }
  .cpage .btn--primary:hover svg, .cpage .btn--ghost:hover svg { transform: none; }
}

/* ---------- Groups, chips, fields ---------- */
.cpage .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cpage .field + .field, .cpage .row + .field, .cpage .field + .group, .cpage .group + .field { margin-top: 12px; }
.cpage .group + .group, .cpage .group + .error + .group { margin-top: 26px; }
.cpage .group + .field { margin-top: 22px; }
.cpage .legend { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.cpage .opt { font-weight: 500; color: var(--faint); font-size: 12.5px; margin-left: 6px; }
.cpage .hint { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.cpage .field > .hint { margin: 8px 2px 0; }
.cpage .legend + .chips { margin-top: 10px; }
.cpage .error { margin: 8px 2px 0; font-size: 13px; font-weight: 600; color: var(--error); }
.cpage .error:empty { display: none; }
.cpage .error:not(:empty) { animation: cp-pop .35s var(--spring); }
.cpage [aria-invalid="true"] { border-color: rgba(255, 158, 143, .7) !important; }

.cpage .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cpage .chip { position: relative; cursor: pointer; }
.cpage .chip input { position: absolute; opacity: 0; pointer-events: none; }
.cpage .chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: var(--field); border: 1px solid var(--line); transition: background .35s var(--spring), color .35s, border-color .35s, transform .45s var(--bounce); }
.cpage .chip span::before { content: ''; width: 0; height: 10px; margin-right: -8px; border: solid currentColor; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(45deg) translateY(-2px); transition: width .35s var(--bounce), margin .35s var(--bounce), opacity .25s; }
.cpage .chip:hover span { border-color: var(--line-2); background: var(--field-hover); }
.cpage .chip input:checked + span { background: var(--ink); color: var(--night); border-color: var(--ink); }
.cpage .chip input:checked + span::before { width: 5px; margin-right: 0; opacity: 1; }
.cpage .chip input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.cpage .chip:active span { transform: scale(.96); transition-duration: .35s, .35s, .35s, .12s; }
/* The subject's fixed tone, as a small dot before the label */
.cpage .chip__tone { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* Floating-label fields */
.cpage .fl { position: relative; }
.cpage .fl input, .cpage .fl select { width: 100%; height: var(--h-field); padding: 26px 18px 8px; border-radius: var(--r-field); border: 1px solid var(--line); background: var(--field);
  font-size: 16px; outline: none; transition: border-color .3s, background .3s, box-shadow .3s; appearance: none; -webkit-appearance: none; }
.cpage .fl select { padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23a395b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.cpage .fl select option { background: var(--night-3); color: var(--ink); }
.cpage .fl label { position: absolute; left: 19px; top: 20px; font-size: 16px; color: var(--muted); pointer-events: none; transform-origin: left top; transition: transform .35s var(--spring), color .3s; }
.cpage .fl input:focus + label, .cpage .fl input:not(:placeholder-shown) + label, .cpage .fl--select label { transform: translateY(-11px) scale(.76); }
.cpage .fl input:focus + label, .cpage .fl select:focus + label { color: var(--violet); }
.cpage .fl input:hover, .cpage .fl select:hover { background: var(--field-hover); }
.cpage .fl input:focus, .cpage .fl select:focus, .cpage .msg textarea:focus { border-color: rgba(169, 150, 255, .75); box-shadow: var(--ring-focus); background: rgba(243, 237, 229, .06); }
.cpage .fl input::placeholder { color: transparent; }
.cpage .fl input:focus::placeholder { color: var(--faint); }
.cpage .fl .ok { position: absolute; right: 16px; top: 21px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s var(--bounce); }
.cpage .fl .ok::after { content: ''; position: absolute; left: 7px; top: 4px; width: 4px; height: 8px; border: solid var(--night); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cpage .fl.is-valid .ok { opacity: 1; transform: scale(1); }
.cpage .reveal { animation: cp-reveal .55s var(--spring); }

/* Message area: grows with the text; a ring shows the limit */
.cpage .msg { position: relative; }
.cpage .msg textarea { display: block; width: 100%; min-height: 200px; max-height: 52vh; resize: none; padding: 20px 22px 44px; border-radius: var(--r-card); border: 1px solid var(--line);
  background: var(--field); font-size: 18px; line-height: 1.6; outline: none; transition: border-color .3s, box-shadow .3s, background .3s; }
.cpage .msg textarea::placeholder { color: var(--faint); }
.cpage .ring { position: absolute; right: 16px; bottom: 14px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }
.cpage .ring svg { width: 22px; height: 22px; transform: rotate(-90deg); }
.cpage .ring circle { fill: none; stroke-width: 2.5; }
.cpage .ring .track { stroke: rgba(243, 237, 229, .12); }
.cpage .ring .bar { stroke: var(--violet); stroke-linecap: round; stroke-dasharray: 56.55; stroke-dashoffset: 56.55; transition: stroke-dashoffset .3s var(--spring), stroke .3s; }
.cpage .ring.is-near .bar { stroke: var(--copper); }
.cpage .ring.is-over .bar { stroke: var(--error); }
.cpage .ring [data-left] { opacity: 0; transition: opacity .3s; }
.cpage .ring.is-near [data-left], .cpage .ring.is-over [data-left] { opacity: 1; }
.cpage .prompts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.cpage .prompts button { min-height: 36px; padding: 7px 13px; border-radius: 999px; border: 1px dashed var(--line-2); background: none; color: var(--muted); font-size: 13px; cursor: pointer;
  transition: color .3s, background .3s, border-color .3s, transform .45s var(--bounce); }
.cpage .prompts button:hover { color: var(--ink); border-style: solid; background: var(--field); transform: translateY(-1px); }
.cpage .prompts button:active { transform: scale(.96); }

/* Segmented control with a sliding thumb */
.cpage .seg { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--r-field); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); margin-top: 10px; }
.cpage .seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 12px; background: var(--ink); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); transition: transform .55s var(--spring); }
.cpage .seg label { position: relative; z-index: 1; cursor: pointer; }
.cpage .seg input { position: absolute; opacity: 0; pointer-events: none; }
.cpage .seg span { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 4px 8px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); text-align: center; line-height: 1.2; transition: color .35s; }
.cpage .seg span svg { flex: none; width: 16px; height: 16px; }
.cpage .seg label:active span { transform: scale(.97); }
.cpage .seg input:checked + span { color: var(--night); }
.cpage .seg input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Review list */
.cpage .summary { margin: 0 0 22px; padding: 0; list-style: none; border-radius: 20px; border: 1px solid var(--line); overflow: hidden; }
.cpage .summary li { display: grid; grid-template-columns: 112px 1fr auto; gap: 14px; align-items: start; padding: 12px 18px; font-size: 14.5px; }
.cpage .summary li + li { border-top: 1px solid var(--line); }
.cpage .summary .k { color: var(--muted); font-weight: 600; font-size: 13px; padding-top: 1px; }
.cpage .summary .v { color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cpage .summary button { border: 0; border-radius: 6px; background: none; color: var(--violet); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0 2px; }
.cpage .summary button:hover { text-decoration: underline; text-underline-offset: 3px; }
.cpage .privacy { display: flex; gap: 12px; margin: 0 0 24px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.cpage .privacy svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--violet); }

/* ---------- Buttons ---------- */
.cpage .nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 30px; }
.cpage .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h-button); padding: 0 26px; border-radius: 999px; border: 1px solid transparent;
  font: 700 15.5px/1.1 var(--sans); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .3s, color .3s, box-shadow .3s, opacity .3s, transform .5s var(--bounce); }
.cpage .btn:active { transform: scale(.96); transition-duration: .3s, .3s, .3s, .3s, .12s; }
.cpage .btn svg { width: 18px; height: 18px; transition: transform .45s var(--bounce); }
.cpage .btn--primary { background: var(--ink); color: var(--night); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); }
.cpage .btn--primary:hover { background: var(--signal); color: #fff; }
.cpage .btn--primary:hover svg { transform: translateX(3px); }
.cpage .btn--primary .kbd { border-color: rgba(18, 12, 27, .2); color: inherit; opacity: .55; }
.cpage .btn--ghost { background: none; color: var(--muted); padding: 0 16px; }
.cpage .btn--ghost:hover { color: var(--ink); }
.cpage .btn--ghost:hover svg { transform: translateX(-3px); }
.cpage .btn--send { min-height: var(--h-button-lg); padding: 0 32px; font-size: 16.5px; background: linear-gradient(100deg, #8f78ff, #5b3fd6); color: #fff; box-shadow: 0 16px 44px -12px rgba(0, 0, 0, .6); }
.cpage .btn--send:hover { background: linear-gradient(100deg, #a996ff, #6c50e8); }
.cpage .btn--send:hover svg { transform: translate(2px, -2px); }
.cpage .btn.is-busy { pointer-events: none; opacity: .85; }
.cpage .btn.is-busy svg { display: none; }
.cpage .spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: cp-spin .8s linear infinite; }
.cpage .btn.is-busy .spin { display: block; }
.cpage .status { margin: 0; font-size: 13px; color: var(--muted); }
.cpage .alert { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 158, 143, .08); border: 1px solid rgba(255, 158, 143, .3); color: var(--error); font-size: 14px; }
.cpage .alert:empty { display: none; }
.cpage .alert:not(:empty) { animation: cp-reveal .45s var(--spring); }

/* ---------- Confirmation ---------- */
.cpage .done { text-align: center; padding: clamp(20px, 4vw, 40px) 0 8px; }
.cpage .done:focus { outline: none; }
.cpage .check { width: 92px; height: 92px; margin: 0 auto 26px; }
.cpage .check circle { fill: none; stroke: url(#cg); stroke-width: 3; stroke-dasharray: 283; stroke-dashoffset: 283; animation: cp-draw 1s var(--spring) forwards .1s; }
.cpage .check path { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: cp-draw .6s var(--spring) forwards .7s; }
.cpage .done h2 { margin: 0 0 14px; font: 400 clamp(38px, 4vw, 56px)/1.02 var(--serif); color: var(--ink); text-wrap: balance; }
.cpage .done h2 em { font-style: italic; color: var(--violet); padding-right: .06em; }
.cpage .done p { max-width: 44ch; margin: 0 auto 28px; color: var(--ink-2); font-size: 17px; }
.cpage .done .note { margin-top: -12px; font-size: 13px; color: var(--copper); }
.cpage .done > * { animation: cp-rise .8s var(--spring) both; }
.cpage .done > :nth-child(2) { animation-delay: .35s; } .cpage .done > :nth-child(3) { animation-delay: .45s; } .cpage .done > :nth-child(4) { animation-delay: .55s; } .cpage .done > :nth-child(5) { animation-delay: .65s; }

/* ---------- Entrance ---------- */
.cpage__intro > *, .cpage .panel { animation: cp-rise 1s var(--spring) both; }
.cpage__intro > :nth-child(2) { animation-delay: .06s; } .cpage__intro > :nth-child(3) { animation-delay: .12s; } .cpage__intro > :nth-child(4) { animation-delay: .18s; } .cpage__intro > :nth-child(5) { animation-delay: .26s; }
.cpage .panel { animation-delay: .16s; }

/* ---------- Ambient: the drifting glow and a soft pointer light (outside .cpage, injected by js/contact.js) ---------- */
.cp-ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cp-blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.cp-blob--a { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, #5b3fd6 0%, transparent 68%); animation: cp-drift-a 26s cubic-bezier(.16, 1, .3, 1) infinite alternate; }
.cp-blob--b { width: 38vw; height: 38vw; right: -10vw; top: 24vh; background: radial-gradient(circle, #b06e57 0%, transparent 66%); opacity: .38; animation: cp-drift-b 32s ease-in-out infinite alternate; }
.cp-blob--c { width: 34vw; height: 34vw; left: 30vw; bottom: -18vw; background: radial-gradient(circle, #8d79b5 0%, transparent 66%); opacity: .4; animation: cp-drift-c 28s ease-in-out infinite alternate; }
.cp-spot { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--px, 50%) var(--py, 30%), rgba(169, 150, 255, .07), transparent 60%); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 999px) {
  .cpage { grid-template-columns: 1fr; gap: 40px; padding-top: 112px; }
  .cpage__intro { position: static; max-width: 40rem; }
  .cpage .dock { display: none; }
  .cpage .letter--inline { display: block; }
}
@media (max-width: 760px) {
  .cpage { --top-h: 52px; gap: 32px; padding: 96px var(--g) 56px; }
  .cpage__title { font-size: clamp(46px, 13vw, 60px); }
  .cpage__kicker { margin-bottom: 18px; }
  .cpage__lede { margin-top: 18px; font-size: 17px; }
  .cpage__aside-text { flex-basis: 100%; margin-bottom: 2px; }
  .cpage .panel { margin: 0 calc(var(--g) * -.5); padding: 24px 20px 26px; border-radius: 28px; }
  .cpage .sub { margin-bottom: 22px; }
  .cpage .choice { min-height: 80px; padding: 14px 16px; column-gap: 12px; }
  .cpage .choice__icon { width: 42px; height: 42px; border-radius: 12px; }
  .cpage .nav { margin-top: 26px; }
  .cpage .letter { padding: 24px 22px 22px; }
  .cpage .stamp { right: 14px; top: 40px; width: 88px; height: 88px; }
}
@media (max-width: 560px) {
  .cpage .choices, .cpage .row { grid-template-columns: 1fr; }
  .cpage .summary li { grid-template-columns: 1fr auto; gap: 4px 14px; }
  .cpage .summary .k { grid-column: 1 / -1; }
}
/* Touch screens: every control at least 44px tall */
@media (pointer: coarse) {
  .cpage .prompts button, .cpage .picked { min-height: 44px; }
  .cpage .summary button { min-height: 44px; min-width: 44px; margin: -12px 0; }
}

/* ---------- Keyframes ---------- */
@keyframes cp-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes cp-word { from { opacity: 0; transform: translateY(5px); filter: blur(2px); } }
@keyframes cp-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes cp-out { to { transform: scale(.7); opacity: 0; } }
@keyframes cp-reveal { from { opacity: 0; transform: translateY(-8px); } }
@keyframes cp-blink { 50% { opacity: 0; } }
@keyframes cp-stamp { to { transform: rotate(-14deg) scale(1); opacity: .9; } }
@keyframes cp-shake { 20% { transform: translateX(-8px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }
@keyframes cp-spin { to { transform: rotate(360deg); } }
@keyframes cp-draw { to { stroke-dashoffset: 0; } }
@keyframes cp-drift-a { to { transform: translate(8vw, 10vh) scale(1.12); } }
@keyframes cp-drift-b { to { transform: translate(-10vw, -8vh) scale(.9); } }
@keyframes cp-drift-c { to { transform: translate(-6vw, -12vh) scale(1.15); } }

/* Reduced motion: v2.css already stops every CSS animation and transition; these are the end states those animations would have reached. */
@media (prefers-reduced-motion: reduce) {
  .cpage .letter.is-sent .stamp { transform: rotate(-14deg); opacity: .9; }
  .cpage .check circle, .cpage .check path { stroke-dashoffset: 0; }
  .cpage .caret { opacity: 1; }
  .cp-ambient { display: none; }
}