/* ============================================================================
   POWER DIALER DESIGN SYSTEM — brand.css
   The Clear Access identity layer, quoted from the brand repo's tokens
   (CLEAR-ACCESS-MEDIA/clear-access-media/src/tokens.css). Load AFTER
   marketing.css, on MARKETING surfaces only.

   The brand's own division of labor, kept intact here:
     Cormorant Garamond  →  "the brand speaks"  (wordmark, signatures, 404)
     the sans            →  "the UI works"      (everything functional stays
                                                 on the pack's Manrope)
   The horse is the mark. The sky tints are the only decorative color the
   brand owns; they replace the state accents in brand-flavored washes.
   ========================================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("./assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
  font-weight: 300 500;
  font-display: swap;
}

:root {
  --brand-serif: "Cormorant Garamond", Georgia, serif;
  /* Sampled from the sunset artwork — the brand's decorative palette. */
  --sky-lilac: #bc9cb2;
  --sky-rose:  #c995a2;
  --sky-peach: #fcbda4;
  --sky-gold:  #fbc5a2;
}

/* ---- the wordmark: serif, letterspaced, always caps ---------------------- */
.brand-word {
  font-family: var(--brand-serif);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-1);
  line-height: 1;
}
.brand-word small { font-size: 11px; letter-spacing: .2em; color: var(--ink-3); }

/* The CA lettermark square (from the brand favicon). */
.brand-ca {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--ink-1);
  color: var(--surface-base);
  font-family: var(--brand-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding-bottom: 2px;   /* optical centre for the serif */
  flex: none;
}

/* ---- the horse ----------------------------------------------------------- */
/* horse-alpha.png = ink on transparent (light surfaces)
   horse-alpha-light.png = paper on transparent (dark surfaces)              */
.brand-horse { display: block; max-width: 100%; height: auto; }
.brand-horse.ghost { opacity: .10; pointer-events: none; user-select: none; }

/* The horse riding the dark band: a quiet engraved ghost on the right. */
.band-horse {
  position: absolute;
  right: -40px;
  bottom: -24px;
  width: 420px;
  opacity: .14;
  pointer-events: none;
  user-select: none;
}

/* ---- brand bloom: the sky tints instead of the state accents ------------- */
.fx-bloom.brand::before {
  background:
    radial-gradient(38% 34% at 20% 22%, color-mix(in srgb, var(--sky-lilac) 34%, transparent), transparent 70%),
    radial-gradient(42% 40% at 82% 16%, color-mix(in srgb, var(--sky-peach) 38%, transparent), transparent 70%),
    radial-gradient(46% 44% at 78% 84%, color-mix(in srgb, var(--sky-gold) 34%, transparent), transparent 70%),
    radial-gradient(36% 32% at 14% 80%, color-mix(in srgb, var(--sky-rose) 26%, transparent), transparent 70%),
    var(--surface-base);
  filter: blur(46px);
}

/* ---- the signature line -------------------------------------------------- */
.brand-tagline {
  font-family: var(--brand-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .01em;
  color: var(--ink-2);
}

/* ===========================================================================
   DEVICES QUOTED FROM clearaccessmedia.org
   Four things the holding site does that carry the identity. Used sparingly
   on marketing surfaces, and in their mildest form on app panels.
   ========================================================================= */

/* 1 · THE PLATE — a hairline frame inset around a mark, the way the horse
   sits on the holding site. Nothing but a rule and air. */
.brand-plate {
  position: relative;
  padding: clamp(18px, 3vw, 34px);
}
.brand-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--ink-1) 16%, transparent);
  pointer-events: none;
}
[data-theme="dark"] .brand-plate::before {
  border-color: color-mix(in srgb, var(--ink-1) 22%, transparent);
}

/* 2 · THE WINDOW — the site sits inside a chromed pane: three dots left,
   letterspaced mono caps centred. On the product preview it earns its
   keep, because the preview IS a window into the app. */
.brand-window {
  border-radius: var(--r-shell);
  background: var(--surface-base);
  box-shadow: var(--shadow-raise-2), 0 24px 60px rgb(var(--sh-dark) / .12);
  overflow: hidden;
}
.brand-window-bar {
  position: relative;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline-soft);
  background: color-mix(in srgb, var(--surface-raised) 70%, transparent);
}
.brand-window-bar i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--ink-4) 55%, transparent);
  flex: none;
}
.brand-window-bar .win-title {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font: 500 9px/1 var(--font-num);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
}

/* 3 · THE CAPSULE ROW — numbered glass rows that open. The holding site's
   "01 Our Philosophy". Here: the pricing questions. */
.brand-capsule {
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-raise-1), inset 0 0 0 1px var(--glass-edge);
  transition: border-radius var(--t-panel) var(--ease),
              box-shadow var(--t-state) var(--ease);
  overflow: hidden;
}
.brand-capsule + .brand-capsule { margin-top: 10px; }
.brand-capsule:hover { box-shadow: var(--shadow-raise-1-hover), inset 0 0 0 1px var(--glass-edge); }
.brand-capsule.is-open { border-radius: 26px; }
.brand-capsule .capsule-trigger {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 22px;
  text-align: left;
  font: 500 15px/1.3 var(--font-ui);
  color: var(--ink-1);
}
.brand-capsule .capsule-n {
  font: 500 10px/1 var(--font-num);
  letter-spacing: .14em;
  color: var(--ink-4);
  flex: none;
}
.brand-capsule .capsule-chev {
  margin-left: auto;
  font-family: var(--font-num);
  font-size: 10px;
  color: var(--ink-3);
  transition: transform var(--t-state) var(--ease);
}
.brand-capsule.is-open .capsule-chev { transform: rotate(180deg); }
/* The answer hangs under the question, not under the number: 22px trigger
   pad + 15px number + 14px gap = 51px. The second selector matches the
   specificity of marketing.css's `.faq .collapse-inner .t-body`, which
   would otherwise zero this out. */
.brand-capsule .collapse-inner p,
.brand-capsule .collapse-inner p.t-body {
  margin: 0;
  padding: 2px 26px 20px 51px;
  font: 500 13px/1.7 var(--font-ui);
  color: var(--ink-2);
  max-width: 62ch;
}
.brand-capsule .capsule-n { width: 15px; }   /* keeps that 51px honest */
@media (prefers-reduced-transparency: reduce) {
  .brand-capsule { background: var(--surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* 4 · SHADER CARD — a feature cell with its own slow flow behind it, per
   21st's Feature Shader Cards, using the brand palettes. Ink stays legible
   because the card carries its own dark ground under the canvas. */
.fx-shader-card {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #262421;          /* fallback ground if WebGL is absent */
  border: 0;
}
.fx-shader-card > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* a soft scrim so body copy holds its contrast wherever the flow lands */
.fx-shader-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, rgba(20,18,16,.10), rgba(20,18,16,.40));
  pointer-events: none;
  display: block !important;
}
.fx-shader-card > *:not(canvas) { position: relative; z-index: 1; }
.fx-shader-card h3 { color: #EDEAE3; }
.fx-shader-card p { color: rgba(237, 234, 227, .74); }
.fx-shader-card .badge { color: rgba(237, 234, 227, .8); background: rgba(255,255,255,.10); box-shadow: none; }
.fx-shader-card::before { display: none !important; }

/* ---- the auth side: the horse IS the artwork ----------------------------- */
/* No shader here. A plain ground and one very large mark, cropped by the
   pane the way a poster crops. It sits under the copy, never over it. */
.auth-horse {
  position: absolute;
  right: -14%;
  top: 4%;
  width: min(96%, 820px);
  max-width: none;
  opacity: .20;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
[data-theme="dark"] .auth-horse { opacity: .16; }
.auth-side > *:not(.auth-horse) { position: relative; z-index: 1; }

/* ---- 404 hero ------------------------------------------------------------ */
.lost-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  position: relative;
}
.lost-hero .brand-horse { width: min(520px, 80vw); margin-bottom: 8px; }
.lost-hero h1 {
  margin: 18px 0 0;
  font: 800 clamp(36px, 5vw, 58px)/1.05 var(--font-ui);
  letter-spacing: -.03em;
}
.lost-hero .lost-code {
  font: 500 11px/1 var(--font-num);
  letter-spacing: .2em;
  color: var(--ink-4);
}
[data-theme="dark"] .horse-ink { display: none; }
:root:not([data-theme="dark"]) .horse-paper { display: none; }