/* ============================================================
   Deejing — Reusable Page Template
   ------------------------------------------------------------
   A clean component layer that sits on top of the design tokens
   defined in index.html (:root). Drop this file into any page,
   reuse the components below, and the look stays consistent.

   Sections:
     1. Layout primitives  (.tmpl-section, .container, .lede)
     2. Section headings   (.s-head, .s-eyebrow, .s-title)
     3. Process flow       (.flow)
     4. Feature rows       (.feature-row)
     5. Stat band          (.stats, .stat)
     6. Chat simulation    (.chat-sim)  — WhatsApp-style demo
     7. Chart widget       (.chart-card) — animated SVG chart
     8. Marquee            (.marquee)   — scrolling tag strip
   ============================================================ */

:root {
  --tmpl-maxw: 1180px;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --wa-bg: #e6ddd3;
  --wa-in: #ffffff;
  --wa-out: #d6f5c8;
  --wa-head: #128c7e;
}

/* ── 1. Layout primitives ───────────────────────────────── */
.tmpl-section {
  position: relative;
  padding: clamp(38px, 4.8vw, 72px) 0;
}

.tmpl-section.tight { padding-block: clamp(30px, 3.6vw, 54px); }

/* Exception: full-width content (e.g. the chat simulator overlay) */
.container.wide { max-width: none; }

/* The <section> spans 100% width (full-bleed band / background).
   The content inside is constrained and centered — NOT full width. */
.container {
  width: 100%;
  max-width: var(--tmpl-maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lede {
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.62;
  max-width: 44ch;
}

/* Soft alternating background to separate sections without boxes */
.tmpl-section.alt {
  background: linear-gradient(180deg, rgba(232, 240, 248, .42), rgba(244, 248, 252, .7) 50%, rgba(232, 240, 248, .35));
}

/* ── 2. Section heading ─────────────────────────────────── */
.s-head { max-width: 60ch; margin-bottom: clamp(20px, 2.6vw, 36px); }
.s-head.center { margin-inline: auto; text-align: center; }

.s-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--accent);
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.s-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.center .s-eyebrow { justify-content: center; }
.center .s-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
}

.s-title {
  font-family: "Sora", "Segoe UI", sans-serif;
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.045em;
  color: var(--ink);
  text-wrap: balance;
}
/* Gradient accent on a highlighted word: <em> inside the title */
.s-title em {
  font-style: normal;
  color: var(--accent-deep);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.s-sub { margin: 14px 0 0; }

/* ── 3. Process flow (replaces a row of cards) ──────────── */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 40px);
  position: relative;
}
/* The connecting line that "draws" in on reveal */
.flow::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out-expo) .2s;
  opacity: .4;
}
.flow.visible::before { transform: scaleX(1); }

.flow-step { position: relative; }
.flow-num {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 22px;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  box-shadow: 0 12px 26px rgba(213, 58, 67, .28);
  position: relative;
  z-index: 1;
}
.flow-step h3 {
  font-family: "Sora", sans-serif;
  font-size: 1.18rem;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  color: var(--ink);
}
.flow-step p { margin: 0; color: var(--ink-soft); line-height: 1.7; font-size: .95rem; }

@media (max-width: 820px) {
  .flow { grid-template-columns: 1fr; gap: 26px; }
  .flow::before { display: none; }
}

/* ── 4. Feature row (alternating, image/visual + text) ──── */
.feature-row {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.feature-row.top { align-items: start; }
.feature-row + .feature-row { margin-top: clamp(48px, 7vw, 104px); }
.feature-row.flip .feature-visual { order: 2; }
.feature-row h3 {
  font-family: "Sora", sans-serif;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: -.04em;
  margin: 14px 0 0;
  color: var(--ink);
}
.feature-row p { margin: 16px 0 0; color: var(--ink-soft); line-height: 1.75; }
.feature-tag {
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.feature-list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}
.feature-list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 30%, transparent 32%),
    linear-gradient(140deg, var(--accent), var(--accent-deep));
}
@media (max-width: 860px) {
  .feature-row, .feature-row.flip .feature-visual { grid-template-columns: 1fr; order: 0; }
  .feature-row .feature-visual { order: -1; }
}

/* ── 5. Stat band (animated count-up) ───────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.4vw, 28px);
}
.stat {
  padding: 26px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.stat-num {
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.stat-num .suffix { color: var(--accent); }
.stat-label {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: .88rem;
  line-height: 1.5;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── 6. WhatsApp-style chat simulation ──────────────────── */
.chat-sim {
  width: min(420px, 100%);
  margin-inline: auto;
  border-radius: 30px;
  background: #0b141a;
  padding: 12px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.chat-screen {
  border-radius: 22px;
  overflow: hidden;
  background: var(--wa-bg);
  background-image:
    radial-gradient(rgba(0, 0, 0, .025) 1px, transparent 1px);
  background-size: 18px 18px;
  display: flex;
  flex-direction: column;
  height: clamp(460px, 62vh, 600px);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--wa-head);
  color: #fff;
}
.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #25d366, #128c7e);
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35);
}
.chat-id { line-height: 1.2; }
.chat-id strong { font-size: .95rem; font-weight: 700; }
.chat-id span { font-size: .74rem; opacity: .85; display: block; }
.chat-id span.online::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: #8af0a0;
}
.chat-body {
  flex: 1;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.bubble {
  max-width: 78%;
  padding: 9px 12px 7px;
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.45;
  color: #0c1c14;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  position: relative;
  /* entrance state — JS toggles .show */
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition: opacity .32s var(--ease-out-quart), transform .32s var(--ease-out-quart);
}
.bubble.show { opacity: 1; transform: none; }
.bubble.in { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 3px; }
.bubble.out { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 3px; }
.bubble .time {
  display: block;
  text-align: right;
  font-size: .62rem;
  margin-top: 3px;
  color: rgba(0, 0, 0, .42);
}
.bubble.out .time::after { content: " ✓✓"; color: #34b7f1; }
.bubble .meta-tag {
  display: block;
  margin-bottom: 4px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wa-head);
}
/* typing indicator */
.typing {
  align-self: flex-start;
  display: none;
  gap: 4px;
  padding: 11px 14px;
  background: var(--wa-in);
  border-radius: 12px;
  border-top-left-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
}
.typing.show { display: flex; }
.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9bb0a5;
  animation: typing-dot 1.2s infinite ease-in-out;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.chat-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f0f0f0;
}
.chat-foot .field {
  flex: 1;
  height: 38px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  padding-inline: 14px;
  color: #9aa0a6;
  font-size: .82rem;
}
.chat-foot .send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--wa-head);
  color: #fff;
  font-size: 1rem;
}

/* Playback controls — this is a tool, not a loop. */
.chat-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}
.chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: .84rem;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.chat-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.chat-btn:active { transform: translateY(0) scale(.97); }
.chat-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.chat-btn[disabled] { opacity: .45; cursor: default; transform: none; box-shadow: var(--shadow-sm); }
.chat-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(213, 58, 67, .22);
}
.chat-btn .ic { font-size: .9rem; line-height: 1; }
/* thin progress bar under the controls */
.chat-progress {
  width: min(420px, 100%);
  height: 4px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(23, 54, 95, .1);
  overflow: hidden;
}
.chat-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-deep));
  transition: width .4s var(--ease-out-quart);
}

/* ── 7. Chart widget (animated SVG, reusable) ───────────── */
.chart-card {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(244, 248, 252, .85));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-md);
}
.chart-card h3 {
  font-family: "Sora", sans-serif;
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.chart-card .chart-note { margin: 6px 0 22px; color: var(--ink-muted); font-size: .85rem; }
.chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.chart-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}
.legend-accent { background: linear-gradient(140deg, var(--accent), var(--accent-deep)); }
.legend-sky { background: linear-gradient(140deg, #9fcef5, #6e9ec7); }

/* line chart paths animate via stroke-dash */
.chart-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 1.6s var(--ease-out-expo) .2s;
}
.chart-svg.visible .chart-line { stroke-dashoffset: 0; }
.chart-area {
  opacity: 0;
  transition: opacity 1s ease 1s;
}
.chart-svg.visible .chart-area { opacity: 1; }
.chart-dot { opacity: 0; transition: opacity .4s ease 1.4s; }
.chart-svg.visible .chart-dot { opacity: 1; }

/* bar chart (CSS-driven grow) */
.bars { display: grid; gap: 16px; margin-top: 8px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; }
.bar-row .bar-label { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.bar-track {
  position: relative;
  height: 30px;
  border-radius: 8px;
  background: rgba(23, 54, 95, .06);
  overflow: hidden;
}
.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  transition: width 1.3s var(--ease-out-expo);
}
.bar-fill.accent { background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.bar-fill.sky { background: linear-gradient(90deg, #6e9ec7, #9fcef5); }

/* ── 8. Marquee (industries, replaces a card grid) ──────── */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-sm);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Gated on .reduce-motion rather than the media query — see the motion
   policy script in index.html <head>. Motion runs unconditionally by
   owner's decision; flipping RESPECT_REDUCED_MOTION restores these. */
.reduce-motion .marquee-track { animation: none; }
.reduce-motion .chart-line { stroke-dashoffset: 0 !important; }
.reduce-motion .chart-area, .reduce-motion .chart-dot { opacity: 1 !important; }
.reduce-motion .bubble { opacity: 1 !important; transform: none !important; }

/* ============================================================
   Deejing Agent v2 — Dee components (added for the rebuild)
   ============================================================ */

/* ── Moving grid net (living background) ────────────────── */
.grid-net {
  position: fixed;
  inset: -60px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(74, 117, 168, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 117, 168, .06) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 0%, rgba(0,0,0,.35) 55%, transparent 82%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 28%, #000 0%, rgba(0,0,0,.35) 55%, transparent 82%);
  animation: grid-pan 48s linear infinite;
  will-change: background-position;
}
.grid-net::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  top: -8%;
  left: -6%;
  background: radial-gradient(circle, rgba(213,58,67,.06), transparent 60%);
  animation: net-glow 26s var(--ease) infinite alternate;
}
@keyframes grid-pan { to { background-position: 84px 84px, 84px 84px; } }
@keyframes net-glow {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(58vw, 38vh); }
}

/* ── Hero additions ─────────────────────────────────────── */
.hero h1 .grad {
  display: block;
  color: var(--accent-deep);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  font-size: .86rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.01em;
}
.hero-trust img {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

/* Mobile menu toggle (hamburger) — hidden on desktop */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.nav-toggle:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.nav-toggle-close {
  display: none;
  width: 22px;
  height: 22px;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -6px; left: 0; }
.nav-toggle-bars::after { position: absolute; top: 6px; left: 0; }
.bar.nav-open .nav-toggle-bars { background: transparent; }
.bar.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.bar.nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
.bar.nav-open .nav-toggle-close { display: block; }
.bar.nav-open .nav-toggle-bars { display: none; }

/* Nav "Book a call" as a pill button */
.nav a.nav-cta {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 10px 22px rgba(213, 58, 67, .22);
}
.nav a.nav-cta::after { display: none; }
.nav a.nav-cta:hover,
.nav a.nav-cta:focus-visible,
.nav a.nav-cta:active,
.nav a.nav-cta.current {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  box-shadow: 0 16px 30px rgba(213, 58, 67, .3);
}

/* ── Section 2 · Choose your Dee ─────────────────────────── */
.dee-picker {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.2fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: stretch;
}
.dee-tiles { display: flex; flex-direction: column; gap: 14px; }
.dee-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.dee-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dee-tile:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.dee-tile.active {
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,248,252,.9));
  border-color: rgba(213, 58, 67, .35);
  box-shadow: 0 18px 40px rgba(213, 58, 67, .14);
}
.dee-emoji {
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(141, 197, 242, .16);
  transition: transform .25s var(--ease);
}
.dee-emoji img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.dee-tile.active .dee-emoji { transform: scale(1.08) rotate(-4deg); background: rgba(213, 58, 67, .12); }
.dee-name { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.dee-tagline { font-size: .8rem; color: var(--ink-muted); font-weight: 700; letter-spacing: .02em; }

.dee-detail {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 3vw, 32px);
  align-items: center;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 88% 12%, rgba(213,58,67,.08), transparent 42%),
    linear-gradient(160deg, rgba(255,255,255,.94), rgba(240,246,250,.9));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dee-detail-art {
  width: clamp(90px, 12vw, 132px);
  height: clamp(90px, 12vw, 132px);
  border-radius: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(141,197,242,.25), rgba(245,214,167,.25));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.dee-detail-icon {
  width: clamp(74px, 9vw, 108px);
  height: clamp(74px, 9vw, 108px);
  object-fit: contain;
}
.dee-detail.swap .dee-detail-art { animation: pop .4s var(--ease-out-expo); }
.dee-detail.swap .dee-detail-body > * { animation: hero-enter .45s var(--ease-out-expo) backwards; }
.dee-detail.swap .dee-detail-body > *:nth-child(2) { animation-delay: .05s; }
.dee-detail.swap .dee-detail-body > *:nth-child(3) { animation-delay: .1s; }
.dee-detail.swap .dee-detail-body > *:nth-child(4) { animation-delay: .15s; }
.dee-detail.swap .dee-detail-body > *:nth-child(5) { animation-delay: .2s; }
@keyframes pop { 0% { transform: scale(.82); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.dee-detail-eyebrow {
  margin: 0 0 4px;
  font-family: "Sora", sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.dee-detail-name { font-family: "Sora", sans-serif; margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.04em; color: var(--ink); }
.dee-detail-tag { margin: 6px 0 0; font-weight: 800; color: var(--ink-soft); }
.dee-detail-persona { margin: 14px 0 0; color: var(--ink-soft); line-height: 1.7; }
.dee-detail-best { margin: 14px 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.dee-detail-best strong { color: var(--ink); font-family: "Sora", sans-serif; }

@media (max-width: 860px) {
  .dee-picker { grid-template-columns: 1fr; }
  .dee-tiles { flex-direction: row; flex-wrap: wrap; }
  .dee-tile { flex: 1 1 160px; }
  .dee-detail { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ── Section 3 · The Problem (pain cloud) ───────────────── */
.pain-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 8px;
}
.pain {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink-soft);
  cursor: default;
  transition: transform .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
  animation: pain-float 6s var(--ease) infinite;
}
.pain::before {
  content: "";
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url("../icons/alert-dot.svg") center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.pain:nth-child(2n) { animation-delay: -1.5s; }
.pain:nth-child(3n) { animation-delay: -3s; }
.pain:nth-child(4n) { animation-delay: -4.5s; }
.pain:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  color: var(--ink-muted);
  text-decoration: line-through;
  text-decoration-color: rgba(213, 58, 67, .55);
}
.pain:hover::before {
  background-image: url("../icons/check-circle.svg");
  transform: rotate(360deg);
}
@keyframes pain-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ── Section 3 · "The Glue" — isometric pain→resolve narrative ───────────
   Built from the hero's isometric-cube language. The animation is an
   enhancement: the RESTING state (no .play / no-JS / crawlers) is the
   resolved beat 6 — calm line, red Dee cubes seated in the gaps, the
   expert back at the start. .play (added on scroll) replays the full
   story from the connected line through the overwhelm and back to calm. */
.s-line { display: block; }

.glue {
  /* Whole-sequence duration for the flow diagram. Every glue* keyframe is
     timed off this one value, so changing it rescales the entire narrative
     — blocks, items, figure and both captions — in proportion.

     Six beats (20/14/14/14/16/22 percent) average 16.7% each, so 17s puts a
     beat at ~2.8s. That matches the chat demo's ~2.8s average step (PACE in
     demo-workflows.js) so the two sequences read at the same tempo. Raising
     this also slows every individual movement inside the diagram, since all
     thirteen keyframes are timed off it. */
  --glue-dur: 17s;
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}
.glue-stage {
  position: relative;
  width: 100%;
  margin-inline: auto;
}
.glue-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 22px 28px rgba(23, 54, 95, .12)) saturate(1.08);
}

.glue-line {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.18;
  margin: 0;
  font-size: clamp(1.25rem, 2.8vw, 1.95rem);
  text-wrap: balance;
}
/* Visible at rest. This used to be opacity:0 because the sequence always
   auto-played and beat 5 faded it in — but playback is manual now, so a
   hidden default would leave the problem statement permanently invisible to
   anyone who never presses Play. While the sequence runs, glueFreezeText
   takes over and still ends it faded out. */
.glue-freeze { margin-top: 4px; color: var(--ink); opacity: 1; }
.glue-release { margin-top: 10px; color: var(--accent); }

/* ── Flow sequence control ─────────────────────────────────────── */
.glue-controls {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.glue-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.glue-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(213, 58, 67, .3);
}

.glue-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Triangle for play, two bars for replay-in-progress. */
.glue-ico {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent var(--accent);
}

.glue.play .glue-ico {
  width: 10px;
  height: 12px;
  border: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) left / 3px 100% no-repeat,
    linear-gradient(var(--accent), var(--accent)) right / 3px 100% no-repeat;
}

/* Resting = resolved beat 6 */
.glue-svg .blk-b { transform: translateX(92px); }
.glue-svg .blk-c,
.glue-svg .blk-d { transform: translateX(184px); }
.glue-svg .item-1,
.glue-svg .item-2,
.glue-svg .item-x1,
.glue-svg .item-x2,
.glue-svg .item-r { opacity: 0; }
.glue-svg .figure {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  transform: translate(-238px, -10px);
}

.glue-svg .dee,
.glue-svg .item,
.glue-svg .figure {
  filter: drop-shadow(0 8px 10px rgba(23, 54, 95, .16));
}

.glue-svg .dee polygon {
  filter: saturate(1.18);
}

/* ── Playing: drive every part off one shared 13s timeline ── */
.glue.play .blk-b { animation: glueBlkB var(--glue-dur) linear both; }
.glue.play .blk-c { animation: glueBlkC var(--glue-dur) linear both; }
.glue.play .blk-d { animation: glueBlkC var(--glue-dur) linear both; }
.glue.play .dee-1 { animation: glueDee1 var(--glue-dur) linear both; }
.glue.play .dee-2 { animation: glueDee2 var(--glue-dur) linear both; }
.glue.play .item-1 { animation: glueItem1 var(--glue-dur) linear both; }
.glue.play .item-2 { animation: glueItem2 var(--glue-dur) linear both; }
.glue.play .item-x1 { animation: glueItemX1 var(--glue-dur) linear both; }
.glue.play .item-x2 { animation: glueItemX2 var(--glue-dur) linear both; }
.glue.play .item-r { animation: glueItemR var(--glue-dur) linear both; }
.glue.play .figure { animation: glueFigure var(--glue-dur) linear both; }
.glue.play .glue-freeze { animation: glueFreezeText var(--glue-dur) linear both; }
.glue.play .glue-release { animation: glueReleaseText var(--glue-dur) linear both; }

/* Beats: 1 ideal 0-20% · 2 crack 20-34% · 3 catch 34-48% ·
   4 recurrence 48-62% · 5 freeze 62-78% · 6 exhale 78-100% */
@keyframes glueBlkB { 0%,48%{transform:translateX(0)} 60%,100%{transform:translateX(92px)} }
@keyframes glueBlkC { 0%,20%{transform:translateX(0)} 32%,48%{transform:translateX(92px)} 60%,100%{transform:translateX(184px)} }

@keyframes glueDee1 {
  0%,78%{opacity:0; transform:translateY(-230px)}
  88%{opacity:1; transform:translateY(12px)}
  93%{transform:translateY(0)}
  100%{opacity:1; transform:translateY(0)}
}
@keyframes glueDee2 {
  0%,80%{opacity:0; transform:translateY(-230px)}
  90%{opacity:1; transform:translateY(12px)}
  95%{transform:translateY(0)}
  100%{opacity:1; transform:translateY(0)}
}

@keyframes glueItem1 {
  0%{opacity:0; transform:translateX(0)}
  4%{opacity:1}
  17%{opacity:1; transform:translateX(384px)}
  21%,100%{opacity:0; transform:translateX(384px)}
}
@keyframes glueItem2 {
  0%,20%{opacity:0; transform:translate(0,0)}
  23%{opacity:1; transform:translate(0,0)}
  31%{opacity:1; transform:translate(238px,0)}
  35%{opacity:1; transform:translate(238px,96px)}
  38%,80%{opacity:1; transform:translate(238px,96px)}
  86%{opacity:1; transform:translate(238px,-44px)}
  93%{opacity:1; transform:translate(568px,-44px)}
  97%,100%{opacity:0; transform:translate(568px,-44px)}
}
@keyframes glueItemX1 {
  0%,46%{opacity:0; transform:translate(0,0)}
  50%{opacity:1; transform:translate(0,0)}
  58%{opacity:1; transform:translate(0,92px)}
  62%,80%{opacity:1; transform:translate(0,92px)}
  87%,100%{opacity:0; transform:translate(0,92px)}
}
@keyframes glueItemX2 {
  0%,52%{opacity:0; transform:translate(0,0)}
  56%{opacity:1; transform:translate(0,0)}
  63%{opacity:1; transform:translate(0,92px)}
  66%,80%{opacity:1; transform:translate(0,92px)}
  87%,100%{opacity:0; transform:translate(0,92px)}
}
@keyframes glueItemR {
  0%,82%{opacity:0; transform:translateX(0)}
  85%{opacity:1; transform:translateX(0)}
  97%,100%{opacity:1; transform:translateX(568px)}
}

@keyframes glueFigure {
  0%,28%{opacity:0; transform:translate(330px,70px)}
  32%{opacity:1; transform:translate(0,0)}
  38%{transform:translate(-128px,0)}
  44%{transform:translate(0,0)}
  50%{transform:translate(-128px,4px) rotate(-5deg)}
  56%{transform:translate(-20px,4px) rotate(4deg)}
  62%,78%{opacity:1; transform:translate(-74px,8px) rotate(-4deg)}
  90%,100%{opacity:1; transform:translate(-238px,-10px) rotate(0deg)}
}

@keyframes glueFreezeText {
  0%,62%{opacity:0; transform:translateY(10px)}
  69%,78%{opacity:1; transform:none}
  85%,100%{opacity:0; transform:translateY(-6px)}
}
@keyframes glueReleaseText {
  0%,80%{opacity:0; transform:translateY(10px)}
  90%,100%{opacity:1; transform:none}
}

@media (max-width: 620px) {
  .glue-svg { overflow: hidden; }
}

/* ── Section 4 · Flow showcase ──────────────────────────── */
.flow-show {
  display: grid;
  grid-template-columns: 1fr auto 1.05fr;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: center;
}
.flow-input {
  align-self: center;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--accent), var(--accent-deep));
  color: #fff;
  box-shadow: 0 20px 44px rgba(213, 58, 67, .26);
}
.flow-input-label {
  font-family: "Sora", sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .85;
}
.flow-input-text { margin: 12px 0 0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5; font-weight: 600; }

.flow-bridge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
}
.flow-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .25;
  animation: flow-pulse 1.6s var(--ease) infinite;
}
.flow-pulse:nth-child(2) { animation-delay: .25s; }
.flow-pulse:nth-child(3) { animation-delay: .5s; }
@keyframes flow-pulse {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}
.flow-does-label {
  display: block;
  margin-bottom: 14px;
  font-family: "Sora", sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}
.flow-action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flow-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.flow-action:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.flow-action .fa-ic {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  background: rgba(141, 197, 242, .18);
}
.flow-action div { display: flex; flex-direction: column; }
.flow-action strong { font-family: "Sora", sans-serif; color: var(--ink); font-size: .98rem; }
.flow-action span { color: var(--ink-muted); font-size: .85rem; margin-top: 2px; }

@media (max-width: 860px) {
  .flow-show { grid-template-columns: 1fr; }
  .flow-bridge { flex-direction: row; justify-content: center; padding: 6px 0; }
}

/* ── Section 5 · Modules (connected list, not cards) ────── */
.module-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.module {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.module::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease);
}
.module:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.module:hover::before { transform: scaleY(1); }
.module-ic {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(141,197,242,.22), rgba(245,214,167,.18));
}
.module-ic img { width: 26px; height: 26px; opacity: .9; }
.module-text h3 { font-family: "Sora", sans-serif; margin: 0; font-size: 1.05rem; letter-spacing: -.02em; color: var(--ink); }
.module-text p { margin: 4px 0 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 720px) { .module-list { grid-template-columns: 1fr; } }

/* ── Section 6 · Specialist (numbered showcase) ─────────── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.spec-card {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(244,248,252,.8));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.spec-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.spec-num {
  font-family: "Sora", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(213, 58, 67, .5);
  display: block;
  margin-bottom: 12px;
}
.spec-card h3 { font-family: "Sora", sans-serif; margin: 0 0 8px; font-size: 1.08rem; letter-spacing: -.02em; color: var(--ink); }
.spec-card p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .spec-grid { grid-template-columns: 1fr; } }

/* ── Section 7 · Trust badges ───────────────────────────── */
.trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.4;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.trust-badge:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tb-ic {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(141,197,242,.22), rgba(255,255,255,.5));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.tb-ic img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
@media (max-width: 820px) { .trust-badges { grid-template-columns: 1fr; } }

/* ── FAQ accordions (native <details>) ──────────────────── */
.faq { margin-top: clamp(20px, 2.6vw, 34px); }
.faq-label {
  margin: 0 0 10px;
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.faq-list { display: grid; gap: 8px; max-width: 60rem; }
.faq-item {
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .62);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.faq-item[open] { border-color: rgba(213, 58, 67, .28); box-shadow: var(--shadow-md); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; border-radius: var(--radius-sm); }
.faq-ic {
  position: relative;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  transition: transform .28s var(--ease), opacity .2s var(--ease);
}
.faq-ic img {
  width: 22px;
  height: 22px;
}
.faq-item[open] .faq-ic { transform: rotate(45deg); }
.faq-a { padding: 0 18px 15px; }
.faq-a p { margin: 0; color: var(--ink-soft); line-height: 1.58; font-size: .93rem; }
.faq-item[open] .faq-a { animation: faq-in .3s var(--ease-out-quart); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }

/* ── Non-hero section refresh ────────────────────────────── */
main > .tmpl-section {
  overflow: hidden;
  border-top: 1px solid rgba(112, 140, 172, .16);
}

main > .tmpl-section > .container {
  position: relative;
}

.tmpl-section:not(.alt) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(245, 249, 252, .76));
}

.tmpl-section.alt {
  background:
    linear-gradient(180deg, rgba(225, 235, 246, .62), rgba(244, 248, 252, .82) 48%, rgba(231, 240, 248, .52));
}

.s-head {
  max-width: 68ch;
  margin-bottom: clamp(20px, 2.6vw, 36px);
}

.s-head.center .lede {
  margin-inline: auto;
}

.s-title {
  max-width: 17ch;
  margin-inline: auto;
}

.s-sub {
  max-width: 58ch;
}

.hub,
.dee-picker,
.checklist,
.steps,
.why-wrap,
.glue,
.priv-grid,
.trust-badges {
  position: relative;
}

.hub {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(236, 244, 251, .62)),
    linear-gradient(90deg, rgba(213, 58, 67, .06), rgba(74, 117, 168, .07));
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow: var(--shadow-md);
}

.hub-node,
.check,
.trust-badge,
.faq-item,
.flow-action,
.module,
.spec-card,
.priv-card {
  backdrop-filter: blur(14px);
}

.hub-node {
  justify-content: center;
  min-height: 58px;
  box-shadow: none;
}

.hub-core {
  min-height: 122px;
  box-shadow: 0 20px 46px rgba(23, 54, 95, .14);
}

.hub-text,
.value-close {
  max-width: 58ch;
  margin-inline: auto;
}

.callout {
  max-width: 760px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(213, 58, 67, .11), rgba(255, 255, 255, .72) 26%, rgba(141, 197, 242, .14));
  border: 1px solid rgba(213, 58, 67, .16);
}

.dee-picker {
  max-width: 980px;
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 24px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(255, 255, 255, .72);
}

.dee-tile {
  min-height: 86px;
  box-shadow: none;
}

.dee-detail {
  min-height: 100%;
}

.checklist {
  max-width: 940px;
  margin-inline: auto;
  gap: 12px;
}

.check {
  min-height: 74px;
  align-items: center;
  border-color: rgba(255, 255, 255, .82);
}

.steps {
  max-width: 880px;
  padding: clamp(18px, 3vw, 30px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .76);
}

.step {
  grid-template-columns: 64px 1fr;
}

.step-body {
  padding: 12px 0 0;
}

.why-wrap {
  max-width: 860px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 12% 20%, rgba(213, 58, 67, .08), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(238, 245, 250, .7));
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: var(--shadow-sm);
}

.glue {
  padding: clamp(12px, 2vw, 24px);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 34%, rgba(213, 58, 67, .1), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(231, 241, 249, .78));
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 24px 58px rgba(25, 54, 89, .1);
}

.pain-cloud {
  max-width: 1040px;
  margin-inline: auto;
}

.priv-grid {
  max-width: 980px;
  margin-inline: auto;
}

.trust-badges {
  max-width: 1000px;
  margin-inline: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.trust-badge {
  align-items: flex-start;
  min-height: 92px;
}

.faq {
  max-width: 880px;
  margin-inline: auto;
}

.faq-label {
  text-align: center;
}

.faq-list {
  max-width: none;
}

.faq-item {
  background: rgba(255, 255, 255, .56);
}

.cta-box {
  max-width: 1080px;
  margin-inline: auto;
}

@media (max-width: 980px) {
  .hub,
  .trust-badges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .s-title {
    max-width: 18ch;
  }

  .hub,
  .trust-badges {
    grid-template-columns: 1fr;
  }

  .steps {
    padding: 0;
    background: transparent;
    border: 0;
  }

  .step {
    grid-template-columns: 46px 1fr;
  }
}

/* ── Footer additions ───────────────────────────────────── */
.foot { flex-wrap: wrap; align-items: center; }
.foot-links { display: inline-flex; gap: 18px; }
.foot-links a { color: var(--ink-soft); font-weight: 700; transition: color .18s var(--ease); }
.foot-links a:hover { color: var(--accent); }
.foot-flag { color: var(--ink-muted); font-weight: 700; }

/* ── Thai typography ────────────────────────────────────── */
html[lang="th"] body { font-family: "Noto Sans Thai", "Manrope", "Segoe UI", sans-serif; }
html[lang="th"] .brand-name,
html[lang="th"] .eyebrow,
html[lang="th"] .s-eyebrow,
html[lang="th"] .s-title,
html[lang="th"] .hero h1,
html[lang="th"] .section h2,
html[lang="th"] .cta h2,
html[lang="th"] .dee-name,
html[lang="th"] .dee-detail-name,
html[lang="th"] .flow-input-text,
html[lang="th"] .faq-item summary,
html[lang="th"] .module-text h3,
html[lang="th"] .spec-card h3,
html[lang="th"] .pain {
  font-family: "Noto Sans Thai", "Sora", "Segoe UI", sans-serif;
  letter-spacing: 0;
}
html[lang="th"] .hero h1 { line-height: 1.12; }
html[lang="th"] .s-title { line-height: 1.2; }

/* ── How it works · vertical step timeline ──────────────── */
.steps {
  list-style: none;
  margin: clamp(10px, 2vw, 22px) auto 0;
  padding: 0;
  max-width: 760px;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(16px, 2.4vw, 28px);
  min-height: 124px;
  padding-bottom: 0;
  opacity: 0;
  transform: translate3d(-18px, 18px, 0) scale(.985);
  filter: blur(4px);
  transition:
    opacity .58s var(--ease-out-expo),
    transform .58s var(--ease-out-expo),
    filter .58s var(--ease-out-expo);
}
.step:last-child { min-height: 76px; }
.step::before {
  content: "";
  position: absolute;
  left: 82px;
  right: 0;
  top: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(213, 58, 67, .42), rgba(141, 197, 242, .28), transparent);
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: left;
  transition: opacity .45s var(--ease-out-quart), transform .72s var(--ease-out-expo);
}
.steps.visible .step {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.steps.visible .step::before {
  opacity: .75;
  transform: scaleX(1);
}
.steps.visible .step:nth-child(1) { transition-delay: .06s; }
.steps.visible .step:nth-child(2) { transition-delay: .16s; }
.steps.visible .step:nth-child(3) { transition-delay: .26s; }
.steps.visible .step:nth-child(4) { transition-delay: .36s; }
.steps.visible .step:nth-child(5) { transition-delay: .46s; }
.steps.visible .step:nth-child(1)::before { transition-delay: .16s; }
.steps.visible .step:nth-child(2)::before { transition-delay: .26s; }
.steps.visible .step:nth-child(3)::before { transition-delay: .36s; }
.steps.visible .step:nth-child(4)::before { transition-delay: .46s; }
.steps.visible .step:nth-child(5)::before { transition-delay: .56s; }

.step-num {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
  box-shadow: 0 12px 26px rgba(213, 58, 67, .28);
  transform: scale(.92);
  transition: transform .48s var(--ease-out-expo), box-shadow .32s var(--ease-out-quart);
}
.steps.visible .step-num { transform: scale(1); }
.steps.visible .step:nth-child(1) .step-num { transition-delay: .1s; }
.steps.visible .step:nth-child(2) .step-num { transition-delay: .2s; }
.steps.visible .step:nth-child(3) .step-num { transition-delay: .3s; }
.steps.visible .step:nth-child(4) .step-num { transition-delay: .4s; }
.steps.visible .step:nth-child(5) .step-num { transition-delay: .5s; }
/* a soft ring that pulses outward, cascading down the timeline */
.step-num::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(213, 58, 67, .45);
  opacity: 0;
}
.steps.visible .step-num::after { animation: step-ring 3s var(--ease) infinite; }
.steps.visible .step:nth-child(2) .step-num::after { animation-delay: .4s; }
.steps.visible .step:nth-child(3) .step-num::after { animation-delay: .8s; }
.steps.visible .step:nth-child(4) .step-num::after { animation-delay: 1.2s; }
.steps.visible .step:nth-child(5) .step-num::after { animation-delay: 1.6s; }
@keyframes step-ring {
  0% { opacity: .55; transform: scale(.82); }
  60%, 100% { opacity: 0; transform: scale(1.35); }
}

/* connector segment from this node down to the next */
.step-rail {
  position: absolute;
  left: 27px;
  top: 56px;
  height: 68px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--sky));
  opacity: .45;
  transform: scaleY(0);
  transform-origin: top;
}
.steps.visible .step-rail {
  opacity: .86;
  transform: scaleY(1);
  transition: transform .62s var(--ease-out-expo), opacity .35s var(--ease-out-quart);
}
.steps.visible .step:nth-child(1) .step-rail { transition-delay: .18s; }
.steps.visible .step:nth-child(2) .step-rail { transition-delay: .30s; }
.steps.visible .step:nth-child(3) .step-rail { transition-delay: .42s; }
.steps.visible .step:nth-child(4) .step-rail { transition-delay: .54s; }

.step-body { padding-top: 5px; min-width: 0; }
.step-body h3 {
  font-family: "Sora", sans-serif;
  margin: 0 0 6px;
  font-size: 1.18rem;
  letter-spacing: -.03em;
  color: var(--ink);
}
.step-body p { margin: 0; color: var(--ink-soft); line-height: 1.7; font-size: .95rem; }

@media (max-width: 520px) {
  .step { grid-template-columns: 46px 1fr; gap: 14px; min-height: 150px; }
  .step:last-child { min-height: 112px; }
  .step::before { left: 60px; top: 10px; }
  .step-num { width: 46px; height: 46px; font-size: 1rem; }
  .step-rail { left: 22px; top: 46px; height: 104px; }
}

/* ── Why private is better · argument cards ─────────────── */
.priv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.priv-card {
  position: relative;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(244, 248, 252, .82));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.priv-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--sky), var(--accent));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.priv-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.priv-card:hover::before { transform: scaleX(1); animation: priv-sweep 2.4s linear infinite; }
@keyframes priv-sweep { to { background-position: -200% 0; } }
.priv-ic {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  margin-bottom: 16px;
  background: linear-gradient(160deg, rgba(141, 197, 242, .22), rgba(245, 214, 167, .18));
}
.priv-ic img { width: 26px; height: 26px; }
.priv-card h3 {
  font-family: "Sora", sans-serif;
  margin: 0 0 10px;
  font-size: 1.12rem;
  letter-spacing: -.02em;
  color: var(--ink);
}
.priv-card p { margin: 0; color: var(--ink-soft); line-height: 1.65; font-size: .92rem; }
.priv-tag {
  margin-top: 14px !important;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: .82rem !important;
  line-height: 1.45 !important;
  color: var(--accent) !important;
  letter-spacing: -.01em;
}
@media (max-width: 720px) { .priv-grid { grid-template-columns: 1fr; } }

/* ── CTA · "what to prepare" chips ──────────────────────── */
.cta h2 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent), #f08a6f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-prep-label {
  margin: clamp(22px, 3vw, 32px) 0 14px !important;
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cta-prep {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cta-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: transform .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.cta-chip::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-deep));
}
.cta-chip:hover {
  transform: translateY(-3px);
  color: var(--ink);
  box-shadow: var(--shadow-md);
  border-color: rgba(213, 58, 67, .3);
}
.cta-note { margin: 18px 0 0 !important; font-weight: 700; color: var(--ink-soft); font-size: .92rem; }

.booking-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, .82fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.booking-copy,
.booking-form {
  position: relative;
  z-index: 1;
}

.booking-copy .label-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .64);
  border: 1px solid rgba(255, 255, 255, .78);
}

.booking-copy .label-top::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(213, 58, 67, .1);
}

.booking-promise {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: clamp(20px, 2.8vw, 28px);
}

.booking-promise span {
  min-height: 82px;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  border-radius: 18px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .82), rgba(237, 245, 251, .76)),
    radial-gradient(circle at 20% 16%, rgba(213, 58, 67, .14), transparent 36%);
  border: 1px solid rgba(255, 255, 255, .82);
  color: var(--ink);
  font-family: "Sora", sans-serif;
  font-size: clamp(.78rem, .95vw, .9rem);
  font-weight: 800;
  line-height: 1.35;
  box-shadow: var(--shadow-sm);
}

.contact-form {
  display: grid;
  gap: 14px;
  width: min(680px, 100%);
  margin: clamp(20px, 3vw, 30px) auto 0;
}

.booking-form {
  width: 100%;
  margin: 0;
  padding: clamp(18px, 2.8vw, 28px);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 250, 253, .78)),
    radial-gradient(circle at 94% 0%, rgba(141, 197, 242, .18), transparent 30%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 20px 50px rgba(25, 54, 89, .1);
}

.cta-action-form {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.contact-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  text-align: left;
}
.contact-field span {
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(23, 54, 95, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
  color: var(--ink);
  font: inherit;
  font-size: .96rem;
  line-height: 1.45;
  outline: none;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.contact-field input {
  min-height: 50px;
  padding: 0 15px;
}
.contact-field select {
  min-height: 50px;
  padding: 0 42px 0 15px;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 21px) 22px,
    calc(100% - 15px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.contact-field textarea {
  min-height: 132px;
  resize: vertical;
  padding: 14px 15px;
}
.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  border-color: rgba(213, 58, 67, .44);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 4px rgba(213, 58, 67, .1);
}
.booking-scheduler {
  display: grid;
  gap: 12px;
}
.booking-timezone-help,
.booking-slot-help,
.booking-empty {
  margin: -2px 0 0 !important;
  color: var(--ink-soft);
  font-size: .85rem;
  line-height: 1.55;
}
.booking-slot-field {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.booking-slot-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.booking-slot-head span {
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.booking-slot-head strong {
  min-width: 0;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: .82rem;
  font-weight: 800;
}
.booking-slots {
  display: grid;
  gap: 10px;
  max-height: 440px;
  padding: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(23, 54, 95, .1);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(244, 248, 252, .62), rgba(255, 255, 255, .54)),
    radial-gradient(circle at 6% 0%, rgba(213, 58, 67, .08), transparent 28%);
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 54, 95, .22) transparent;
}
.booking-day {
  display: grid;
  grid-template-columns: minmax(92px, 112px) minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(244, 248, 252, .56));
  box-shadow: 0 10px 24px rgba(25, 54, 89, .045);
}
.booking-day-title {
  position: sticky;
  left: -10px;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .88), rgba(236, 244, 251, .78)),
    radial-gradient(circle at 18% 18%, rgba(213, 58, 67, .1), transparent 44%);
  color: var(--ink);
  font-family: "Sora", sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
}
/* Grid rather than wrapped flex. With flex, `flex-grow` let the final row
   share out the leftover width between however few items it held, so a row
   of two slots rendered each of them roughly twice as wide as the four
   above. Fixed tracks keep every slot the same size regardless of how the
   last row divides — auto-fill, not auto-fit, so the empty tracks stay in
   place instead of collapsing and letting the remainder stretch again. */
.booking-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  align-content: center;
  gap: 8px;
  min-width: 0;
}
.booking-slot {
  /* Grid sizes the track; 0 here stops long labels forcing an overflow. */
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(23, 54, 95, .11);
  border-radius: 14px;
  background: rgba(255, 255, 255, .74);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(25, 54, 89, .05);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.booking-slot:hover {
  transform: translateY(-2px);
  border-color: rgba(213, 58, 67, .24);
  box-shadow: 0 14px 28px rgba(25, 54, 89, .09);
}
.booking-slot:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
.booking-slot.selected {
  border-color: rgba(213, 58, 67, .46);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 244, 244, .84));
  box-shadow: 0 14px 32px rgba(213, 58, 67, .13);
}
.booking-slot-local {
  min-width: 0;
  font-family: "Sora", sans-serif;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.booking-slot-thai {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
}
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-status {
  min-height: 1.35em;
  margin: 0 !important;
  color: var(--ink-soft);
  font-size: .9rem;
  font-weight: 700;
}
.contact-status[data-tone="success"] { color: #18765b; }
.contact-status[data-tone="error"] { color: var(--accent-deep); }
.contact-form .cta-actions {
  margin-top: 2px;
}

.cta .container {
  max-width: 1240px;
}

.cta-box {
  padding: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 76% 12%, rgba(141, 197, 242, .18), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(250, 252, 254, .9));
  border: 1px solid rgba(205, 216, 230, .72);
  box-shadow: 0 28px 80px rgba(25, 54, 89, .12);
}

.cta-box::before,
.cta-box::after {
  content: none;
}

.cta-hero-panel {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(300px, .82fr);
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(32px, 5vw, 64px);
  border-bottom: 1px solid rgba(23, 54, 95, .1);
}

.cta-hero-panel .booking-copy {
  align-self: start;
}

.cta-hero-panel .label-top {
  margin-bottom: 18px;
  color: var(--accent);
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

.cta-hero-panel .label-top::before {
  content: none;
}

.cta-hero-panel h2 {
  max-width: 13ch;
  margin: 0;
  color: #092653;
  font-size: clamp(2.35rem, 5.2vw, 4.05rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.cta-hero-panel h2 em {
  display: block;
  color: var(--accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.cta-hero-panel p:not(.label-top) {
  max-width: 50ch;
  color: #18345f;
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  line-height: 1.7;
}

.cta-visual {
  position: relative;
  min-height: 330px;
  align-self: center;
}

.process-board,
.process-list {
  position: absolute;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,241,249,.82));
  border: 1px solid rgba(205, 216, 230, .9);
  box-shadow: 18px 28px 50px rgba(25, 54, 89, .16);
}

.process-board {
  width: min(74%, 330px);
  aspect-ratio: 1.28;
  right: 82px;
  top: 18px;
}

.process-board::after {
  content: "";
  position: absolute;
  inset: 8px -10px -8px auto;
  width: 10px;
  border-radius: 0 18px 18px 0;
  background: #b9c5d6;
}

.process-check,
.process-node,
.process-line {
  position: absolute;
}

.process-check {
  left: 30px;
  top: 62px;
  width: 42px;
  height: 42px;
  border-radius: 7px;
  background: linear-gradient(145deg, #ff3c45, #df1420);
  box-shadow: 0 10px 20px rgba(239, 31, 45, .24);
}

.process-check::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  width: 12px;
  height: 18px;
  border: solid #fff;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}

.process-node {
  width: 42px;
  height: 52px;
  border-radius: 7px;
  background: linear-gradient(145deg, #d9e2ee, #f4f7fb);
  box-shadow: inset 0 0 0 1px rgba(143, 160, 184, .2), 0 8px 18px rgba(25, 54, 89, .1);
}

.node-a { left: 106px; top: 62px; }
.node-b { left: 184px; top: 62px; opacity: .38; }
.node-c { left: 50px; top: 150px; opacity: .56; }
.node-d { left: 106px; top: 150px; background: linear-gradient(145deg, #cbd6e4, #f2f5f8); }
.process-board .node-d + .process-line + .process-line + .process-line,
.node-b + .process-line { opacity: 1; }
.process-board .node-b ~ .node-d {}
.process-board .node-b {}
.process-board .node-d {}
.process-board .node-c {}
.process-board .node-a {}
.process-board .node-d::after {
  content: "";
  position: absolute;
  left: 78px;
  top: 2px;
  width: 42px;
  height: 52px;
  border-radius: 7px;
  background: linear-gradient(145deg, #143764, #0a234c);
}

.process-line {
  height: 2px;
  background: #8d9caf;
  transform-origin: left center;
}

.line-a { left: 72px; top: 83px; width: 35px; }
.line-b { left: 146px; top: 83px; width: 39px; }
.line-c { left: 72px; top: 174px; width: 36px; }

.process-list {
  right: 0;
  top: 92px;
  width: min(44%, 190px);
  min-height: 226px;
  padding: 28px 28px 22px 48px;
}

.process-list span {
  position: relative;
  display: block;
  height: 10px;
  margin-bottom: 27px;
  border-radius: 999px;
  background: #d3dbe6;
}

.process-list span::before {
  content: "";
  position: absolute;
  left: -34px;
  top: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
}

.process-list span::after {
  content: "";
  position: absolute;
  left: -25px;
  top: -2px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.process-list span:nth-child(2),
.process-list span:nth-child(4) {
  width: 68%;
}

.process-user {
  position: absolute;
  left: 42%;
  bottom: 16px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff3c45, #df1420);
  box-shadow: 0 18px 34px rgba(239, 31, 45, .25);
  z-index: 3;
}

.process-user::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 21px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}

.process-user::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 44px;
  width: 32px;
  height: 22px;
  border-radius: 999px 999px 12px 12px;
  background: #fff;
}

.cta-prep-wrap {
  grid-column: 1 / -1;
}

.cta-choice-section {
  padding: clamp(28px, 4vw, 44px) clamp(26px, 5vw, 64px) 0;
}

.cta-choice-head {
  text-align: center;
  margin-bottom: 16px;
}

.cta-choice-head h3 {
  margin: 0;
  color: #092653;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  letter-spacing: -.04em;
}

.cta-choice-head > span {
  display: block;
  width: 150px;
  height: 3px;
  margin: 16px auto 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent) 16%, var(--accent) 84%, transparent);
}

.cta-choice-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.cta-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.8vw, 28px);
}

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 520px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(250, 252, 255, .78));
  text-align: center;
}

.choice-card-call {
  border: 1px solid rgba(239, 31, 45, .24);
}

.choice-card-message {
  border: 1px solid rgba(23, 54, 95, .16);
}

.choice-card.active {
  box-shadow: 0 20px 50px rgba(25, 54, 89, .08);
}

.choice-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .86), transparent 44%),
    rgba(213, 58, 67, .11);
  box-shadow: inset 0 0 0 1px rgba(213, 58, 67, .08);
}

.choice-icon::before {
  content: "";
  width: 34px;
  height: 34px;
  display: block;
  background: var(--accent);
  mask: var(--choice-icon-url) center / contain no-repeat;
  -webkit-mask: var(--choice-icon-url) center / contain no-repeat;
}

.choice-icon-call {
  --choice-icon-url: url("../icons/calendar-check.svg");
}

.choice-icon-message {
  --choice-icon-url: url("../icons/notes.svg");
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .9), transparent 44%),
    rgba(23, 54, 95, .07);
  box-shadow: inset 0 0 0 1px rgba(23, 54, 95, .08);
}

.choice-icon-message::before {
  background: var(--ink);
}

.choice-card h4 {
  margin: 4px 0 0;
  color: #092653;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  letter-spacing: -.03em;
}

.choice-card > p {
  max-width: 31ch;
  margin: 0;
  min-height: 5.25em;
  color: #1d3a66;
  line-height: 1.55;
}

.choice-card ul {
  width: 100%;
  display: grid;
  gap: 12px;
  margin: 8px 0 14px;
  min-height: 88px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.choice-card li {
  position: relative;
  padding-left: 40px;
  color: #102d5b;
  font-weight: 700;
  line-height: 1.4;
}

.choice-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.choice-card li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: .42em;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.choice-card-call li::before,
.choice-card-call li::after { color: var(--accent); }
.choice-card-message li::before,
.choice-card-message li::after { color: var(--accent); }

.choice-button {
  width: 100%;
  margin-top: auto;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px 1fr 24px;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border-radius: 18px;
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.choice-button:hover,
.choice-button:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.choice-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(23, 54, 95, .12);
}

.choice-button-call {
  border: 0;
  color: #fff;
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: 0 16px 32px rgba(239, 31, 45, .24);
}

.choice-button-message {
  color: var(--ink);
  background: rgba(255, 255, 255, .74);
  border: 2px solid rgba(23, 54, 95, .28);
  box-shadow: 0 12px 28px rgba(25, 54, 89, .06);
}

.choice-button-message:hover,
.choice-button-message:focus-visible {
  color: var(--accent-deep);
  border-color: rgba(213, 58, 67, .42);
  box-shadow: 0 16px 34px rgba(213, 58, 67, .11);
}

.choice-button-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}

.choice-button-icon::before {
  content: "";
  width: 27px;
  height: 27px;
  display: block;
  background: currentColor;
  mask: var(--choice-button-icon-url) center / contain no-repeat;
  -webkit-mask: var(--choice-button-icon-url) center / contain no-repeat;
}

.choice-button-call .choice-button-icon {
  --choice-button-icon-url: url("../icons/calendar-check.svg");
  color: #fff;
}

.choice-button-message .choice-button-icon {
  --choice-button-icon-url: url("../icons/notes.svg");
  color: var(--accent);
}

.choice-button strong {
  font-size: 2rem;
  line-height: 1;
}

.choice-safe {
  margin-top: auto !important;
  color: #607398 !important;
  font-size: .9rem !important;
  font-weight: 700;
}

.choice-safe::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  margin-right: 12px;
  border: solid #18765b;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  vertical-align: 1px;
}

.cta-action-panel {
  display: grid;
  gap: 14px;
  margin: clamp(22px, 3vw, 34px) clamp(26px, 5vw, 64px) 0;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 250, 253, .84));
  border: 1px solid rgba(205, 216, 230, .68);
}

.cta-action-heading {
  display: grid;
  gap: 6px;
}

.cta-action-heading .label-top {
  color: var(--accent);
}

.cta-action-heading h3 {
  margin: 0;
  color: #092653;
  font-family: "Sora", sans-serif;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
  letter-spacing: -.03em;
}

.cta-action-form[data-contact-mode="message"] .booking-scheduler {
  display: none;
}

.cta-action-form[data-contact-mode="message"] .cta-action-heading .label-top {
  color: var(--accent);
}

.cta-action-form[data-contact-mode="message"] .btn-primary {
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: 0 14px 32px rgba(213, 58, 67, .22);
}

.choice-confidential {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(22px, 3vw, 32px) clamp(26px, 5vw, 64px);
  padding: 20px clamp(20px, 4vw, 34px);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(232, 239, 248, .72), rgba(255, 255, 255, .76));
}

.choice-confidential > span {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(9, 109, 255, .16), rgba(255, 255, 255, .62));
  position: relative;
}

.choice-confidential > span::before {
  content: "";
  position: absolute;
  inset: 15px 18px 16px;
  border: 4px solid #092653;
  border-radius: 18px 18px 20px 20px;
}

.choice-confidential > span::after {
  content: "";
  position: absolute;
  left: 28px;
  top: 25px;
  width: 8px;
  height: 14px;
  border: solid #092653;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.choice-confidential p {
  margin: 0;
  color: #18345f;
  line-height: 1.45;
}

.choice-confidential strong {
  color: #092653;
  font-family: "Sora", sans-serif;
}

.cta-action-form + .trust,
.cta-box > .trust {
  width: fit-content;
  margin: 0 auto clamp(22px, 4vw, 36px);
  color: #607398;
}

@media (max-width: 920px) {
  .booking-panel {
    grid-template-columns: 1fr;
  }

  .cta-hero-panel {
    grid-template-columns: 1fr;
  }

  .cta-visual {
    min-height: 280px;
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
  }

  .cta-choice-grid {
    grid-template-columns: 1fr;
  }

  .choice-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .cta-box {
    border-radius: 18px;
  }

  .cta-hero-panel,
  .cta-choice-section,
  .cta-action-panel,
  .choice-confidential {
    padding-inline: 18px;
  }

  .cta-hero-panel {
    padding-block: 28px;
  }

  .cta-hero-panel h2 {
    font-size: clamp(2.1rem, 12vw, 3rem);
  }

  .cta-visual {
    min-height: 318px;
    margin-top: 4px;
  }

  .process-board {
    right: 52px;
    width: 72%;
  }

  .process-list {
    top: 108px;
    width: 46%;
    min-height: 198px;
    padding-left: 40px;
  }

  .process-list span {
    margin-bottom: 22px;
  }

  .process-user {
    width: 62px;
    height: 62px;
  }

  .process-user::before {
    left: 24px;
    top: 17px;
    width: 14px;
    height: 14px;
  }

  .process-user::after {
    left: 18px;
    top: 35px;
    width: 26px;
    height: 18px;
  }

  .cta-choice-section {
    padding-top: 28px;
  }

  .choice-card {
    padding: 22px 20px;
  }

  .choice-button {
    min-height: 62px;
    grid-template-columns: 34px 1fr 20px;
    padding-inline: 16px;
    font-size: .95rem;
  }

  .choice-confidential {
    margin-inline: 18px;
    align-items: flex-start;
  }

  .booking-promise {
    grid-template-columns: 1fr;
  }

  .booking-promise span {
    min-height: auto;
  }

  .booking-slot-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .booking-slot-head strong {
    max-width: 100%;
  }

  .booking-slots {
    max-height: 460px;
    padding: 10px;
  }

  .booking-day {
    grid-template-columns: 1fr;
  }

  .booking-day-title {
    position: static;
    min-height: auto;
  }

  /* One slot per row on narrow screens. */
  .booking-slot-grid {
    grid-template-columns: 1fr;
  }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-form .cta-actions { justify-content: stretch; }
  .contact-form .btn { width: 100%; }
}

/* ── S1 · Connected-system hub (3×3 with Dee at the centre) ─ */
.hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 18px);
  max-width: 720px;
  margin: clamp(12px, 2vw, 28px) auto 0;
}
.hub-node {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-sm);
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.hub-node:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(213, 58, 67, .3); }
.hub-dot {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--sky), #6e9ec7);
}
.hub-core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: var(--radius-md);
  color: #fff;
  text-align: center;
  background: linear-gradient(150deg, var(--accent), var(--accent-deep));
  box-shadow: 0 18px 40px rgba(213, 58, 67, .3);
}
.hub-core-mark {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 7px;
  transform: rotate(45deg);
}
.hub-core-name { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.hub-core::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--radius-md) + 8px);
  border: 2px solid rgba(213, 58, 67, .4);
  opacity: 0;
}
.hub.visible .hub-core::after { animation: hub-pulse 2.8s var(--ease) infinite; }
@keyframes hub-pulse {
  0% { opacity: .5; transform: scale(.94); }
  70%, 100% { opacity: 0; transform: scale(1.12); }
}
.hub-text {
  max-width: 46ch;
  margin: clamp(20px, 3vw, 30px) auto 0;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: clamp(.98rem, 1.3vw, 1.12rem);
}
@media (max-width: 600px) {
  .hub { grid-template-columns: repeat(2, 1fr); }
  .hub-core { grid-column: 1 / -1; order: -1; padding: 24px; }
}

/* ── S2 · Benefit checklist ─────────────────────────────── */
.checklist {
  list-style: none;
  margin: clamp(8px, 2vw, 18px) auto 0;
  padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-weight: 700;
  font-size: .96rem;
  line-height: 1.4;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.check:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.check::before {
  content: "";
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: url("../icons/check-circle.svg") center / contain no-repeat;
  box-shadow: 0 6px 14px rgba(213, 58, 67, .25);
}
.value-close {
  max-width: 40ch;
  margin: clamp(20px, 3vw, 32px) auto 0;
  text-align: center;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--ink);
}
@media (max-width: 680px) { .checklist { grid-template-columns: 1fr; } }

/* ── S4 · Why it works (typographic) ────────────────────── */
.why-wrap { max-width: 760px; margin-inline: auto; text-align: center; }
.why-lead { margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.8; }
.why-emph {
  margin: clamp(18px, 2.4vw, 26px) 0 0;
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}
.why-close {
  margin: clamp(20px, 3vw, 30px) 0 0;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--accent-deep);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* Thai typography for the new headings */
html[lang="th"] .step-body h3,
html[lang="th"] .priv-card h3,
html[lang="th"] .cta-chip,
html[lang="th"] .hub-node,
html[lang="th"] .hub-core-name,
html[lang="th"] .check,
html[lang="th"] .value-close,
html[lang="th"] .why-close {
  font-family: "Noto Sans Thai", "Sora", "Segoe UI", sans-serif;
  letter-spacing: 0;
}

/* Reduced-motion behavior is defined in the critical page CSS so it is
   available before this deferred stylesheet finishes loading. */

/* ============================================================
   9. Process demo (.pd-*)  —  section #demo
   ------------------------------------------------------------
   LEFT  explanation rail: scenes blend in one by one; only what
         already ran or is running is on screen.
   RIGHT phone frame with the chat in two channel skins:
         .pd-studio (Studio app, rich) · .pd-wa (WhatsApp, plain)
   Driven by assets/js/demo-workflows.js.
   ============================================================ */
.pd {
  /* Studio app surface tokens (light) — mirrors the studio_ui
     light theme so the phone shows the real product look. */
  --pd-surface: #f2f2f5;
  --pd-bar: rgba(255, 255, 255, .8);
  --pd-raised: rgba(16, 16, 26, .05);
  --pd-line: rgba(16, 16, 26, .11);
  --pd-line-soft: rgba(16, 16, 26, .065);
  --pd-line-accent: rgba(229, 57, 53, .42);
  --pd-t1: rgba(14, 14, 20, .94);
  --pd-t2: rgba(14, 14, 20, .62);
  --pd-t3: rgba(14, 14, 20, .5);
  --pd-accent: #e53935;
  --pd-accent-dim: rgba(229, 57, 53, .14);
  --pd-accent-dim-2: rgba(229, 57, 53, .22);
  --pd-accent-text: #c62b27;
  --pd-ok: #16a34a;
  --pd-flow: #9333ea;
  --pd-flow-dim: rgba(168, 85, 247, .14);
  --pd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pd-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pd-ease: cubic-bezier(.4, 0, .2, 1);
}

.pd-i { width: 1em; height: 1em; flex: none; }

/* ── 9.1 Scenario picker ─────────────────────────────────── */
.pd-scnbar { display: flex; justify-content: center; margin-bottom: clamp(24px, 3vw, 40px); }
.pd-scn {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(23, 54, 95, .07);
  border: 1px solid rgba(23, 54, 95, .1);
}
.pd-scn button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 700 .86rem "Manrope", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background .3s var(--pd-ease), color .3s var(--pd-ease), box-shadow .3s var(--pd-ease);
}
.pd-scn button .pd-i { font-size: 16px; }
.pd-scn button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(23, 54, 95, .16); }
.pd-scn button.on .pd-i { color: var(--accent); }

/* ── 9.2 Stage ───────────────────────────────────────────── */
.pd-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
  max-width: 980px;
  margin-inline: auto;
}

/* ── 9.3 Explanation rail ────────────────────────────────── */
.pd-rail { position: relative; padding-left: 4px; transition: opacity .35s var(--pd-ease); }
.pd-rail.swap { opacity: 0; }

/* A scene lives in a slot that blends in (height + fade) the
   moment it starts running. Upcoming scenes are not rendered. */
/* Scenes are listed from the start, like a table of contents, and each one
   expands as the run reaches it. They used to be fully collapsed until
   played — which was invisible while the demo auto-started, but left the
   whole left column blank now that playback waits for the reader.

   Nothing here dims the resting state: .pd-tag and .pd-scene-title already
   carry their own "not yet reached" opacity, and stacking a third layer of
   transparency on top of those made the titles unreadable. */
.pd-slot {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
  transition: grid-template-rows .8s var(--pd-ease), opacity .8s var(--pd-ease), transform .8s var(--pd-ease);
}
.pd-slot > div { overflow: hidden; min-height: 0; }
.pd-slot.on { grid-template-rows: 1fr; opacity: 1; transform: none; }
/* Clipping is only needed while the slot animates — dropping it
   afterwards keeps badges and text from ever being cut off. */
.pd-slot.settled { grid-template-rows: none; }
.pd-slot.settled > div,
.pd-slot.settled .pd-exp > div { overflow: visible; }
.pd-slot.settled .pd-exp { grid-template-rows: none; }

.pd-item {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding-bottom: 12px;
}
.pd-line {
  position: absolute;
  left: 23px;
  top: 44px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: rgba(23, 54, 95, .12);
  overflow: hidden;
  opacity: 0;
  transition: opacity .8s var(--pd-ease);
}
/* Only a finished scene connects down to the next visible one. */
.pd-item.done .pd-line { opacity: 1; }
.pd-slot:last-child .pd-line { display: none; }
.pd-line i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--accent), #f08a6f);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s var(--pd-ease);
}
.pd-item.done .pd-line i { transform: scaleY(1); }

/* The scene point doubles as a seek control, so it is a real <button>.
   The resets below undo the UA button defaults; everything visual is
   unchanged from when this was a <span>. */
.pd-ico {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #fff;
  color: var(--ink-soft);
  border: 1.5px solid rgba(23, 54, 95, .14);
  box-shadow: 0 2px 8px rgba(23, 54, 95, .06);
  font-size: 21px;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .8s var(--pd-ease), color .8s var(--pd-ease), border-color .8s var(--pd-ease), box-shadow .8s var(--pd-ease), transform .2s var(--pd-ease);
}

/* Hover and focus want to feel immediate, so they override the slow
   colour transition inherited from the playback states above. */
.pd-ico:hover {
  transform: scale(1.08);
  border-color: rgba(213, 58, 67, .45);
  color: var(--accent);
  box-shadow: 0 6px 16px rgba(213, 58, 67, .18);
  transition: transform .18s var(--pd-ease), border-color .18s var(--pd-ease), color .18s var(--pd-ease), box-shadow .18s var(--pd-ease);
}

.pd-ico:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.pd-ico:active { transform: scale(.96); }

/* Not yet reached: still drawn by the playback states, but not a target. */
.pd-ico:disabled {
  cursor: default;
  transform: none;
}
.pd-item.active .pd-ico {
  background: linear-gradient(135deg, var(--accent), #f08a6f);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(213, 58, 67, .32);
}
.pd-item.done .pd-ico { background: #fff; color: var(--accent); border-color: rgba(213, 58, 67, .3); }
.pd-item.done .pd-ico::after {
  content: "";
  position: absolute;
  right: -5px;
  top: -5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent) center / 11px 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  animation: pd-check-in .5s var(--pd-spring);
}
@keyframes pd-check-in { from { opacity: 0; transform: scale(.4); } }

.pd-body { padding-top: 2px; min-width: 0; transition: opacity .9s var(--pd-ease); }
.pd-item.done .pd-body { opacity: .62; }
.pd-tag {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .65;
  transition: color .7s var(--pd-ease), opacity .7s var(--pd-ease);
}
.pd-item.active .pd-tag { color: var(--accent); opacity: 1; }
.pd-scene-title {
  margin: 2px 0 0;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
  opacity: .55;
  transition: opacity .7s var(--pd-ease);
}
.pd-item.active .pd-scene-title,
.pd-item.done .pd-scene-title { opacity: 1; }

/* The explanation expands once and then stays open. */
.pd-exp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .9s var(--pd-ease); }
.pd-item.active .pd-exp,
.pd-item.done .pd-exp { grid-template-rows: 1fr; }
.pd-exp > div { overflow: hidden; }
.pd-text {
  margin: 7px 0 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.58;
  opacity: 0;
  transition: opacity 1s var(--pd-ease) .15s;
}
.pd-item.active .pd-text,
.pd-item.done .pd-text { opacity: 1; }

.pd-notes { margin: 9px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.pd-notes:empty { margin: 0; }
.pd-note {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(23, 54, 95, .12);
  box-shadow: 0 1px 5px rgba(23, 54, 95, .05);
  color: var(--ink);
  font-size: .8rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .7s var(--pd-ease), transform .7s var(--pd-ease);
}
.pd-note.show { opacity: 1; transform: none; }
.pd-note .pd-i { font-size: 15px; color: var(--accent); }
.pd-note.good .pd-i { color: var(--pd-ok); }

/* ── 9.4 Phone ───────────────────────────────────────────── */
.pd-col {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pd-skin {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: rgba(23, 54, 95, .07);
  border: 1px solid rgba(23, 54, 95, .1);
}
.pd-skin button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 700 .8rem "Manrope", "Segoe UI", sans-serif;
  cursor: pointer;
  transition: background .25s var(--pd-ease), color .25s var(--pd-ease), box-shadow .25s var(--pd-ease);
}
.pd-skin button .pd-i { font-size: 16px; }
.pd-skin button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(23, 54, 95, .14); }
.pd-skin button[data-skin="studio"].on .pd-i { color: var(--accent); }
.pd-skin button[data-skin="wa"].on .pd-i { color: #1faa54; }
.pd-skinnote {
  margin: -2px 0 0;
  max-width: 300px;
  min-height: 2.4em;
  text-align: center;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.pd-phone {
  position: relative;
  /* Fixed size on desktop, but never wider than a narrow phone screen. */
  width: min(300px, 100%);
  height: 596px;
  padding: 9px;
  border-radius: 42px;
  background: #0d0f14;
  box-shadow: 0 4px 12px rgba(23, 54, 95, .18), 0 34px 70px -18px rgba(23, 54, 95, .42), inset 0 0 0 2px #2a2e38;
}
.pd-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  overflow: hidden;
  background: var(--pd-surface);
  font-family: "Manrope", "Segoe UI", sans-serif;
  transition: opacity .3s var(--pd-ease);
}
.pd-screen.swap { opacity: 0; }
.pd-notch {
  position: absolute;
  z-index: 30;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 22px;
  border-radius: 12px;
  background: #0d0f14;
}
.pd-status {
  position: relative;
  z-index: 10;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 22px 4px;
  font-size: 11px;
  font-weight: 600;
}
.pd-status .ic { display: inline-flex; gap: 4px; font-size: 12px; }
.pd-head {
  position: relative;
  z-index: 10;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 10px;
}
.pd-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.pd-hname { font-size: 13.5px; font-weight: 700; line-height: 1.15; }
.pd-hsub { font-size: 10.5px; opacity: .72; }
.pd-hic { margin-left: auto; display: inline-flex; gap: 14px; font-size: 17px; opacity: .8; }
.pd-chat {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 10px 12px;
  scrollbar-width: none;
}
.pd-chat::-webkit-scrollbar { display: none; }
.pd-input { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 14px; }
.pd-input .field {
  flex: 1;
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
}
.pd-input .send {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
}

/* ── 9.5 Messages (structure shared by both skins) ───────── */
.pd-row {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  /* Message bubbles used to arrive in .45s while everything around them —
     rail rows .8s, body .9s, expanders .9s — moved at roughly twice that.
     The bubbles read as snapping in against a calm background, which is
     what made the demo feel rushed even after the gaps were lengthened. */
  transition: opacity .8s var(--pd-ease), transform .8s var(--pd-spring);
}
.pd-row.show { opacity: 1; transform: none; }
.pd-row.in { align-self: flex-start; align-items: flex-start; }
.pd-row.out { align-self: flex-end; align-items: flex-end; }
.pd-row.gap { margin-top: 7px; }
.pd-bubble {
  position: relative;
  padding: 7px 11px;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.pd-bubble b { font-weight: 700; }
.pd-meta { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 9px; }
.pd-sys {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 88%;
  margin: 6px 0;
  padding: 4px 11px;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  /* Matched to the bubbles above for the same reason. */
  transition: opacity .8s var(--pd-ease), transform .8s var(--pd-ease);
}
.pd-sys.show { opacity: 1; transform: none; }
.pd-sys .pd-i { font-size: 13px; }
.pd-typing { display: inline-flex; gap: 3px; padding: 8px 2px 4px; }
.pd-typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
  animation: pd-typing 1s ease infinite;
}
.pd-typing i:nth-child(2) { animation-delay: .15s; }
.pd-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pd-typing { 30% { transform: translateY(-3px); opacity: 1; } }
.pd-card { margin: 6px 0 4px; padding: 7px 9px; border-radius: 8px; font-size: 11.5px; }
.pd-card div { display: flex; gap: 6px; padding: 1.5px 0; }
.pd-card .pd-i { font-size: 13px; margin-top: 1px; }

/* ── 9.6 Skin: Studio app ────────────────────────────────── */
.pd-screen.pd-studio {
  background:
    radial-gradient(500px 320px at 80% -5%, rgba(229, 57, 53, .07), transparent 60%),
    var(--pd-surface);
  color: var(--pd-t1);
}
.pd-studio .pd-status { color: var(--pd-t1); }
.pd-studio .pd-head { background: var(--pd-bar); border-bottom: 1px solid var(--pd-line-soft); }
.pd-studio .pd-avatar {
  border-radius: 10px;
  background: var(--pd-accent-dim);
  border: 1px solid var(--pd-line-accent);
  color: var(--pd-accent-text);
}
.pd-studio .pd-hname { color: var(--pd-t1); }
.pd-studio .pd-hsub { color: var(--pd-t3); }
.pd-studio .pd-hic { color: var(--pd-t2); }
.pd-studio .pd-row.in .pd-bubble {
  background: #fff;
  border: 1px solid var(--pd-line-soft);
  border-radius: 12px 12px 12px 4px;
  color: var(--pd-t1);
  box-shadow: 0 1px 3px rgba(16, 16, 26, .05);
}
.pd-studio .pd-row.out .pd-bubble {
  background: var(--pd-accent-dim-2);
  border: 1px solid var(--pd-line-accent);
  border-radius: 12px 12px 4px 12px;
  color: var(--pd-t1);
}
.pd-studio .pd-meta { color: var(--pd-t3); font-family: var(--pd-mono); }
.pd-studio .pd-sender { padding: 0 6px 2px; font-size: 9.5px; font-weight: 700; color: var(--pd-accent-text); }
.pd-studio .pd-sys {
  background: var(--pd-flow-dim);
  color: var(--pd-flow);
  font-family: var(--pd-mono);
  font-size: 9.5px;
}
.pd-studio .pd-sys.plain {
  background: var(--pd-raised);
  border: 1px solid var(--pd-line-soft);
  color: var(--pd-t2);
  font-family: inherit;
  font-size: 10px;
}
.pd-studio .pd-typing { color: var(--pd-t3); }
.pd-studio .pd-card { background: rgba(16, 16, 26, .045); border: 1px solid var(--pd-line-soft); }
.pd-studio .pd-card .pd-i { color: var(--pd-accent-text); }
.pd-studio .pd-input { background: var(--pd-bar); border-top: 1px solid var(--pd-line-soft); }
.pd-studio .pd-input .field { background: rgba(16, 16, 26, .05); border: 1px solid var(--pd-line-soft); color: var(--pd-t3); }
.pd-studio .pd-input .send { background: var(--pd-accent); }

/* ── 9.7 Skin: WhatsApp ──────────────────────────────────── */
.pd-screen.pd-wa {
  background: var(--wa-bg) url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9bfb2' fill-opacity='0.28'%3E%3Ccircle cx='10' cy='12' r='1.4'/%3E%3Ccircle cx='42' cy='8' r='1'/%3E%3Ccircle cx='28' cy='30' r='1.2'/%3E%3Ccircle cx='52' cy='40' r='1.4'/%3E%3Ccircle cx='14' cy='48' r='1'/%3E%3C/g%3E%3C/svg%3E");
  color: #111b21;
}
.pd-wa .pd-status { background: #0f7060; color: #fff; }
.pd-wa .pd-head { background: var(--wa-head); color: #fff; }
.pd-wa .pd-avatar { background: #fff; color: var(--wa-head); }
.pd-wa .pd-hsub { color: rgba(255, 255, 255, .85); }
.pd-wa .pd-hic { color: #fff; }
.pd-wa .pd-row.in .pd-bubble {
  background: var(--wa-in);
  border-radius: 9px;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.pd-wa .pd-row.in .pd-bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  border: 6px solid transparent;
  border-top-color: var(--wa-in);
  border-right-color: var(--wa-in);
}
.pd-wa .pd-row.out .pd-bubble {
  background: var(--wa-out);
  border-radius: 9px;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.pd-wa .pd-row.out .pd-bubble::before {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  border: 6px solid transparent;
  border-top-color: var(--wa-out);
  border-left-color: var(--wa-out);
}
.pd-wa .pd-meta { color: #667781; }
.pd-wa .pd-ticks { color: #53bdeb; font-size: 11px; letter-spacing: -3px; }
.pd-wa .pd-sender { display: none; }
.pd-wa .pd-sys { background: #fdf3d3; color: #54656f; border-radius: 7px; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); }
.pd-wa .pd-typing { color: #667781; }
.pd-wa .pd-input { background: #f0f2f5; }
.pd-wa .pd-input .field { background: #fff; color: #8696a0; }
.pd-wa .pd-input .send { background: #1faa54; }

/* ── 9.8 Controls ────────────────────────────────────────── */
/* Left column: controls first, then the scene rail they drive. */
.pd-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pd-ctl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(23, 54, 95, .09);
  box-shadow: 0 6px 18px rgba(25, 54, 89, .05);
  /* Keeps the pill hugging its buttons instead of stretching the column. */
  align-self: start;
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border: 1px solid rgba(23, 54, 95, .16);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 .78rem "Manrope", "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: 0 1px 5px rgba(23, 54, 95, .06);
  transition: border-color .2s var(--pd-ease), color .2s var(--pd-ease), filter .2s var(--pd-ease);
}
.pd-btn:hover { border-color: rgba(213, 58, 67, .4); color: var(--accent); }
.pd-btn[disabled] { opacity: .45; cursor: default; }
.pd-btn[disabled]:hover { border-color: rgba(23, 54, 95, .16); color: var(--ink); }
.pd-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
.pd-btn.primary:hover { filter: brightness(1.07); color: #fff; }
.pd-btn .pd-i,
.pd-btn .pd-ico-slot { font-size: 15px; display: inline-flex; }
.pd-simchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(217, 119, 6, .3);
  background: rgba(245, 158, 11, .1);
  color: #b45309;
  font: 700 .68rem "Manrope", "Segoe UI", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pd-simchip .pd-i { font-size: 14px; }

/* ── 9.9 Thai + responsive ───────────────────────────────── */
html[lang="th"] .pd-scene-title,
html[lang="th"] .pd-tag {
  font-family: "Noto Sans Thai", "Sora", "Segoe UI", sans-serif;
  letter-spacing: 0;
}
html[lang="th"] .pd-bubble,
html[lang="th"] .pd-note,
html[lang="th"] .pd-sys { line-height: 1.65; }

@media (max-width: 860px) {
  .pd-wrap { grid-template-columns: 1fr; }
  .pd-col { position: static; order: -1; }
  .pd-text { max-width: none; }
}

/* Gated on .reduce-motion — see the motion policy script in index.html. */
.reduce-motion .pd-row,
.reduce-motion .pd-sys,
.reduce-motion .pd-note,
.reduce-motion .pd-exp,
.reduce-motion .pd-slot,
.reduce-motion .pd-line i,
.reduce-motion .pd-body,
.reduce-motion .pd-text,
.reduce-motion .pd-ico { transition: none; }
.reduce-motion .pd-item.done .pd-ico::after { animation: none; }
.reduce-motion .pd-typing i { animation: none; }