/* ==========================================================================
   Page compositions. Each page family composes the component grammar;
   this file owns layout, scenic staging and family-specific rhythm.
   ========================================================================== */

/* ================================================================= HERO === */
/* v3 composition: the scene is an in-flow band whose raster renders at or
   below source density (panorama bottom-anchored at its native 2:1; the sky
   is extended above it by a matched gradient). Copy lives in the sky; the
   city, island and beach stay clear; the product window docks below the band
   and only overlaps the featureless front water. */
.hero {
  position: relative;
  overflow: clip;
  color: #fff;
  /* sky extension above the panorama; below the scene the Peine del Viento
     bridge illustration carries the handoff (this gradient is only the
     no-SVG fallback) */
  background: linear-gradient(180deg,
    #0F83D8 0%,
    #178ADC min(60vw, 760px),
    #FFFFFF calc(min(60vw, 760px) + 120px));
  margin-bottom: 0;
  /* bridge geometry: the illustration band overlaps the scene's faded
     bottom edge; the stage keeps its approved position relative to the
     scene end (drop = lift - old overlap) */
  --bridge-h: clamp(400px, 46vw, 620px);
  --bridge-lift: 120px;
  --stage-drop: 10px;
}
/* the second movement: Peine del Viento — the same shoreline walked to its
   end, combing the sea into the white of the page */
.hero-bridge {
  position: relative;
  margin-top: calc(-1 * var(--bridge-lift));
  height: var(--bridge-h);
  pointer-events: none;
  overflow: hidden;
}
.hero-bridge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-bridge .pv-mobile { display: none; }
.hero-scene {
  position: relative;
  min-height: min(60vw, 760px);
  padding-top: var(--nav-clearance);
  display: flex;
  flex-direction: column;
  /* no z-index of its own: the docked stage paints above the scene band;
     the pause control floats above both (z-4 below) */
  pointer-events: none;
}
.hero-scene .hero-content, .hero-scene .scene-pause { pointer-events: auto; }
.hero-art {
  position: absolute;
  inset: 0;
  /* above the bridge band so the panorama's faded bottom edge crossfades
     over the bridge's sea instead of being painted under it */
  z-index: 1;
  pointer-events: none;
}
/* panorama at native aspect, anchored to the band's bottom edge */
.scene-frame {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  aspect-ratio: 2 / 1;
  isolation: isolate;
}
.scene-frame img.hero-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 110px), rgba(0, 0, 0, 0.35) 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 110px), rgba(0, 0, 0, 0.35) 100%);
}
/* ambient overlay canvas: bottom-aligned to the frame; its taller viewBox
   simply extends into the sky */
.hero-art .scene-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  aspect-ratio: 1672 / 941;
  z-index: 3;
  pointer-events: none;
}
.hero-art .scene-overlay svg { width: 100%; height: 100%; display: block; }
.hero-wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Copy bed. The wash used to fade out at 55% of the band, which left the
       lede, the platform note and the proof pills sitting on bright sky and
       city (measured 1.2:1 to 2.0:1 against white). This ellipse tracks the
       centred copy column only, so the island, the sun and the shoreline keep
       their full brightness while the words get a readable ground. */
    radial-gradient(68% 52% at 50% 34%,
      rgba(6, 24, 62, 0.52) 0%,
      rgba(6, 24, 62, 0.40) 44%,
      rgba(6, 24, 62, 0.16) 72%,
      rgba(6, 24, 62, 0) 88%),
    linear-gradient(180deg, rgba(6, 24, 62, 0.30) 0%, rgba(6, 24, 62, 0.10) 30%, rgba(6, 24, 62, 0) 55%),
    radial-gradient(90% 50% at 50% 0%, rgba(9, 32, 80, 0.18), transparent 60%);
}
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: clamp(26px, 4vh, 44px);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: var(--glass-scene-bg);
  border: 1px solid var(--glass-scene-border);
  backdrop-filter: blur(16px);
  font-size: var(--text-small);
  font-weight: 650;
}
.hero-eyebrow img { width: 17px; height: 17px; border-radius: 4px; }
.hero h1 {
  font-size: var(--text-display-1);
  color: #fff;
  margin-top: var(--s-4);
  max-width: none;
  text-shadow: 0 3px 24px rgba(7, 22, 52, 0.35);
}
.hero .hero-lede {
  margin-top: var(--s-4);
  font-size: var(--text-body-lg);
  font-weight: 550;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 2px 12px rgba(7, 22, 52, 0.3);
}
.hero .hero-actions { display: flex; gap: 10px; margin-top: var(--s-5); flex-wrap: wrap; justify-content: center; }
.hero .hero-proof {
  margin-top: var(--s-4);
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: rgba(6, 24, 62, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  font-size: var(--text-micro);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
/* product stage: docked under the scene, grazing only the front water */
.hero-stage {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100% - 40px));
  /* moored right-of-center over the bridge sea: the island and fort stay
     clear on the left; the surf dissolve shows beneath */
  margin: calc(var(--stage-drop) - var(--bridge-h)) min(5vw, 64px) clamp(44px, 6vw, 80px) auto;
}
.hero-stage .window { border-radius: var(--r-card); }
.scene-pause {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 4; /* above the docked stage */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(6, 24, 62, 0.30);
  color: #fff;
  backdrop-filter: blur(14px);
  font-size: var(--text-micro);
  font-weight: 650;
  cursor: pointer;
}
.scene-pause svg { width: 13px; height: 13px; }
.scene-pause:hover { background: rgba(6, 24, 62, 0.45); }
body.motion-paused [data-scene-root] * { animation-play-state: paused !important; }

@media (min-width: 641px) and (max-width: 1023px) {
  /* tablet: the copy stack is taller relative to the band — give the scene
     room and ease the dock so actions and pills stay clear */
  .hero-scene { min-height: min(84vw, 720px); }
  .hero { --bridge-h: 780px; --bridge-lift: 110px; --stage-drop: 250px; }
}
@media (max-width: 640px) {
  .hero-scene { min-height: 0; padding-bottom: 56px; }
  /* the tuned portrait crop carries mobile; frame fills the band again */
  .scene-frame { aspect-ratio: auto; inset: 0; }
  .scene-frame img.hero-base { object-position: center top; }
  .hero-art .scene-overlay { aspect-ratio: auto; inset: 0; }
  .hero-content { padding-top: 32px; }
  .hero h1 { max-width: 12ch; }
  .hero-stage { margin: calc(var(--stage-drop) - var(--bridge-h)) auto 40px; }
  .scene-pause { min-height: 44px; bottom: 10px; right: 12px; }
  /* The portrait crop puts the copy straight over the sunlit city and beach,
     the busiest part of the scene, so the bed runs taller and a little deeper
     here than on desktop. The headland and sky above it stay untouched. */
  .hero-wash {
    background:
      radial-gradient(96% 46% at 50% 30%,
        rgba(6, 24, 62, 0.60) 0%,
        rgba(6, 24, 62, 0.50) 50%,
        rgba(6, 24, 62, 0.22) 76%,
        rgba(6, 24, 62, 0) 92%),
      linear-gradient(180deg, rgba(6, 24, 62, 0.34) 0%, rgba(6, 24, 62, 0.14) 34%, rgba(6, 24, 62, 0) 62%);
  }
}

/* ====================================================== HOME MOVEMENTS ==== */
/* understanding band: headline + stat chips */
.stat-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-chip {
  display: flex; align-items: baseline; gap: 10px;
  border: 1px solid var(--border);
  background: var(--bg-raise);
  border-radius: 16px;
  padding: 14px 20px;
}
.stat-chip .value { font-weight: 680; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--cobalt-deep); font-variant-numeric: tabular-nums; }
.stat-chip .label { color: var(--ink-soft); font-size: var(--text-small); }

/* feature split bands */
.feature-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.feature-split.flip > .feature-copy { order: 2; }
.feature-split .window { max-width: 620px; }
.feature-copy h3 { font-size: var(--text-h2); margin-bottom: var(--s-4); }
.feature-copy .points { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: 12px; }
.feature-copy .points li { display: flex; gap: 12px; color: var(--ink-soft); }
.feature-copy .points svg { width: 18px; height: 18px; flex: none; color: var(--ok); margin-top: 3px; }
@media (max-width: 880px) {
  .feature-split, .feature-split.flip { grid-template-columns: 1fr; }
  .feature-split.flip > .feature-copy { order: 0; }
  .feature-split .window { max-width: none; }
}

/* capability rail — one band, hairline dividers, not four cards */
.cap-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--border);
}
.cap { padding: var(--s-6) var(--s-5); border-right: 1px solid var(--border); }
.cap:last-child { border-right: 0; }
.cap .ic {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--cobalt-wash);
  color: var(--cobalt-deep);
  display: grid; place-content: center;
  margin-bottom: var(--s-4);
}
.cap .ic svg { width: 18px; height: 18px; }
.cap h3 { font-size: var(--text-h4); margin-bottom: 6px; }
.cap p { font-size: var(--text-small); color: var(--ink-soft); }
@media (max-width: 880px) {
  .cap-rail { grid-template-columns: 1fr 1fr; }
  .cap:nth-child(2n) { border-right: 0; }
  .cap:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 540px) {
  .cap-rail { grid-template-columns: 1fr; }
  .cap { border-right: 0; border-bottom: 1px solid var(--border); }
  .cap:last-child { border-bottom: 0; }
}

/* dark proof band */
.proof-band { border-radius: var(--r-stage); padding: clamp(40px, 5vw, 72px); }
.proof-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 980px) { .proof-grid { grid-template-columns: 1fr; } }
.night-table { border: 1px solid var(--night-border); border-radius: var(--r-card); overflow: hidden; }
.night-table table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.night-table th, .night-table td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--night-border); }
.night-table thead th { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.07em; color: var(--night-soft); background: var(--night-inset); }
.night-table tbody tr:last-child :is(td, th) { border-bottom: 0; }
.night-table .yes { color: #7EE2B8; font-weight: 650; }
.night-table .no { color: var(--night-soft); }
.status-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.status-chip {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--night-border);
  background: var(--night-raise);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: var(--text-small);
  font-weight: 570;
}
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #57D9A3; box-shadow: 0 0 10px rgba(87, 217, 163, 0.6); flex: none; }
.status-chip.is-soon .dot { background: #F3C96B; box-shadow: none; }
.kbd-row { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: var(--s-5); }
.kbd-combo { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-small); color: var(--night-soft); }

/* quotes band */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: start; }
.quote {
  border-left: 2px solid var(--sky-3);
  padding: 6px 0 6px var(--s-5);
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: 1.32rem;
  line-height: 1.4;
  color: var(--ink-strong);
}
.quote figcaption { margin-top: var(--s-4); font-size: var(--text-small); color: var(--ink-soft); }
.quote:nth-child(2) { margin-top: var(--s-7); }
.quote:nth-child(3) { margin-top: var(--s-4); }
@media (max-width: 880px) {
  .quotes { grid-template-columns: 1fr; }
  .quote:nth-child(n) { margin-top: 0; }
}

/* pricing cards */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--s-4); position: relative; }
.plan .price { font-size: 2.3rem; font-weight: 660; letter-spacing: -0.03em; color: var(--ink-strong); }
.plan .price small { font-size: var(--text-small); font-weight: 550; color: var(--ink-soft); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--text-small); color: var(--ink-soft); }
.plan ul svg { width: 16px; height: 16px; color: var(--ok); flex: none; margin-top: 2px; }
.plan ul li { display: flex; gap: 9px; }
.plan .btn { margin-top: auto; }
.plan.is-featured {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 1px var(--cobalt), var(--e-3);
}
.plan .plan-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
  /* opaque: the featured card's outline must not show through the chip */
  background: var(--bg-raise);
  border-color: var(--border-strong);
}
@media (max-width: 880px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan.is-featured { order: -1; }
}

/* closing band */
.closing {
  position: relative;
  border-radius: var(--r-stage);
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: clamp(56px, 8vw, 104px) var(--s-6);
  background: linear-gradient(180deg, #2E63C9, #17408F);
}
.closing .closing-art {
  position: absolute; inset: 0;
  background: url("/assets/hero/la-concha-desktop.avif") center 78% / cover no-repeat;
  opacity: 0.85;
}
.closing::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 30, 74, 0.5), rgba(10, 30, 74, 0.42));
}
.closing > * { position: relative; z-index: 1; }
.closing img.badge-lg { width: 64px; height: 64px; border-radius: 16px; margin-inline: auto; box-shadow: var(--e-3); }
.closing h2 { font-family: var(--font-display); font-size: var(--text-display-2); color: #fff; font-weight: 540; margin-top: var(--s-5); text-shadow: 0 2px 22px rgba(12, 13, 17, 0.55); }
.closing p { text-shadow: 0 1px 14px rgba(12, 13, 17, 0.6); }
.closing .hero-actions { display: flex; gap: 12px; justify-content: center; margin-top: var(--s-6); flex-wrap: wrap; }

/* ========================================================== MARKETING ===== */
.page-hero {
  padding: calc(var(--nav-clearance) + clamp(40px, 6vw, 84px)) 0 clamp(40px, 5vw, 72px);
  background:
    radial-gradient(120% 90% at 50% -30%, var(--sky-1), transparent 70%),
    linear-gradient(180deg, var(--sky-0), var(--bg-page));
}
.page-hero .display { font-size: var(--text-h1); }
.page-hero h1 { max-width: 22ch; }
.page-hero .lede { max-width: 58ch; }
.page-hero.center { text-align: center; }
.page-hero.center :is(h1, .lede) { margin-inline: auto; }
.page-hero .hero-actions { display: flex; gap: 12px; margin-top: var(--s-6); flex-wrap: wrap; }
.page-hero.center .hero-actions { justify-content: center; }

/* process steps (how-it-works) */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-small);
  font-weight: 650;
  color: var(--cobalt);
  padding-top: 6px;
}
.step h3 { font-size: var(--text-h3); margin-bottom: 6px; }
.step p { color: var(--ink-soft); }
.step .step-visual { border-radius: 16px; background: var(--bg-inset); min-height: 120px; border: 1px solid var(--border); display: grid; place-content: center; color: var(--ink-faint); font-size: var(--text-small); }
@media (max-width: 880px) {
  .step { grid-template-columns: 44px 1fr; }
  .step .step-visual { grid-column: 2; }
}

/* trust pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 880px) { .pillars { grid-template-columns: 1fr; } }
.pillar .ic { width: 38px; height: 38px; border-radius: 12px; background: var(--cobalt-wash); color: var(--cobalt-deep); display: grid; place-content: center; margin-bottom: var(--s-4); }
.pillar .ic svg { width: 20px; height: 20px; }

/* panda identity moment */
.panda-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: var(--r-stage);
  padding: clamp(28px, 4vw, 56px);
}
.panda-band img { width: clamp(120px, 16vw, 190px); height: auto; }
@media (max-width: 700px) {
  .panda-band { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* comparison page */
.verdict-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-bottom: var(--s-7); }
@media (max-width: 700px) { .verdict-cards { grid-template-columns: 1fr; } }

/* platform page */
.platform-head { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.platform-mark {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--night);
  color: #fff;
  display: grid; place-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
}

/* community page */
.community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 880px) { .community-grid { grid-template-columns: 1fr; } }

/* ========================================================== EDITORIAL ===== */
.editorial-head { padding-top: calc(var(--nav-clearance) + var(--s-7)); }
.resource-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (max-width: 880px) { .resource-layout { grid-template-columns: 1fr; } }
.filter-rail { position: sticky; top: 92px; display: grid; gap: 4px; }
.filter-rail button {
  text-align: left;
  border: 0; background: none;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 10px;
  font-weight: 570;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--text-small);
}
.filter-rail button:hover { background: var(--bg-hover); color: var(--ink-strong); }
.filter-rail button[aria-pressed="true"] { background: var(--cobalt-wash); color: var(--cobalt-deep); font-weight: 680; }
@media (max-width: 880px) {
  .filter-rail { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .filter-rail button { white-space: nowrap; border: 1px solid var(--border); border-radius: var(--r-pill); }
}
.featured-resource {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-radius: var(--r-card);
  overflow: hidden;
}
.featured-resource .fr-art {
  background: linear-gradient(140deg, var(--sky-2), var(--bay));
  min-height: 220px;
  position: relative;
}
.featured-resource .fr-art::after {
  content: "";
  position: absolute; inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(11, 26, 58, 0.35));
}
@media (max-width: 700px) { .featured-resource { grid-template-columns: 1fr; } }
.resource-list { display: grid; gap: var(--s-4); }
.resource-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
}
.resource-row .meta { display: flex; gap: 10px; align-items: center; font-size: var(--text-micro); color: var(--ink-faint); margin-top: 6px; }

/* article */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--s-8); align-items: start; }
@media (max-width: 980px) { .article-layout { grid-template-columns: 1fr; } .article-toc { display: none; } }
.article-toc { position: sticky; top: 92px; font-size: var(--text-small); }
.article-toc h4 { font-size: var(--text-micro); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); margin-bottom: var(--s-3); }
.article-toc ol { list-style: none; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--border); }
.article-toc a { display: block; padding: 6px 14px; color: var(--ink-soft); border-left: 2px solid transparent; margin-left: -1.5px; }
.article-toc a:hover { color: var(--ink-strong); text-decoration: none; }
.article-toc a.is-here { color: var(--cobalt-deep); border-left-color: var(--cobalt); font-weight: 620; }
.prose { max-width: var(--w-text); font-size: 1.06rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: var(--text-h3); }
.prose h3 { margin-top: 1.6em; font-size: var(--text-h4); }
.prose pre {
  background: var(--night);
  color: var(--night-ink);
  border-radius: 14px;
  padding: var(--s-5);
  overflow-x: auto;
  font-size: var(--text-small);
  line-height: 1.6;
}
.prose blockquote {
  border-left: 3px solid var(--sky-3);
  padding: 4px 0 4px var(--s-5);
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink-strong);
}
.prose .callout {
  border: 1px solid var(--border-strong);
  background: var(--cobalt-wash);
  border-radius: 14px;
  padding: var(--s-5);
  font-size: var(--text-small);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.prose th, .prose td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; }
.prose th { background: var(--bg-inset); }
.article-meta { display: flex; gap: 12px; align-items: center; color: var(--ink-soft); font-size: var(--text-small); flex-wrap: wrap; }
.article-meta .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cobalt-wash);
  color: var(--cobalt-deep);
  display: grid; place-content: center;
  font-weight: 700; font-size: var(--text-micro);
}

/* glossary */
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 700px) { .glossary-grid { grid-template-columns: 1fr; } }
.letter-jump { display: flex; flex-wrap: wrap; gap: 4px; }
.letter-jump a {
  min-width: 44px; min-height: 44px;
  display: inline-grid; place-content: center;
  border-radius: 9px;
  font-weight: 650; font-size: var(--text-small);
  color: var(--ink-soft);
}
.letter-jump a:hover { background: var(--bg-hover); text-decoration: none; }
.letter-jump a.is-active { background: var(--cobalt-wash); color: var(--cobalt-deep); }

/* changelog */
.timeline { position: relative; display: grid; gap: var(--s-7); }
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1.5px;
  background: var(--border);
}
.release { position: relative; padding-left: 42px; }
.release::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 3px solid var(--bg-page);
  background: var(--cobalt);
  box-shadow: 0 0 0 1.5px var(--border);
}
.release .release-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.release .version { font-family: var(--font-mono); font-weight: 700; color: var(--cobalt-deep); }
.release ul { padding-left: 18px; color: var(--ink-soft); margin-top: var(--s-3); display: grid; gap: 6px; font-size: var(--text-small); }

/* legal */
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 880px) { .legal-layout { grid-template-columns: 1fr; } }

/* ============================================================== AUTH ====== */
.auth-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth-panel {
  display: grid;
  align-content: center;
  justify-items: stretch;
  padding: clamp(24px, 5vw, 72px);
  position: relative;
}
.auth-panel .auth-brand { position: absolute; top: 28px; left: clamp(24px, 5vw, 72px); }
.auth-card { width: min(400px, 100%); margin-inline: auto; display: grid; gap: var(--s-5); }
.auth-card h1 { font-family: var(--font-display); font-weight: 560; font-size: var(--text-display-2); }
.auth-card form { display: grid; gap: var(--s-4); }
.auth-scene {
  position: relative;
  overflow: hidden;
  background: url("/assets/hero/la-concha-mobile.avif") center 30% / cover no-repeat;
}
.auth-scene::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(9, 30, 76, 0.05), rgba(9, 30, 76, 0.38));
}
.auth-scene .auth-quote {
  position: absolute;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(24px, 4vw, 56px);
  z-index: 1;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.6vw + 0.8rem, 1.8rem);
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(12, 13, 17, 0.45);
}
.auth-foot { margin-top: var(--s-6); font-size: var(--text-small); color: var(--ink-soft); text-align: center; }
@media (max-width: 880px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-scene { min-height: 180px; order: -1; }
  .auth-scene .auth-quote { display: none; }
  .auth-panel { padding-top: 84px; }
}

/* ============================================================ DASHBOARD === */
.plan-hero {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  align-items: center; justify-content: space-between;
  background: linear-gradient(120deg, #F2F6FE, #FDFDFF 60%);
}
.key-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.key-value {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  letter-spacing: 0.08em;
  font-size: var(--text-small);
}
.download-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-5);
}
.os-mark {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--bg-inset);
  display: grid; place-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-soft);
}
.list-rows { display: grid; gap: var(--s-3); }

/* ============================================================ UTILITY ===== */
.utility-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 880px) { .utility-stage { grid-template-columns: 1fr; } }
.utility-canvas {
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--bg-raise), var(--bg-raise)) padding-box,
    repeating-linear-gradient(0deg, transparent 0 23px, var(--bg-inset) 23px 24px) padding-box;
  min-height: 340px;
  position: relative;
  overflow: hidden;
}
.utility-canvas svg { width: 100%; height: 100%; position: absolute; inset: 0; }

/* =========================================================== NOT FOUND ==== */
.nf-hero {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(180deg, #2E63C9, #17408F);
  padding: var(--s-8) var(--s-5);
}
.nf-hero .nf-art {
  position: absolute; inset: 0;
  background: url("/assets/hero/la-concha-desktop.avif") center 20% / cover no-repeat;
  opacity: 0.9;
}
.nf-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 30, 76, 0.35), rgba(9, 30, 76, 0.65)); }
.nf-hero > * { position: relative; z-index: 1; }
.nf-code { font-family: var(--font-mono); font-weight: 650; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.75); }
.nf-hero h1 { font-family: var(--font-display); font-size: var(--text-display-2); color: #fff; margin-top: var(--s-4); max-width: 18ch; }

/* ============================================================ ROUTES ====== */
.routes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.route-card { display: grid; gap: 6px; padding: var(--s-5); }
.route-card .path { font-family: var(--font-mono); font-size: var(--text-small); color: var(--cobalt-deep); font-weight: 600; }
.route-card .arch { font-size: var(--text-micro); color: var(--ink-faint); }

/* ======================================================== PRICING PAGE ==== */
.promo-ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #EBD5AC;
  background: var(--warn-wash);
  color: var(--warn);
  font-weight: 650;
  font-size: var(--text-small);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.code-row { display: flex; gap: 10px; align-items: flex-start; max-width: 420px; }
.code-row .field { flex: 1; }

/* misc helpers used across pages */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
.center-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.divider { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-6); }


/* ================================================= HOMEPAGE V2 (density) == */
.hero-platform {
  margin-top: var(--s-4);
  font-size: var(--text-micro);
  /* Sits below the copy bed on bright shoreline. Full-strength white plus a
     tight halo carries it there without another scrim over the scene. */
  color: #fff;
  max-width: 64ch;
  text-shadow:
    0 1px 2px rgba(7, 22, 52, 0.75),
    0 2px 12px rgba(7, 22, 52, 0.55);
}
.hero-proof-row {
  list-style: none; padding: 0;
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 10px;
}
.hero-proof-row li {
  display: inline-flex; align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  /* These chips land on the brightest part of the scene (sunlit bay and
     shoreline). At 0.18 the glass was too thin to carry white text there, so
     deepen the tint. Same material, same blur, just enough body to read. */
  background: rgba(6, 24, 62, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(14px);
  font-size: var(--text-micro);
  font-weight: 600;
  color: #fff;
}
.hero h1 .h1-a, .hero h1 .h1-b { display: block; }
.hero h1 { max-width: none; }

.hero-window .hero-video-body { position: relative; background: var(--night); }
.hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: var(--night); }
.kbd-pair { font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 650; letter-spacing: .04em; opacity: .85; white-space: nowrap; }

.assist-card {
  position: absolute;
  right: clamp(10px, 3%, 28px);
  top: clamp(10px, 6%, 34px);
  width: min(340px, 52%);
  border-radius: 16px;
  background: rgba(13, 22, 41, 0.88);
  border: 1px solid rgba(228, 229, 235, 0.22);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 24px 60px -24px rgba(4, 10, 26, 0.8);
  color: var(--night-ink);
  padding: 14px;
  display: grid; gap: 9px;
  font-size: var(--text-micro);
}
.assist-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.assist-chip { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: #B5F0D6; min-width: 0; }
.assist-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #57D9A3; box-shadow: 0 0 8px rgba(87,217,163,.7); flex: none; }
.assist-meta { color: var(--night-soft); flex: none; }
.assist-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.assist-tags > span {
  border: 1px solid rgba(228, 229, 235, 0.22);
  border-radius: var(--r-pill);
  padding: 3px 9px;
  color: var(--night-soft);
  font-weight: 600;
}
.assist-body { color: var(--night-ink); line-height: 1.5; }
.assist-code {
  display: block;
  background: rgba(6, 12, 26, 0.85);
  border: 1px solid rgba(228, 229, 235, 0.16);
  border-radius: 9px;
  padding: 8px 10px;
  color: #C7D8F8;
  font-size: 10.5px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: rgba(228, 229, 235, 0.3) transparent;
}
.assist-foot { color: var(--night-soft); }

.command-chip {
  position: absolute;
  left: clamp(10px, 3%, 28px);
  bottom: clamp(10px, 6%, 26px);
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: var(--r-pill);
  background: rgba(13, 22, 41, 0.85);
  border: 1px solid rgba(228, 229, 235, 0.22);
  backdrop-filter: blur(14px);
  color: var(--night-ink);
  font-size: var(--text-micro);
  font-weight: 650;
  padding: 8px 14px;
}
@media (max-width: 640px) {
  .assist-card { position: static; width: auto; margin: 10px; }
  .command-chip { position: static; margin: 0 10px 10px; }
}

.center-stats { justify-content: center; }
.marks-intro { text-align: center; margin-top: var(--s-5); }
.marks-strip {
  list-style: none; padding: 6px 0 10px; margin: var(--s-3) auto 0;
  display: flex; gap: 10px;
  overflow-x: auto;
}
.marks-strip li {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--bg-raise);
  font-size: var(--text-micro);
  font-weight: 650;
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.marks-strip li:first-child { margin-left: auto; }
.marks-strip li:last-child { margin-right: auto; }

.story-window video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--night); }
.story-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  margin-top: var(--s-8);
}
@media (max-width: 880px) { .story-grid { grid-template-columns: 1fr; } }
.story-small .story-copy { padding-top: var(--s-4); display: grid; gap: 8px; justify-items: start; }
.story-small .story-copy h3 { font-size: var(--text-h4); }
.story-small .points { margin: 0; list-style: none; padding: 0; display: grid; gap: 6px; }
.story-small .points li { display: flex; gap: 8px; color: var(--ink-soft); font-size: var(--text-small); }
.story-small .points svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 2px; }
.showcase-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: 6px 16px; }

.selftest-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 880px) { .selftest-grid { grid-template-columns: 1fr; } }
.steps-compact .step { grid-template-columns: 1fr; padding: var(--s-4) 0; }
.steps-compact { margin-bottom: var(--s-6); }
.selftest-visual img { border-radius: var(--r-card); border: 1px solid var(--border); box-shadow: var(--e-2); width: 100%; height: auto; }

.status-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.status-row {
  display: grid;
  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center;
  background: var(--bg-raise);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
}
.status-row .sid { color: var(--cobalt-deep); font-weight: 650; font-size: var(--text-micro); overflow-wrap: anywhere; max-width: 168px; }
.status-row .sname { font-weight: 620; }
@media (max-width: 640px) {
  .status-row { grid-template-columns: minmax(56px, max-content) minmax(0,1fr) auto; }
  .status-row .srecency { display: none; }
}
.status-foot { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: 6px 16px; }

.shortcut-list { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-2); }
@media (max-width: 880px) { .shortcut-list { grid-template-columns: 1fr; } }
.shortcut-row {
  border: 1px solid var(--night-border);
  background: var(--night-raise);
  border-radius: 14px;
  padding: var(--s-5);
  display: grid; gap: 10px;
}
.shortcut-row:first-child { grid-column: 1 / -1; }
.sc-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.sc-name { font-weight: 660; color: #fff; }
.sc-body { color: var(--night-soft); font-size: var(--text-small); }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-foot { margin-top: var(--s-5); color: var(--night-soft); font-size: var(--text-small); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.cap-rail-3 { grid-template-columns: repeat(3, 1fr); border: 0; gap: var(--s-4); }
.cap-rail-3 .cap { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-raise); display: grid; gap: 8px; justify-items: start; }
@media (max-width: 880px) { .cap-rail-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cap-rail-3 { grid-template-columns: 1fr; } }
.context-card { display: grid; gap: 10px; justify-items: start; }

.quotes-6 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .quotes-6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .quotes-6 { grid-template-columns: 1fr; } }
.quotes-6 .quote blockquote { font-size: 1.12rem; }
.quotes-6 .quote:nth-child(n) { margin-top: 0; }

.reward-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 880px) { .reward-band { grid-template-columns: 1fr; } }
.reward-band form { display: grid; gap: var(--s-4); align-content: start; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.offers-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }

.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 880px) { .faq-cols { grid-template-columns: 1fr; } }
.faq-cols .accordion-body:empty { padding: 0 22px 8px; min-height: 4px; }

/* wrapping caption chips (fixture badge slots carry long text) */
.chip-note {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  background: var(--cobalt-wash);
  color: var(--cobalt-deep);
  border-radius: 14px;
  font-size: var(--text-micro);
  font-weight: 620;
  line-height: 1.35;
  max-width: 100%;
}
.chip-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cobalt); flex: none; }
.on-night .chip-note { border-color: rgba(228,229,235,.25); background: var(--night-raise); color: var(--night-soft); }
.cap-rail-3 .cap, .two-col > .context-card { min-width: 0; }

/* base points list (any context) */
.points { list-style: none; padding: 0; display: grid; gap: 10px; }
.points > li { display: flex; gap: 10px; color: var(--ink-soft); }
.points > li > svg { width: 16px; height: 16px; flex: none; color: var(--ok); margin-top: 3px; }

/* --- scene overlay retune for the panorama base ---------------------------
   The raster paints the city, forts and island at true scale, so the
   avif-era architectural and waterline layers are retired (they double-draw
   at the wrong geometry). The living layer — clouds, atmosphere, wind,
   plane, sun bloom — carries the motion system. */
.scene-overlay :is(#city, #cathedral, #belfry, #shore-church, #urgull-fort,
  #island-fort, #shore, #swash, #bay-contours, #fort-reflection,
  #city-lights, #sailboat, #boat-roll, #water-highlights, #glints) {
  display: none;
}


/* mobile: the dusk bridge variant carries the handoff under the stacked
   window (gradient below is only the no-SVG fallback) */
@media (max-width: 640px) {
  .hero {
    background: linear-gradient(180deg, #123D77 0%, #1E4E8E 60%, #FFFFFF 86%);
    --bridge-h: 1150px;
    --bridge-lift: 80px;
    --stage-drop: 350px;
  }
  .hero-bridge .pv-desktop { display: none; }
  .hero-bridge .pv-mobile { display: block; }
}