/* ── Agent Loop Animation ─────────────────────────────────────────────────
   Border traces clockwise around the full card perimeter during the active
   25% window (2s of 8s cycle). Implemented with conic-gradient + mask.
   @property enables smooth interpolation of the --sweep custom property.
   Arrow cells are always white — no animation.
   ────────────────────────────────────────────────────────────────────────── */

@property --sweep {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Sweep grows 0→100% during the active 25%, then resets */
@keyframes border-trace {
  0%     { --sweep: 0%; }
  24.9%  { --sweep: 100%; }
  25%    { --sweep: 0%; }
  100%   { --sweep: 0%; }
}

.loop-node {
  position: relative;
  background-color: var(--color-page-box);
}

/* Tracing border — conic gradient sweeps clockwise around the perimeter */
.loop-node::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  background: conic-gradient(from -90deg, var(--trace-color, transparent) var(--sweep), transparent 0%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
}

/* Per-phase colour — border trace + shape accent + subtle background tint.
   --trace-color: the sweeping border animation.
   --node-accent: the geometric shape border colour (decorative, not text — no contrast req).
   Background: 7% phase-colour tint so each node reads as a distinct stage.           */
.loop-node-monitor { --trace-color: var(--color-saffron); --node-accent: var(--color-saffron); background-color: rgba(242,173,0,0.07); }
.loop-node-analyse { --trace-color: var(--color-teal);    --node-accent: var(--color-teal);    background-color: rgba(0,160,138,0.07); }
.loop-node-create  { --trace-color: var(--color-orange);  --node-accent: var(--color-orange);  background-color: rgba(249,132,0,0.07); }
.loop-node-measure { --trace-color: var(--color-ocean);   --node-accent: var(--color-ocean);   background-color: rgba(4,108,154,0.07); }

/* Animation lives on ::before so it animates --sweep on the same element
   that uses it. @property inherits:false prevents the pseudo from seeing
   the value if the animation were on the parent.                         */
.loop-node-monitor::before { animation: border-trace 8s linear infinite  0s; }
.loop-node-analyse::before { animation: border-trace 8s linear infinite -6s; }
.loop-node-create::before  { animation: border-trace 8s linear infinite -4s; }
.loop-node-measure::before { animation: border-trace 8s linear infinite -2s; }

/* connector-pulse kept for potential future use but not applied to arrows */
@keyframes connector-pulse {
  0%, 24.9% { opacity: 1; }
  25%, 100%  { opacity: 0.2; }
}


/* ── Hero mesh — @property-driven animated radial gradient positions ─────
   Eight @property declarations (4 blobs × x/y) enable smooth interpolation.
   Colours: subtle white + light aqua/sky only — no warm colours that would
   pull focus from content. Ocean base shimmers gently underneath.        */

@property --h1x { syntax: '<percentage>'; inherits: false; initial-value: 12%; }
@property --h1y { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --h2x { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
@property --h2y { syntax: '<percentage>'; inherits: false; initial-value: 35%; }
@property --h3x { syntax: '<percentage>'; inherits: false; initial-value: 55%; }
@property --h3y { syntax: '<percentage>'; inherits: false; initial-value: 85%; }
@property --h4x { syntax: '<percentage>'; inherits: false; initial-value: 40%; }
@property --h4y { syntax: '<percentage>'; inherits: false; initial-value: 10%; }

@keyframes hero-mesh {
  0%   { --h1x: 12%; --h1y: 18%; --h2x: 85%; --h2y: 35%; --h3x: 55%; --h3y: 85%; --h4x: 40%; --h4y: 10%; }
  25%  { --h1x: 68%; --h1y: 30%; --h2x: 15%; --h2y: 68%; --h3x: 82%; --h3y: 15%; --h4x: 28%; --h4y: 72%; }
  50%  { --h1x: 35%; --h1y: 75%; --h2x: 72%; --h2y: 12%; --h3x: 18%; --h3y: 55%; --h4x: 80%; --h4y: 50%; }
  75%  { --h1x: 60%; --h1y: 8%;  --h2x: 25%; --h2y: 82%; --h3x: 75%; --h3y: 60%; --h4x: 10%; --h4y: 38%; }
  100% { --h1x: 12%; --h1y: 18%; --h2x: 85%; --h2y: 35%; --h3x: 55%; --h3y: 85%; --h4x: 40%; --h4y: 10%; }
}


/* ── Hero / Bottom CTA — solid ocean, no texture ─────────────────────────
   Flat colour only. Vibrancy comes from colour contrast, not pattern.
   Polka dots live on the page mat, not inside content sections.         */

.hero-texture {
  background-color: var(--color-hero);
}


/* ── Form on dark hero background ────────────────────────────────────────
   White inputs on ocean. btn-primary (saffron) on ocean = vivid.        */

.form-on-hero .input,
.form-on-hero .select {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-text);
}
.form-on-hero .input::placeholder { color: var(--color-text-muted); }
.form-on-hero .form-note          { color: rgba(255,255,255,0.70); }


/* ── Cloudflare Turnstile — sit transparently on the page background ────
   Cloudflare's `.cf-turnstile` mount div picks up a default white fill in
   light theme. We force it (and any iframe Cloudflare injects) to be
   transparent so the widget reads as part of the page, not a slab on top.   */

.cf-turnstile,
.cf-turnstile > iframe {
  background-color: transparent !important;
  width: max-content;
}


/* ── Text on amber hero background ──────────────────────────────────────
   Off-white for all supporting text. Large display lines get stroke in CSS. */

.text-hero-sub   { color: rgba(0,0,0,1); }
.text-hero-muted { color: rgba(255,255,255,0.70); }


/* ── Form on saffron hero background ────────────────────────────────────
   White inputs on saffron. btn-secondary (ocean) on saffron = vivid.   */

.form-on-saffron .input,
.form-on-saffron .select {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(10,37,64,0.15);
  color: var(--color-text);
}
.form-on-saffron .input::placeholder { color: var(--color-text-muted); }
.form-on-saffron .form-note          { color: rgba(10,37,64,0.60); }


/* ── 3×3 loop grid ───────────────────────────────────────────────────────
   Clockwise corners: Monitor(1) → Analyse(3) → Fix(9) → Measure(7)
   Edge arrows: →(2) ↓(6) ←(8) ↑(4) pulse in sync with loop animation.
   Gap approach: 1px ocean-border gaps between all 9 cells.
   Arrow and center cells use var(--color-page-box) to blend into the stage. */

.loop-grid-3x3 {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
}

/* Content nodes get their own border */
.loop-grid-3x3 .loop-node {
  border: 1px solid var(--color-border);
}

/* Arrow cells — no border, blend into the page-box stage */
.loop-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-page-box);
  border: none;
  font-size: 1.4rem;
  color: var(--color-text-muted);
  min-height: 64px;
}

/* Center cell — borderless; the four corner cards create the visual frame */
.loop-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--color-page-box);
  padding: 1.25rem 0.75rem;
  gap: 0.25rem;
}
.loop-center-num {
  font-family: var(--font-data);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-ocean);
}
.loop-center-label {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Mobile: narrow arrow col, hide description, keep shape + title only */
@media (max-width: 767px) {
  .loop-grid-3x3 {
    grid-template-columns: 1fr 36px 1fr;
  }
  .loop-grid-3x3 .loop-node p {
    display: none;
  }
  .loop-grid-3x3 .loop-node {
    padding: 1.5rem;
  }
}


/* ── Loop card typography ─────────────────────────────────────────────── */

.loop-node-head  { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; }
.loop-back-label { font-family: var(--font-data); font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); }


/* ── Loop node geometric badge shapes ────────────────────────────────────
   Each step gets a geometric frame (Wes Anderson: frame-within-frame).
   Border uses --node-accent (phase colour) set on the parent node class.
   Number text stays dark (--color-heading via inheritance) for contrast.

   Circle  = Monitor  (clock face / compass)
   Diamond = Analyse  (rotated square — vintage junction sign)
   Square  = Fix      (ledger box — typewriter key)
   Double  = Measure  (double-ring seal — telegraph stamp)            */

.loop-shape {
  width: 54px;
  height: 54px;
  border: 2px solid var(--node-accent, var(--color-heading));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  flex-shrink: 0;
  position: relative;
}

.loop-shape-circle { border-radius: 50%; }

.loop-shape-diamond {
  transform: rotate(45deg);
  width: 46px;
  height: 46px;
}
.loop-shape-diamond .loop-shape-num { transform: rotate(-45deg); }

/* .loop-shape-square — plain square, no modifier needed */

.loop-shape-double {
  border-radius: 50%;
}
.loop-shape-double::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--node-accent, var(--color-heading));
  pointer-events: none;
}

.loop-shape-num {
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* ── Nav star — slow-spinning 4-pointed star, measured Anderson rotation ─
   Decorative separator. 16s linear = stately, not bouncy.             */

.nav-star {
  display: inline-block;
  font-size: 0.55rem;
  color: var(--color-saffron);
  animation: wes-spin 16s linear infinite;
  line-height: 1;
}

@keyframes wes-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .loop-node-monitor::before,
  .loop-node-analyse::before,
  .loop-node-create::before,
  .loop-node-measure::before { animation: none; --sweep: 100%; }

  .dawn-sun, .nav-star { animation: none; }

  .dawn-sun { opacity: 0.7; transform: none; }

  .section-saffron { animation: none; }
}


/* ── Persona tabs — The Visitor Book ─────────────────────────────────────
   Pure CSS tab switching via hidden radio inputs + general sibling (~) CSS.
   Inputs live as siblings before the tab strip and panels in .persona-tabs-root.
   Active tab: primary (indigo) filled. Inactive: muted text, transparent bg.
   File-folder aesthetic per CLAUDE.md component conventions.
   ─────────────────────────────────────────────────────────────────────── */

.persona-tab-radio { display: none; }

.persona-tab-strip {
  display: flex;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}
.persona-tab-strip::-webkit-scrollbar { display: none; }

.persona-tab-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.875rem 1.75rem;
  cursor: pointer;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  white-space: nowrap;
  user-select: none;
  transition: color 150ms ease;
}
.persona-tab-label:hover { color: var(--color-heading); }

/* All panels hidden by default */
.persona-panel { display: none; }

/* Active label: 2px top border + bold/dark text. No fill.
   Subtle but unambiguous — the overline marks the selected tab. */
#ptab-founder:checked ~ .persona-tab-strip .label-founder,
#ptab-mktg:checked    ~ .persona-tab-strip .label-mktg,
#ptab-brand:checked   ~ .persona-tab-strip .label-brand {
  color: var(--color-heading);
  font-weight: 800;
  border-top: 2px solid var(--color-heading);
  border-left-color: transparent;
  border-right-color: transparent;
  background-color: transparent;
}

/* Show the matching panel */
#ptab-founder:checked ~ #ppanel-founder,
#ptab-mktg:checked    ~ #ppanel-mktg,
#ptab-brand:checked   ~ #ppanel-brand { display: block; }

/* ROI strip — warm parchment bar below each panel grid */
.persona-roi-strip {
  padding: 1.5rem 2rem;
  text-align: center;
}

@media (max-width: 767px) {
  .persona-tab-label { padding: 0.75rem 1.1rem; font-size: 0.6rem; }
}


/* ── Persona cards — Without / With Slingso diptych ──────────────────────
   Reuses .loop-shape geometry (shapes + --node-accent system).
   Each card is a self-contained before/after unit.
   Card accent colour set via --node-accent on the card element.           */

/* Phase-tinted backgrounds — mirrors loop node tinting at 7% opacity */
.persona-card-teal    { --node-accent: var(--color-teal);    background-color: rgba(0,160,138,0.07); }
.persona-card-orange  { --node-accent: var(--color-orange);  background-color: rgba(249,132,0,0.07); }
.persona-card-ocean   { --node-accent: var(--color-ocean);   background-color: rgba(4,108,154,0.07); }

.persona-card {
  padding: 2.25rem 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  /* background set by .persona-card-* variant */
}

/* ── Desktop: subgrid row alignment ─────────────────────────────────────────
   Each persona panel has 3 cards in a row. The divider (border-t on
   .persona-with) must land at the same Y position regardless of question
   length. Solution: parent grid defines 3 explicit rows (shape / need /
   slingso); each card spans all 3 rows and subgrids into them.
   Row 2 (1fr) makes every card's "need" section the same height.      */
@media (min-width: 768px) {
  .persona-panel > .grid {
    grid-template-rows: auto 1fr auto;
    column-gap: 1.25rem;
  }
  .persona-card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}

.persona-card-title {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--node-accent, var(--color-heading));
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

.persona-section-label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.persona-without { padding: 1rem 0 1.25rem; }
.persona-with    { padding: 1rem 0 0; }

.persona-without .persona-section-label { color: var(--color-text-muted); }
.persona-with    .persona-section-label { color: var(--node-accent, var(--color-teal)); }

/* Question text — the need stated as a direct, resonant question */
.persona-card-question {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--color-heading);
}

.persona-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .persona-card { padding: 1.75rem 1.5rem; }
}


/* ── Video reels — 9:16 portrait, no chrome ──────────────────────────────
   Used in the homepage reel grid (4-col desktop, 2×2 mobile).
   Dark navy background shows while the video loads from R2.
   object-fit: cover fills the frame without distortion.                  */

.video-reel {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;         /* letterbox — don't crop the content */
  object-position: center center;
  border: 1px solid var(--color-border);
  border-radius: 10px;
}