/* Account UI design system v2 (P3 access shell). The auth/account surfaces speak the
   site's "Signature Line" design language (docs/design/DESIGN-SYSTEM.md) WITHOUT the
   animated line itself — that asset stays rationed to the glass header + landing. The
   pages' own expression: a light ambient ground (faint cyan glow, whisper of coral, an
   engineering grid fading behind the card), one centered glass card, the gradient
   wordmark quoting the site header, pill CTAs and cyan focus rings. One static gradient
   micro-accent per page (the title underline). Pure CSS, system fonts only (LCP budget),
   scoped under .yac-* with all custom properties bound to .yac-shell so nothing leaks
   into or out of the theme. Markup comes from includes/access/ui/*.php.
   P4 adds page temperatures on top of the one shell: the account dashboard is the COOL
   end (pure cyan ambient, quiet rows, decoration-free danger zone), the contact page
   the WARM end (warm ground whisper, dot raster, warm topic tags — the CTA itself stays
   system teal) — same card, different temperature, still zero animated signature lines. */

.yac-shell {
  /* Calm-teal Pro tokens + the site brand cyan/coral family (DESIGN-SYSTEM.md). */
  --yac-accent: #0f6f78;
  --yac-accent-dark: #0b565d;
  --yac-accent-soft: #e6f2f3;
  --yac-cyan: #06b6d4;
  --yac-cyan-dark: #0891b2;
  --yac-cyan-bright: #22d3ee;
  --yac-coral: #ff6b6b;
  --yac-ink: #17212b;
  --yac-muted: #5c6875;
  --yac-line: #d8dee6;
  --yac-paper: #ffffff;
  --yac-bg: #f2f6f7;
  --yac-ring: rgba(6, 182, 212, 0.22);
  --yac-error: #8f322b;
  --yac-error-line: #e6b7b2;
  --yac-error-bg: #fdeeee;
  --yac-success: #1f6b36;
  --yac-radius: 16px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--yac-ink);
  line-height: 1.55;
  display: flex;
  justify-content: center;
  padding: clamp(24px, 6vw, 56px) 20px;
  -webkit-font-smoothing: antialiased;

  /* Ambient ground: a soft cyan glow above the card, a whisper of coral low-right
     (coral stays barely present on calm pages), on a near-white teal-tinted base. */
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(56% 44% at 50% 0%, rgba(6, 182, 212, 0.09), transparent 70%),
    radial-gradient(40% 34% at 88% 100%, rgba(255, 107, 107, 0.055), transparent 70%),
    linear-gradient(180deg, #fbfdfd, var(--yac-bg) 60%, #eef4f5);
}
.yac-shell, .yac-shell *, .yac-shell *::before, .yac-shell *::after { box-sizing: border-box; }

/* Engineering grid (the CTA band's texture, translated to light ground): hairline ink
   lines at ~5% under a radial mask, so the drawing-sheet pattern fades in behind the
   card and dissolves toward the edges. z-index -1 inside the isolated shell paints it
   above the shell's own background but below all content. */
.yac-shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(23, 33, 43, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 33, 43, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 34%, #000 25%, transparent 100%);
  mask-image: radial-gradient(70% 62% at 50% 34%, #000 25%, transparent 100%);
}

.yac-shell__inner { width: 100%; }
/* Narrow single column for forms, wider for content pages (account, upgrade wall). */
.yac-shell--form .yac-shell__inner { max-width: 460px; }
.yac-shell--content .yac-shell__inner { max-width: 720px; }

/* Logo slot — the gradient wordmark quoting the site's glass-header logo (same cyan
   gradient + slow shimmer rhythm). A CSS wordmark, no image request. */
.yac-logo {
  display: block; width: fit-content; margin: 0 auto 26px;
  font-size: 1.6rem; font-weight: 800; letter-spacing: -0.6px; line-height: 1;
  text-decoration: none;
  background: linear-gradient(90deg, #0891b2, #06b6d4 35%, #22d3ee 55%, #0891b2 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: yac-flow 11s linear infinite;
}
.yac-logo:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-ring); border-radius: 6px; }
@keyframes yac-flow {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* Optional calm hero (image/illustration) above the card. */
.yac-hero { margin: 0 auto 22px; text-align: center; border-radius: var(--yac-radius); overflow: hidden; }
.yac-hero img { max-width: 100%; height: auto; display: block; }

/* The glass card: frosted white over the ambient ground (the grid and glow diffuse
   through the blur), hairline cyan border, layered colored shadows for depth — never
   plain black. A one-shot rise-in on load; reduced-motion switches it off. */
.yac-card {
  /* Frost at 0.88: at 0.8 the blurred grid+glow condensed into a gray smudge along
     the card top — the ambient ground may only shimmer through, never read as dirt. */
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(6, 182, 212, 0.16);
  border-radius: var(--yac-radius);
  padding: clamp(24px, 5vw, 40px);
  box-shadow:
    0 1px 2px rgba(23, 33, 43, 0.04),
    0 24px 60px -24px rgba(11, 86, 93, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  animation: yac-rise 0.5s ease-out both;
}
@supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
  .yac-card { background: rgba(255, 255, 255, 0.94); }
}
@keyframes yac-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.yac-title { font-size: clamp(1.4rem, 3vw, 1.7rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; margin: 0; }
/* The page's single static gradient micro-accent: a short cyan→coral underline —
   a quiet quote of the signature line, deliberately NOT animated (budget: zero). */
.yac-title::after {
  content: ""; display: block; width: 44px; height: 3px;
  margin-top: 12px; border-radius: 3px;
  background: linear-gradient(90deg, var(--yac-cyan), var(--yac-cyan-dark) 55%, var(--yac-coral));
}
.yac-subtitle { color: var(--yac-muted); font-size: 1.02rem; margin: 12px 0 0; }

/* Even vertical rhythm inside the card = generous, calm whitespace. */
.yac-body { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.yac-body:first-child { margin-top: 0; }
/* The gap IS the rhythm — kill UA paragraph margins so spacing never doubles up. */
.yac-body > p { margin: 0; }

/* Forms carry the same 18px rhythm INSIDE them (fields, checkboxes, action) — without
   this the card's flex gap stops at the <form> boundary and controls collide. Hidden
   inputs (nonce/action) are display:none, so the gap skips them. */
.yac-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
/* The submit gets one extra breath: the action reads as its own step, not a field.
   align-self keeps buttons at their natural width (the flex column would stretch
   them); the narrow auth cards still get full-width submits via the
   ".yac-body .yac-btn--primary { width:100% }" rule below. */
.yac-form > .yac-btn { margin-top: 6px; align-self: flex-start; }
/* Inside a form the button joins the field geometry (inputs are 11px): one shared
   radius family instead of a pill colliding with rounded rects. Standalone CTAs
   (status-panel actions, contact mailto, "Jetzt anmelden") keep the 999px pill. */
.yac-form .yac-btn { border-radius: 14px; }

/* Centered auxiliary row under a form (forgot password / switch to register). Lead-in
   text ("Noch kein Konto?") is muted so only the ACTION carries color — two identical
   bold teal rows would compete for the same click. */
.yac-aux { text-align: center; margin: 0; font-size: 0.95rem; color: var(--yac-muted); }
/* Quiet variant for the secondary of two aux rows (e.g. "Passwort vergessen?"). */
.yac-aux--quiet .yac-link { color: var(--yac-muted); font-weight: 500; }
.yac-aux--quiet .yac-link:hover { color: var(--yac-accent); }

/* --- Text field ------------------------------------------------------- */
.yac-field { display: flex; flex-direction: column; gap: 6px; }
.yac-label { font-size: 0.9rem; font-weight: 600; color: var(--yac-ink); }
.yac-req { color: var(--yac-cyan-dark); }
.yac-input {
  width: 100%; padding: 11px 14px;
  border: 1px solid #ccd6dc; border-radius: 11px;
  font: inherit; font-size: 1rem; color: var(--yac-ink);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(23, 33, 43, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.yac-input::placeholder { color: #9aa6b1; }
.yac-input:hover { border-color: #aebcc5; }
.yac-input:focus { outline: none; border-color: var(--yac-cyan-dark); box-shadow: 0 0 0 3px var(--yac-ring); }
.yac-help { font-size: 0.82rem; color: var(--yac-muted); margin: 0; }
.yac-field-error { font-size: 0.82rem; color: var(--yac-error); margin: 0; font-weight: 600; }
.yac-field--error .yac-input,
.yac-input[aria-invalid="true"] { border-color: var(--yac-error-line); }
.yac-field--error .yac-input:focus,
.yac-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(143, 50, 43, 0.15); }

/* --- Select (same visual language as the text field) ------------------ */
.yac-select {
  width: 100%; padding: 11px 14px;
  border: 1px solid #ccd6dc; border-radius: 11px;
  font: inherit; font-size: 1rem; color: var(--yac-ink);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(23, 33, 43, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.yac-select:hover { border-color: #aebcc5; }
.yac-select:focus { outline: none; border-color: var(--yac-cyan-dark); box-shadow: 0 0 0 3px var(--yac-ring); }
.yac-field--error .yac-select { border-color: var(--yac-error-line); }

/* --- Honeypot: off-screen for humans, still in the DOM for bots ------- */
.yac-hp { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Checkbox --------------------------------------------------------- */
/* Brand-styled box (appearance:none): the native widget was the one unstyled control
   left in the system. The check is a pure-CSS clip-path tick — no image, no request. */
.yac-checkbox__row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 0.92rem; }
.yac-checkbox__input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 20px; height: 20px; margin: 1px 0 0;
  border: 1px solid #ccd6dc; border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(23, 33, 43, 0.03);
  display: inline-grid; place-content: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.yac-checkbox__input::before {
  content: ""; width: 12px; height: 12px;
  background: #fff;
  clip-path: polygon(14% 46%, 0 62%, 38% 100%, 100% 22%, 84% 8%, 37% 68%);
  transform: scale(0);
  transition: transform 0.12s ease;
}
.yac-checkbox__input:hover { border-color: #aebcc5; }
.yac-checkbox__input:checked { background: var(--yac-accent); border-color: var(--yac-accent); }
.yac-checkbox__input:checked::before { transform: scale(1); }
.yac-checkbox__input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-ring); }
.yac-checkbox__label { color: var(--yac-ink); line-height: 1.5; }
.yac-checkbox__label a { color: var(--yac-accent); font-weight: 600; }
.yac-checkbox--error .yac-checkbox__label { color: var(--yac-error); }

/* --- Primary button (one action per screen) --------------------------- */
/* Teal pill on light ground (the system's light-page CTA), with the soft colored
   shadow and gentle hover lift the landing established. */
.yac-btn {
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 13px 26px;
  font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.yac-btn--primary {
  background: var(--yac-accent); color: #fff;
  box-shadow: 0 12px 28px -14px rgba(11, 86, 93, 0.7);
}
.yac-btn--primary:hover {
  background: var(--yac-accent-dark); transform: translateY(-1px);
  box-shadow: 0 16px 34px -14px rgba(11, 86, 93, 0.75);
}
.yac-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-ring); }
.yac-btn--primary:disabled { opacity: 0.55; cursor: default; transform: none; }
/* In a form the single primary action spans the card. */
.yac-body .yac-btn--primary { width: 100%; }

/* --- Secondary link --------------------------------------------------- */
.yac-link { color: var(--yac-accent); font-weight: 600; text-decoration: none; }
.yac-link:hover { color: var(--yac-cyan-dark); text-decoration: underline; }
.yac-link:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-ring); border-radius: 4px; }

/* --- Notice / alert --------------------------------------------------- */
/* Status voice: a colored edge on a quiet tinted surface — reads at a glance
   without shouting inside the calm card. */
.yac-notice {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid; border-left-width: 4px; border-radius: 12px;
  padding: 12px 15px;
  font-size: 0.92rem; line-height: 1.5;
}
.yac-notice--info { background: var(--yac-accent-soft); border-color: #bcdcdf; border-left-color: var(--yac-cyan-dark); color: #0b4f56; }
.yac-notice--success { background: #eef8f1; border-color: #bcdcc6; border-left-color: #2e8b4f; color: var(--yac-success); }
.yac-notice--error { background: var(--yac-error-bg); border-color: var(--yac-error-line); border-left-color: #c05248; color: var(--yac-error); }
.yac-notice--warning { background: #fff6e9; border-color: #e6cfa4; border-left-color: #c88a2e; color: #8a5210; }

/* --- Trust strip (no card, cancel anytime) ---------------------------- */
.yac-trust {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  font-size: 0.84rem; color: var(--yac-muted);
}
.yac-trust__item { display: inline-flex; align-items: center; gap: 6px; }
.yac-trust__check { color: var(--yac-cyan-dark); font-weight: 700; }
/* Narrow screens: stack the three promises centered — a 2+1 orphan wrap reads broken. */
@media (max-width: 560px) {
  .yac-trust { flex-direction: column; align-items: center; gap: 6px; }
}

/* --- Legal footer ----------------------------------------------------- */
.yac-footer {
  margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  font-size: 0.82rem; color: var(--yac-muted);
}
.yac-footer a { color: var(--yac-muted); text-decoration: none; padding: 2px 6px; border-radius: 4px; }
.yac-footer a:hover { color: var(--yac-accent); text-decoration: underline; }
.yac-footer a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-ring); }
.yac-footer__sep { color: var(--yac-line); }

/* --- Account page (T12 / P4: the COOL temperature) --------------------- */
/* The calm dashboard: one tinted status panel up top, then quiet hairline rows
   (profile / settings / data) on plain card ground, and a decoration-free danger
   zone at the end. A place of control, not persuasion — coral is absent here. */
.yac-account-h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }

/* Status panel: the dashboard's single emphasis moment. A soft teal wash carrying
   a faint engineering grid (the CTA band's texture quoted at drawing-sheet volume)
   under a cyan hairline — reads "instrument panel", not "advertisement". */
.yac-account-status {
  background:
    linear-gradient(rgba(11, 86, 93, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 86, 93, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, var(--yac-accent-soft), #f2f9fa);
  background-size: 32px 32px, 32px 32px, auto;
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: var(--yac-radius);
  padding: 20px 22px;
}
.yac-account-status .yac-account-h2 { font-size: 1.2rem; margin-bottom: 6px; }
.yac-account-detail { margin: 0; color: var(--yac-ink); }
.yac-account-plan { margin: 10px 0 0; font-weight: 600; }
.yac-account-usage { margin: 10px 0 0; color: var(--yac-muted); font-size: 0.9rem; }

/* Status dot: a small color-coded reading next to the headline (decorative — the
   headline text carries the meaning). Cyan = running, green = active, amber =
   attention (expired / past due / unconfirmed), gray = canceled. */
.yac-status-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 10px; vertical-align: 1px;
  background: var(--yac-cyan-dark);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.16);
}
.yac-account-status--active .yac-status-dot { background: #2e8b4f; box-shadow: 0 0 0 3px rgba(46, 139, 79, 0.16); }
.yac-account-status--trial-expired .yac-status-dot,
.yac-account-status--past-due .yac-status-dot,
.yac-account-status--pending .yac-status-dot { background: #c88a2e; box-shadow: 0 0 0 3px rgba(200, 138, 46, 0.18); }
.yac-account-status--canceled .yac-status-dot { background: #8895a1; box-shadow: 0 0 0 3px rgba(136, 149, 161, 0.18); }

/* Usage meter: a thin visual echo of the "X of 25" line above it. */
.yac-usage-bar {
  height: 6px; border-radius: 3px; margin-top: 8px; overflow: hidden;
  background: rgba(23, 33, 43, 0.08);
}
.yac-usage-bar__fill {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--yac-cyan-dark), var(--yac-cyan));
}

/* One loud action, one quiet: "Zur Anwendung" is the primary pill; the upgrade
   CTA sits beside it as a ghost — it only turns primary when the app link is gone. */
.yac-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.yac-account-actions + .yac-help { margin-top: 10px; }

/* Quiet rows: each dashboard block is a hairline-topped section with a small
   uppercase heading — dashboard chrome, not marketing headlines. */
.yac-account-section { border-top: 1px solid var(--yac-line); margin-top: 28px; padding-top: 22px; }
.yac-account-section .yac-account-h2 {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.3px; color: var(--yac-accent); margin: 0 0 14px;
}
/* 18px: notes after a form ("Passwort ändern") get the full rhythm step, so they
   read as their own row instead of hanging off the button above. */
.yac-account-note { margin: 18px 0 0; }

/* On the wide dashboard card, section buttons are quiet inline pills, not the
   full-width form CTAs of the narrow auth cards. */
.yac-page--account .yac-body .yac-btn--primary { width: auto; }

/* Profile fields pair up on wide screens (grid tracks collapse for the hidden
   nonce/action inputs); the save button spans and left-aligns. */
.yac-form--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.yac-form--grid .yac-btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 620px) {
  .yac-form--grid { grid-template-columns: 1fr; }
}

/* GDPR self-service: two low-emphasis actions side by side (export = quiet,
   delete = quiet-but-clearly-destructive). Not primary — nothing here pressures. */
.yac-account-data { display: flex; flex-wrap: wrap; gap: 12px; }
.yac-account-data__form { margin: 0; }

/* Danger zone (account deletion): serious and decoration-free — a plain hairline
   red border, no wash, no gradient, no texture. The password re-entry inside is
   what makes it feel SAFE: nothing here happens by accident. */
.yac-account-danger {
  border: 1px solid rgba(143, 50, 43, 0.3);
  border-radius: 14px;
  margin-top: 30px;
  padding: 20px 22px;
}
.yac-account-danger .yac-account-h2 {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.3px; color: var(--yac-error); margin: 0 0 14px;
}
/* The confirmation field stays hand-sized — a deliberate, narrow act, not a
   card-wide blank. */
.yac-account-danger .yac-field { width: 100%; max-width: 380px; }
/* Everything inside the danger zone speaks its color — a teal link in a red-bordered
   box would mix the danger voice with the brand voice. */
.yac-account-danger .yac-link { color: var(--yac-error); }
.yac-account-danger .yac-link:hover { color: #c05248; }

/* Cool ambient for the account page: the coral whisper is gone entirely — the
   ground is pure cyan-on-paper, the coldest reading of the shared shell. */
.yac-page--account .yac-shell {
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(6, 182, 212, 0.12), transparent 70%),
    linear-gradient(180deg, #fbfdfd, var(--yac-bg) 60%, #eef4f5);
}
.yac-btn--ghost {
  background: transparent; color: var(--yac-accent);
  box-shadow: inset 0 0 0 1px var(--yac-line);
}
.yac-btn--ghost:hover { background: var(--yac-accent-soft); box-shadow: inset 0 0 0 1px rgba(6, 182, 212, 0.35); }
.yac-btn--ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-ring); }
.yac-btn--danger {
  background: transparent; color: var(--yac-error);
  box-shadow: inset 0 0 0 1px var(--yac-error-line);
}
.yac-btn--danger:hover { background: var(--yac-error-bg); }
.yac-btn--danger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--yac-error-line); }

@media (max-width: 520px) {
  .yac-shell { padding: 24px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .yac-input, .yac-select, .yac-btn { transition: none; }
  .yac-checkbox__input, .yac-checkbox__input::before { transition: none; }
  .yac-logo { animation: none; }
  .yac-card { animation: none; }
  .yac-btn--primary:hover { transform: none; }
}

/* Two-plan upgrade page (/upgrade). Side-by-side cards on desktop, stacked on phones;
   the yearly card is gently featured (it is the better value), never a dark pattern. */
.yac-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 8px;
}
.yac-plan {
  position: relative;
  border: 1px solid var(--yac-line);
  border-radius: var(--yac-radius);
  background: var(--yac-paper);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.yac-plan--featured {
  border-color: var(--yac-accent);
  box-shadow: 0 0 0 1px var(--yac-accent);
}
.yac-plan__badge {
  position: absolute;
  top: -12px;
  left: 22px;
  background: var(--yac-accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.yac-plan__title { margin: 4px 0 0; font-size: 1.15rem; }
.yac-plan__price { margin: 4px 0; }
.yac-plan__amount { font-size: 1.9rem; font-weight: 700; }
.yac-plan__period { color: var(--yac-muted); font-size: 0.95rem; }
.yac-plan__note { color: var(--yac-muted); font-size: 0.92rem; margin: 0 0 16px; flex: 1; }
.yac-plan .yac-btn { width: 100%; margin-top: auto; }

@media (max-width: 560px) {
  .yac-plans { grid-template-columns: 1fr; }
  .yac-plan__badge { left: 50%; transform: translateX(-50%); }
}

/* --- Contact page (P4: the WARM temperature, re-tuned 2026-07-15) -------- */
/* Same card, warm end of the family — but warmth stays an ACCENT, never the primary
   voice: v1 let coral lead everything (ground, chips, border, CTA) and the page read
   as a different site, with a red CTA that collided semantically with the account
   page's danger zone. Now: warm glow + dot raster as a whisper, chips as quiet warm
   tags, and the one real action back in the system's teal primary. Coral text pairs
   hold AA: chip ink #9c332e vs chip tint 6.08+. */
.yac-page--contact .yac-shell {
  background:
    radial-gradient(52% 42% at 50% 0%, rgba(255, 107, 107, 0.07), transparent 70%),
    radial-gradient(40% 34% at 8% 100%, rgba(6, 182, 212, 0.07), transparent 70%),
    linear-gradient(180deg, #fdfcfb, #f6f4f2 60%, #f2f0ee);
}
/* Texture rotation: the blueprint grid is the tool's voice — the contact page
   speaks softer, with a warm low-opacity dot raster fading in behind the card. */
.yac-page--contact .yac-shell::before {
  background-image: radial-gradient(rgba(178, 52, 48, 0.06) 1px, transparent 1.4px);
  background-size: 20px 20px;
}
.yac-page--contact .yac-card {
  text-align: center;
}
/* The page's one static gradient micro-accent, re-weighted warm (coral leads,
   cyan answers) and centered under the title. Still zero animated lines. */
.yac-page--contact .yac-title::after {
  margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, var(--yac-coral), #c94040 45%, var(--yac-cyan));
}
.yac-contact-lede { margin: 0; }

/* Topic chips: the three reasons people write — quiet warm TAGS, deliberately
   borderless and soft so nobody mistakes them for buttons (they don't do anything). */
.yac-chips {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.yac-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 0.88rem; font-weight: 600; color: #9c332e;
  background: rgba(255, 107, 107, 0.09);
}
.yac-chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--yac-coral); flex: none;
}

/* The mailto CTA is the page's one real action — it speaks the SYSTEM's primary
   teal (.yac-btn--primary as-is), not coral: red call-to-action buttons collided
   with the danger-zone semantics on the account page. Centered, not full-width. */
.yac-page--contact .yac-body .yac-btn--primary.yac-btn--warm {
  width: auto; min-width: 240px;
}
.yac-contact-cta { text-align: center; margin: 22px 0 0; }
.yac-contact-addr { text-align: center; margin: 0; }
.yac-contact-promise { text-align: center; margin-top: 4px; }