/* ==========================================================================
   CLINICLY ONE — COMPONENTS
   Reusable components for every page. Built ONLY on tokens.css variables:
   no raw colours, no raw font sizes. If a value isn't here, it's a token.

   Depends on: tokens.css (must load first — it also ships the .c1-glass*
   recipes and the reduced-motion invariant, which are not repeated here).

   Contract this file keeps:
     · Every colour is a var(--c1-*).
     · Every font-size is a var(--c1-t-*).
     · Semantic colours keep their narrow jobs (Invariant 5):
         mint  → positives · gold → review stars · whatsapp → WhatsApp
         amber → "Coming Soon" · alert → errors
     · Focus is always visible (contrast floor, not a style choice).
     · Contrast floor holds: where a semantic colour is too light to carry a
       text label at 4.5:1 on its own tint, the label is ink and the colour
       is carried by the icon/chip (graphic ≥3:1) instead.
   ========================================================================== */


/* ==========================================================================
   0 · SHARED PRIMITIVES
   ========================================================================== */

/* Accessible focus ring reused by every interactive component. */
.c1-btn:focus-visible,
.c1-faq > summary:focus-visible,
.c1-input:focus-visible,
.c1-textarea:focus-visible,
.c1-select:focus-visible,
.c1-card--interactive:focus-visible {
  outline: none;
  border-color: var(--c1-action);
  box-shadow: var(--c1-ring-focus);
}

/* Utility: visually hidden but reachable by assistive tech. */
.c1-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   1 · TYPOGRAPHY SPECIMENS
   Reusable type classes so headings and body copy stay identical across
   pages. Sizes and rhythm come straight from the Layer 2 scale.
   ========================================================================== */

.c1-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--c1-sp-2);
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-eyebrow);
  font-weight: var(--c1-w-semibold);
  letter-spacing: var(--c1-ls-eyebrow);
  text-transform: uppercase;
  color: var(--c1-text-muted);
}
.c1-eyebrow__num {
  color: var(--c1-action);
  font-variant-numeric: tabular-nums;
}
/* On dark sections the eyebrow lifts to the inverse muted / orchid. */
.c1-on-dark .c1-eyebrow { color: var(--c1-oninv-muted); }
.c1-on-dark .c1-eyebrow__num { color: var(--c1-orchid); }

.c1-h1 {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-display);
  font-weight: var(--c1-w-black);
  line-height: var(--c1-lh-display);
  letter-spacing: var(--c1-ls-display);
  color: var(--c1-text-strong);
  text-wrap: balance;
  margin: 0;
}
.c1-h2 {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-h2);
  font-weight: var(--c1-w-bold);
  line-height: var(--c1-lh-head);
  letter-spacing: var(--c1-ls-head);
  color: var(--c1-text-strong);
  text-wrap: balance;
  margin: 0;
}
.c1-h3 {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-h3);
  font-weight: var(--c1-w-semibold);
  line-height: var(--c1-lh-head);
  letter-spacing: var(--c1-ls-head);
  color: var(--c1-text-strong);
  margin: 0;
}

.c1-lead {
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-lead);
  line-height: var(--c1-lh-body);
  font-weight: var(--c1-w-regular);
  color: var(--c1-text);
  max-width: 62ch;          /* keeps measure inside the 65–75ch comfort band */
  margin: 0;
}
.c1-body {
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-body);
  line-height: var(--c1-lh-body);
  color: var(--c1-text);
  max-width: 68ch;
  margin: 0;
}
.c1-body--sm { font-size: var(--c1-t-sm); }

/* Inverse text on dark surfaces. */
.c1-on-dark .c1-h1,
.c1-on-dark .c1-h2,
.c1-on-dark .c1-h3 { color: var(--c1-oninv-strong); }
.c1-on-dark .c1-lead,
.c1-on-dark .c1-body { color: var(--c1-oninv); }


/* ==========================================================================
   2 · BUTTONS
   Three jobs: primary (gradient), ghost/outline, WhatsApp.
   Shared geometry, distinct skins. Every skin clears the contrast floor.
   ========================================================================== */

.c1-btn {
  --_btn-py: 0.8125rem;
  --_btn-px: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c1-sp-2);
  padding: var(--_btn-py) var(--_btn-px);
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-sm);
  font-weight: var(--c1-w-semibold);
  line-height: 1;
  letter-spacing: var(--c1-ls-head);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--c1-r-pill);
  cursor: pointer;
  user-select: none;
  transition: transform var(--c1-dur-base) var(--c1-ease),
              box-shadow var(--c1-dur-base) var(--c1-ease),
              background-color var(--c1-dur-base) var(--c1-ease),
              border-color var(--c1-dur-base) var(--c1-ease),
              color var(--c1-dur-base) var(--c1-ease);
}
.c1-btn__icon { width: 1.15em; height: 1.15em; flex: none; }

.c1-btn--lg { --_btn-py: 1rem; --_btn-px: 1.875rem; font-size: var(--c1-t-body); }
.c1-btn--sm { --_btn-py: 0.625rem; --_btn-px: 1.125rem; font-size: var(--c1-t-xs); }
.c1-btn--block { display: flex; width: 100%; }

/* --- Primary: the action gradient pill ------------------------------------
   Layer 0's contrast floor beats the Layer 2 lilac. The token --c1-grad-action
   runs violet→lilac, and white text on that lilac end measures only ~3.2:1.
   So the button gradient is kept inside the safe violet band (press→action→
   violet), where white clears ≥4.87:1 across the whole pill. The lilac stays
   available for large decorative fills elsewhere, where no label sits on it. */
.c1-btn--primary {
  background-image: linear-gradient(100deg,
    var(--c1-action-press) 0%, var(--c1-action) 45%, var(--c1-violet) 100%);
  background-color: var(--c1-action);       /* fallback under the gradient */
  color: var(--c1-oninv-strong);
  box-shadow: var(--c1-shadow-action);
}
.c1-btn--primary:hover {
  transform: var(--c1-lift);
  box-shadow: var(--c1-shadow-action-hover);
}
.c1-btn--primary:active {
  transform: translateY(0);
  background-image: none;
  background-color: var(--c1-action-press);
  box-shadow: var(--c1-shadow-action);
}

/* --- Ghost / outline: quiet secondary on light surfaces ------------------- */
.c1-btn--ghost {
  background-color: transparent;
  color: var(--c1-action);
  border-color: var(--c1-action-border);
}
.c1-btn--ghost:hover {
  background-color: var(--c1-action-soft);
  border-color: var(--c1-action);
  transform: var(--c1-lift);
}
.c1-btn--ghost:active { transform: translateY(0); background-color: var(--c1-action-soft); }

/* Ghost on dark sections (e.g. "See How It Works" over the hero). */
.c1-on-dark .c1-btn--ghost {
  color: var(--c1-oninv-strong);
  border-color: rgba(255, 255, 255, 0.28);
}
.c1-on-dark .c1-btn--ghost:hover {
  background-color: var(--c1-glass-on-dark-2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* --- WhatsApp: the one place brand green appears --------------------------
   White-on-#25D366 is only ~2:1, so the label is ink (≈8:1) and the green
   carries the identity through the fill + white glyph. Hover deepens the
   green while ink stays ≥4.5:1. */
.c1-btn--whatsapp {
  background-color: var(--c1-whatsapp);
  color: var(--c1-text-strong);
  box-shadow: var(--c1-shadow-sm);
}
/* client-locked: the glyph matches the ink label rather than going white */
.c1-btn--whatsapp .c1-btn__icon { color: inherit; }
.c1-btn--whatsapp:hover {
  background-color: var(--c1-whatsapp-dark);
  transform: var(--c1-lift);
  box-shadow: var(--c1-shadow-md);
}
.c1-btn--whatsapp:active { transform: translateY(0); }

/* --- Disabled (any skin) -------------------------------------------------- */
.c1-btn:disabled,
.c1-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
  filter: saturate(0.7);
}


/* ==========================================================================
   3 · CARDS
   Light (default), tinted (lavender), and liquid-glass (reuses the tokens.css
   .c1-glass* recipes — glass must sit over the mesh/dark/imagery, never flat
   white, and never nest inside another glass surface).
   ========================================================================== */

.c1-card {
  background-color: var(--c1-paper);
  border: var(--c1-border);
  border-radius: var(--c1-r-lg);
  padding: var(--c1-sp-6);
  box-shadow: var(--c1-shadow-sm);
}
.c1-card--tinted {
  background-color: var(--c1-paper-tint-2);
  border-color: var(--c1-paper-border);
  box-shadow: none;
}

/* Interactive card (whole card is a link/button). */
.c1-card--interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--c1-dur-base) var(--c1-ease),
              box-shadow var(--c1-dur-base) var(--c1-ease),
              border-color var(--c1-dur-base) var(--c1-ease);
}
.c1-card--interactive:hover {
  transform: var(--c1-lift);
  box-shadow: var(--c1-shadow-lg);
  border-color: var(--c1-action-border);
}

.c1-card__title {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-h4);
  font-weight: var(--c1-w-semibold);
  line-height: var(--c1-lh-tight);
  color: var(--c1-text-strong);
  margin: 0 0 var(--c1-sp-2);
}
.c1-card__body {
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-sm);
  line-height: var(--c1-lh-body);
  color: var(--c1-text);
  margin: 0;
}
/* A small, quiet stat line — NOT a colour bar. */
.c1-card__stat {
  display: block;
  margin-top: var(--c1-sp-4);
  padding-top: var(--c1-sp-3);
  border-top: 1px solid var(--c1-paper-line);
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-xs);
  font-weight: var(--c1-w-medium);
  color: var(--c1-text-muted);
}

/* Content colours when a card is a glass surface on dark. */
.c1-glass .c1-card__title,
.c1-glass-dark .c1-card__title { color: var(--c1-oninv-strong); }
.c1-glass .c1-card__body,
.c1-glass-dark .c1-card__body { color: var(--c1-oninv); }


/* ==========================================================================
   4 · BADGES
   "Available Now" (mint) and "Coming Soon" (amber + lock). Both keep the
   label in ink and let the semantic colour speak through the tinted chip and
   the icon, so contrast holds on light surfaces.
   ========================================================================== */

.c1-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--c1-sp-2);
  padding: 0.375rem 0.75rem;
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-micro);
  font-weight: var(--c1-w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: var(--c1-r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.c1-badge__icon { width: 0.875rem; height: 0.875rem; flex: none; }

.c1-badge--available {
  background-color: var(--c1-mint-soft);
  border-color: rgba(93, 224, 175, 0.45);   /* mint rim, graphic weight */
  color: var(--c1-text-strong);
}
.c1-badge--available .c1-badge__icon { color: var(--c1-mint-deep); }

.c1-badge--soon {
  background-color: var(--c1-amber-soft);
  border-color: rgba(185, 134, 49, 0.35);
  color: var(--c1-text-strong);
}
.c1-badge--soon .c1-badge__icon { color: var(--c1-amber); }

/* Dark-surface variants: here mint/amber may carry the text (they clear the
   floor on ink) and the chip becomes a subtle translucent fill. */
.c1-on-dark .c1-badge--available {
  background-color: rgba(93, 224, 175, 0.14);
  border-color: rgba(93, 224, 175, 0.4);
  color: var(--c1-mint);
}
.c1-on-dark .c1-badge--available .c1-badge__icon { color: var(--c1-mint); }
.c1-on-dark .c1-badge--soon {
  background-color: rgba(224, 163, 60, 0.14);
  border-color: rgba(224, 163, 60, 0.4);
  color: var(--c1-amber-bright);
}
.c1-on-dark .c1-badge--soon .c1-badge__icon { color: var(--c1-amber-bright); }


/* ==========================================================================
   5 · FAQ ACCORDION ROW
   Native <details>/<summary>: keyboard-accessible and works with no JS.
   ========================================================================== */

.c1-faq {
  border-bottom: 1px solid var(--c1-paper-line);
}
.c1-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c1-sp-4);
  padding: var(--c1-sp-5) var(--c1-sp-1);
  list-style: none;
  cursor: pointer;
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-h4);
  font-weight: var(--c1-w-semibold);
  color: var(--c1-text-strong);
  border-radius: var(--c1-r-sm);
  transition: color var(--c1-dur-fast) var(--c1-ease);
}
.c1-faq > summary::-webkit-details-marker { display: none; }
.c1-faq > summary:hover { color: var(--c1-action); }

.c1-faq__chevron {
  flex: none;
  width: 1.25rem; height: 1.25rem;
  color: var(--c1-text-muted);
  transition: transform var(--c1-dur-base) var(--c1-ease-out),
              color var(--c1-dur-fast) var(--c1-ease);
}
.c1-faq[open] .c1-faq__chevron { transform: rotate(180deg); color: var(--c1-action); }

.c1-faq__answer {
  padding: 0 var(--c1-sp-1) var(--c1-sp-6);
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-body);
  line-height: var(--c1-lh-body);
  color: var(--c1-text);
  max-width: 68ch;
}


/* ==========================================================================
   6 · METRIC TILE
   Real proof numbers (e.g. GMB performance). Restrained: number, label, and
   one line of context — no decorative sparkline.
   ========================================================================== */

.c1-metric {
  padding: var(--c1-sp-6);
  background-color: var(--c1-paper);
  border: var(--c1-border);
  border-radius: var(--c1-r-lg);
  box-shadow: var(--c1-shadow-sm);
}
.c1-metric__value {
  display: block;
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-h2);
  font-weight: var(--c1-w-bold);
  line-height: 1;
  letter-spacing: var(--c1-ls-head);
  color: var(--c1-text-strong);
  font-variant-numeric: tabular-nums;
}
.c1-metric__label {
  display: block;
  margin-top: var(--c1-sp-3);
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-sm);
  line-height: var(--c1-lh-tight);
  color: var(--c1-text);
}
.c1-metric__context {
  display: block;
  margin-top: var(--c1-sp-2);
  font-size: var(--c1-t-xs);
  color: var(--c1-text-muted);
}
/* Optional positive delta — mint is allowed here (a genuine positive). */
.c1-metric__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--c1-sp-1);
  margin-top: var(--c1-sp-3);
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-xs);
  font-weight: var(--c1-w-semibold);
  color: var(--c1-mint-deep);
}

.c1-on-dark .c1-metric,
.c1-metric.c1-glass {
  background-color: transparent;
}
.c1-on-dark .c1-metric .c1-metric__value { color: var(--c1-oninv-strong); }
.c1-on-dark .c1-metric .c1-metric__label { color: var(--c1-oninv); }
.c1-on-dark .c1-metric .c1-metric__context { color: var(--c1-oninv-muted); }
.c1-on-dark .c1-metric .c1-metric__delta { color: var(--c1-mint); }


/* ==========================================================================
   7 · TESTIMONIAL CARD
   Portrait + quote + attribution + review stars (gold = stars only).
   Real quotes are REQUIRED before launch; the placeholder text stays visibly
   bracketed so it is never mistaken for a fabricated testimonial.
   ========================================================================== */

.c1-testimonial {
  display: grid;
  gap: var(--c1-sp-5);
  padding: var(--c1-sp-8);
  background-color: var(--c1-paper);
  border: var(--c1-border);
  border-radius: var(--c1-r-xl);
  box-shadow: var(--c1-shadow-md);
}
.c1-testimonial__stars {
  display: inline-flex;
  gap: 0.15rem;
  color: var(--c1-gold-deep);   /* light-surface stars (graphic ≥3:1) */
}
.c1-testimonial__stars svg { width: 1.05rem; height: 1.05rem; }
.c1-testimonial__quote {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-h3);
  font-weight: var(--c1-w-medium);
  line-height: var(--c1-lh-tight);
  letter-spacing: var(--c1-ls-head);
  color: var(--c1-text-strong);
  margin: 0;
  text-wrap: pretty;
}
.c1-testimonial__foot {
  display: flex;
  align-items: center;
  gap: var(--c1-sp-4);
}
.c1-testimonial__avatar {
  flex: none;
  width: 3.25rem; height: 3.25rem;
  border-radius: var(--c1-r-pill);
  object-fit: cover;
  background-color: var(--c1-paper-tint-2);
  border: 1px solid var(--c1-paper-border);
  /* Placeholder avatar shows initials centred when no <img src>. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--c1-font-head);
  font-weight: var(--c1-w-semibold);
  color: var(--c1-action);
}
.c1-testimonial__name {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-sm);
  font-weight: var(--c1-w-semibold);
  color: var(--c1-text-strong);
}
.c1-testimonial__meta {
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-xs);
  color: var(--c1-text-muted);
}

.c1-on-dark .c1-testimonial {
  background-color: transparent;
}
.c1-on-dark .c1-testimonial__stars { color: var(--c1-gold); }
.c1-on-dark .c1-testimonial__quote { color: var(--c1-oninv-strong); }
.c1-on-dark .c1-testimonial__name { color: var(--c1-oninv-strong); }
.c1-on-dark .c1-testimonial__meta { color: var(--c1-oninv-muted); }


/* ==========================================================================
   8 · FORM FIELDS
   Label + control + optional hint/error. Placeholder is text-muted (≥4.5:1),
   never text-faint. Error carries an ink message + alert-coloured border/icon.
   ========================================================================== */

.c1-field {
  display: grid;
  gap: var(--c1-sp-2);
}
.c1-field__label {
  font-family: var(--c1-font-head);
  font-size: var(--c1-t-sm);
  font-weight: var(--c1-w-semibold);
  color: var(--c1-text-strong);
}
.c1-field__req { color: var(--c1-alert); margin-left: 0.15em; }
.c1-field__hint {
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-xs);
  color: var(--c1-text-muted);
}

.c1-input,
.c1-textarea,
.c1-select {
  width: 100%;
  padding: 0.8125rem var(--c1-sp-4);
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-body);
  line-height: var(--c1-lh-tight);
  color: var(--c1-text-strong);
  background-color: var(--c1-paper);
  border: 1px solid var(--c1-paper-border);
  border-radius: var(--c1-r-md);
  transition: border-color var(--c1-dur-fast) var(--c1-ease),
              box-shadow var(--c1-dur-fast) var(--c1-ease);
  -webkit-appearance: none;
  appearance: none;
}
.c1-input::placeholder,
.c1-textarea::placeholder { color: var(--c1-text-muted); opacity: 1; }
.c1-textarea { min-height: 7rem; resize: vertical; }

.c1-input:hover,
.c1-textarea:hover,
.c1-select:hover { border-color: var(--c1-action-border); }

.c1-select {
  padding-right: var(--c1-sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B718E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--c1-sp-4) center;
}

/* Error state */
.c1-field--error .c1-input,
.c1-field--error .c1-textarea,
.c1-field--error .c1-select {
  border-color: var(--c1-alert);
  background-color: var(--c1-alert-soft);
}
.c1-field--error .c1-input:focus-visible,
.c1-field--error .c1-textarea:focus-visible,
.c1-field--error .c1-select:focus-visible {
  border-color: var(--c1-alert);
  box-shadow: 0 0 0 4px rgba(228, 101, 92, 0.18);
}
.c1-field__error {
  display: inline-flex;
  align-items: center;
  gap: var(--c1-sp-2);
  font-family: var(--c1-font-body);
  font-size: var(--c1-t-xs);
  font-weight: var(--c1-w-medium);
  color: var(--c1-text-strong);
}
.c1-field__error svg { width: 0.95rem; height: 0.95rem; color: var(--c1-alert); flex: none; }

/* Disabled */
.c1-input:disabled,
.c1-textarea:disabled,
.c1-select:disabled {
  background-color: var(--c1-paper-tint);
  color: var(--c1-text-muted);
  cursor: not-allowed;
}


/* ==========================================================================
   9 · MOTION HELPER STATES  (paired with assets/js/motion.js)
   Initial hidden states apply ONLY when motion.js has confirmed motion is
   allowed and adds `.motion-ready` to <html>. With no JS or reduced motion,
   nothing is hidden — content is visible by default. Invariant 7.
   ========================================================================== */

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  will-change: transform, opacity;
}
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}