/* Slingso — DaisyUI custom theme
 *
 * Palette: Wes Anderson × The Darjeeling Limited (2007)
 *   Darjeeling1: #FF0000 red · #00A08A teal · #F5A200 marigold · #F98400 orange · #5BBCD6 sky
 *   Darjeeling2: #ECCBAE sand · #046C9A ocean · #D69C4E wheat · #ABDDDE aqua · #000000 black
 *   Extended:    #C8102E crimson — Wes Anderson title-card red (display text only)
 *
 * Contrast audit (WCAG AA = 4.5:1 normal, 3:1 large/bold):
 *   White on deep teal #007A6A       → 5.26:1 ✓ AA  — primary button text
 *   Navy #0A2540 on amber #F5A200    → 7.8:1  ✓ AAA — hero body text
 *   Crimson #C8102E on amber #F5A200 → 3.0:1  ✓ large/bold only — hero H1 display
 *   Dark #0A2540 on aqua #C8E8EA     → 10.6:1 ✓ AAA — body text
 *   Dark #034F72 on aqua #C8E8EA     → 5.6:1  ✓ AA+ — headings, overlines
 *   Dark #0A2540 on sand #ECCBAE     → 10.2:1 ✓ AAA — card content
 *   White on ocean #046C9A           → 5.7:1  ✓ AA+ — secondary buttons
 *   Crimson — large bold display text only (hero H1). Never body/small text.
 *   Red #FF0000 — background use NEVER. Decorative text accent only.
 *
 * Architecture:
 *   - Page box bg: #C8E8EA light aqua
 *   - Section alt bg: #ABDDDE Darjeeling2 aqua
 *   - Pricing / content cards: #ECCBAE Darjeeling2 sand
 *   - Body mat (outside page box): #8CBFC1 deeper aqua + Jali grid
 *   - Hero bg: #046C9A ocean + saffron polka dots
 *   - Stats bg: #F5A200 marigold amber + ocean dots (mirror of hero)
 *   - Blueprint borders: ocean at 18–30% opacity
 */

[data-theme="slingso"] {

  /* ── Base surfaces — Darjeeling hill station sky ─────────────────────── */

  --color-base-100:     #C8E8EA;   /* light aqua — page / box bg                  */
  --color-base-200:     #ABDDDE;   /* Darjeeling2 aqua — section alt bg           */
  --color-base-300:     #8CBFC1;   /* deeper aqua — mat (body background)         */
  --color-base-content: #0A2540;   /* dark navy — body text on all base surfaces  */

  /* ── Primary — deep teal (Darjeeling1 teal, darkened) ────────────────────
     CTA buttons: friendly and fresh, reads as "go" (.impeccable.md).
     White on #007A6A = 5.26:1 ✓ AA; button edge on light aqua = 4.05:1 ✓.
     Crimson stays for display accents only; red means errors. */

  --color-primary:         #007A6A;
  --color-primary-content: #FFFFFF;

  /* ── Secondary — ocean blue (Darjeeling2) ────────────────────────────────
     Hero background, secondary buttons. White on ocean = 5.7:1 ✓ AA+.    */

  --color-secondary:         #046C9A;
  --color-secondary-content: #FFFFFF;

  /* ── Accent — Darjeeling red ─────────────────────────────────────────────
     NEVER as a background. Decorative text accent and error states only.  */

  --color-accent:         #FF0000;
  --color-accent-content: #FFFFFF;

  /* ── Neutral — dark navy ──────────────────────────────────────────────── */

  --color-neutral:         #0A2540;
  --color-neutral-content: #FFFFFF;

  /* ── Semantic states ─────────────────────────────────────────────────── */

  --color-info:            #046C9A;   /* ocean blue                                */
  --color-info-content:    #FFFFFF;
  --color-success:         #00A08A;   /* Darjeeling1 teal                          */
  --color-success-content: #FFFFFF;
  --color-warning:         #F98400;   /* Darjeeling1 orange                        */
  --color-warning-content: #0A2540;
  --color-error:           #FF0000;   /* Darjeeling1 red                           */
  --color-error-content:   #FFFFFF;

  /* ── DaisyUI v5 component hooks ──────────────────────────────────────────
     DaisyUI v5 uses oklch internally; color-mix() fails silently when our
     hex --color-base-content is passed in. Override --input-color directly
     so .input / .select borders render correctly.                         */

  /* --input-color set on the element directly below — see .input/.select rule */

  /* ── Shape — flat planes, Anderson precision ─────────────────────────── */

  --radius-selector: 0.125rem;
  --radius-field:    0.125rem;
  --radius-box:      0.125rem;
  --size-selector:   0.3125rem;
  --size-field:      0.3125rem;
  --border:          1px;
  --depth:           0;
  --noise:           0;

  /* ── Custom design tokens ─────────────────────────────────────────────── */

  /* Typography — dark ocean on light aqua */
  --color-heading:      #034F72;   /* dark ocean — 5.6:1 on all aqua surfaces ✓  */
  --color-text:         #0A2540;   /* deep navy — 10.6:1 on light aqua ✓ AAA     */
  --color-text-muted:   #235B5D;   /* muted teal — 4.76:1 on light aqua ✓ AA     */

  /* Named Darjeeling1 palette */
  --color-saffron:      #F5A200;   /* marigold amber — BACKGROUNDS and accents    */
                                   /* only. 2.09:1 on white: never body text,    */
                                   /* never a stat numeral. See docs/design.md.  */
  --color-saffron-dark: #D69C4E;   /* Darjeeling2 wheat — saffron border         */
  --color-saffron-text: #8A5A00;   /* deep amber — saffron meaning as TEXT, 5.9:1 on white ✓ */
  --color-crimson:      #C8102E;   /* Wes Anderson title-card red — display only */
  --color-orange:       #F98400;   /* Darjeeling1 — loop node 3, hover           */
  --color-orange-dark:  #CC6A00;   /* orange border                              */
  --color-red:          #FF0000;   /* Darjeeling1 — decorative text only, never bg */
  --color-teal:         #00A08A;   /* Darjeeling1 — loop node 2, success         */
  --color-teal-dark:    #007A6A;   /* teal border                                */
  --color-sky:          #5BBCD6;   /* Darjeeling1 — sky blue accent              */

  /* Named Darjeeling2 palette */
  --color-ocean:        #046C9A;   /* Darjeeling2 — hero bg, secondary, headings */
  --color-ocean-dark:   #034F72;   /* darker ocean — heading text, borders       */
  --color-sand:         #ECCBAE;   /* Darjeeling2 — card / pricing surfaces      */
  --color-wheat:        #D69C4E;   /* Darjeeling2 — warm gold accent             */
  --color-aqua:         #ABDDDE;   /* Darjeeling2 — section alt bg              */

  /* Extended surfaces */
  --color-surface:       #ABDDDE;   /* alias → aqua                              */
  --color-surface-bold:  #8CBFC1;   /* alias → deeper aqua                       */
  --color-hero:          #046C9A;   /* hero and bottom CTA background             */

  /* Links — dark ocean, passes AA on all aqua/sand surfaces */
  --color-link:          #034F72;
  --color-link-hover:    #023A55;

  /* Blueprint borders — ocean-derived, single system across entire UI */
  --color-blueprint:     rgba(4,108,154,0.18);   /* universal border             */
  --color-border:        rgba(4,108,154,0.18);   /* alias                        */
  --color-border-strong: rgba(4,108,154,0.32);   /* stronger dividers            */

  /* Inverted border — for use on dark (navy/ocean) section backgrounds */
  --color-border-inverted: rgba(255, 255, 255, 0.15);

  /* Text on dark (navy/ocean) sections: full and secondary. The secondary
     is 74% white, 9.4:1 on navy ✓ AAA. Never inline rgba() in views. */
  --color-on-dark:         #FFFFFF;
  --color-on-dark-muted:   rgba(255, 255, 255, 0.74);
  --color-on-dark-subtle:  rgba(255, 255, 255, 0.08);

  /* 7% tints of the loop accents — card washes on marketing feature pages */
  --color-tint-saffron: rgba(245, 162, 0, 0.07);
  --color-saffron-wash: #FFFAF0;   /* opaque saffron tint on white, for sticky table cells */
  --color-tint-teal:    rgba(0, 160, 138, 0.07);
  --color-tint-orange:  rgba(249, 132, 0, 0.07);
  --color-tint-ocean:   rgba(4, 108, 154, 0.07);

  /* Notice banner — opaque warm pale yellow (the announcement strip). Opaque,
     not a tint, so it reads the same warm yellow over the cream page-box AND
     over the aqua section backgrounds. Icon uses --color-saffron. */
  --color-notice:        #FDF7E1;   /* pale marigold wash — banner fill           */
  --color-notice-border: #EFE3B4;   /* soft wheat — subtle banner border          */

  /* Page box — the diorama stage. White, not aqua.
     Used for the 1280px marketing container, loop grid cells, pricing cards. */
  --color-page-box: #FFFFFF;
  --color-sidebar:  #DDE9F2;   /* dashboard nav: one step deeper than the content bg (ocean 7%) */

  /* Data visualisation (charts — in order of use) */
  --color-dataviz-1: #046C9A;
  --color-dataviz-2: #F5A200;
  --color-dataviz-3: #FF0000;
  --color-dataviz-4: #00A08A;
  --color-dataviz-5: #F98400;
  --color-dataviz-6: #5BBCD6;

  /* Fonts — two faces only (.impeccable.md): Raleway for headings, labels,
     overlines and display; Poppins for body, tables and numbers. The display
     and data tokens are roles, not extra faces. */
  --font-display: 'Raleway', sans-serif;
  --font-heading: 'Raleway', sans-serif;
  --font-body:    'Poppins', sans-serif;
  --font-data:    'Poppins', sans-serif;
}


/* ── Base element styles ─────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  background-color: var(--color-base-100);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }

/* Display set inline (style="font-family: var(--font-display)") takes the
   same bold, tight treatment: Raleway at display size, never thin. */
[style*="var(--font-display)"] { font-weight: 700; letter-spacing: -0.01em; }

h1, h2 { font-weight: 700; }

/* Numbers line up wherever data is shown. */
table, .font-data, .stat-value, .badge { font-family: var(--font-data); font-variant-numeric: tabular-nums; }


/* ── Links — dark ocean blue, underline on hover ─────────────────────────
   Scoped with :not(.btn) and :not(.no-underline) so DaisyUI buttons and
   explicitly-styled nav/footer links are unaffected.                      */

a:not(.btn):not(.no-underline) {
  color: var(--color-link);
}

a:not(.btn):not(.no-underline):hover {
  color: var(--color-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

nav a:not(.btn) {
  text-decoration: none;
  color: inherit;
}

nav a:not(.btn):hover {
  text-decoration: none;
  opacity: 0.7;
}

footer a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

footer a:not(.btn):hover {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── Button override — uppercase Raleway for authority ────────────────────
   Applies across dashboard and marketing. Consistent brand voice.         */

.btn {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: var(--font-heading);
  font-size: 0.73rem;
}


/* ── Marketing mat — body background with Jali diamond grid texture ──────
   Deeper aqua (#8CBFC1) with an ocean-blue diagonal Jali grid at 6%.
   The mat sits outside the 1280px page box — the "platform" the diorama
   rests on.                                                               */

.marketing-mat {
  background-color: var(--color-base-100);
  background-image:
    radial-gradient(circle, rgba(4,108,154,0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}


/* ── Section backgrounds — marketing pages only ──────────────────────── */

.section-hero     { background-color: var(--color-hero); }
.section-saffron  {
  background: var(--color-page-box);
}
.section-surface  { background-color: var(--color-surface); }
.section-bold     { background-color: var(--color-surface-bold); }
.section-base-100 { background-color: var(--color-base-100); }
.section-base-200 { background-color: var(--color-base-200); }

/* ── Section mat — matches body marketing-mat (aqua + polka dots) ────────
   Applied to sections that should feel like the page mat rather than a
   distinct content block (e.g. Shift, Stats in their relaxed state).    */
.section-mat {
  background-color: var(--color-base-100);
  background-image: radial-gradient(circle, rgba(4,108,154,0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}


/* ── Border utilities ────────────────────────────────────────────────── */

/* ── AI Shelf layout utilities ──────────────────────────────────────────
   The shelf report pages run a 960px reading column (see app/views/shelf/*).
   Two structural needs that don't belong inline in the markup:

   .shelf-breakout — lets ONE section escape the reading column and fill the
   page-box interior, without widening the prose around it. Used by the
   persona-journey funnel, whose five stage columns were squeezing brand
   names to ~179px and truncating them mid-word. Classic full-bleed idiom
   (position/left/negative-margin), capped at 1216px so it stays inside the
   1280px page-box and keeps its blueprint borders visible.

   .shelf-stories-row — two-up on desktop, snap carousel under 640px. Lived
   as an inline <style> in the middle of series.html.erb. */
/* Table key disclosure — a quiet affordance, no bounce. 150ms is the ceiling
   for micro-interactions per docs/design.md. */
.shelf-key > summary { list-style: none; }
.shelf-key > summary::-webkit-details-marker { display: none; }
.shelf-key > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  font-weight: 700;
  transition: opacity 150ms ease;
}
.shelf-key[open] > summary::before { content: "\2013"; }
.shelf-key > summary:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .shelf-key > summary::before { transition: none; }
}

.shelf-breakout {
  --shelf-breakout-w: min(1216px, calc(100vw - 2rem));
  position: relative;
  left: 50%;
  width: var(--shelf-breakout-w);
  margin-left: calc(var(--shelf-breakout-w) / -2);
}

.shelf-stories-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.shelf-stories-row[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 640px) {
  .shelf-stories-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .shelf-stories-row::-webkit-scrollbar { display: none; }
  .shelf-stories-row > .shelf-story-card { flex: 0 0 86%; scroll-snap-align: start; }
}

.border-warm        { border: 1px solid var(--color-border); }
.border-warm-strong { border: 1px solid var(--color-border-strong); }


/* ── Thin decorative rule ────────────────────────────────────────────── */

.rule-anderson {
  border: none;
  border-top: 1px solid var(--color-border-strong);
  margin: 0 auto;
  width: 4rem;
}


/* ── Logo utility — inverts for dark backgrounds ─────────────────────── */

.logo-on-dark { filter: brightness(0) invert(1); }


/* ── Marketing overlines — mandatory on every marketing section ──────────
   Dark ocean on aqua = 3.85–5.6:1 ✓ (better than original marigold at
   2.27:1 on parchment). Bold uppercase + letter-spacing compensates.
   Ghost variant: white at 65% opacity on dark ocean hero.               */

.overline {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-ocean-dark);
  text-decoration: none;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.overline-ghost {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);   /* 0.85 → ~5.0:1 on ocean ✓ AA+. 0.65 failed at 3.2:1. */
}

.overline-muted {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Modifier — tighter tracking for longer caption-style overlines */
.overline-muted--tight { letter-spacing: 0.15em; }


/* ── Display typography — Raleway bold, marketing pages only ─────────────
   Hero: 2.6–4.75rem. CTA: 2–3.75rem. Shift: 1.6–2.6rem.
   .accent within .display-hero: saffron — at 76px display size, 2.9:1
   clears the large-text threshold on ocean hero bg.                     */

.display-hero {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: #FFFFFF;                          /* white on ocean hero */
}

.display-hero .accent { color: var(--color-saffron); } /* saffron accent on ocean — vivid warm/cool contrast */


/* ── Hero poster typography — Wes Anderson title card ────────────────────
   Raleway 900 throughout. White fill + thick crimson stroke + hard dark
   shadow offset creates the letterpress / extruded depth from vintage
   signage (ref: Cheapsman). All display lines equal weight — no accent.
   Connector bridges lines at micro scale for dramatic size contrast.    */

.hero-poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.hero-poster-main {
  font-family: var(--font-heading);
  font-size: clamp(4.4rem, 3.5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #000;
}

/* No accent treatment — all display lines identical */
.hero-poster-main.accent {
  color: #FFFFFF;
  font-family: var(--font-heading);
  -webkit-text-stroke: 3px var(--color-crimson);
}

.hero-poster-connector {
  font-family: var(--font-heading);
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  padding: 0.9em 0;
}

.hero-poster-sub {
  font-family: var(--font-heading);
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.88);
  text-shadow: 1px 2px 0 rgba(10,37,64,0.30);
  margin-top: 1.2em;
}


.display-cta {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  color: var(--color-secondary-content);   /* white on ocean CTA bg */
}

.display-shift {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.15;
  color: var(--color-heading);
}

.display-shift em {
  font-style: italic;
  color: var(--color-ocean);
}


/* ── Section heading — Raleway, all sections ─────────────────────────── */

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-heading);
}


/* ── Stats section — saffron bg + ocean dot pattern ─────────────────────
   Mirror of the hero: hero = ocean bg + saffron dots.
   Stats = saffron bg + ocean dots. Warm/cool duality.                   */

.section-stats {
  background-color: var(--color-saffron);
  background-image: radial-gradient(circle, rgba(4,108,154,0.18) 2px, transparent 2px);
  background-size: 26px 26px;
}


/* ── Stat number — train departure board scale ───────────────────────── */

.stat-num {
  font-family: var(--font-data);
  font-size: clamp(3.5rem, 5.5vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

/* Stat label (departure-board route name) and note on saffron section.
   All use --color-text (8.0:1 on saffron ✓ AAA). Note at 65% opacity =
   rendered effective contrast ~4.5:1 on saffron ✓ AA.                  */
.stat-label { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(10,37,64,0.55); }
.stat-note  { font-size: 0.875rem; line-height: 1.6; color: rgba(10,37,64,0.65); }


/* ── Blueprint border utilities — directional ────────────────────────── */

.border-b-warm { border-bottom: 1px solid var(--color-border); }
.border-t-warm { border-top:    1px solid var(--color-border); }
.border-r-warm { border-right:  1px solid var(--color-border); }
.border-l-warm { border-left:   1px solid var(--color-border); }

/* Borders between grid/flex children */
.divide-x-warm > * + * { border-left:  1px solid var(--color-border); }
.divide-y-warm > * + * { border-top:   1px solid var(--color-border); }

/* Responsive variants */
@media (min-width: 768px) {
  .md-divide-x-warm > * + * { border-left: 1px solid var(--color-border); }
}
@media (max-width: 767px) {
  .sm-divide-y-warm > * + * { border-top: 1px solid var(--color-border); }
}


/* ── Tactile interactions — The Tactile Web ──────────────────────────────
   Buttons physically depress 2px on :active — it clacks.
   Inputs/selects snap to a hard ocean border on focus, no glow ring.    */

.btn:active {
  transform: translateY(2px);
}

/* DaisyUI v5 sets --input-color directly on .input inside @layer daisyui.*
   A direct element declaration beats any inherited value, so [data-theme]
   overrides don't work. Set --input-color here (unlayered, direct) to win. */
.input,
.select {
  --input-color: rgba(4, 108, 154, 0.32);
}

.input:focus,
.select:focus {
  --input-color: var(--color-ocean);
  outline: none;
  box-shadow: none;
}


/* ── Colour utilities ────────────────────────────────────────────────── */

.text-saffron    { color: var(--color-saffron); }
.text-red        { color: var(--color-red); }
.text-ocean      { color: var(--color-ocean); }
.text-teal       { color: var(--color-teal); }
.text-orange     { color: var(--color-orange); }
.text-heading    { color: var(--color-heading); }
.text-warm-muted { color: var(--color-text-muted); }


/* ── Dawn sun — subtle warm glow, top-left of page box ───────────────────
   Radial amber-to-orange gradient. Slow 8s pulse. Like morning light
   through a Darjeeling train window. pointer-events:none so it never
   blocks interaction. z-index:0, content at z-index:1+.                 */

.dawn-sun {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(
    circle at center,
    rgba(242,173,0,0.32) 0%,
    rgba(249,132,0,0.18) 30%,
    rgba(249,132,0,0.06) 55%,
    transparent 72%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: dawn-pulse 8s ease-in-out infinite;
}

@keyframes dawn-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.18); }
}


/* ── Stat title — bold label on saffron stats section ───────────────────
   Same dark navy as body text — 8.0:1 on saffron ✓ AAA.               */

.stat-title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }


/* ── Pricing ──────────────────────────────────────────────────────────── */

/* Blueprint gap grid — 1px ocean borders between cards */
.pricing-grid          { gap: 0; }

/* Pricing cards — page-box surface, saffron as accent only */
.pricing-card          { background-color: var(--color-page-box); }

/* Errors: red marks the edge, never the ground (design.md: the accent is
   never a background). White on the page, the message in body text. */
.alert.alert-error {
  --alert-color: var(--color-page-box);
  background-color: var(--color-page-box);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-error);
  border-radius: 4px;
}

/* The one card on auth-layout pages (sign-in, plan choice, setup, consent,
   invites, workspaces): white on the aqua ground, like the pricing cards. */
.auth-card { background-color: var(--color-page-box); border-radius: 4px; }
.auth-card .input,
.auth-card .select,
.auth-card .textarea { background-color: var(--color-page-box); }
.pricing-card-featured { background-color: var(--color-page-box); border-top: 3px solid var(--color-saffron); }

.price-num        { font-family: var(--font-data); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--color-heading); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.price-num-accent { color: var(--color-ocean); }

.check-item { display: flex; align-items: flex-start; gap: 0.75rem; font-family: var(--font-data); font-size: 0.875rem; color: var(--color-text); line-height: 1.5; }
.check-mark { font-weight: 700; font-size: 0.65rem; color: var(--color-ocean); flex-shrink: 0; padding-top: 0.25rem; }


/* ── FAQ ─────────────────────────────────────────────────────────────── */

.faq-question { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.4; color: var(--color-heading); }


/* ── Off-screen rendering optimisation ──────────────────────────────────
   content-visibility:auto lets the browser skip layout/paint for sections
   until they're near the viewport. contain-intrinsic-size provides a size
   hint so the scrollbar doesn't jump when sections are uncollapsed.
   Do NOT apply to sections with running CSS animations (the loop grid).  */

.section-offscreen {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}


/* ── Mobile bottom nav — safe area inset for iPhone home indicator ────────
   viewport-fit=cover extends content under the notch; the padding-bottom
   compensates so nav labels are never hidden behind the home bar.         */

.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD — logged-in app shell
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard body — aqua polka-dot mat ────────────────────────────────
   Panels float on top as white cards. The mat is visible in the gaps.    */
.dash-mat {
  background-color: var(--color-base-200);
  background-image: radial-gradient(circle, rgba(4,108,154,0.12) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}

/* ── Sidebar nav item ────────────────────────────────────────────────────
   Poppins 13px, normal case. Clean, readable. 2026 SaaS standard.        */
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 36px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(10, 37, 64, 0.50);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.dash-nav-item:hover {
  color: var(--color-neutral);
  background-color: rgba(4, 108, 154, 0.06);
  border-left-color: rgba(4, 108, 154, 0.25);
}

/* Active state — saffron left accent + warm tint */
.dash-nav-item-active {
  border-left-color: var(--color-saffron);
  background-color: rgba(245, 162, 0, 0.09);
  color: var(--color-neutral);
  font-weight: 600;
}

/* ── Sidebar section label ───────────────────────────────────────────────
   Quiet category separator. Poppins 10px, very muted.                 */
.dash-nav-section {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(35, 91, 93, 0.45);
  padding: 0 12px;
}

/* ── Agent status dot ────────────────────────────────────────────────────
   Green pulsing = running; muted = idle.                                 */
.agent-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agent-dot-running {
  background-color: var(--color-teal);
  animation: agent-pulse 2.4s ease-in-out infinite;
}

.agent-dot-idle {
  background-color: rgba(35, 91, 93, 0.4);
}

@keyframes agent-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.78); }
}

/* ── Agent status bar — dark navy terminal band at top of Today page ─────
   Context strip: agent name, status, last run, next run, autonomy level. */
.dash-status-bar {
  background-color: var(--color-neutral);
  color: #ffffff;
  font-family: var(--font-data);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 1.5rem;
  height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.dash-status-bar-sep {
  width: 1px;
  height: 14px;
  background-color: rgba(255, 255, 255, 0.12);
  margin: 0 1rem;
  flex-shrink: 0;
}

.dash-status-bar-label {
  color: rgba(255, 255, 255, 0.40);
  margin-right: 0.35rem;
  font-size: 0.6875rem;
}

/* ── KPI stat card ───────────────────────────────────────────────────────
   White card, blueprint border. Generous padding. Big number on top.    */
.dash-kpi-card {
  background-color: var(--color-page-box);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  padding: 1.25rem 1.5rem 1.125rem;
}

.dash-kpi-number {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-saffron);
  letter-spacing: -0.02em;
}

.dash-kpi-number-secondary {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-heading);
  letter-spacing: -0.02em;
}

.dash-kpi-label {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.dash-kpi-delta-up   { color: var(--color-teal);      font-size: 0.75rem; font-family: var(--font-data); font-weight: 500; }
.dash-kpi-delta-down { color: var(--color-red);        font-size: 0.75rem; font-family: var(--font-data); font-weight: 500; }
.dash-kpi-delta-flat { color: var(--color-text-muted); font-size: 0.75rem; font-family: var(--font-data); font-weight: 500; }

/* ── Card section heading — replaces overline inside dashboard cards ─────
   Simple, quiet. Poppins semibold 13px. No borders, no tracking.         */
.dash-card-heading {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.2;
}

/* ── Page heading + context line ─────────────────────────────────────────
   Used on Performance, Intelligence, Journeys, Activity pages.          */
.dash-page-context {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.375rem;
}

/* ── Pipeline step visualizer ────────────────────────────────────────────
   Horizontal 4-step agent cycle: Monitor → Analyse → Act → Measure      */
.pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

.pipeline-step-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 700;
  font-family: var(--font-data);
}

.pipeline-step-done   .pipeline-step-dot { border-color: var(--color-teal);        background-color: var(--color-teal);   color: #fff; }
.pipeline-step-active .pipeline-step-dot { border-color: var(--color-saffron);      background-color: var(--color-saffron); color: var(--color-neutral); animation: agent-pulse 2.4s ease-in-out infinite; }
.pipeline-step-review .pipeline-step-dot { border-color: var(--color-orange);       background-color: var(--color-orange);  color: #fff; }
.pipeline-step-wait   .pipeline-step-dot { border-color: var(--color-blueprint);    background-color: transparent;          color: var(--color-text-muted); }

.pipeline-step-label {
  font-family: var(--font-data);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.pipeline-step-done   .pipeline-step-label { color: var(--color-teal); }
.pipeline-step-active .pipeline-step-label { color: var(--color-saffron); }
.pipeline-step-review .pipeline-step-label { color: var(--color-orange); }
.pipeline-step-wait   .pipeline-step-label { color: var(--color-text-muted); }

.pipeline-step-sub {
  font-family: var(--font-data);
  font-size: 0.625rem;
  color: var(--color-text-muted);
  text-align: center;
}

.pipeline-arrow {
  color: var(--color-blueprint);
  font-size: 0.75rem;
  align-self: flex-start;
  margin-top: 0.75rem;
  flex-shrink: 0;
}

/* ── Split view — For Review ─────────────────────────────────────────────
   Left list (280px) + right detail panel. Spans full main height.       */
.split-left {
  width: 280px;
  min-width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-blueprint);
  background-color: var(--color-base-100);
  overflow-y: auto;
}

.split-right {
  flex: 1;
  overflow-y: auto;
  background-color: var(--color-page-box);
}

.split-item {
  padding: 1rem 1rem;
  border-bottom: 1px solid var(--color-blueprint);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 150ms ease;
}

.split-item:hover {
  background-color: rgba(4, 108, 154, 0.05);
}

.split-item-active {
  border-left-color: var(--color-saffron);
  background-color: rgba(245, 162, 0, 0.08);
}

/* ── Feedback capture bar ────────────────────────────────────────────────
   Always visible at bottom of agent output. Every response = training.  */
.feedback-bar {
  border-top: 1px solid var(--color-blueprint);
  background-color: rgba(4, 108, 154, 0.025);
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feedback-label {
  font-family: var(--font-data);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}

/* ── Journey coverage indicator ─────────────────────────────────────────
   Small filled/empty track per journey stage.                            */
.journey-stage-track {
  display: flex;
  gap: 3px;
  align-items: center;
}

.journey-stage-pip {
  width: 18px;
  height: 4px;
  border-radius: 1px;
}

.journey-stage-pip-full    { background-color: var(--color-teal); }
.journey-stage-pip-partial { background-color: var(--color-saffron); }
.journey-stage-pip-empty   { background-color: var(--color-blueprint); }

/* ── Chart bar ───────────────────────────────────────────────────────────
   Flat, blocky, no rounded corners — per design system.                 */
.chart-bar {
  background-color: var(--color-ocean);
  border-radius: 0;
  transition: none;
  min-height: 2px;
}

.chart-bar-saffron { background-color: var(--color-saffron); }
.chart-bar-teal    { background-color: var(--color-teal); }
.chart-bar-muted   { background-color: var(--color-blueprint); }

/* ── Tab bar — text tabs (Soul / Artifact edit·preview; overrides DaisyUI
   tab). Active tab: saffron bottom border + dark navy text. Scoped to the
   `.dc-tab` text-tab pattern via :not(.dc-pcard) so it doesn't bleed onto the
   product-selector cards, which carry their own ocean active state. ──────── */
[data-controller="tabs"] button.tab-active:not(.dc-pcard) {
  border-bottom-color: var(--color-saffron) !important;
  color: var(--color-neutral) !important;
}

/* ── Mobile bottom nav ───────────────────────────────────────────────────
   Opaque white panel, blueprint top border.                             */
.mobile-bottom-nav {
  background-color: var(--color-page-box);
}

/* ── Top bar — page title + agent status + actions ──────────────────────
   White card, blueprint border. Spans main content width.              */
.dash-top-bar {
  background-color: var(--color-page-box);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
}

/* ── Sidebar search box ──────────────────────────────────────────────── */
.dash-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  cursor: default;
}

/* ── Agent status chip (in top bar) ─────────────────────────────────── */
.agent-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  background-color: var(--color-base-100);
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  font-family: var(--font-data);
  font-size: 0.75rem;
  color: var(--color-text-muted);
}


/* ── Homepage hero — split layout: full-width H1 + 2-col row ────────────
   Row 1: hero-headline (Raleway 800, italic crimson accent on the
   "AI Channel" span). Row 2: subheading + URL form on the left,
   live-agent CLI terminal on the right. The terminal animates via
   hero_agent_terminal_controller.                                       */

.hero-headline {
  font-family: var(--font-heading);
  font-weight: 700;
  /* Floor raised from 2.1rem so the title leads the body copy on mobile the
     way it does on desktop (the 4vw term only clears the floor above ~1080px,
     so the floor IS the mobile size). Desktop sizing is unchanged. */
  font-size: clamp(2.7rem, 4vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.02em;   /* -0.04em made Raleway 700 letters touch */
  color: var(--color-text);
}

.hero-channel-accent {
  font-style: italic;
  color: var(--color-crimson);
  font-weight: 800;
}


/* ── Live agent terminal — streaming demo ─────────────────────────────────
   Fixed-height shell so streaming lines never grow the box. Header with
   agent name + LIVE pulse, scroll region with top fade mask, log lines
   typed character-by-character. The APPROVE entry surfaces inline Reject /
   Approve buttons via .has-actions. Three accent hues only — navy ink,
   muted ocean, saffron for the moment that needs the eye, teal for LIVE.
   Reduced-motion path drops keyframes and renders the log statically with
   actions already revealed.                                                */

.hero-live-agent {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 440px;
  background-color: var(--color-page-box);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 13px;
}

@media (max-width: 767px) { .hero-live-agent { height: 480px; } }

.hero-live-agent__header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background-color: #fff;
}

.hero-live-agent__title {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 500;
}

.hero-live-agent__live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-teal);
}

.hero-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-teal);
  animation: hero-pulse 1.4s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.hero-live-agent__log {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 4px 16px;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 32px, #000 100%);
}

.hero-live-agent__line {
  display: grid;
  grid-template-columns: 12px 76px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.hero-live-agent__line:last-child { border-bottom: 0; }

.hero-live-agent__line-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-1px);
  background-color: var(--color-text-muted);
}

.hero-live-agent__line-kind {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.hero-live-agent__line-text {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  word-break: break-word;
}

/* APPROVE — the one moment of attention: saffron dot + saffron-dark label */
.hero-live-agent__line.is-approve .hero-live-agent__line-dot  { background-color: var(--color-saffron); }
.hero-live-agent__line.is-approve .hero-live-agent__line-kind { color: var(--color-saffron-dark); }

/* Rows that carry inline action buttons (currently only APPROVE) — text on
   the left, buttons pinned right; flex-wrap drops buttons below on narrow
   widths so neither side gets clipped. Actions fade in once typing finishes. */
.hero-live-agent__line.has-actions .hero-live-agent__line-text {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.hero-live-agent__line-actions {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0;
  transition: opacity 200ms ease;
}

.hero-live-agent__line-actions.is-revealed { opacity: 1; }

.hero-live-agent__action {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-page-box);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: default;
}

.hero-live-agent__action--primary {
  background-color: var(--color-text);
  color: var(--color-page-box);
  border-color: var(--color-text);
  font-weight: 700;
}

.hero-live-agent__cursor {
  display: inline-block;
  width: 6px;
  height: 13px;
  margin-left: 2px;
  background-color: var(--color-text);
  vertical-align: -2px;
  animation: hero-cursor-blink 0.9s steps(2) infinite;
}

@keyframes hero-cursor-blink { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-pulse-dot,
  .hero-live-agent__cursor { animation: none; }
  .hero-live-agent__line-actions { opacity: 1; }
}


/* ─── Global a11y motion preference ─────────────────────────────────────
   Mandatory per WCAG 2.3.3. Disables animation/transition for users who
   request reduced motion. Site-wide hook; component-level overrides above
   can still opt out specific animations they want kept (e.g., agent loop). */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Brand selection colour ────────────────────────────────────────────
   Saffron with dark text on highlight — replaces the default browser blue
   which clashes with the Wes Anderson palette. */

::selection {
  background-color: var(--color-saffron);
  color: var(--color-neutral);
}

/* ─── Onboarding journey modals — shared <dialog> styling hook ──────────
   Used by #quadrant-modal, #inquiry-modal, and the journey-modal dialog.
   Native <dialog>.showModal() centers automatically. We add a 150ms fade
   + 4px translate so the modal feels deliberate, not abrupt.            */

.journey-modal-dialog[open] {
  margin: auto;
  animation: journey-modal-in 150ms ease;
}

.journey-modal-dialog::backdrop {
  background-color: rgba(10, 37, 64, 0.45);
  animation: journey-modal-backdrop-in 150ms ease;
}

.journey-modal-close {
  color: var(--color-text-muted);
  transition: color 150ms ease;
}

.journey-modal-close:hover,
.journey-modal-close:focus-visible {
  color: var(--color-accent);
  outline: none;
}

@keyframes journey-modal-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes journey-modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── Choice and plan blocks (pricing) ───────────────────────────────────
   One bordered block per option, same parts in the same order, so only the
   differences stand out (.impeccable.md principle 5). The featured block
   (Growth) is marked by its top rule alone, never a badge. */

.choice-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  background-color: var(--color-page-box);
}
.choice-block--featured { border-top: 3px solid var(--color-saffron); }

.choice-label {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.price-unit { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; color: var(--color-text); }

.choice-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--color-text); }
.choice-list li { display: flex; gap: 0.625rem; }
.choice-list li::before { content: "✓"; font-weight: 700; font-size: 0.75rem; padding-top: 0.2rem; color: var(--color-ocean); flex-shrink: 0; }


/* ── Comparison table ────────────────────────────────────────────────────
   Plan names stay in view while you scroll (desktop: sticky header under
   the site header). On phones the feature column stays put and the plan
   columns scroll beside it. Numbers line up (tabular figures, global). */

.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; }
.compare-table th, .compare-table td { padding: 0.75rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-blueprint); }
.compare-table thead th { background-color: var(--color-page-box); }
.compare-table .compare-section th {
  padding-top: 2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-heading);
  background-color: var(--color-page-box);
}
.compare-table .compare-feature { color: var(--color-text); background-color: var(--color-page-box); min-width: 11rem; }
.compare-table .compare-sub { display: block; font-size: 0.8125rem; margin-top: 0.125rem; color: var(--color-text); opacity: 0.8; }

@media (min-width: 768px) {
  .compare-table thead th { position: sticky; top: 4.5rem; z-index: 2; }
}
@media (max-width: 767px) {
  .compare-table { font-size: 0.875rem; }
  .compare-table .compare-sub { font-size: 0.875rem; }
  .compare-table th, .compare-table td { padding: 0.625rem 0.75rem; }
  .compare-table .compare-feature, .compare-table thead th:first-child { width: 9.5rem; min-width: 9.5rem; max-width: 9.5rem; }
  .compare-table .compare-feature, .compare-table thead th:first-child {
    position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--color-blueprint);
  }
}


/* ── Primary button on dark sections ─────────────────────────────────────
   Teal fails on ocean (1.1:1) and navy (2.95:1), so on dark sections the
   primary inverts: white face, deep-teal text (5.26:1), edge 5.8:1 on ocean.
   Same "go" colour, readable everywhere (.impeccable.md). */
.btn.btn-primary.btn-on-dark {
  background-color: var(--color-page-box);
  border-color: var(--color-page-box);
  color: var(--color-primary);
}
.btn.btn-primary.btn-on-dark:hover {
  background-color: var(--color-base-100);
  border-color: var(--color-base-100);
  color: var(--color-primary);
}


/* ── Header menus (Features, Resources) ──────────────────────────────────
   A <details> per menu (.nav-menu). Items: a name and one verb-first line,
   with a tinted hover and a visible focus ring. The trigger darkens and its
   caret turns when open. Columns stack independently, so a short group
   never leaves a hole beside a long one (.impeccable.md). */
.nav-menu > summary { color: var(--color-text-muted); }
.nav-menu[open] > summary { color: var(--color-heading); }
.nav-menu > summary .nav-caret { display: inline-block; transition: transform 150ms ease; }
.nav-menu[open] > summary .nav-caret { transform: rotate(180deg); }
.nav-menu > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 2px; }

.nav-panel {
  margin-top: 0.75rem;
  padding: 1.25rem;
  border: 1px solid var(--color-blueprint);
  border-radius: 4px;
  background-color: var(--color-page-box);
}
.nav-group-label {
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 0.625rem;
  margin-bottom: 0.25rem;
}
.nav-item {
  display: block;
  padding: 0.5rem 0.625rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.nav-item:hover { background-color: var(--color-base-100); }
.nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; }
.nav-item-name { display: block; font-size: 0.875rem; font-weight: 600; color: var(--color-heading); }
.nav-item-line { display: block; font-size: 0.8125rem; color: var(--color-text); margin-top: 0.125rem; }


/* ── Footer ──────────────────────────────────────────────────────────────
   Even columns, short lists, one link style with a real hover. */
.footer-heading {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-bottom: 1rem;
}
.footer-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; color: var(--color-on-dark-muted); }
.footer-link { color: var(--color-on-dark-muted); text-decoration: none; transition: color 150ms ease; }
.footer-link:hover { color: var(--color-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-link:focus-visible { outline: 2px solid var(--color-on-dark); outline-offset: 2px; border-radius: 2px; }


/* ── Homepage (.impeccable.md "Homepage") ───────────────────────────────
   Short left-aligned hero (the video shows above the fold); features as a 2 × 2
   of plain lists (no cards); the cost row as four parallel figures. */
/* Inner marketing page H1 (features, feature, compare, vs pages). */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  color: var(--color-heading);
  text-wrap: balance;
  max-width: 28ch;
}
.home-headline {
  font-size: clamp(2.2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  color: var(--color-heading);
  text-wrap: balance;
}
/* Second line of the hero H1: "Works for FREE inside <assistant>". */
.home-headline__sub {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.55em;
  line-height: 1.3;
  font-weight: 600;
}
/* One assistant at a time (assistant_rotator_controller): every item sits in
   the same grid cell, so the line holds the widest name's width. */
.assistant-rotator {
  display: inline-grid;
  vertical-align: bottom;
}
.assistant-rotator__item {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms ease;
}
.assistant-rotator__item.is-active { opacity: 1; }
.assistant-rotator__icon {
  width: 1em;
  height: 1em;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .assistant-rotator__item { transition: none; }
}
.home-group-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  text-wrap: balance;
}

.feature-rows { border-top: 1px solid var(--color-border); margin-inline: -0.5rem; }  /* hairlines and hover tint reach past the text by the row padding */
.feature-row {
  display: block;
  padding: 0.875rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color 150ms ease;
}
a.feature-row:hover { background-color: var(--color-tint-ocean); }
a.feature-row:active { background-color: var(--color-tint-teal); }
a.feature-row:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: -2px; }
.feature-rows > li:last-child .feature-row,
.feature-rows > li.feature-row:last-child { border-bottom: 0; }
.feature-row__name {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-heading);
}
.feature-row__top { display: flex; align-items: baseline; gap: 0.5rem; }
.feature-row__arrow { color: var(--color-heading); transition: transform 150ms ease; }
a.feature-row:hover .feature-row__arrow { transform: translateX(3px); }
.feature-row__line { margin-top: 0.125rem; font-size: 1rem; color: var(--color-text); text-wrap: pretty; }
.feature-row__chip {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 2px;
  background-color: var(--color-tint-teal);
  color: var(--color-text);
}
.feature-row__chip--soon { background-color: var(--color-tint-orange); }
.feature-row--soon .feature-row__name { color: var(--color-text); }

/* Feature page: breadcrumb, three columns on a hairline, a 2 × 2 of records. */
.feature-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text); }
.feature-crumbs a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.feature-cols { display: grid; gap: 1.5rem 2.5rem; border-top: 1px solid var(--color-border-strong); padding-top: 1.25rem; }
@media (min-width: 768px) { .feature-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-records { display: grid; border-top: 1px solid var(--color-border-strong); }
.feature-records > div { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
@media (min-width: 768px) {
  .feature-records { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
}
/* Two columns of feature rows (compare: all comparisons). Each row keeps its own hairline. */
@media (min-width: 768px) {
  .feature-rows--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .feature-rows--two > li .feature-row { border-bottom: 1px solid var(--color-border); }
}
/* Compare tools table: wider than the page on phones (scrolls in its region), Slingso row tinted. */
.compare-table--tools { min-width: 52rem; }
/* Sticky header only where the table fits the page (lg+, wrapper overflow visible);
   inside a scrolling wrapper, sticky would pin it over the first row. */
@media (min-width: 768px) and (max-width: 1023px) { .compare-table--tools thead th { position: static; } }
.compare-table--tools thead th { font-weight: 600; color: var(--color-text); }
.compare-table--tools tr.is-us > * { background-color: var(--color-saffron-wash); }  /* opaque: the sticky cell sits over scrolled cells */
/* Slingso vs <tool>: three-column table, plain lists, compact links to the other pages. */
/* Phones: each row stacks (label across, the two answers side by side, each
   named by its data-label), so the competitor's column is never off-screen. */
@media (max-width: 767px) {
  .compare-table--vs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table--vs tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--color-blueprint); padding: 0.75rem 0; }
  .compare-table--vs th, .compare-table--vs td { border: 0; padding: 0.25rem 0.5rem 0.25rem 0; position: static; width: auto !important; max-width: none !important; min-width: 0 !important; }
  .compare-table--vs .compare-feature { grid-column: 1 / -1; border-right: 0; background: none; padding-bottom: 0.375rem; }
  .compare-table--vs td::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.125rem; }
}
.compare-table--vs thead th { font-family: var(--font-heading); font-weight: 700; color: var(--color-heading); }
.compare-table--vs .compare-feature { font-weight: 600; color: var(--color-heading); width: 30%; }
.compare-table--vs td { width: 35%; color: var(--color-text); }
.vs-list { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 1.1rem; list-style: disc; font-size: 1rem; color: var(--color-text); }
.vs-list li::marker { color: var(--color-text-muted); }
.vs-more { display: inline-block; padding-block: 0.75rem; font-size: 0.9375rem; color: var(--color-link); text-decoration: none; }
.vs-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.vs-more:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; border-radius: 2px; }
/* Long-form reading pages (/ai-shopping-channel): one left-aligned column. */
.essay { max-width: 42rem; color: var(--color-text); }
.essay-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-heading);
  text-wrap: balance;
  margin: 3.5rem 0 1rem;
}
.essay-block { display: flex; flex-direction: column; gap: 1.25rem; font-size: 1.0625rem; line-height: 1.7; }
.essay-definition { padding: 1.25rem 1.5rem; background-color: var(--color-tint-ocean); border: 1px solid var(--color-border); border-radius: 4px; }
/* Glossary: A–Z jump row, plain letter headings, hairline term rows. */
.glossary-az { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; }
.glossary-az a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  font-family: var(--font-heading); font-weight: 700; color: var(--color-link);
  border: 1px solid var(--color-border); border-radius: 2px; text-decoration: none;
  transition: background-color 150ms ease;
}
.glossary-az a:hover { background-color: var(--color-tint-ocean); }
.glossary-az a:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; }
.glossary-letter {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--color-heading);
  margin-top: 3rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-strong);
  scroll-margin-top: 5.5rem;
}
.glossary-term { padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); scroll-margin-top: 5.5rem; }
.glossary-term dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.glossary-cat { font-size: 0.8125rem; color: var(--color-text-muted); }
.glossary-term dd { margin-top: 0.375rem; display: flex; flex-direction: column; gap: 0.75rem; font-size: 1rem; line-height: 1.65; color: var(--color-text); }
.glossary-term dd .more-link { padding-block: 0.25rem; align-self: flex-start; }
.glossary-example { padding: 0.875rem 1rem; background-color: var(--color-tint-saffron); border-radius: 2px; }
/* /setup-prompt: the full prompt, readable and selectable, scrolling in its own box. */
.setup-prompt-box {
  max-width: 48rem; max-height: 28rem; overflow-y: auto;
  padding: 1.25rem 1.5rem; border: 1px solid var(--color-border-strong); border-radius: 4px;
  background-color: var(--color-tint-ocean);
}
.setup-prompt-box:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; }
.setup-prompt-box pre { white-space: pre-wrap; font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.65; color: var(--color-text); }
/* Home cost row: four tinted cards, each with its own geometric mark in the
   Darjeeling loop colours (saffron circle, teal diamond, orange square, ocean
   rings). Marks are decoration; the text carries the meaning. */
.cost-row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .cost-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cost-row { grid-template-columns: 1fr; } }
.cost-card { padding: 1.5rem 1.25rem 1.5rem; border: 1px solid var(--color-border); border-radius: 2px; }
.cost-card--saffron { background-color: var(--color-tint-saffron); --mark: var(--color-saffron); }
.cost-card--teal    { background-color: var(--color-tint-teal);    --mark: var(--color-teal); }
.cost-card--orange  { background-color: var(--color-tint-orange);  --mark: var(--color-orange); }
.cost-card--ocean   { background-color: var(--color-tint-ocean);   --mark: var(--color-ocean); }
.cost-mark { display: block; width: 2.25rem; height: 2.25rem; margin-bottom: 1.25rem; border: 2px solid var(--mark); }
.cost-mark--circle  { border-radius: 50%; }
.cost-mark--diamond { width: 1.6rem; height: 1.6rem; margin: 0.3rem 0.3rem 1.55rem; transform: rotate(45deg); }
.cost-mark--square  { border-radius: 0; }
.cost-mark--rings   { border-radius: 50%; outline: 1.5px solid var(--mark); outline-offset: -7px; }
.cost-row__fig {
  margin-top: 0.5rem;
  font-family: var(--font-data);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-heading);
}
.cost-row__unit { font-size: 1rem; font-weight: 500; color: var(--color-text); }
.cost-row__line { margin-top: 0.375rem; font-size: 0.875rem; color: var(--color-text); }
/* "All features →", "See pricing →": small caps text, full-height target. */
.more-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding-block: 0.875rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-link);
  text-decoration: none;
}
.more-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.more-link:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .feature-row, .feature-row__arrow { transition: none; }
}

/* ── Scheduler (shared/_schedule_fields) ─────────────────────────────────────
   Settings → Schedule and the onboarding step. One box: the schedule as a
   sentence, then a row per setting (label left, control right; stacked on
   phones). Native checkboxes and radios in the brand colour; the frequency
   is a segmented control built on real radios. */
.sched { max-width: 42rem; font-family: var(--font-body); }
.sched-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sched-box {
  background: var(--color-page-box);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.sched-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.sched-summary { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.45; color: var(--color-heading); text-wrap: balance; }
.sched-note { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--color-text); }
.sched-row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1.25rem;
}
.sched-row--top { align-items: start; }
.sched-row + .sched-row { border-top: 1px solid color-mix(in srgb, var(--color-ocean) 10%, transparent); }
.sched-row[hidden] { display: none; }
.sched-label { font-size: 0.8125rem; font-weight: 500; color: var(--color-text-muted); }
.sched input[type=checkbox],
.sched input[type=radio] { width: 1rem; height: 1rem; margin: 0; flex-shrink: 0; accent-color: var(--color-ocean); }
.sched-input {
  height: 2.25rem;
  padding: 0 0.625rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-page-box);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}
.sched-input:focus-visible { outline: 2px solid var(--color-ocean); outline-offset: 1px; }
.sched-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sched-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.sched-check { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text); cursor: pointer; }
.sched-options { display: grid; gap: 0.75rem; }
.sched-option { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text); cursor: pointer; }
.sched-option input { margin-top: 0.2rem; }
.sched-option-meta { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--color-text-muted); }
.sched-option-meta a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.sched-option:has(input:disabled) { cursor: default; }

/* Segmented control: each option is a real radio, visually hidden, with its
   label as the button; arrow keys move between options as with any radios. */
.sched-seg { display: inline-flex; justify-self: start; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.sched-seg-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sched-seg-btn {
  padding: 0.4375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.sched-seg-btn + .sched-seg-input + .sched-seg-btn { border-left: 1px solid var(--color-border); }
.sched-seg-btn:hover { background: color-mix(in srgb, var(--color-ocean) 6%, transparent); }
.sched-seg-input:checked + .sched-seg-btn { background: var(--color-ocean); color: var(--color-page-box); }
.sched-seg-input:focus-visible + .sched-seg-btn { outline: 2px solid var(--color-ocean); outline-offset: -3px; }
.sched-fieldset:disabled .sched-seg-btn,
.sched-fieldset:disabled .sched-check { cursor: default; opacity: 0.6; }
.sched-actions { margin-top: 1.25rem; }

@media (max-width: 640px) {
  .sched-row { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}
.sched-check .provider-icon { margin-left: 0.125rem; }
.sched-check.is-off { cursor: default; }
.sched-check.is-off .sched-check-name,
.sched-check.is-off .provider-icon { opacity: 0.55; }
.sched-check-note { font-size: 0.75rem; color: var(--color-text-muted); }

/* ── Help tip — "?" popover: one sentence + a docs link ──────────────────
   DaisyUI dropdown mechanics (click/tap/focus opens, blur closes); the
   card itself is ours. Flat depth: warm border, no shadow. The card
   resets label typography (labels are uppercase/tracked). Lives here, not
   in dashboard.css, so shared/_help_tip is the one tooltip on every page
   (dashboard, onboarding, marketing). */
.dc-help {
  vertical-align: 0.05em;
  margin-left: 0.25rem;
}
.dc-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 0.125rem;
  line-height: 1;
}
.dc-help-trigger:hover,
.dc-help-trigger:focus-visible {
  color: var(--color-ocean);
}
.dc-help-card {
  width: 16rem;
  padding: 0.75rem 0.875rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-ocean) 18%, transparent);
  border-radius: 4px;
  z-index: 40;
  text-transform: none;
  letter-spacing: normal;
}
.dc-help-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
}
.dc-help-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ocean);
  text-decoration: none;
}
.dc-help-link:hover {
  text-decoration: underline;
}