/* WTC Design System v0.1 — components.
   Contracts, variants and states: ../COMPONENTS.md */

/* ---- Brand mark ------------------------------------------------------ */
/* The "?!" device used inside band patterns, headings and stamps. The old
   boxed header wordmark was removed with the sticky header itself
   (internal ref): the brand now speaks through the printed layers. */
.wtc-wordmark__mark { color: var(--wtc-text-accent); -webkit-text-stroke: 0.5px var(--wtc-border-strong); }

/* ---- Site header ----------------------------------------------------- */
/* internal ref: quiet orientation restored after the -006 over-removal.
   Sticky so the brand link back to #top stays reliable after scrolling —
   but stationery-quiet: one slim veiled-paper bar, textual wordmark, one
   subordinate Anfrage link. No boxed wordmark, no CTA field. The veil token
   exists for exactly this surface (see tokens.css). */
.wtc-header {
  position: sticky;
  top: 0;
  z-index: 20; /* above the strike stamp (z 6) while scrolling */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wtc-space-4);
  min-height: 48px;
  padding: 0 var(--wtc-gutter);
  background: var(--wtc-surface-page-veil);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: var(--wtc-border-width-hair) solid var(--wtc-border-hairline);
}
.wtc-header__brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--wtc-hit-min);
  font-family: var(--wtc-font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--wtc-tracking-display);
  text-decoration: none;
  /* The wordmark and its reaction mark are one object: never let them wrap
     onto separate lines at compact widths (320/390/430). */
  white-space: nowrap;
}
.wtc-header__brand:hover { color: var(--wtc-text-primary); text-decoration: underline; text-underline-offset: 0.3em; }
/* Header reaction mark: one typographic lockup, not a badge. The punctuation
   keeps the WTC pink and ink keyline but shares the wordmark's scale and
   baseline; the tight optical gap is enough to read it as the reaction mark. */
.wtc-header__brand .wtc-wordmark__mark {
  display: inline-block;
  margin-inline-start: 0.1em;
  font-size: 1em;
  line-height: inherit;
  color: var(--wtc-text-accent);
  border: 0;
  background: transparent;
  transform: none;
  text-decoration: none;
}
.wtc-header__cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--wtc-hit-min);
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label-lg);
  letter-spacing: var(--wtc-tracking-label);
  text-transform: uppercase;
}

/* ---- Buttons -------------------------------------------------------- */
.wtc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wtc-space-2);
  min-height: var(--wtc-hit-primary);
  padding-inline: var(--wtc-space-6);
  border: none;
  border-radius: var(--wtc-radius);
  background: var(--wtc-surface-inverse);
  color: var(--wtc-text-inverse);
  font-family: var(--wtc-font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--wtc-elevation-print);
  transition: transform var(--wtc-duration-ui) var(--wtc-ease-ui),
              box-shadow var(--wtc-duration-ui) var(--wtc-ease-ui);
}
.wtc-btn:hover { color: var(--wtc-text-inverse); transform: translate(-1px, -1px); box-shadow: var(--wtc-elevation-print-hover); }
.wtc-btn:active { transform: translate(2px, 2px); box-shadow: var(--wtc-elevation-print-active); }
.wtc-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

/* On an inverse surface the print shadow needs a light offset to stay visible. */
.wtc-surface--inverse .wtc-btn--on-paper {
  background: var(--wtc-surface-inverse);
  color: var(--wtc-text-inverse);
}

.wtc-btn-quiet {
  display: inline-flex;
  align-items: center;
  min-height: var(--wtc-hit-min);
  padding-inline: var(--wtc-space-2);
  background: none;
  border: none;
  font: inherit;
  font-size: var(--wtc-type-body-small);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  cursor: pointer;
}

/* ---- Cake frame + reveal control ------------------------------------ */
.wtc-frame {
  position: relative;
  aspect-ratio: var(--wtc-aspect-cake);
  background: var(--wtc-surface-inverse);
  overflow: hidden;
  box-shadow: var(--wtc-elevation-frame);
}
/* --wtc-frame-focus lets each slide nudge its crop's vertical anchor per-image
   (set inline per .wtc-frame instance) without a bespoke rule per slide. */
.wtc-frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center var(--wtc-frame-focus, 50%); }

.wtc-frame__band {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--wtc-surface-page);
  overflow: hidden;
}
/* Two printed flaps fold over the cake, leaving a die-cut peek window
   (the ~16% gap between them) where a real, unenhanced slice of the photo
   shows through — enough to invite curiosity, not enough to recognise the
   cake. This is the concealment itself, not decoration around it. */
.wtc-frame__band--top { top: 0; height: 42%; border-bottom: var(--wtc-border-width-print) dashed var(--wtc-border-strong); }
.wtc-frame__band--bottom { bottom: 0; height: 42%; border-top: var(--wtc-border-width-print) dashed var(--wtc-border-strong); }
.wtc-frame__pattern {
  position: absolute;
  inset: -70% -20%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-content: center;
  transform: rotate(-6deg);
  font-family: var(--wtc-font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  opacity: 0.85;
}
.wtc-frame__pattern .wtc-wordmark__mark { -webkit-text-stroke: 0; }

/* Peek layer — sits only in the ~16% die-cut gap between the two bands, over
   the real photo. Milky/translucent parchment, not a disabled-looking flat
   tint: a vertical gradient (denser at the edges, lighter at the centre) plus
   a soft inset shadow on both edges reads as a physical paper/vellum layer
   with depth, and the light backdrop-filter blur only ever touches this
   layer's own compositing — the underlying <img> pixels are never filtered.
   Purely decorative tease: aria-hidden, pointer-events none, JS-only (without
   JS there is no framing at all, so nothing here to half-render). */
.wtc-frame__peek {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  height: 16%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--wtc-surface-peek-edge) 0%,
    var(--wtc-surface-peek-core) 42%,
    var(--wtc-surface-peek-core) 58%,
    var(--wtc-surface-peek-edge) 100%
  );
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  box-shadow:
    inset 0 3px 5px rgba(23, 19, 16, 0.10),
    inset 0 -3px 5px rgba(23, 19, 16, 0.10);
}
.wtc-frame[data-phase="revealed"] .wtc-frame__peek { display: none; }

.wtc-reveal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: var(--wtc-space-2);
  min-height: var(--wtc-hit-min);
  padding-inline: var(--wtc-space-4);
  z-index: 5;
  background: var(--wtc-surface-accent);
  color: var(--wtc-text-primary);
  border: var(--wtc-border-width-print) solid var(--wtc-border-strong);
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label-lg);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: start;
}
.wtc-reveal:hover { background: var(--wtc-surface-inverse); color: var(--wtc-surface-accent); }
.wtc-reveal:focus-visible { outline-color: var(--wtc-border-strong); outline-offset: 3px; }
/* Micro-animation opening cue — a chevron that nudges forward on hover/focus.
   Uses the same --wtc-duration-ui token as the rest of the UI layer, so it
   collapses to 1ms under reduced/off motion automatically, no extra rule. */
.wtc-reveal__icon { display: inline-flex; transition: transform var(--wtc-duration-ui) var(--wtc-ease-ui); }
.wtc-reveal:hover .wtc-reveal__icon,
.wtc-reveal:focus-visible .wtc-reveal__icon { transform: translateX(3px); }

/* Impact stamp — the animated payoff. The cake is not the trick; this is.
   The ONLY place yellow appears in the product surface.
   internal ref: the stamp is no longer a centered in-frame banner. It
   lives in the SLIDE (a sibling after `.wtc-frame`, which is
   `overflow: hidden` and would clip it) and strikes diagonally ACROSS the
   frame's upper edge: its vertical center is anchored on the frame's top
   boundary (`top: var(--wtc-slide-pad)` = the frame's offset inside the
   padded slide, + `translateY(-50%)`), with a stronger rotation
   (`--wtc-stamp-rotate-strike`). Roughly half the stamp lands above the
   photo — completing the `Und alle so:` line directly above it — and only
   the lower half overlaps the image's top edge, so the cake itself stays
   visible. `--wtc-slide-pad` (on `.wtc-slide`) reserves exactly the
   overhang room above the frame, so the slider viewport's `overflow:
   hidden` never clips the strike. */
.wtc-aftershock {
  --wtc-aftershock-inset: 2%;
  position: absolute;
  left: var(--wtc-aftershock-inset);
  right: var(--wtc-aftershock-inset);
  top: var(--wtc-slide-pad);
  background: var(--wtc-surface-aftershock);
  color: var(--wtc-text-primary);
  font-family: var(--wtc-font-display);
  font-size: var(--wtc-strike-size);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  padding: 0.4em 0.5em;
  border: var(--wtc-border-width-print) solid var(--wtc-border-strong);
  box-shadow: var(--wtc-elevation-print);
  transform: translateY(-50%) rotate(var(--wtc-stamp-rotate-strike));
  z-index: 6;
}
/* Magenta-on-yellow fails AA (2.69:1 at large text); keep the mark ink here,
   matching this system's existing yellow-background contrast discipline. */
.wtc-aftershock .wtc-wordmark__mark { color: inherit; -webkit-text-stroke: 0; }

/* Motion grammar: anticipation -> rupture -> impact. The cake photo itself is
   never the animated trick — only the printed layers move. */
@keyframes wtc-band-out-top { to { transform: translateY(-120%) rotate(-6deg); opacity: 0; } }
@keyframes wtc-band-out-bottom { to { transform: translateY(120%) rotate(6deg); opacity: 0; } }
/* Every step re-states translateY(-50%): the animation targets `transform`
   directly, so any step that omitted it would overwrite the static rule's
   vertical centering above (including at the held "to" state — this is what
   reduced/no motion resolve to, per --wtc-duration-aftershock: 1ms). */
@keyframes wtc-stamp-land {
  from { opacity: 0; transform: translateY(-50%) scale(1.6) rotate(4deg); }
  65% { opacity: 1; transform: translateY(-50%) scale(0.97) rotate(calc(var(--wtc-stamp-rotate-strike) + 2deg)); }
  to { opacity: 1; transform: translateY(-50%) scale(1) rotate(var(--wtc-stamp-rotate-strike)); }
}

.wtc-frame[data-phase="rupture"] .wtc-frame__band--top { animation: wtc-band-out-top var(--wtc-duration-rupture) var(--wtc-ease-rupture) both; }
.wtc-frame[data-phase="rupture"] .wtc-frame__band--bottom { animation: wtc-band-out-bottom var(--wtc-duration-rupture) var(--wtc-ease-rupture) both; }
/* Sibling combinator, not descendant: the stamp sits beside the frame in the
   slide so it can cross the frame's clipped upper edge. */
.wtc-frame[data-phase="revealed"] + .wtc-aftershock { animation: wtc-stamp-land var(--wtc-duration-aftershock) var(--wtc-ease-aftershock) var(--wtc-delay-aftershock) both; }

/* Stage variant (internal ref). On the stage the stamp is not the
   conclusion of a rupture — there is nothing to react to, because the
   flagship was never concealed — so it is printed matter that is simply
   there at first paint. Two concrete reasons beyond the aesthetic one:
   the land keyframe overshoots to scale(1.6), and the slide's clip edge
   (.wtc-slider__viewport's overflow:hidden) is what absorbs that overshoot
   inside the gallery — the stage has no such container, so an animated
   overshoot would push the document's scrollWidth past the viewport at
   compact widths; and an entry point should be complete at first paint
   rather than have its payoff arrive 480ms late. Equal specificity to the
   rule above, placed after it, so source order decides. */
.wtc-frame[data-phase="revealed"] + .wtc-aftershock--stage { animation: none; }

/* ---- Product Reveal Slider ------------------------------------------- */
/* Slider state (which product is showing) is fully separate from each
   slide's own reveal state (its .wtc-frame's data-phase, untouched by
   navigation). Track position is driven by --wtc-slide-index, a plain CSS
   custom property set on the track by JS — percentage-based translateX is
   relative to the track's own box, so this stays correct across resize with
   no JS recalculation. Without JS the property is never set, so `0` (the
   var() fallback) always wins and slide 1 (Capybara) is the only one in
   view — the required no-JS baseline, with no extra markup or logic. */
.wtc-slider { position: relative; }
/* padding + equal negative margin: gives the active frame's ambient
   box-shadow room to bleed vertically without being clipped by the
   overflow:hidden this needs horizontally (to hide the inactive slide),
   while leaving the viewport's own occupied layout height unchanged. */
.wtc-slider__viewport { overflow: hidden; padding-block: 18px; margin-block: -18px; }
.wtc-slider__track {
  display: flex;
  transform: translateX(calc(-100% * var(--wtc-slide-index, 0)));
  transition: transform var(--wtc-duration-slide) var(--wtc-ease-ui);
}
/* Source blocks retain their provenance-friendly grouping; these explicit
   founder-owned positions keep the non-JS flex fallback in the same sequence
   that enhance.js establishes for the interactive DOM. */
[data-slide][data-slider-order="1"] { order: 1; }
[data-slide][data-slider-order="2"] { order: 2; }
[data-slide][data-slider-order="3"] { order: 3; }
[data-slide][data-slider-order="4"] { order: 4; }
[data-slide][data-slider-order="5"] { order: 5; }
[data-slide][data-slider-order="6"] { order: 6; }
[data-slide][data-slider-order="7"] { order: 7; }
/* --wtc-slide-pad reserves the strike stamp's overhang room above the frame
   (half the stamp's height plus its rotation lift): the stamp's center rides
   the frame's top edge, so everything above that edge must fit inside the
   slide's own box or the slider viewport's overflow:hidden would clip it. */
.wtc-slide {
  flex: 0 0 100%;
  min-width: 0;
  position: relative;
  padding-top: var(--wtc-slide-pad);
}

.wtc-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wtc-space-3);
  margin-top: var(--wtc-space-4);
}
.wtc-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wtc-hit-min);
  height: var(--wtc-hit-min);
  padding: 0;
  background: var(--wtc-surface-page);
  color: var(--wtc-text-primary);
  border: var(--wtc-border-width-print) solid var(--wtc-border-strong);
  cursor: pointer;
  box-shadow: var(--wtc-elevation-print);
  transition: transform var(--wtc-duration-ui) var(--wtc-ease-ui), box-shadow var(--wtc-duration-ui) var(--wtc-ease-ui), opacity var(--wtc-duration-ui) var(--wtc-ease-ui);
}
.wtc-slider__arrow:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: var(--wtc-elevation-print-hover); }
.wtc-slider__arrow:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: var(--wtc-elevation-print-active); }
.wtc-slider__arrow:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; }

/* Register: quiet print-square dots instead of full-width labeled tabs —
   labeled tabs do not scale to eight slides at 390px, and the founder feedback
   (internal ref) explicitly demoted the register from a second control
   system to quiet progress. Each dot is a 32×44 hit area around a small
   square glyph; the product name lives in the aria-label. */
.wtc-slider__register { display: flex; }
.wtc-slider__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: var(--wtc-hit-min);
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.wtc-slider__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border: var(--wtc-border-width-rule) solid var(--wtc-border-strong);
  background: transparent;
  transition: background var(--wtc-duration-ui) var(--wtc-ease-ui);
}
.wtc-slider__dot[aria-selected="true"]::before {
  background: var(--wtc-surface-accent);
  border-width: var(--wtc-border-width-print);
  width: 12px;
  height: 12px;
}
.wtc-slider__dot:disabled { cursor: not-allowed; opacity: 0.5; }

/* Narrow-width register swap (internal ref, absorbing internal ref).
   The dot register's width is inventory-driven and cannot shrink: eight dots
   need 8 × 32px = 256px, plus two 44px arrows and two 12px gaps, so the nav
   demands exactly 368px. The page gutter is clamp(1.25rem, 4vw, 3.5rem),
   which resolves to 20px on every viewport up to 500px, so the content box
   is `100vw - 40px` there. 368 + 40 = 408: below 408px the dot register
   physically cannot fit, and it is that measured fit — not a device name —
   that sets the breakpoint below.

   Below 408px the register is replaced by a compact current/total counter
   rather than being shrunk, clipped or scrolled: shrinking eight dots would
   push their hit areas below a reliable size, and the register was already
   demoted to quiet progress (internal ref), so a literal "7/8" states
   the same progress more legibly than eight 3mm squares. Both arrows keep
   their full 44px targets at every width, and the counter carries a
   visually-hidden accessible name in the same "<name>, N von 8" form the
   dots use, so position and inventory stay perceivable non-visually.
   Exactly one of the two is ever in the DOM's accessibility tree. */
.wtc-slider__count {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wtc-hit-min);
  height: var(--wtc-hit-min);
  margin: 0;
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label-lg);
  letter-spacing: var(--wtc-tracking-label);
  font-variant-numeric: tabular-nums;
  color: var(--wtc-text-primary);
}
.wtc-slider__count-visual { white-space: nowrap; }

/* The two queries are exact complements of each other on purpose. A
   `max-width: 407.98px` counterpart would leave a hairline band (a layout
   viewport of exactly 407.99px, reachable via zoom on some engines) in which
   NEITHER rule applies and BOTH controls render — which is precisely the
   overflow this repair exists to remove. `not all and (min-width: 408px)` has
   no such gap. */
@media (min-width: 408px) {
  .wtc-slider__count { display: none; }
}
@media not all and (min-width: 408px) {
  .wtc-slider__register { display: none; }
}

/* ---- Terminal CTA slide: "Dein What the Cake?!" ---------------------- */
/* Same footprint as a cake frame (aspect, shadow), but it is the bridge out
   of browsing: printed pattern field, the product-language stamp, and one
   primary action into the request form. */
.wtc-cta-card {
  position: relative;
  aspect-ratio: var(--wtc-aspect-cake);
  background: var(--wtc-surface-inverse);
  overflow: hidden;
  box-shadow: var(--wtc-elevation-frame);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--wtc-space-6);
  padding: var(--wtc-space-5);
}
.wtc-cta-card__pattern {
  position: absolute;
  inset: -30% -20%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-content: center;
  transform: rotate(-6deg);
  font-family: var(--wtc-font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--wtc-text-inverse);
  opacity: 0.16;
  pointer-events: none;
}
.wtc-cta-card__pattern .wtc-wordmark__mark { color: inherit; -webkit-text-stroke: 0; }
.wtc-cta-card__title {
  position: relative;
  background: var(--wtc-surface-aftershock);
  color: var(--wtc-text-primary);
  font-family: var(--wtc-font-display);
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  padding: 0.4em 0.6em;
  border: var(--wtc-border-width-print) solid var(--wtc-border-strong);
  box-shadow: var(--wtc-elevation-print);
  transform: rotate(var(--wtc-stamp-rotate-mark));
}
.wtc-cta-card__title .wtc-wordmark__mark { color: inherit; -webkit-text-stroke: 0; }
.wtc-cta-card .wtc-btn { position: relative; }

/* ---- Section heading ------------------------------------------------ */
.wtc-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--wtc-space-3);
  margin-bottom: var(--wtc-space-6);
}

/* ---- Process step --------------------------------------------------- */
.wtc-step {
  display: grid;
  gap: var(--wtc-space-2);
  align-content: start;
  padding: var(--wtc-space-5);
  background: var(--wtc-surface-page);
  border: var(--wtc-border-width-rule) solid var(--wtc-border-strong);
}
.wtc-step__index { font-family: var(--wtc-font-label); font-size: var(--wtc-type-label-lg); letter-spacing: var(--wtc-tracking-label); color: var(--wtc-text-primary); }

/* ---- Request wizard (internal ref) ------------------------------ */
/* One form, four accordion steps. All wizard chrome is [data-js-only] and
   starts [hidden]; enhance.js reveals it per state. Expand/collapse is a
   plain display toggle — no height animation, nothing delays input in any
   motion mode. Without JS the list renders as the linear four-block form. */
.wtc-wizard { list-style: none; margin: 0; padding: 0; display: grid; }
.wtc-wstep { display: grid; gap: var(--wtc-space-3); padding-block: var(--wtc-space-4); }
.wtc-wstep:first-child { padding-top: 0; }
.wtc-wstep:last-child { padding-bottom: 0; }
.wtc-wstep + .wtc-wstep { border-top: var(--wtc-border-width-hair) solid var(--wtc-border-hairline); }
.wtc-wstep__body { display: grid; gap: var(--wtc-space-4); }
.wtc-wstep__index {
  flex: none;
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label-lg);
  letter-spacing: var(--wtc-tracking-label);
}
.wtc-wstep__name {
  flex: none;
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label);
  letter-spacing: var(--wtc-tracking-label);
  text-transform: uppercase;
}
/* Grid, not flex: the minmax(0, 1fr) answer track truly bottoms out at 0,
   so a long nowrap answer ellipsizes instead of propagating its full text
   width up the intrinsic-size chain (flex min-content would). */
.wtc-wstep__summary {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--wtc-space-3);
  width: 100%;
  min-height: var(--wtc-hit-min);
  padding: var(--wtc-space-2) 2px;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.wtc-wstep__answer {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wtc-type-body-small);
}
.wtc-wstep__edit {
  flex: none;
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label);
  letter-spacing: var(--wtc-tracking-label);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.35em;
}
.wtc-wstep__summary:hover .wtc-wstep__edit { color: var(--wtc-text-accent); }
.wtc-wstep__upcoming {
  display: flex;
  align-items: baseline;
  gap: var(--wtc-space-3);
  padding: var(--wtc-space-2) 2px;
  opacity: 0.45;
}
.wtc-wstep__progress { opacity: 0.6; }
.wtc-wstep__actions { display: flex; }

/* Torte/Muffins binary choice: two print-style options, native radios.
   The real input covers its whole option (opacity 0), so click/touch land
   on the native control and validation bubbles anchor to the visible box. */
.wtc-choice { border: 0; margin: 0; padding: 0; display: grid; gap: var(--wtc-space-2); }
.wtc-choice legend { padding: 0; }
.wtc-choice__options { display: flex; flex-wrap: wrap; gap: var(--wtc-space-3); }
.wtc-choice__option { position: relative; display: inline-flex; }
.wtc-choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wtc-choice__text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wtc-hit-min);
  padding-inline: var(--wtc-space-5);
  border: var(--wtc-border-width-rule) solid var(--wtc-border-strong);
  font-family: var(--wtc-font-label);
  font-size: var(--wtc-type-label-lg);
  letter-spacing: var(--wtc-tracking-label);
  text-transform: uppercase;
  transition: background var(--wtc-duration-ui) var(--wtc-ease-ui);
}
/* Accent background + inherited ink text: the same 4.55:1 AA pairing the
   motion-control's pressed state already uses. */
.wtc-choice__input:checked + .wtc-choice__text {
  background: var(--wtc-surface-accent);
  border-width: var(--wtc-border-width-print);
  font-weight: 700;
}
.wtc-choice__input:focus-visible + .wtc-choice__text {
  outline: var(--wtc-focus-width) solid var(--wtc-focus-ring);
  outline-offset: var(--wtc-focus-offset);
}
.wtc-choice--conditional { margin-top: var(--wtc-space-2); }

/* ---- Fields --------------------------------------------------------- */
.wtc-field { display: grid; gap: var(--wtc-space-2); }
.wtc-field__label { font-family: var(--wtc-font-label); font-size: var(--wtc-type-label); letter-spacing: var(--wtc-tracking-label); text-transform: uppercase; opacity: 0.75; }
.wtc-field__control {
  width: 100%;
  background: transparent;
  color: var(--wtc-text-primary);
  border: none;
  border-bottom: var(--wtc-border-width-rule) dashed var(--wtc-border-strong);
  padding: var(--wtc-space-2) 2px var(--wtc-space-3);
  font-family: var(--wtc-font-label);
  font-size: 0.9375rem;
  min-height: var(--wtc-hit-min);
}
textarea.wtc-field__control { resize: vertical; }

.wtc-form-card {
  background: var(--wtc-surface-page);
  color: var(--wtc-text-primary);
  padding: var(--wtc-space-5);
  border: var(--wtc-border-width-hair) solid var(--wtc-border-hairline);
  display: grid;
  gap: var(--wtc-space-5);
}
/* The card sits on a light field inside an inverse-surface section, so it
   needs its own link colour: the .wtc-surface--inverse a rule (foundation.css)
   would otherwise paint paper-coloured text on this paper background. */
.wtc-form-card a { color: var(--wtc-text-primary); }
.wtc-form-card a:hover { text-decoration-thickness: 2px; }
.wtc-status {
  border: var(--wtc-border-width-rule) dashed var(--wtc-border-strong);
  border-inline-start: var(--wtc-border-width-print) solid var(--wtc-surface-accent);
  padding: var(--wtc-space-3) var(--wtc-space-4);
  font-size: var(--wtc-type-body-small);
}
.wtc-status__key { color: var(--wtc-text-primary); font-weight: 700; }
.wtc-status--error { border-inline-start-color: var(--wtc-palette-magenta); }
.wtc-status--error .wtc-status__key { text-decoration: underline; }

/* ---- Enquiry success: one branded completion moment ---------------- */
/* The wizard is replaced, not reset underneath a utility toast. Motion is
   driven exclusively by the system tokens, so reduced motion resolves the
   complete composition immediately instead of removing meaning. */
.wtc-success {
  min-height: clamp(430px, 62vw, 560px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--wtc-space-5);
  padding: clamp(var(--wtc-space-4), 6vw, var(--wtc-space-7)) 0;
  text-align: center;
  overflow: hidden;
}
.wtc-success__impact {
  position: relative;
  width: clamp(180px, 44vw, 250px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.wtc-success__impact::before,
.wtc-success__impact::after {
  --impact-rotate: 0deg;
  --impact-shift: 0;
  content: "";
  position: absolute;
  inset: 16%;
  border: var(--wtc-border-width-print) solid var(--wtc-border-strong);
  background: var(--wtc-surface-aftershock);
  z-index: -1;
}
.wtc-success__impact::before { --impact-rotate: -7deg; transform: rotate(var(--impact-rotate)); }
.wtc-success__impact::after {
  --impact-rotate: 8deg;
  inset: 24%;
  background: var(--wtc-surface-accent);
  transform: rotate(var(--impact-rotate));
  box-shadow: 8px 8px 0 var(--wtc-text-primary);
}
.wtc-success__mark {
  --impact-rotate: -4deg;
  --impact-shift: -0.06em;
  color: var(--wtc-text-primary);
  font-family: var(--wtc-font-display);
  font-size: clamp(4rem, 18vw, 7.5rem);
  line-height: 0.8;
  letter-spacing: -0.12em;
  transform: translateX(var(--impact-shift)) rotate(var(--impact-rotate));
}
.wtc-success__sprinkle {
  --sprinkle-x: 0px;
  --sprinkle-y: -105px;
  --sprinkle-r: 0deg;
  position: absolute;
  left: calc(50% - 14px);
  top: calc(50% - 4px);
  width: 28px;
  height: 8px;
  background: var(--wtc-surface-accent);
  border: 2px solid var(--wtc-border-strong);
  transform: translate(var(--sprinkle-x), var(--sprinkle-y)) rotate(var(--sprinkle-r));
}
.wtc-success__sprinkle:nth-child(even) { background: var(--wtc-surface-aftershock); }
.wtc-success__sprinkle:nth-child(1) { --sprinkle-x: -92px; --sprinkle-y: -74px; --sprinkle-r: 28deg; }
.wtc-success__sprinkle:nth-child(2) { --sprinkle-x: -122px; --sprinkle-y: -12px; --sprinkle-r: -8deg; }
.wtc-success__sprinkle:nth-child(3) { --sprinkle-x: -98px; --sprinkle-y: 64px; --sprinkle-r: -34deg; }
.wtc-success__sprinkle:nth-child(4) { --sprinkle-x: -22px; --sprinkle-y: 104px; --sprinkle-r: 76deg; }
.wtc-success__sprinkle:nth-child(5) { --sprinkle-x: 66px; --sprinkle-y: 82px; --sprinkle-r: 24deg; }
.wtc-success__sprinkle:nth-child(6) { --sprinkle-x: 110px; --sprinkle-y: 12px; --sprinkle-r: -12deg; }
.wtc-success__sprinkle:nth-child(7) { --sprinkle-x: 82px; --sprinkle-y: -72px; --sprinkle-r: -34deg; }
.wtc-success__sprinkle:nth-child(8) { --sprinkle-x: 4px; --sprinkle-y: -112px; --sprinkle-r: 82deg; }
.wtc-success__copy { display: grid; justify-items: center; gap: var(--wtc-space-3); max-width: 590px; }
.wtc-success__copy .wtc-label--accent { justify-content: center; }
.wtc-success__payoff {
  display: inline-block;
  margin-top: 0.18em;
  padding: 0.04em 0.14em 0.1em;
  background: var(--wtc-text-primary);
  color: var(--wtc-surface-accent);
  font-size: clamp(1.25rem, 7.3vw, 2.4rem);
  line-height: 1.05;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.wtc-success__lead { font-size: var(--wtc-type-body-lead); text-wrap: pretty; }
.wtc-success__restart {
  margin-top: var(--wtc-space-3);
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.68;
}
.wtc-success__restart:hover { opacity: 1; }

@keyframes wtc-success-impact {
  0% { opacity: 0; transform: translateX(var(--impact-shift)) scale(0.25) rotate(calc(var(--impact-rotate) - 18deg)); }
  68% { opacity: 1; transform: translateX(var(--impact-shift)) scale(1.14) rotate(calc(var(--impact-rotate) + 3deg)); }
  100% { opacity: 1; transform: translateX(var(--impact-shift)) scale(1) rotate(var(--impact-rotate)); }
}
@keyframes wtc-success-sprinkle {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.2); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--sprinkle-x), var(--sprinkle-y)) rotate(var(--sprinkle-r)) scale(1); }
}
@keyframes wtc-success-copy {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}
.wtc-success[data-celebrating="true"] .wtc-success__impact::before,
.wtc-success[data-celebrating="true"] .wtc-success__impact::after,
.wtc-success[data-celebrating="true"] .wtc-success__mark {
  animation: wtc-success-impact var(--wtc-duration-aftershock) var(--wtc-ease-aftershock) both;
}
.wtc-success[data-celebrating="true"] .wtc-success__sprinkle {
  animation: wtc-success-sprinkle var(--wtc-duration-rupture) var(--wtc-ease-aftershock) both;
}
.wtc-success[data-celebrating="true"] .wtc-success__copy {
  animation: wtc-success-copy var(--wtc-duration-aftershock) var(--wtc-ease-ui) var(--wtc-delay-aftershock) both;
}

@media not all and (min-width: 408px) {
  .wtc-success { min-height: 460px; }
  .wtc-success__impact { width: 170px; }
  .wtc-success__sprinkle { width: 22px; height: 7px; }
  .wtc-success__sprinkle:nth-child(1) { --sprinkle-x: -70px; --sprinkle-y: -58px; }
  .wtc-success__sprinkle:nth-child(2) { --sprinkle-x: -88px; --sprinkle-y: -8px; }
  .wtc-success__sprinkle:nth-child(3) { --sprinkle-x: -72px; --sprinkle-y: 50px; }
  .wtc-success__sprinkle:nth-child(4) { --sprinkle-x: -16px; --sprinkle-y: 76px; }
  .wtc-success__sprinkle:nth-child(5) { --sprinkle-x: 48px; --sprinkle-y: 60px; }
  .wtc-success__sprinkle:nth-child(6) { --sprinkle-x: 78px; --sprinkle-y: 10px; }
  .wtc-success__sprinkle:nth-child(7) { --sprinkle-x: 60px; --sprinkle-y: -54px; }
  .wtc-success__sprinkle:nth-child(8) { --sprinkle-x: 4px; --sprinkle-y: -82px; }
}

/* ---- Footer --------------------------------------------------------- */
.wtc-footer {
  padding: var(--wtc-space-6) var(--wtc-gutter) var(--wtc-space-7);
  border-top: var(--wtc-border-width-rule) solid var(--wtc-border-strong);
  display: flex;
  flex-wrap: wrap;
  gap: var(--wtc-space-4) var(--wtc-space-6);
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}
/* ---- Progressive enhancement ---------------------------------------- */
/* Without JS: no tease bands, no dead controls — the cake is simply visible. */
html:not(.js) [data-js-only] { display: none !important; }
html.js [data-no-js-only] { display: none !important; }