/* =============================================================
   Zoomi · Base Components (web)
   Token-driven. No layout. Mirrors the iOS Swft component set:
     · Primary button (5-layer inset-chrome signature)
     · Ghost button (hairline-bordered secondary)
     · Dark ghost (for use on photographic overlays)
     · Status pill (pastel · uppercase)
     · Nav pill (interactive capsule link/button)
     · Card (flat 24-radius, no shadow, no border — contrast only)
     · Bento tile (16-radius, slightly tinted variant)
     · Pastel icon container (8-radius, 36x36)
     · Marketing eyebrow chip (warm accent variant for web only)
   ============================================================= */

/* ---------- Primary button · Swft signature ----------
   Ported from ZoomiPrimaryButtonStyle in DesignTokens.swift.
   The 5-layer inset chrome is the most distinctive treatment in
   the system. Do not flatten. CSS approximation:
     · pill fill: --zoomi-cta-bg
     · top inset highlight: white 20% (light) / 60% (dark)
     · bottom inset hairline: black 100% (light) / 12% (dark)
     · soft outer drop for lift
   :hover and :active scale to match SwiftUI's 0.98 press state.
*/
.zoomi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-family);
  font-size: var(--t-body-md);
  font-weight: 600;
  letter-spacing: 0.1px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out),
              opacity   var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.zoomi-btn-primary {
  background: var(--zoomi-cta-bg);
  color: var(--zoomi-cta-text);
  box-shadow:
    inset 0  1px 0 0 rgba(255, 255, 255, 0.20),     /* top inner highlight */
    inset 0 -1px 0 0 rgba(0, 0, 0, 1),              /* bottom inner hairline */
    0 1px 2px rgba(0, 0, 0, 0.18),                   /* close drop */
    0 6px 16px -8px rgba(0, 0, 0, 0.28);             /* soft lift */
}

[data-theme="dark"] .zoomi-btn-primary {
  box-shadow:
    inset 0  1px 0 0 rgba(255, 255, 255, 0.60),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 6px 16px -8px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .zoomi-btn-primary {
    box-shadow:
      inset 0  1px 0 0 rgba(255, 255, 255, 0.60),
      inset 0 -1px 0 0 rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.4),
      0 6px 16px -8px rgba(0, 0, 0, 0.6);
  }
}

.zoomi-btn-primary:hover { transform: translateY(-1px); }
.zoomi-btn-primary:active { transform: scale(0.98); }

.zoomi-btn-primary[disabled],
.zoomi-btn-primary.is-disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* Size modifier — bigger CTA (used on hero, product moments) */
.zoomi-btn-lg {
  min-height: 48px;
  padding: 0 24px;
  font-size: var(--t-body-md);
}

/* ---------- Ghost button · hairline secondary ---------- */
.zoomi-btn-ghost {
  background: transparent;
  color: var(--zoomi-ink);
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
}
.zoomi-btn-ghost:hover { background: var(--zoomi-card); }
.zoomi-btn-ghost:active { transform: scale(0.97); }

/* ---------- Dark ghost · for photo overlays ---------- */
.zoomi-btn-ghost-dark {
  background: transparent;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}
.zoomi-btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.08); }
.zoomi-btn-ghost-dark:active { transform: scale(0.97); opacity: 0.85; }

/* ---------- Nav pill · interactive capsule link ---------- */
.zoomi-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--zoomi-card);
  color: var(--zoomi-ink);
  font-size: var(--t-body-md);
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--zoomi-hair);
  transition: background var(--dur-fast) var(--ease-out);
}
.zoomi-pill-link:hover { background: var(--zoomi-bg); }

/* ---------- Status pill · pastel · uppercase ----------
   Ported from ZoomiPill. Container at 12% opacity of stroke,
   stroke as text colour. Variants per tonal pair.
*/
.zoomi-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.6;
}
.zoomi-pill--green  { color: var(--tone-green-stroke);  background: var(--tone-green-container); }
.zoomi-pill--coral  { color: var(--tone-coral-stroke);  background: var(--tone-coral-container); }
.zoomi-pill--purple { color: var(--tone-purple-stroke); background: var(--tone-purple-container); }
.zoomi-pill--blue   { color: var(--tone-blue-stroke);   background: var(--tone-blue-container); }
.zoomi-pill--amber  { color: var(--tone-amber-stroke);  background: var(--tone-amber-container); }

/* ---------- Marketing eyebrow chip · web-only warm accent ----------
   Same eyebrow type spec, but sitting in a warm container. Use on
   hero, section openers, anywhere we want pet-owner warmth.
*/
.zoomi-eyebrow-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-ink);
  background: var(--accent-buttercup-soft);
}
.zoomi-eyebrow-chip--peach   { background: var(--accent-peach-soft); }
.zoomi-eyebrow-chip--mint    { background: var(--accent-mint-soft); }
.zoomi-eyebrow-chip--blossom { background: var(--accent-blossom-soft); }
.zoomi-eyebrow-chip--sky     { background: var(--accent-sky-soft); }

/* ---------- Card · flat 24-radius ----------
   Per Swft spec: separation comes from contrast (card vs bg),
   not shadow or border. Do not add chrome.
*/
.zoomi-card {
  background: var(--zoomi-card);
  border-radius: var(--r-card);
  padding: var(--s-lg);
}

/* Bento tile · slightly smaller radius, used in the app section grid */
.zoomi-bento {
  background: var(--zoomi-card);
  border-radius: var(--r-bento);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  min-height: 280px;
}

/* Bento accent variants — tinted full-bleed background using the
   marketing palette. Use sparingly to brighten the grid. */
.zoomi-bento--peach   { background: var(--accent-peach-soft); }
.zoomi-bento--mint    { background: var(--accent-mint-soft); }
.zoomi-bento--blossom { background: var(--accent-blossom-soft); }
.zoomi-bento--sky     { background: var(--accent-sky-soft); }
.zoomi-bento--ink     { background: var(--zoomi-ink); color: var(--zoomi-cta-text); }
.zoomi-bento--ink .zoomi-bento__label { color: rgba(255, 255, 255, 0.6); }
.zoomi-bento--ink .zoomi-bento__title { color: #FFFFFF; }
.zoomi-bento--ink .zoomi-bento__sub   { color: rgba(255, 255, 255, 0.75); }

.zoomi-bento__label {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
}
.zoomi-bento__title {
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  margin: 4px 0 6px;
  color: var(--zoomi-ink);
}
.zoomi-bento__sub {
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
  margin: 0;
}

/* ---------- Pastel icon container · 8-radius square ----------
   Ported from SwftPastelIcon. 36x36 default; 22x22 inline variant.
*/
.zoomi-icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-icon);
}
.zoomi-icon-tile--sm { width: 22px; height: 22px; border-radius: 6px; }
.zoomi-icon-tile--green  { background: var(--tone-green-container);  color: var(--tone-green-stroke); }
.zoomi-icon-tile--coral  { background: var(--tone-coral-container);  color: var(--tone-coral-stroke); }
.zoomi-icon-tile--purple { background: var(--tone-purple-container); color: var(--tone-purple-stroke); }
.zoomi-icon-tile--blue   { background: var(--tone-blue-container);   color: var(--tone-blue-stroke); }
.zoomi-icon-tile--amber  { background: var(--tone-amber-container);  color: var(--tone-amber-stroke); }

/* ---------- Tag / score chip — rounded square w/ value ----------
   Used to render the wellness score (e.g., "92"). 14-radius inner.
*/
.zoomi-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 14px;
  border-radius: var(--r-inner);
  background: var(--tone-green-container);
  color: var(--tone-green-stroke);
  font-weight: 600;
  font-size: var(--t-headline-md);
  letter-spacing: var(--track-heading);
}
.zoomi-score__unit { font-size: var(--t-body-sm); opacity: 0.8; font-weight: 500; }

/* ---------- Hairline divider ---------- */
.zoomi-hr {
  border: 0;
  height: 1px;
  background: var(--zoomi-hair);
  margin: var(--s-lg) 0;
}

/* ---------- Focus ring · consistent across components ---------- */
.zoomi-btn:focus-visible,
.zoomi-pill-link:focus-visible {
  outline: 2px solid var(--zoomi-link);
  outline-offset: 3px;
}

/* =============================================================
   .article — long-form prose template for policy / legal pages
   (terms, privacy, cookies, acceptable use, data request, etc.)

   Reading-first column with v2 token-driven typography. Every
   value pulled from /assets/design-tokens.css — zero hex literals
   live in this block. Scope is strictly `.article` and its
   descendants; no globals leak out.

   Composition:
     <article class="article">
       <p class="article__eyebrow">Legal</p>
       <h1 class="article__title">Terms of Service</h1>
       <p class="article__meta">Last updated: 29 March 2026</p>
       <p class="article__lede">First paragraph treatment…</p>
       <div class="article__body">
         <h2>…</h2><p>…</p><ul><li>…</li></ul>
       </div>
     </article>
   ============================================================= */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-3xl) var(--page-gutter);
  color: var(--zoomi-ink);
  font-family: var(--font-family);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
}

/* Small uppercase label sitting above the title. Pairs with
   article__title as the section opener. */
.article__eyebrow {
  display: inline-block;
  margin: 0 0 var(--s-md);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
}

/* Page title — Bricolage heading at display-sm with the canonical
   -0.02em tracking and 500 weight (slightly lighter than display
   chrome on home/shop, which feels right for a quiet legal page). */
.article__title {
  margin: 0 0 var(--s-md);
  font-family: var(--font-heading);
  font-size: var(--t-display-sm);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-tight);
  color: var(--zoomi-ink);
}

/* Meta line — "Last updated: …" / version row, body-sm muted. */
.article__meta {
  margin: 0 0 var(--s-xl);
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}
.article__meta em { font-style: normal; }

/* Optional pill rendering of the last-updated date if a page wants
   to lift it visually (e.g. above the title). Token-only. */
.article__update-stamp {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--s-md);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--tone-blue-stroke);
  background: var(--tone-blue-container);
}

/* Lede paragraph — first paragraph after the meta line, slightly
   larger than body to set the tone. */
.article__lede {
  margin: 0 0 var(--s-xl);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
  color: var(--zoomi-ink);
}

/* Body wrapper — all standard prose elements get token-driven
   rhythm here. Headings use the heading font, body uses Manrope. */
.article__body {
  font-size: var(--t-body-md);
  line-height: var(--lh-body);
  color: var(--zoomi-ink);
}

.article__body h2 {
  margin: var(--s-2xl) 0 var(--s-md);
  font-family: var(--font-heading);
  font-size: var(--t-headline-md);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
}

.article__body h3 {
  margin: var(--s-xl) 0 var(--s-sm);
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-snug);
  color: var(--zoomi-ink);
}

.article__body p {
  margin: 0 0 var(--s-md);
  color: var(--zoomi-ink);
}

.article__body ul,
.article__body ol {
  margin: 0 0 var(--s-md);
  padding-left: var(--s-lg);
  color: var(--zoomi-ink);
}

.article__body li {
  margin: 0 0 var(--s-xs);
  line-height: var(--lh-body);
}
.article__body li::marker { color: var(--zoomi-body); }

.article__body strong {
  font-weight: 600;
  color: var(--zoomi-ink);
}

/* Blockquote — quiet left-rule using hairline + body colour. */
.article__body blockquote {
  margin: var(--s-lg) 0;
  padding: var(--s-xs) var(--s-lg);
  border-left: 2px solid var(--zoomi-hair);
  color: var(--zoomi-body);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body);
}

/* Anchors — body link colour with a subtle underline that gains
   weight on hover (Emil-style: small lift, no shouting). */
.article__body a {
  color: var(--zoomi-link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--zoomi-link) 30%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.article__body a:hover {
  text-decoration-color: var(--zoomi-link);
}

/* Inline code + preformatted blocks — sit on the tinted neutral
   surface so they read as code without introducing a colour. */
.article__body code {
  padding: 1px 6px;
  border-radius: var(--r-icon);
  background: var(--zoomi-bg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--zoomi-ink);
}
.article__body pre {
  margin: var(--s-lg) 0;
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-bento);
  background: var(--zoomi-bg);
  color: var(--zoomi-ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  overflow-x: auto;
}
.article__body pre code {
  padding: 0;
  background: transparent;
  font-size: inherit;
}

/* Horizontal rule — same hairline treatment as elsewhere. */
.article__body hr {
  border: 0;
  height: 1px;
  background: var(--zoomi-hair);
  margin: var(--s-xl) 0;
}

/* Optional inline / sidebar Table of Contents pattern. Pages that
   ship a TOC drop it inside .article above the body; pages without
   simply omit. */
.article__toc {
  margin: 0 0 var(--s-2xl);
  padding: var(--s-lg);
  border-radius: var(--r-bento);
  background: var(--zoomi-bg);
}
.article__toc h2 {
  margin: 0 0 var(--s-sm);
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
}
.article__toc ol,
.article__toc ul {
  margin: 0;
  padding-left: var(--s-lg);
  font-size: var(--t-body-md);
}
.article__toc li { margin: 0 0 var(--s-xs); }
.article__toc a {
  color: var(--zoomi-ink);
  text-decoration: none;
}
.article__toc a:hover { color: var(--zoomi-link); }

/* Mobile — tighten padding, drop the title a touch so it fits
   without crowding. Canonical 720px breakpoint. */
@media (max-width: 720px) {
  .article {
    padding: var(--s-2xl) var(--page-gutter);
  }
  .article__title {
    font-size: var(--t-headline-lg);
  }
  .article__lede {
    font-size: var(--t-body-md);
  }
  .article__body h2 {
    font-size: var(--t-headline-sm);
    margin-top: var(--s-xl);
  }
  .article__body h3 {
    font-size: var(--t-title-lg);
  }
}

/* =============================================================
   Form field · .zoomi-field
   Used on transactional pages (checkout, register, login). One
   block per label+input pair. Vertical stack by default; the
   --inline variant puts label + input on one row.
   ============================================================= */
.zoomi-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-md);
}
.zoomi-field:last-child { margin-bottom: 0; }

.zoomi-field__label {
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--zoomi-ink);
  line-height: var(--lh-snug);
}

.zoomi-field__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-family);
  font-size: var(--t-body-md);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--zoomi-ink);
  background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-icon);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.zoomi-field__input::placeholder { color: var(--zoomi-chev); }

.zoomi-field__input:focus,
.zoomi-field__input:focus-visible {
  border-color: var(--zoomi-link);
  outline: 2px solid var(--zoomi-link);
  outline-offset: 0;
}

/* Same treatment for typed inputs + textarea */
.zoomi-field__input[type="email"],
.zoomi-field__input[type="text"],
.zoomi-field__input[type="tel"],
.zoomi-field__input[type="number"],
textarea.zoomi-field__input {
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-icon);
  padding: 12px 14px;
  font-family: var(--font-family);
  font-size: var(--t-body-md);
}
textarea.zoomi-field__input {
  min-height: 96px;
  resize: vertical;
  line-height: var(--lh-body);
}

.zoomi-field__input[aria-invalid="true"] {
  border-color: var(--tone-coral-stroke);
}

.zoomi-field__error {
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--tone-coral-stroke);
  line-height: var(--lh-snug);
  margin-top: 2px;
}

/* Inline variant — label + input on one row, for compact rows. */
.zoomi-field--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--s-sm);
}
.zoomi-field--inline .zoomi-field__label {
  flex: 0 0 auto;
  min-width: 120px;
}
.zoomi-field--inline .zoomi-field__input {
  flex: 1 1 auto;
}

/* =============================================================
   Receipt · .receipt
   Order-summary card used on checkout, order confirmation, and
   the order-cancelled fallback. Two-column row of label + value;
   modifiers for meta rows (subtotal, shipping) and a heavy total
   row separated by a top hairline.
   ============================================================= */
.receipt {
  background: var(--zoomi-card);
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-card);
  padding: var(--s-lg);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
}

.receipt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  font-size: var(--t-body-md);
  color: var(--zoomi-ink);
  line-height: var(--lh-body);
}
.receipt__row > :first-child { flex: 1 1 auto; min-width: 0; }
.receipt__row > :last-child  { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

.receipt__row--meta {
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}

.receipt__row--total {
  margin-top: var(--s-sm);
  padding-top: var(--s-md);
  border-top: 1px solid var(--zoomi-hair);
  font-size: var(--t-title-lg);
  font-weight: 600;
  color: var(--zoomi-ink);
  letter-spacing: var(--track-heading);
}


/* =============================================================
   Zoomi modal primitive  — used by exit-intent popup and other
   token-driven dialogs. Pattern mirrors .shop-sub-modal but is
   generic (no plan-row chrome) and lives in components.css so any
   page can reuse it.
   ============================================================= */
.zoomi-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--page-gutter);
}
.zoomi-modal.is-open {
  display: flex;
  animation: zoomiModalFade var(--dur-med) var(--ease-out);
}

/* Backdrop — raw rgba required: design-tokens.css has no semantic
   "overlay" token, and this near-black tint at 45% is intentional. */
.zoomi-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 40, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.zoomi-modal__panel {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--zoomi-card);
  border-radius: var(--r-card);
  padding: var(--s-2xl);
  /* Raw rgba required: shadow token absent; matches shop-sub-modal depth. */
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  animation: zoomiModalRise var(--dur-med) var(--ease-out);
}

.zoomi-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--zoomi-bg);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--zoomi-body);
  transition: background var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}
.zoomi-modal__close:hover {
  background: var(--zoomi-hair);
  color: var(--zoomi-ink);
}
.zoomi-modal__close:focus-visible {
  outline: 2px solid var(--zoomi-ink);
  outline-offset: 2px;
}

.zoomi-modal__eyebrow {
  display: inline-block;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--zoomi-body);
  margin-bottom: 6px;
}

.zoomi-modal__title {
  font-family: var(--font-heading);
  font-size: var(--t-headline-sm);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0 0 var(--s-sm);
  line-height: 1.15;
}

.zoomi-modal__body {
  margin: 0 0 var(--s-md);
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

.zoomi-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  margin: 0 0 var(--s-md);
}

.zoomi-modal__input {
  width: 100%;
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-pill);
  padding: 13px 18px;
  font: inherit;
  font-size: var(--t-body-md);
  background: var(--zoomi-card);
  color: var(--zoomi-ink);
  transition: border-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
  box-sizing: border-box;
}
.zoomi-modal__input::placeholder { color: var(--zoomi-body); }
.zoomi-modal__input:focus {
  outline: none;
  border-color: var(--zoomi-ink);
  /* Raw rgba: focus-ring token absent; mirrors form patterns elsewhere. */
  box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.12);
}

.zoomi-modal__cta {
  width: 100%;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 20px;
  background: var(--zoomi-ink);
  color: var(--zoomi-card);
  font: inherit;
  font-size: var(--t-body-md);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.zoomi-modal__cta:hover { opacity: 0.92; }
.zoomi-modal__cta:active { transform: scale(0.98); }
.zoomi-modal__cta:disabled { opacity: 0.6; cursor: not-allowed; }

.zoomi-modal__error {
  display: none;
  font-size: var(--t-body-sm);
  color: var(--zoomi-warning);
  background: var(--tone-amber-container);
  border-radius: var(--r-inner);
  padding: 8px 12px;
  margin-bottom: var(--s-sm);
}
.zoomi-modal__error.is-visible { display: block; }

.zoomi-modal__trust {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-sm);
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
}
.zoomi-modal__trust svg { flex-shrink: 0; color: var(--zoomi-body); }

.zoomi-modal__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-sm);
  margin-top: var(--s-md);
}

.zoomi-modal__dismiss {
  display: block;
  margin: 0 auto;
  font: inherit;
  font-size: var(--t-body-sm);
  color: var(--zoomi-body);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: 0;
  padding: 4px 8px;
  transition: color var(--dur-med) var(--ease-out);
}
.zoomi-modal__dismiss:hover { color: var(--zoomi-ink); }

/* Success state — toggled by JS adding .is-success to the root */
.zoomi-modal__success { display: none; }
.zoomi-modal.is-success .zoomi-modal__form,
.zoomi-modal.is-success .zoomi-modal__actions,
.zoomi-modal.is-success .zoomi-modal__trust,
.zoomi-modal.is-success .zoomi-modal__error,
.zoomi-modal.is-success .zoomi-modal__body { display: none; }
.zoomi-modal.is-success .zoomi-modal__success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-sm);
}

.zoomi-modal__success-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tone-amber-container);
  color: var(--tone-amber-stroke);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.zoomi-modal__success-title {
  font-family: var(--font-heading);
  font-size: var(--t-title-lg);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  color: var(--zoomi-ink);
  margin: 0;
}

.zoomi-modal__success-body {
  margin: 0;
  font-size: var(--t-body-md);
  color: var(--zoomi-body);
  line-height: var(--lh-body);
}

.zoomi-modal__success-close {
  margin-top: var(--s-sm);
  border: 1px solid var(--zoomi-hair);
  border-radius: var(--r-pill);
  padding: 10px 20px;
  background: transparent;
  color: var(--zoomi-ink);
  font: inherit;
  font-size: var(--t-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.zoomi-modal__success-close:hover {
  background: var(--zoomi-bg);
  border-color: var(--zoomi-ink);
}

@keyframes zoomiModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes zoomiModalRise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

@media (max-width: 520px) {
  .zoomi-modal { padding: var(--s-md); }
  .zoomi-modal__panel { padding: var(--s-xl); }
  .zoomi-modal__title { font-size: var(--t-title-lg); }
}