/* ==========================================================================
   SORZIA — experience.css
   --------------------------------------------------------------------------
   Everything below the hero, the Ask control, and the Ask SORZIA page.

   Loaded after pages.css and before mobile.css, so the phone layer can still
   override it. Palette, background and the Optical Destiny Lens are locked —
   nothing here introduces a colour that is not already a token.
   ========================================================================== */

/* ==========================================================================
   0. Effect layer rule
   --------------------------------------------------------------------------
   A surface may clip its CONTENT. It must never clip its LIGHT. Anything
   that glows, orbits or travels lives outside the clipping box.
   ========================================================================== */
.fx {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* The medallion keeps overflow:hidden so its sweep stays inside the disc.
   That never clipped the glow in the first place — box-shadow is painted
   outside the border box and is not affected by the element's own overflow.
   Clipping the sweep with clip-path instead produced a grey blob offset to
   the left of every icon, because the pseudo-element's box starts at -70%. */
.medallion { overflow: hidden; }

/* Editorial cards clip the visual, not the card. */
.article-card.stacked { overflow: visible; }
.article-card.stacked .article-thumb { overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.viz-field { overflow: visible; }

/* The instrument SVGs are square (a circular dial, a grid). Forcing them
   into a wide thumbnail with preserveAspectRatio="slice" cropped the wheel
   and the Nadi lines at the edges. "meet" keeps the whole instrument in
   frame; this backdrop keeps the letterboxed space around it atmospheric
   instead of flat and empty. */
.article-thumb.viz-field {
  background:
    radial-gradient(64% 70% at 50% 42%, rgba(98, 85, 199, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(10, 17, 30, 0.5), rgba(4, 8, 17, 0.66));
}

/* ==========================================================================
   1. Segmented control — replaces outlined pill filters
   ========================================================================== */
.segmented {
  position: relative;
  display: flex;
  gap: 0;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(10, 17, 30, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.06),
    0 10px 26px -22px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.segmented::-webkit-scrollbar { display: none; }

/* The elevated capsule that glides between options. */
.segmented-thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  border: 1px solid rgba(231, 201, 125, 0.30);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.22),
    0 6px 16px -10px rgba(0, 0, 0, 0.9);
  transition:
    transform 420ms var(--ease-premium),
    width 420ms var(--ease-premium);
  pointer-events: none;
  z-index: 0;
}

/* the small gold light under the selected item */
.segmented-thumb::after {
  content: "";
  position: absolute;
  left: 24%;
  right: 24%;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  box-shadow: 0 0 10px rgba(212, 173, 89, 0.8);
}

.segmented .seg-item {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.56rem 0.95rem;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-size: var(--step--1);
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-dim);
  transition: color var(--dur-state) var(--ease-premium);
}

.segmented .seg-item .icon { width: 15px; height: 15px; opacity: 0.75; transition: opacity var(--dur-state) var(--ease-premium); }
.segmented .seg-item:hover { color: var(--text-muted); }

.segmented .seg-item[aria-pressed="true"],
.segmented .seg-item[aria-selected="true"] { color: var(--ivory); }

.segmented .seg-item[aria-pressed="true"] .icon,
.segmented .seg-item[aria-selected="true"] .icon { opacity: 1; color: var(--gold-bright); }

/* ==========================================================================
   2. Floating Ask control
   ========================================================================== */
.ask-dock {
  position: fixed;
  left: max(24px, env(safe-area-inset-left));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem 0.6rem 0.75rem;
  /* organic, not a rectangle: a soft cloud silhouette */
  border-radius: 40% 60% 58% 42% / 62% 44% 56% 38%;
  color: var(--ivory);
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: rgba(10, 17, 30, 0.62);
  border: 1px solid rgba(212, 173, 89, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.10),
    0 10px 30px -14px rgba(0, 0, 0, 0.95),
    0 0 26px -16px rgba(212, 173, 89, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  animation: askFloat 7s var(--ease) infinite;
  transition:
    transform var(--dur-state) var(--ease-premium),
    border-color var(--dur-state) var(--ease-premium),
    box-shadow var(--dur-state) var(--ease-premium),
    opacity 280ms var(--ease-premium);
}

@keyframes askFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* Yields to whatever is actually under it right now — the footer, a CTA
   band, or just a paragraph the page has scrolled to. Fixed positioning
   means this never shifts surrounding layout either way. */
.ask-dock.is-yielding {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.ask-dock .ask-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  color: var(--gold-bright);
  background: radial-gradient(circle at 50% 35%, rgba(231, 201, 125, 0.24), transparent 70%);
  transition: transform var(--dur-state) var(--ease-spring);
}

.ask-dock .ask-mark .icon { width: 15px; height: 15px; }

.ask-dock:hover {
  transform: translateY(-2px);
  border-color: rgba(231, 201, 125, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.16),
    0 14px 34px -14px rgba(0, 0, 0, 0.95),
    0 0 40px -14px rgba(212, 173, 89, 0.85);
}

.ask-dock:hover .ask-mark { transform: rotate(22deg) scale(1.08); }
.ask-dock:active { transform: translateY(0) scale(0.97); }

@media (max-width: 899px) {
  .ask-dock {
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 0.5rem 0.85rem 0.5rem 0.6rem;
    font-size: var(--step--2);
  }

  .ask-dock .ask-label-long { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-dock { animation: none; transition: none; }
  .ask-dock.is-yielding { transform: none; }
}

/* ==========================================================================
   3. SECTION A — the Intelligence Field
   --------------------------------------------------------------------------
   One panoramic field instead of three cards: the three systems read
   independently, then their light converges into a single synthesis node.
   ========================================================================== */
.field {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(80% 60% at 50% 8%, rgba(98, 85, 199, 0.13), transparent 70%),
    radial-gradient(50% 46% at 50% 96%, rgba(212, 173, 89, 0.10), transparent 72%),
    linear-gradient(180deg, rgba(10, 17, 30, 0.62), rgba(4, 8, 17, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.06);
  overflow: visible;
}

.field-lanes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.4vw, 2rem);
}

.field-lane { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }

.field-lane .viz {
  width: min(100%, 190px);
  aspect-ratio: 1;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 52%, transparent 100%);
}

.field-lane h3 { font-size: var(--step-1); margin-top: 0.2rem; }
.field-lane p { font-size: var(--step--1); color: var(--text-dim); max-width: 26ch; line-height: 1.45; }

.field-lane .lane-tag {
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-mid);
}

/* the convergence drawing sits behind the synthesis node */
.field-converge {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: clamp(90px, 12vw, 150px);
  margin-top: -0.5rem;
  overflow: visible;
}

.converge-path {
  fill: none;
  stroke: url(#fieldFlow);
  stroke-width: 1.4;
  opacity: 0.5;
}

.converge-pulse {
  fill: none;
  stroke: var(--gold-lift);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 14 100;
  stroke-dashoffset: 114;
  animation: convergeFlow 5.4s linear infinite;
  animation-delay: var(--d, 0s);
}

@keyframes convergeFlow {
  0%   { stroke-dashoffset: 114; opacity: 0; }
  14%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { stroke-dashoffset: 14;  opacity: 0; }
}

.field-core {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  text-align: center;
  margin-top: -0.4rem;
}

.field-core-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(64px, 9vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--gold-lift);
  font-size: 26px;
  background: radial-gradient(circle at 50% 42%, rgba(242, 222, 172, 0.22), rgba(4, 8, 17, 0.5) 70%);
  border: 1px solid rgba(231, 201, 125, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 235, 0.2),
    0 0 46px -12px rgba(212, 173, 89, 0.85);
  animation: coreBeat 6s var(--ease) infinite;
}

@keyframes coreBeat {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,250,235,.2), 0 0 40px -16px rgba(212,173,89,.7); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,250,235,.3), 0 0 62px -8px rgba(212,173,89,1); }
}

.field-core strong {
  font-size: var(--step-1);
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.field-core span { font-size: var(--step--1); color: var(--text-muted); max-width: 40ch; }

/* ==========================================================================
   4. SECTION B — the process rail
   ========================================================================== */
.rail { position: relative; }

.rail-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 173, 89, 0.28) 12%, rgba(212, 173, 89, 0.28) 88%, transparent);
}

.rail-line::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 84px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-lift), transparent);
  box-shadow: 0 0 16px 2px rgba(242, 222, 172, 0.55);
  animation: railSignal 12s linear infinite;
}

/* Travels within the rail, not across the viewport. translateX(100vw)
   pushed the document ~95px wider than the screen on phones. */
@keyframes railSignal {
  0%   { left: 0;                   opacity: 0; }
  6%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: calc(100% - 84px);   opacity: 0; }
}

.rail-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1.25rem);
}

.rail-step { display: grid; justify-items: center; text-align: center; gap: 0.45rem; }

.rail-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--gold-mid);
  font-size: 21px;
  background: radial-gradient(circle at 50% 36%, rgba(98, 85, 199, 0.22), rgba(4, 8, 17, 0.85) 72%);
  border: 1px solid rgba(212, 173, 89, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.09);
  animation: railWake 12s var(--ease-premium) infinite;
  animation-delay: calc(var(--s, 0) * 2.2s);
}

@keyframes railWake {
  0%, 26%, 100% {
    color: var(--gold-mid);
    border-color: rgba(212, 173, 89, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.09);
    transform: scale(1);
  }
  6%, 18% {
    color: var(--gold-lift);
    border-color: rgba(231, 201, 125, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.24), 0 0 34px -8px rgba(212, 173, 89, 0.95);
    transform: scale(1.07);
  }
}

/* Without an explicit grid the label, title and description ran together
   as one inline sentence: "STAGE 1 Question You bring one focused question." */
.rail-step .rail-copy { display: grid; gap: 0.14rem; justify-items: center; }

.rail-step strong { font-size: var(--step-0); font-weight: 600; color: var(--ivory); }
.rail-step span { font-size: var(--step--1); line-height: 1.4; color: var(--text-dim); max-width: 22ch; }

.rail-step .step-no {
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  color: var(--gold-mid);
  opacity: 0.75;
}

/* ==========================================================================
   5. SECTION C — questions in orbit
   --------------------------------------------------------------------------
   Five questions held at fixed pentagon seats around the core, each linked
   to it by a static spoke line. The ring is the layout — there is no open
   space left for the eye to fall into.
   ========================================================================== */
.qorbit {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1.75rem, 4.4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(98, 85, 199, 0.13), transparent 72%),
    linear-gradient(180deg, rgba(10, 17, 30, 0.56), rgba(4, 8, 17, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.06);
}

.qfield {
  position: relative;
  aspect-ratio: 1 / 0.82;
  max-height: 460px;
  margin-inline: auto;
}

.qfield-spokes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.qspoke {
  stroke: rgba(212, 173, 89, 0.26);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  transition: stroke 700ms var(--ease-premium), opacity 700ms var(--ease-premium);
  opacity: 0.55;
}

.qspoke.is-live {
  stroke: var(--gold-lift);
  opacity: 1;
  animation: spokePulse 1.6s var(--ease) infinite;
}

@keyframes spokePulse { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }

.qfield-core {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(96px, 13vw, 136px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--gold-bright);
  background:
    radial-gradient(circle at 50% 40%, rgba(242, 222, 172, 0.18), transparent 68%),
    radial-gradient(circle at 50% 50%, rgba(98, 85, 199, 0.18), rgba(4, 8, 17, 0.7) 74%);
  border: 1px solid rgba(212, 173, 89, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.14), 0 0 60px -18px rgba(212, 173, 89, 0.9);
}

.qfield-core .icon { width: 34%; height: 34%; }

.qfield-core::before,
.qfield-core::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(212, 173, 89, 0.22);
  animation: qSpin 46s linear infinite;
}

.qfield-core::before { inset: -16px; }
.qfield-core::after { inset: -32px; border-style: solid; border-color: rgba(212, 173, 89, 0.10); animation-duration: 70s; animation-direction: reverse; }

@keyframes qSpin { to { transform: rotate(360deg); } }

.qprompt {
  position: absolute;
  z-index: 1;
  top: var(--t);
  left: var(--l);
  width: clamp(9.5rem, 15vw, 11.5rem);
  padding: 0.65rem 0.85rem;
  border-radius: var(--r-md);
  font-size: var(--step--2);
  line-height: 1.42;
  color: var(--text-muted);
  background: rgba(10, 17, 30, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0.4;
  transition:
    opacity 700ms var(--ease-premium),
    color 700ms var(--ease-premium),
    border-color 700ms var(--ease-premium),
    box-shadow 700ms var(--ease-premium),
    transform 700ms var(--ease-premium);
}

.qprompt.is-live {
  opacity: 1;
  color: var(--ivory);
  border-color: rgba(231, 201, 125, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.14), 0 0 34px -12px rgba(212, 173, 89, 0.8);
}

.qdots { display: flex; justify-content: center; gap: 0.45rem; margin-top: clamp(1rem, 3vw, 1.5rem); }

.qdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  transition: background 700ms var(--ease-premium), box-shadow 700ms var(--ease-premium), transform 700ms var(--ease-premium);
}

.qdot.is-active {
  background: var(--gold-bright);
  box-shadow: 0 0 8px rgba(212, 173, 89, 0.8);
  transform: scale(1.35);
}

/* ==========================================================================
   6. SECTION D — editorial insights
   --------------------------------------------------------------------------
   Instrument visuals sit inside a radial mask (a circular window onto a
   square viewBox), never a cropped rectangle — this is what removes the
   clipped-off wheel/lines/grid the banner-slice treatment produced.
   ========================================================================== */
.editorial {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  /* start, not stretch: the supporting-video count is DB-driven (0-2 items
     plus the "view every video" row), so a fixed row template would leave a
     dead gap in the feature card when fewer than 2 supporting videos exist.
     Each column sizes to its own content instead. */
  align-items: start;
}

.feature-story {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  background:
    radial-gradient(65% 70% at 84% 6%, rgba(98, 85, 199, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(10, 17, 30, 0.6), rgba(4, 8, 17, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.06);
  transition: border-color var(--dur-state) var(--ease-premium), transform var(--dur-state) var(--ease-premium);
}

.feature-story:hover { transform: translateY(-2px); border-color: rgba(212, 173, 89, 0.24); }

.feature-visual { position: relative; display: grid; place-items: center; padding-top: clamp(1.5rem, 4vw, 2.25rem); }

.feature-medallion { position: relative; width: min(52%, 200px); aspect-ratio: 1; }

.feature-medallion .viz {
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
}

.feature-body {
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2rem);
  display: grid;
  align-content: end;
  gap: 0.5rem;
}

.feature-body .meta { order: -1; }
.feature-body h3 { font-size: var(--step-2); line-height: 1.25; }
.feature-body p { font-size: var(--step-0); line-height: 1.55; color: var(--text-muted); max-width: 46ch; }

.feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-bright);
}

.feature-cta .icon { width: 14px; height: 14px; transition: transform var(--dur-state) var(--ease-premium); }
.feature-story:hover .feature-cta .icon { transform: translateX(3px); }

.index-list { display: grid; gap: 0.6rem; }

.index-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: clamp(0.85rem, 2vw, 1.1rem);
  border-radius: var(--r-lg);
  text-decoration: none;
  background: rgba(10, 17, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: border-color var(--dur-state) var(--ease-premium), background var(--dur-state) var(--ease-premium), transform var(--dur-state) var(--ease-premium);
}

.index-row:hover { border-color: rgba(212, 173, 89, 0.28); background: rgba(10, 17, 30, 0.72); transform: translateX(2px); }

.index-medallion { position: relative; width: 50px; aspect-ratio: 1; flex: none; }

.index-medallion .viz {
  width: 100%;
  height: 100%;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 50%, #000 58%, transparent 100%);
}

.index-more-mark {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  color: var(--gold-bright);
  background: radial-gradient(circle at 50% 40%, rgba(242, 222, 172, 0.16), transparent 70%);
  border: 1px solid rgba(212, 173, 89, 0.28);
}

.index-more-mark .icon { width: 18px; height: 18px; }

.index-body { display: grid; gap: 0.2rem; min-width: 0; }
.index-body .meta { font-size: var(--step--2); }
.index-body h3 { font-size: var(--step-0); line-height: 1.35; transition: color var(--dur-state) var(--ease-premium); }
.index-row:hover h3 { color: var(--gold-bright); }
.index-row-more h3 { color: var(--ivory); }
.index-row-more .meta { color: var(--text-dim); }

.index-arrow { width: 15px; height: 15px; color: var(--text-dim); transition: transform var(--dur-state) var(--ease-premium), color var(--dur-state) var(--ease-premium); }
.index-row:hover .index-arrow { color: var(--gold-bright); transform: translateX(2px); }

/* ==========================================================================
   7. SECTION E — the Ask gateway
   --------------------------------------------------------------------------
   Content-clip and effect-layer are separate elements: .gateway-bg clips the
   background wash to the card's rounded corners; .gateway-fx is never
   clipped, so the rings and travelling spark can bleed past the edge.
   ========================================================================== */
.gateway {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.gateway-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    radial-gradient(46% 80% at 88% 50%, rgba(212, 173, 89, 0.18), transparent 68%),
    radial-gradient(60% 90% at 8% 8%, rgba(98, 85, 199, 0.18), transparent 66%),
    linear-gradient(180deg, rgba(10, 17, 30, 0.62), rgba(4, 8, 17, 0.88));
}

.gateway-fx {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: min(46%, 360px);
  aspect-ratio: 1;
  pointer-events: none;
  overflow: visible;
}

.gring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(212, 173, 89, 0.22); }
.gring-1 { animation: gSpin 80s linear infinite; }
.gring-2 { inset: 13%; border-color: rgba(212, 173, 89, 0.16); animation: gSpin 54s linear infinite reverse; }
.gring-3 { inset: 27%; border-style: dashed; border-color: rgba(231, 201, 125, 0.3); animation: gSpin 34s linear infinite; }

@keyframes gSpin { to { transform: rotate(360deg); } }

.gspark { position: absolute; inset: 0; animation: gSpin 34s linear infinite; }

.gspark::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--gold-lift);
  box-shadow: 0 0 18px 3px rgba(212, 173, 89, 0.85);
}

.gcore {
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(242, 222, 172, 0.5), rgba(98, 85, 199, 0.16) 68%, transparent 72%);
  box-shadow: 0 0 60px -6px rgba(212, 173, 89, 0.8);
  animation: coreBeat 6s var(--ease) infinite;
}

.gateway-copy { position: relative; z-index: 1; }
.gateway-copy .eyebrow { justify-self: start; }
.gateway h2 { font-size: var(--step-4); max-width: 15ch; letter-spacing: -0.02em; }
.gateway p { margin-top: 0.6rem; max-width: 46ch; color: var(--text-muted); }
.gateway .btn-row { margin-top: var(--sp-3); justify-content: flex-start; }
.gateway .fineprint { margin-top: 0.6rem; font-size: var(--step--1); color: var(--text-dim); }

/* ==========================================================================
   8. ASK SORZIA page
   ========================================================================== */
.ask-hero { position: relative; text-align: center; padding-block: clamp(1.75rem, 5vw, 3.25rem) clamp(1.25rem, 3vw, 2rem); }

.ask-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(212, 173, 89, 0.09);
  border: 1px solid rgba(212, 173, 89, 0.26);
}

.ask-hero h1 { margin-top: var(--sp-3); letter-spacing: -0.03em; }
.ask-hero .ask-sub { font-size: var(--step-2); color: var(--gold-bright); margin-top: 0.45rem; font-weight: 500; }
.ask-hero .lede { margin-inline: auto; margin-top: var(--sp-3); }

/* emphasis lines, used sparingly */
.emphasis-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: var(--sp-4);
}

.emphasis-row span {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.emphasis-row span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 1.5rem;
  border-radius: 50%;
  background: var(--gold-deep);
  vertical-align: middle;
}

/* ---- Question coach ---------------------------------------------------- */
.coach-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.coach {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 1.05rem 1.15rem;
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(231, 201, 125, 0.035), transparent 60%), rgba(10, 17, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.coach-row { display: grid; gap: 0.2rem; }

.coach-label {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.coach-weak .coach-label { color: var(--text-dim); }
.coach-strong .coach-label { color: var(--gold-bright); }

.coach-weak q { color: var(--text-dim); font-size: var(--step-0); text-decoration: line-through; text-decoration-color: rgba(175, 168, 157, 0.4); }
.coach-strong q { color: var(--ivory); font-size: var(--step-0); line-height: 1.45; }

.coach-arrow {
  justify-self: center;
  color: var(--gold-mid);
  animation: coachDrop 3.4s var(--ease) infinite;
}

@keyframes coachDrop {
  0%, 100% { transform: translateY(-2px); opacity: 0.55; }
  50%      { transform: translateY(2px);  opacity: 1; }
}

/* ---- Question builder --------------------------------------------------- */
.builder { display: grid; gap: var(--sp-4); padding: clamp(1.1rem, 2.6vw, 1.9rem); }

.step-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }

.step-no-badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-bright);
  background: rgba(212, 173, 89, 0.1);
  border: 1px solid rgba(212, 173, 89, 0.3);
}

.step-head h3 { font-size: var(--step-1); }

/* area tiles */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 0.5rem;
}

.area-tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  border-radius: var(--r-md);
  border: 1px solid rgba(255, 255, 255, 0.055);
  background: rgba(10, 17, 30, 0.5);
  color: var(--text-muted);
  font-size: var(--step--1);
  cursor: pointer;
  transition:
    color var(--dur-state) var(--ease-premium),
    border-color var(--dur-state) var(--ease-premium),
    background var(--dur-state) var(--ease-premium),
    transform var(--dur-state) var(--ease-premium);
}

.area-tile .icon { width: 20px; height: 20px; color: var(--gold-mid); transition: color var(--dur-state) var(--ease-premium), transform var(--dur-state) var(--ease-spring); }
.area-tile:hover { color: var(--ivory); border-color: rgba(255, 255, 255, 0.1); }
.area-tile:hover .icon { transform: translateY(-1px); }

.area-tile[aria-pressed="true"] {
  color: var(--ivory);
  border-color: rgba(231, 201, 125, 0.55);
  background: rgba(212, 173, 89, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.14), 0 0 26px -14px rgba(212, 173, 89, 0.9);
}

.area-tile[aria-pressed="true"] .icon { color: var(--gold-lift); }

/* focus chips */
.focus-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.focus-chip {
  padding: 0.46rem 0.9rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-premium), border-color var(--dur-micro) var(--ease-premium), background var(--dur-micro) var(--ease-premium);
}

.focus-chip:hover { color: var(--ivory); }

.focus-chip[aria-pressed="true"] {
  color: var(--ivory);
  border-color: rgba(231, 201, 125, 0.5);
  background: rgba(212, 173, 89, 0.1);
}

.builder-hint { font-size: var(--step--1); color: var(--text-dim); margin-top: 0.5rem; }
.builder-hint b { color: var(--gold-bright); font-weight: 550; letter-spacing: 0.06em; }

.template-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.6rem; }

.template-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
  color: var(--gold-bright);
  background: rgba(212, 173, 89, 0.07);
  border: 1px dashed rgba(212, 173, 89, 0.32);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-premium), border-color var(--dur-micro) var(--ease-premium);
}

.template-chip:hover { background: rgba(212, 173, 89, 0.14); border-style: solid; }

/* progress */
.builder-progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--text-dim);
}

.builder-progress i {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--dur-state) var(--ease-premium);
}

.builder-progress i.is-done { background: var(--gold-bright); box-shadow: 0 0 8px rgba(212, 173, 89, 0.8); }

/* ---- What happens next -------------------------------------------------- */
.nextpath { position: relative; display: grid; gap: 0; padding-left: 2.1rem; }

.nextpath::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, rgba(212, 173, 89, 0.5), rgba(212, 173, 89, 0.12));
}

.nextpath li { position: relative; padding: 0 0 1.15rem; }
.nextpath li:last-child { padding-bottom: 0; }

.nextpath li::before {
  content: attr(data-step);
  position: absolute;
  left: -2.1rem;
  top: 0;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gold-bright);
  background: rgba(4, 8, 17, 0.9);
  border: 1px solid rgba(212, 173, 89, 0.34);
  box-shadow: 0 0 18px -8px rgba(212, 173, 89, 0.9);
}

.nextpath strong { display: block; font-size: var(--step-0); color: var(--ivory); }
.nextpath span { font-size: var(--step--1); line-height: 1.45; color: var(--text-dim); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-list { display: grid; gap: 0.4rem; }

.faq-row {
  border-radius: var(--r-md);
  background: rgba(10, 17, 30, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.045);
  overflow: hidden;
}

.faq-row summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0.9rem 1rem;
  font-size: var(--step-0);
  font-weight: 550;
  color: var(--ivory);
  cursor: pointer;
  list-style: none;
}

.faq-row summary::-webkit-details-marker { display: none; }

.faq-sign { position: relative; width: 14px; height: 14px; flex: none; }

.faq-sign::before,
.faq-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--gold-bright);
  border-radius: 2px;
  transition: transform var(--dur-state) var(--ease-premium), opacity var(--dur-state) var(--ease-premium);
}

.faq-sign::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-sign::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }

.faq-row[open] .faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-row .faq-answer { padding: 0 1rem 1rem; font-size: var(--step--1); line-height: 1.55; color: var(--text-muted); }

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .editorial { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .field { padding: clamp(1.1rem, 4vw, 1.6rem) 0.9rem 1.6rem; }
  .field-lanes { grid-template-columns: 1fr; gap: 1.1rem; }
  .field-lane { grid-template-columns: 86px 1fr; justify-items: start; text-align: left; align-items: center; gap: 0.9rem; }
  .field-lane .viz { width: 86px; }
  .field-lane .lane-copy { display: grid; gap: 0.15rem; }
  .field-lane p { max-width: none; }
  .field-converge { height: 76px; }

  .rail-steps { grid-template-columns: 1fr; gap: 1rem; text-align: left; }
  .rail-step { grid-template-columns: 54px 1fr; justify-items: start; text-align: left; align-items: center; gap: 0.85rem; }
  .rail-step .rail-copy { justify-items: start; gap: 0.1rem; }
  .rail-step span { max-width: none; }
  .rail-line { left: 27px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(212,173,89,.28) 10%, rgba(212,173,89,.28) 90%, transparent); }
  .rail-line::after { width: 3px; height: 70px; left: -1px; top: 0;
    background: linear-gradient(180deg, transparent, var(--gold-lift), transparent);
    animation: railSignalV 12s linear infinite; }

  @keyframes railSignalV {
    0%   { top: 0;                   opacity: 0; }
    6%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: calc(100% - 70px);   opacity: 0; }
  }

  /* Questions become a swipeable deck. */
  .qfield { display: block; aspect-ratio: auto; max-height: none; }
  .qfield-core,
  .qfield-spokes,
  .qdots { display: none; }

  .qdeck {
    display: flex;
    gap: 0.7rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.2rem 0 0.8rem;
    /* Explicitly bounded. Left to size itself the deck took its content
       width (565px inside a 335px column) and pushed the page sideways. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .qdeck::-webkit-scrollbar { display: none; }

  .qprompt {
    position: static;
    flex: 0 0 82%;
    max-width: none;
    scroll-snap-align: center;
    opacity: 1;
    padding: 1.1rem 1.15rem;
    font-size: var(--step-0);
    color: var(--text-muted);
  }

  .qprompt.is-live { transform: none; }

  .area-grid { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 0.4rem; }
  .area-tile { padding: 0.7rem 0.35rem; font-size: var(--step--2); }
  .builder { padding: 1rem; gap: var(--sp-3); }
  .nextpath { padding-left: 1.9rem; }

  .feature-body h3 { font-size: var(--step-1); }
  .index-row { padding: 0.8rem; gap: 0.65rem; }
  .index-medallion, .index-more-mark { width: 42px; height: 42px; }

  .gateway { grid-template-columns: 1fr; text-align: center; padding: clamp(1.75rem, 7vw, 2.25rem) 1.25rem; }
  .gateway-fx {
    position: relative;
    inset: auto;
    top: auto; right: auto; transform: none;
    width: min(180px, 46vw);
    margin: 0 auto 0.25rem;
  }
  .gateway-copy .eyebrow { justify-self: center; }
  .gateway h2 { max-width: none; margin-inline: auto; }
  .gateway p { margin-inline: auto; }
  .gateway .btn-row { justify-content: center; }
}

@media (min-width: 900px) {
  .qdeck { display: contents; }
  .qprompt { transform: translate(-50%, -50%); }
  .qprompt.is-live { transform: translate(-50%, -50%) scale(1.04); }
  .qprompt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-line::after,
  .converge-pulse,
  .field-core-mark,
  .gring-1, .gring-2, .gring-3, .gspark, .gcore,
  .coach-arrow,
  .qfield-core::before,
  .qfield-core::after,
  .qspoke.is-live { animation: none; }
}


/* ==========================================================================
   10. Touch targets for the new controls
   ========================================================================== */
@media (max-width: 899px) {
  .segmented .seg-item { min-height: 44px; padding-block: 0.7rem; }
  .focus-chip { min-height: 44px; display: inline-flex; align-items: center; }
  .template-chip { min-height: 44px; }
  .area-tile { min-height: 78px; }
}

/* ==========================================================================
   11. Video Insights — video-first, no blog architecture
   ========================================================================== */
.video-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border-radius: var(--r-xl);
  text-decoration: none;
  background:
    radial-gradient(60% 90% at 90% 10%, rgba(98, 85, 199, 0.16), transparent 66%),
    linear-gradient(180deg, rgba(10, 17, 30, 0.6), rgba(4, 8, 17, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.06);
  transition: border-color var(--dur-state) var(--ease-premium), transform var(--dur-state) var(--ease-premium);
}

.video-feature:hover { transform: translateY(-2px); border-color: rgba(212, 173, 89, 0.28); }

.video-feature-thumb,
.video-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #04070f;
}

.video-feature-thumb img,
.video-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-premium); }

.video-card:hover .video-card-thumb img,
.video-feature:hover .video-feature-thumb img { transform: scale(1.04); }

.video-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 50%, rgba(4, 8, 17, 0.15), rgba(4, 8, 17, 0.55));
}

.video-play .icon { width: 46px; height: 46px; color: var(--gold-lift); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6)); transition: transform var(--dur-state) var(--ease-spring); }
.video-play-sm .icon { width: 32px; height: 32px; }
.video-card:hover .video-play .icon,
.video-feature:hover .video-play .icon { transform: scale(1.12); }

.video-duration {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ivory);
  background: rgba(2, 5, 11, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.video-feature-body { display: grid; gap: 0.5rem; }
.video-feature-body h2 { font-size: var(--step-3); line-height: 1.2; }
.video-feature-body p { font-size: var(--step-0); line-height: 1.55; color: var(--text-muted); }
.video-feature-body .meta { order: -1; }

.feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--gold-bright);
}
.feature-cta .icon { width: 14px; height: 14px; transition: transform var(--dur-state) var(--ease-premium); }
.video-feature:hover .feature-cta .icon { transform: translateX(3px); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.video-card {
  display: grid;
  gap: 0.65rem;
  text-decoration: none;
  border-radius: var(--r-lg);
  padding: 0.6rem;
  transition: background var(--dur-state) var(--ease-premium), transform var(--dur-state) var(--ease-premium);
}

.video-card:hover { background: rgba(255, 255, 255, 0.03); transform: translateY(-2px); }

.video-card-body { display: grid; gap: 0.3rem; }
.video-card-body h3 { font-size: var(--step-1); line-height: 1.3; transition: color var(--dur-state) var(--ease-premium); }
.video-card:hover .video-card-body h3 { color: var(--gold-bright); }
.video-card-body p { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }
.video-card-body .meta { font-size: var(--step--2); }

@media (max-width: 900px) {
  .video-feature { grid-template-columns: 1fr; }
  .video-feature-body h2 { font-size: var(--step-2); }
}

/* ==========================================================================
   12. Video detail page
   ========================================================================== */
.video-player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}
.video-player-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-detail-head { display: grid; gap: 0.6rem; margin-top: clamp(1.25rem, 2.6vw, 1.75rem); }
.video-detail-head h1 { font-size: var(--step-3); line-height: 1.2; }
.video-detail-head .meta { font-size: var(--step--1); }
.video-detail-desc { margin-top: 0.9rem; font-size: var(--step-0); line-height: 1.65; color: var(--text-muted); max-width: 72ch; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 1.1rem;
  margin-top: 1.25rem;
}