/* Testimonials — page-specific styles. Extends ../style.css; tokens only. */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Avatars: typographic initials ---------- */
.avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: var(--track-small); line-height: 1;
  background: var(--white); color: var(--ink-soft); }
.avatar--lg { width: 64px; height: 64px; font-size: 22px; }
.by { display: flex; align-items: center; gap: 14px; margin: 0; }
.by cite { font-style: normal; font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: var(--track-body); }
.by--lg cite { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: var(--track-body); }

/* ---------- Featured voice ---------- */
.feature { padding-bottom: clamp(96px, 13vw, 190px); }
.feature__inner { position: relative; }
.feature__quote { position: relative; margin: 0; max-width: 46rem; }
.feature__mark { display: block; width: clamp(44px, 6vw, 72px); height: auto; margin: 0 0 clamp(20px, 3vw, 32px); fill: var(--accent); }
.feature__quote blockquote { margin: 0; }
.feature__text { margin: 0; font-size: clamp(1.5rem, 3.1vw, 2.55rem); font-weight: 500; line-height: 1.18; letter-spacing: var(--track-title); text-wrap: pretty; }
.feature__quote .by { margin-top: clamp(28px, 4vw, 44px); }

/* The only image in the export: a cut-out figure that breaks out of the text column. */
.feature__figure { width: min(280px, 62%); margin: clamp(40px, 7vw, 64px) auto 0; pointer-events: none; }
.feature__figure img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 34px 38px rgba(var(--tint-rgb), 0.55)); }
@media (min-width: 1180px) {
  /* 46rem quote + figure must fit the 72rem container at 1180px: 736 + 307 < 1100. */
  .feature__figure { position: absolute; right: 0; top: 52%; width: clamp(300px, 26vw, 420px); margin: 0; translate: 0 -50%; }
}

/* ---------- The wall: gapless, interlocking quote cards ---------- */
.wall-section { padding-top: clamp(40px, 6vw, 88px); }
.wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; grid-auto-flow: dense; gap: clamp(16px, 2vw, 24px); }
.wall__item { display: flex; min-width: 0; }
.wall__item > .tcard { flex: 1; }
@media (min-width: 700px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__item--navya { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wall__item--navya    { grid-column: 1 / 4; grid-row: span 2; }
  .wall__item--verified { grid-column: 4 / 7; }
  .wall__item--venkat   { grid-column: 4 / 7; }
  .wall__item--sunder   { grid-column: 1 / 5; }
  .wall__item--dinesh   { grid-column: 5 / 7; }
}

.tcard { position: relative; display: flex; flex-direction: column; gap: clamp(18px, 2.2vw, 26px); margin: 0; overflow: hidden;
  padding: clamp(24px, 3vw, 38px); border-radius: var(--radius-card); }
.tcard blockquote { margin: 0; }
.tcard p { margin: 0; font-family: var(--font-body); font-size: clamp(1.0625rem, 1.3vw, 1.18rem); font-weight: 500; line-height: 1.6; letter-spacing: var(--track-body); text-wrap: pretty; }
.tcard .by { margin-top: auto; }
.tcard__mark { display: block; flex: none; width: 30px; height: 30px; fill: currentColor; opacity: 0.55; }

/* Pointer spotlight. page.js springs --glow (0..1) and sets --mx/--my; hover lift is a spring on `translate`, so it
   can be interrupted mid-flight. Paints on its own layer; never moves layout. */
.tcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--glow, 0);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 62%); }

/* Light lavender card, deep-purple ink. */
.tcard--light { background: var(--card); color: var(--card-ink); box-shadow: 0 30px 60px -44px rgba(var(--tint-rgb), 0.9); }
.tcard--light .tcard__mark { fill: var(--accent); opacity: 1; }
.tcard--light .avatar { background: var(--card-ink); color: var(--white); }
.tcard--light .by cite { color: var(--item-ink); }
.tcard--light::after { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--tint-rgb), 0.08), transparent 62%); }

/* Tall lead card: bigger display type fills the double-height cell. */
.tcard--tall p { font-family: var(--font-display); font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.32; letter-spacing: var(--track-title); }
.tcard--tall .tcard__mark { width: 44px; height: 44px; }
.tcard--tall i { font-style: italic; }

/* Glass panel (frosted, white text). */
.tcard.panel { padding: clamp(24px, 3vw, 38px); color: var(--white); }
.tcard.panel .tcard__mark { fill: var(--accent); opacity: 1; }
.tcard.panel .by cite { color: rgba(255, 255, 255, 0.9); }

/* Deep gradient card for the short quote. */
.tcard--deep { color: var(--white); justify-content: space-between;
  background: linear-gradient(155deg, var(--bg-glow) 0%, var(--bg-mid) 46%, var(--bg-deep) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px -40px rgba(var(--tint-rgb), 0.9); }
.tcard--deep p { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.22; letter-spacing: var(--track-title); }
.tcard--deep .tcard__mark { fill: var(--white); opacity: 0.7; }
.tcard--deep .by cite { color: rgba(255, 255, 255, 0.92); }


/* No-JS / no-spring fallback for the hover lift and spotlight (main.js adds .js-press when the spring layer runs). */
@media (hover: hover) and (pointer: fine) {
  html:not(.js-press) .tcard { transition: transform var(--dur-hover) var(--ease); }
  html:not(.js-press) .tcard:hover { transform: translateY(var(--lift-l)); }
  html:not(.js-press) .tcard:hover::after { opacity: 1; }
}

/* ---------- New from our community ----------
   page.js fills #community-wall with approved stories from the Sheet and un-hides the section. Same cards as the wall
   above. Dense grid: page.js sets data-span (4 = a third of the row, 6 = a half, 12 = the full row) so every row
   fills and no cell is left empty. Below 1000px it is two columns, then one, and an odd last card spans the row. */
.more { padding-top: 0; padding-bottom: clamp(24px, 4vw, 56px); }
.more[hidden] { display: none; }
.more__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; grid-auto-flow: dense; gap: clamp(16px, 2vw, 24px); }
.more__item { display: flex; min-width: 0; }
.more__item > .tcard { flex: 1; }
.more__item.is-pending { opacity: 0; }
@media (min-width: 700px) and (max-width: 999.98px) {
  .more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .more__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .more__item[data-span="4"] { grid-column: span 4; }
  .more__item[data-span="6"] { grid-column: span 6; }
  .more__item[data-span="12"] { grid-column: 1 / -1; }
}
/* Submitted stories vary in length, so every variant reads in body type and long words wrap. */
.more .tcard blockquote { display: flex; flex-direction: column; gap: 0.8em; }
.more .tcard p, .more .tcard--deep p { font-family: var(--font-body); font-size: clamp(1.0625rem, 1.3vw, 1.18rem); line-height: 1.6; letter-spacing: var(--track-body); overflow-wrap: anywhere; }
.more .tcard--deep { justify-content: flex-start; }
.by__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.by__who cite { overflow-wrap: anywhere; }
.by__meta { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.35; letter-spacing: var(--track-body); overflow-wrap: anywhere; }
.tcard--light .by__meta { color: var(--item-ink); }
.tcard.panel .by__meta, .tcard--deep .by__meta { color: rgba(255, 255, 255, 0.82); }

/* ---------- Carousel ----------
   page.js wraps .wall in .cx > .cx__viewport and adds the bar. Below 1000px the five cards sit in one row that
   the viewport pans; at 1000px and up the interlocking grid above is untouched. Until page.js takes over
   (.is-live) the row is a native scroll-snap scroller, so it still works if the script does not run. */
.cx__bar { display: none; }
.cx__viewport:focus-visible { outline: none; border-radius: 0; }

@media (max-width: 999.98px) {
  .cx__viewport { margin: -6px calc(var(--gutter) * -1) -56px; padding: 6px var(--gutter) 56px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .cx__viewport::-webkit-scrollbar { display: none; }
  .cx .wall { position: relative; display: flex; grid-template-columns: none; gap: clamp(14px, 2.4vw, 22px); }
  .cx .wall__item { flex: 0 0 min(84%, 26rem); scroll-snap-align: start; }

  /* JS-driven: the track is moved with transform only; the viewport just clips. */
  .cx.is-live .cx__viewport { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; cursor: grab;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .cx.is-live .cx__viewport.is-dragging { cursor: grabbing; }
  .cx.is-live .wall { will-change: transform; }
  /* Cards beyond the clip never intersect the reveal observer, so they are held visible here instead
     (important beats the reveal animation too). Entrance motion belongs to the carousel, not to each card. */
  .cx.is-live .wall__item { opacity: 1 !important; transform: none !important; }

  /* Keyboard focus rings the card the carousel is on, not the whole edge-to-edge viewport. */
  .cx__viewport:focus-visible .is-current > .tcard { outline: 2px solid var(--white); outline-offset: 4px; }

  .cx.is-live .cx__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 12px; margin-top: clamp(20px, 3vw, 28px); }
  .cx.is-live.is-single .cx__bar { display: none; }
}

.cx__dots { display: flex; align-items: center; }
.cx__dot { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; }
.cx__dot::before { content: ''; width: 26px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.5);
  transform: scaleX(0.31); transition: transform var(--dur-spring) var(--ease-spring), background-color var(--dur-hover) var(--ease); }
.cx__dot[aria-current='true']::before { transform: scaleX(1); background: var(--white); }

.cx__nav { display: flex; gap: 8px; }
/* Small interactive control: the lighter material (the cards are the heavy surfaces). data-glass opts it into the
   reduced-transparency and more-contrast overrides in style.css. */
.cx__btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--white);
  background: var(--glass);
  box-shadow: var(--edge-top), var(--edge-ring), 0 12px 26px -14px rgba(var(--tint-rgb), 0.95);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  transition: opacity var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease); }
.cx__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx__btn[aria-disabled='true'] { opacity: 0.4; cursor: default; }

@media (hover: hover) and (pointer: fine) {
  .cx__dot:hover::before { background: rgba(255, 255, 255, 0.85); }
  .cx__btn:not([aria-disabled='true']):hover { background-color: rgba(255, 255, 255, 0.12); }
}

/* ---------- Reduced motion: no springs, lifts or travel; the glow and slide changes cross-fade ---------- */
@media (prefers-reduced-motion: reduce) {
  /* important: beats the blanket instant-transition rule in style.css, so these two keep a short cross-fade */
  .tcard::after { transition: opacity 0.2s linear !important; }
  .cx__dot::before { transition: background-color 0.2s linear !important; }
}

/* ---------- More contrast: defined edges instead of tint and translucency ---------- */
@media (prefers-contrast: more) {
  .tcard--light { box-shadow: inset 0 0 0 2px var(--card-ink); }
  .tcard--deep { box-shadow: inset 0 0 0 2px var(--white); }
  .avatar { box-shadow: inset 0 0 0 1px currentColor; }
  .cx__dot::before { background: transparent; box-shadow: inset 0 0 0 2px var(--white); }
  .cx__dot[aria-current='true']::before { background: var(--white); }
  .cx__btn[aria-disabled='true'] { opacity: 0.65; }
}


/* =====================================================================================================
   Share your experience: the submission form. Same field language as the contact form, same tokens.
   Light .card for the form, frosted .panel for the "what happens next" column. Palette and tokens only.
   ===================================================================================================== */
.share { padding-top: clamp(40px, 6vw, 88px); }
.share__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vw, 72px); align-items: start; }
.share__head { margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 960px) {
  .share__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 80px); }
  /* The reassurance column stays in view while the long form scrolls past it. */
  .share-aside { position: sticky; top: 112px; margin-top: clamp(24px, 5vw, 72px); }
}

/* ---------- Form card ---------- */
.card.share-card { display: block; min-height: 0; max-width: none; margin: 0; padding: clamp(26px, 4.4vw, 52px);
  box-shadow: 0 44px 80px -48px rgba(var(--tint-rgb), 0.95), 0 2px 10px rgba(var(--tint-rgb), 0.18); }
.sform-stage { display: grid; position: relative; }
.sform-stage > * { grid-area: 1 / 1; min-width: 0; }
.sform[hidden] { display: none; }
.sform__nojs { margin: 0; padding: 16px 18px; border-radius: 14px; background: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--card-ink); box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); }
.sform__nojs a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.sform__nojs a:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; border-radius: 8px; }
/* Without JS there is nothing to submit to, so the fields stay out of the way and the note above is the way out. */
html:not(.js) .sform__body { display: none; }
.sform__req-note { margin: 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; color: var(--item-ink); }

.sform__notice { margin: 0 0 22px; padding: 16px 18px; border-radius: 14px; background: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--card-ink);
  box-shadow: inset 4px 0 0 var(--accent), inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); }
.sform__notice[hidden] { display: none; }
.sform__notice strong { font-weight: 700; }

/* ---------- Fields ---------- */
.field { margin-top: 22px; }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: var(--track-body); color: var(--card-ink); }
.field__tag { flex: none; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--track-small); color: var(--item-ink); }
.field-row { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.field-row .field { margin-top: 0; }
@media (min-width: 600px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }

/* Focus ring: a sibling-less pseudo-element that grows outward and fades in. page.js springs --ring (0 to 1);
   only opacity and scale change, so it stays on the compositor. */
.control { position: relative; margin-top: 8px; --ring: 0; }
.control::after { content: ''; position: absolute; inset: -5px; border-radius: 20px; border: 2px solid var(--card-ink); pointer-events: none;
  opacity: var(--ring); scale: calc(0.965 + 0.035 * var(--ring)); }
html:not(.js-press) .control:focus-within { --ring: 1; }

.input { display: block; width: 100%; min-height: 52px; padding: 14px 16px; margin: 0; border-radius: 14px; border: 1px solid rgba(var(--tint-rgb), 0.6);
  background: var(--white); color: var(--card-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.45; letter-spacing: var(--track-body);
  -webkit-appearance: none; appearance: none; outline: none; transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease); }
.input:focus-visible { outline: none; }
.input--area { min-height: 184px; resize: vertical; line-height: 1.55; }
.input--select { padding-right: 52px; cursor: pointer; }
.control__chev { position: absolute; right: 16px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--card-ink); }
@media (hover: hover) { .input:hover { border-color: var(--card-ink); } }

.field__hint { margin: 8px 0 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; letter-spacing: var(--track-body); color: var(--item-ink); }
.field__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.field__count { flex: none; margin: 8px 0 0; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--item-ink); }
.field__count.is-near { font-weight: 700; color: var(--card-ink); }

/* Errors never rely on colour alone: a heavier border, an icon and a bold sentence. */
.field.is-invalid .input { border-color: var(--card-ink); box-shadow: inset 0 0 0 1px var(--card-ink); }
.field__error { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 700; line-height: 1.45; color: var(--card-ink); }
.field__error[hidden] { display: none; }
.field__error svg { flex: none; margin-top: 2px; }
.field__error:not([hidden]) { animation: err-in 0.28s var(--ease) both; }
@keyframes err-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Consent checkbox: the whole row is the target, the box is drawn by a sibling ---------- */
.field--consent { margin-top: 26px; }
.check { position: relative; display: flex; align-items: flex-start; gap: 14px; min-height: 44px; cursor: pointer; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; letter-spacing: var(--track-body); color: var(--card-ink); }
.check__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.check__box { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 9px; border: 1.5px solid var(--card-ink); background: var(--white); color: var(--white);
  transition: background-color var(--dur-hover) var(--ease); }
.check__box svg { opacity: 0; scale: 0.5; transition: opacity var(--dur-hover) var(--ease), scale var(--dur-spring) var(--ease-spring); }
.check__input:checked ~ .check__box { background: var(--card-ink); }
.check__input:checked ~ .check__box svg { opacity: 1; scale: 1; }
.check__input:focus-visible ~ .check__box { outline: 2px solid var(--card-ink); outline-offset: 4px; }
.field.is-invalid .check__box { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--card-ink); }
@media (hover: hover) { .check:hover .check__box { background: rgba(var(--tint-rgb), 0.08); } .check:hover .check__input:checked ~ .check__box { background: var(--ink-soft); } }

/* Honeypot: off-screen and clipped, never display:none (some bots skip those). */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Error summary ---------- */
.summary { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: var(--white); box-shadow: inset 4px 0 0 var(--card-ink), inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); color: var(--card-ink); }
.summary[hidden] { display: none; }
.summary:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 4px; border-radius: 16px; }
.summary__title { margin: 0; font-size: 1.125rem; font-weight: 500; line-height: 1.25; letter-spacing: var(--track-title); }
.summary__list { margin: 10px 0 0; padding: 0; list-style: none; }
.summary__list a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-body); font-size: 1rem; line-height: 1.4; text-decoration: underline; text-underline-offset: 3px; }
.summary__list a:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 3px; border-radius: 8px; }

/* ---------- Send failure (inline, role="alert"): the typed text is kept ---------- */
.sform__failure { margin: 26px 0 0; padding: 14px 18px; border-radius: 14px; background: var(--white); font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--card-ink);
  box-shadow: inset 4px 0 0 var(--card-ink), inset 0 0 0 1px rgba(var(--tint-rgb), 0.5); }
.sform__failure[hidden] { display: none; }
.sform__failure:not([hidden]) { animation: err-in 0.28s var(--ease) both; }

/* ---------- Submit ---------- */
.sform__submit { margin-top: 28px; }
.btn.btn--ink { background: var(--card-ink); color: var(--white); min-height: 52px; padding: 14px 26px; width: 100%; }
.btn.btn--ink svg { flex: none; }
.btn.btn--ink:disabled { opacity: 0.72; cursor: not-allowed; }
.btn.btn--ink[aria-busy='true']:disabled { cursor: progress; }
.btn.btn--ink-outline { background: transparent; color: var(--card-ink); box-shadow: inset 0 0 0 1.5px var(--card-ink); min-height: 52px; padding: 14px 26px; }
@media (hover: hover) {
  .btn.btn--ink:not(:disabled):hover { background: var(--ink-soft); }
  .btn.btn--ink-outline:hover { background: rgba(var(--tint-rgb), 0.08); }
}
.btn.btn--ink:focus-visible, .btn.btn--ink-outline:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 4px; }
@media (min-width: 560px) { .btn.btn--ink { width: auto; } }
.sform__spin { display: none; animation: sform-spin 0.9s linear infinite; }
.sform__btn[aria-busy='true'] .sform__spin { display: block; }
.sform__btn[aria-busy='true'] .sform__arrow { display: none; }
@keyframes sform-spin { to { rotate: 360deg; } }
.sform__note { margin: 14px 0 0; max-width: 32rem; font-family: var(--font-body); font-size: 0.875rem; line-height: 1.55; color: var(--item-ink); }

/* ---------- Thank-you: materializes from the send button, returns along the same path ---------- */
.sdone { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 16px; transform-origin: 50% 80%; }
.sdone[hidden] { display: none; }
.sdone__icon { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--card-ink); color: var(--white); }
.sdone__msg { margin-top: 8px; }
.sdone__msg:focus-visible { outline: 2px solid var(--card-ink); outline-offset: 8px; border-radius: 12px; }
.sdone__title { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.75rem); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); color: var(--card-ink); text-wrap: balance; }
.sdone__text { margin: 16px 0 0; max-width: 30rem; font-family: var(--font-body); font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.6; color: var(--card-ink); text-wrap: pretty; }
.sdone .btn { margin-top: 8px; }

/* ---------- What happens next (glass; the form card beside it is the light surface) ---------- */
.share-aside { color: var(--white); }
.share-aside__label { margin: 0 0 18px; font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.82); }
.share-aside__lead { margin: 0; font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 500; line-height: 1.14; letter-spacing: var(--track-title); text-wrap: balance; }
.share-aside__list { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: clamp(20px, 2.4vw, 28px) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.22); display: grid; gap: 16px; }
.share-aside__list li { display: flex; align-items: flex-start; gap: 12px; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5; letter-spacing: var(--track-body); color: rgba(255, 255, 255, 0.94); }
.share-aside__list svg { flex: none; margin-top: 2px; color: var(--accent); }

/* ---------- Phones ---------- */
@media (max-width: 479px) {
  .field__label { flex-direction: column; align-items: flex-start; gap: 2px; }
  .field__tag { order: 2; }
}

/* ---------- Accessibility ---------- */
@media (prefers-contrast: more) {
  .input { border-color: var(--card-ink); border-width: 2px; }
  .check__box { border-width: 2px; }
  .share-aside__list { border-top-color: var(--white); }
}
@media (forced-colors: active) {
  .control::after { border-color: Highlight; }
  .check__box { border-color: CanvasText; }
  .check__input:checked ~ .check__box { background: Highlight; color: HighlightText; }
}
/* Reduced motion: no ring growth (the ring simply appears), no error slide, no success scale, a still spinner. */
@media (prefers-reduced-motion: reduce) {
  .field__error:not([hidden]), .sform__failure:not([hidden]) { animation: none; }
  .control::after { scale: 1; }
  .sdone { scale: 1; }
  .sform__spin { animation: none; }
  .check__box svg { scale: 1; transition: opacity 0.2s linear; }
  .input { transition: none; }
}