/* ============================================================================
   SMARTFlexDB - landing page (home.css)
   Scoped styling for the new index.html landing that is PREPENDED above the
   preserved gallery console (#gallery). Strictly token-driven: every colour,
   space, radius, type-size and motion value comes from style.css :root, so
   theme.js reskins the whole landing light/dark for free - including the morph
   canvas, which follows var(--canvas) (white in light mode, near-black in dark
   so it no longer flashes a white slab on a dark page).
   ========================================================================== */

/* ---- shared landing rhythm ------------------------------------------------ */
.home-band{padding:0 var(--sp-6)}                     /* horizontal gutter for full-bleed bands */
.home-inner{max-width:1180px;margin:0 auto}           /* the landing content cap (NOT the 2000px .wide) */
.home-eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted)}

/* ============================================================================
   HERO - split: message + counters + CTAs (left) | two live morphs (right)
   ========================================================================== */
.hero-band{
  /* full-bleed header zone in both themes */
  position:relative;isolation:isolate;
  /* fallback for engines without color-mix: the shared atmosphere tokens */
  background:
    radial-gradient(46% 62% at 10% -12%, var(--glow-apo), transparent 70%),
    radial-gradient(44% 58% at 98% 10%, var(--glow-holo), transparent 72%),
    linear-gradient(180deg,var(--card),var(--bg));
  /* brand-aligned: APO BLUE over the mark (left), HOLO ORANGE over the live morphs (right), so the
     atmosphere carries the same apo->holo reading as the logo and --grad-apoholo. The shared
     --glow-apo/--glow-holo tokens are left alone - other pages (.hero, .intro) use them. */
  background:
    radial-gradient(46% 62% at 10% -12%, color-mix(in srgb,var(--accent) 12%,transparent), transparent 70%),
    radial-gradient(44% 58% at 98% 10%, color-mix(in srgb,var(--accent2) 14%,transparent), transparent 72%),
    linear-gradient(180deg,var(--card),var(--bg));
  border-bottom:1px solid var(--border);
  padding-top:var(--sp-10);padding-bottom:var(--sp-10);
}
.hero-band::before{   /* faint data grid, masked to fade out toward the edges */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 80% 74% at 44% 24%,#000 26%,transparent 82%);
          mask-image:radial-gradient(ellipse 80% 74% at 44% 24%,#000 26%,transparent 82%);
}
.hero-band::after{    /* very faint RNA arc-plot motif, lower-left */
  content:"";position:absolute;left:1.5%;bottom:0;z-index:-1;pointer-events:none;
  width:min(420px,40%);height:140px;opacity:.7;background:var(--motif);
  -webkit-mask:url("img/rna-arc.svg") no-repeat left bottom / contain;
          mask:url("img/rna-arc.svg") no-repeat left bottom / contain;
}
/* OPTION C: the mark and the morph on ONE line. Left column states the idea (lockup + headline +
   the live lead + counters + CTAs); right column runs it on real data (the two live morphs).
   DOM order == visual order, so no grid-column/grid-row placement is needed and the tab order,
   the reading order and the .ah-in stagger all agree. */
.hero-split{
  display:grid;
  /* the stage was 1.05:0.85 — near half the width for two tiles, which read as the page's subject
     rather than as evidence beside it. 1.35:0.72 gives the prose the room it needs (the lead sentence
     no longer breaks mid-clause) and still leaves the tiles large enough to read the fold. */
  /* THE STAGE COLUMN HAS A HARD FLOOR, and that is the whole point of this line.
     It was minmax(0,1.05fr) minmax(0,0.85fr). Narrowing the stage to 0.72fr on 2026-07-29 - together
     with white-space:nowrap on a 40px wordmark in the LEFT column - let the left column's min-content
     width exceed its share, and because the right column's minimum was 0 it was squeezed to ZERO: the
     cards computed width 0, aspect-ratio gave them height 0, and both tiles vanished with no error
     anywhere. `fr` is a share of FREE space, not a guarantee; only the min side of minmax() is. */
  grid-template-columns:minmax(0,1.35fr) minmax(300px,0.72fr);
  gap:var(--sp-6) var(--sp-7);
  align-items:start;
}
.hero-left{min-width:0;display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}

/* ---- the lockup + its blue->orange rule --------------------------------- */
/* The lockup is INLINE svg, so its .rsdb-* rules read the page's --accent/--accent2 and follow the
   theme. Floor of 200px wide comes from img/README.md: below that the mark's ligand turns to mush. */
/* MARK LEFT, WORDMARK RIGHT. Was column (mark stacked above the word). Note this class is the OWNER:
   style.css must not also define it - it did briefly on 2026-07-29 and lost silently to this file,
   which loads later. One class, one home. */
.hero-brand{display:flex;flex-direction:row;align-items:center;gap:var(--sp-3);width:100%}
.hero-brand-txt{display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0}
.hero-mark{width:66px;height:79px;display:block;flex:0 0 auto}
.hero-word{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.hero-word b{color:var(--logo-blue);font-weight:800}
.hero-word i{color:var(--logo-orange);font-style:normal;font-weight:800}
@media (max-width:560px){ .hero-mark{width:48px;height:57px} .hero-word{font-size:30px} }
.hero-lockup{display:block;width:clamp(206px,23vw,262px);height:auto}
/* the mark's own transition, repeated as a rule under the wordmark */
.hero-rule{display:block;width:clamp(206px,23vw,262px);height:3px;border-radius:2px;background:var(--grad-apoholo)}

/* eyebrow chip: the --accent2 -> --accent hairline idiom (reuses .dbar-mini gradient direction) */
.hero-chip{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  color:var(--text-2);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-pill);
  padding:5px 14px;position:relative;
}
.hero-chip::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
}

.hero-h1{
  /* one step down from clamp(26,3.7vw,40) — 2026-07-29. At 40px the headline was the loudest thing on
     the page, competing with the wordmark right above it; the lead paragraph underneath is what the
     reader actually needs next. line-height eased 1.06 -> 1.10 because a smaller size can carry a
     touch more leading without the three lines drifting apart. */
  font-size:clamp(24px,3.2vw,35px);line-height:1.10;font-weight:800;letter-spacing:-.025em;color:var(--text);
  margin:0;
}
.hero-tagline{
  color:var(--text-2);font-size:var(--fs-lg);line-height:1.6;max-width:none;align-self:stretch;margin:0;
}
.hero-tagline .lig{color:var(--accent2);font-weight:700}

/* ---- stat counter row (reuses the .cl-stat recipe verbatim) -------------- */
.hero-stats{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-1) 0 0}
.hero-stat{
  flex:1 1 120px;min-width:120px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-card);position:relative;overflow:hidden;
}
.hero-stat b{
  display:block;font-size:var(--fs-3xl);line-height:1.05;letter-spacing:-.03em;font-weight:800;
  color:var(--text);font-variant-numeric:tabular-nums;font-family:var(--font-display);
}
.hero-stat span{display:block;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-top:2px}
.hero-stat .hero-stat-sub{font-size:10px;text-transform:none;letter-spacing:0;color:var(--faint);font-weight:600;margin-top:1px}
/* the counter underline accent sliver */
.hero-stat::after{
  content:"";position:absolute;left:var(--sp-4);bottom:10px;width:30px;height:3px;border-radius:2px;
  background:var(--grad-apoholo);opacity:1;
}

/* ---- CTA row ------------------------------------------------------------- */
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:var(--sp-2)}
.hero-cta .btn{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-md);font-weight:700;padding:9px var(--sp-5)}
.hero-cta .btn .ico{width:15px;height:15px;flex:none;margin:0}
.hero-tertiary{font-size:var(--fs-sm);color:var(--muted);font-weight:600}
.hero-tertiary a{color:var(--muted);border-bottom:1px dashed var(--border-strong);transition:color var(--transition),border-color var(--transition)}
.hero-tertiary a:hover{color:var(--accent);border-color:var(--accent)}

/* ---- morph stage (right column) ------------------------------------------ */
.hero-stage{min-width:0;display:flex;flex-direction:column;gap:var(--sp-3);
  max-width:420px}   /* cap on very wide screens; the fr ratio alone would grow it.
     NO auto inline margin here: an auto margin overrides justify-self:stretch on a grid item, so the
     stage would be content-sized - and its cards are all position:absolute inside, i.e. ~0 content
     width - which collapsed the whole right column to 2.9px and made the tiles vanish. */
.hero-morphs{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}   /* stacked beside the lockup */

.morph-card{
  position:relative;display:block;
  background:var(--canvas);                       /* sci canvas: white in light mode, dark in dark mode */
  border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);overflow:hidden;
  aspect-ratio:16/11;                             /* two stacked tiles ~= the left column's height */
  transition:box-shadow var(--transition),border-color var(--transition),transform var(--transition);
  text-decoration:none;color:inherit;
}
.morph-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
/* the poster <img> sits behind the live canvas - tile is never blank */
.morph-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:var(--canvas);z-index:0}
/* the 3Dmol canvas mount fills the tile, layered above the poster once frames load */
.morph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .4s ease;background:transparent}
.morph-canvas.ready{opacity:1}
/* 3Dmol injects an inline-styled canvas/div - keep it filling the mount */
.morph-canvas canvas,.morph-canvas>div{position:absolute!important;inset:0;width:100%!important;height:100%!important}

/* top-left RNA-type mini badge */
.morph-type{
  position:absolute;top:8px;left:8px;z-index:3;
  background:var(--t-indigo-bg);color:var(--t-indigo-fg);
  border-radius:var(--r-sm);padding:2px 9px;font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
}
/* thin frame-progress sliver across the top of the tile */
.morph-prog{position:absolute;top:0;left:0;height:3px;width:0%;z-index:3;
  background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .14s linear}
/* bottom caption chip (translucent --card) */
.morph-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:7px 10px;font-size:var(--fs-xs);line-height:1.4;color:var(--text);
  background:var(--card);                                            /* fallback for no color-mix */
  background:color-mix(in srgb, var(--card) 86%, transparent);
  border-top:1px solid var(--border);backdrop-filter:saturate(1.1) blur(2px);
}
.morph-cap .mc-pdb{font-weight:800;color:var(--text)}
.morph-cap .lig{color:var(--accent2);font-weight:700}
.morph-cap .mc-why{display:block;color:var(--muted);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.morph-cap .mc-arrow{color:var(--muted);font-weight:600;margin:0 2px}
/* reduced-motion "play morph" affordance */
.morph-play{position:absolute;top:8px;right:8px;z-index:3;display:none;align-items:center;gap:4px;
  background:var(--card);                                            /* fallback for no color-mix */
  background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--border);
  border-radius:var(--r-pill);padding:2px 9px;font-size:var(--fs-xs);font-weight:700;color:var(--muted)}
.morph-card.rm .morph-play{display:inline-flex}

/* ============================================================================
   VALUE STRIP - what every pair ships
   ========================================================================== */
.value-band{border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--bg);padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.value-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-3);text-align:center}
.value-lead{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--muted);margin-right:var(--sp-1)}
.value-chip{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 13px}
/* two-tone icons: the icon body inherits currentColor (--accent, blue = the RNA / the apo state) and the
   `.i-o` group is the orange accent (the ligand, or the holo half) - the mark's own two-colour reading.
   `.i-of` is the filled variant. Nothing here changes the chip text. */
.value-chip .ico{width:13px;height:13px;flex:none;color:var(--accent)}
.value-chip .ico .i-o{stroke:var(--accent2)}
.value-chip .ico .i-of{fill:var(--accent2);stroke:none}

/* ============================================================================
   "WHAT A PAIR LOOKS LIKE" - one real served entry, filled by home.js::initPeek
   from /api/pairs. The section ships `hidden` and is only revealed once a real
   record has been written into it, so a failed fetch shows nothing at all.
   ========================================================================== */
.peek-band{border-top:1px solid var(--border);background:var(--bg);
  padding-top:var(--sp-10);padding-bottom:var(--sp-10)}
.peek-band[hidden]{display:none}                  /* `hidden` must win over any display rule below */
.peek-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--sp-6);align-items:center}
.peek-text h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:var(--text);margin:var(--sp-1) 0 var(--sp-3)}
.peek-text p{color:var(--text-2);font-size:var(--fs-md);line-height:1.6;margin:0 0 var(--sp-4)}
.peek-open{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.peek-open svg{width:14px;height:14px;flex:none}
/* the card is a .card (duotone top edge + hover lift inherited) */
.peek-card{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:var(--sp-4);align-items:start}
.peek-thumb{display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:1/1;
  background:var(--canvas);border:1px solid var(--border);border-radius:var(--r)}
.peek-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.peek-body{min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
.peek-ids{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.peek-state{display:inline-flex;flex-direction:column;line-height:1.1}
.peek-state i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.peek-state.is-holo i{color:var(--accent2)}       /* holo = orange, apo = blue: the mark's own code */
.peek-state.is-apo i{color:var(--accent)}
.peek-state b{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;color:var(--text)}
.peek-arrow{color:var(--muted);font-weight:700;align-self:flex-end;padding-bottom:2px}
.peek-lig{margin-left:auto;font-size:var(--fs-lg);align-self:flex-end;padding-bottom:2px}
.peek-sub{margin:2px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.peek-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:var(--sp-2);margin:var(--sp-3) 0 var(--sp-2)}
.peek-num{display:flex;flex-direction:column;gap:1px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r);padding:6px 10px}
.peek-num b{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:800;line-height:1.15;
  letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.peek-num i{font-style:normal;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}

/* ============================================================================
   RNA-DIVERSITY block - mini live t-SNE + de-redundancy callout
   ========================================================================== */
.diversity-band{padding-top:var(--sp-10);padding-bottom:var(--sp-10);background:var(--bg)}
.diversity-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6);align-items:center}
.div-text h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 var(--sp-3)}
.div-text p{color:var(--text-2);font-size:var(--fs-md);line-height:1.6;margin:0 0 var(--sp-4)}
.div-legend{display:flex;flex-wrap:wrap;gap:0;margin:0 0 var(--sp-4)}
.div-legend .type-badge{margin:0 6px 6px 0}      /* reuse .type-badge verbatim */
.div-legend .tb-count{font-weight:800;opacity:.95;margin-left:3px}
.div-legend-note{flex-basis:100%;font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin:2px 0 0}
.hero-stats-note{font-size:var(--fs-xs);color:var(--muted);margin:7px 0 0;line-height:1.4}
.div-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.div-actions .btn.primary{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.div-hint{font-size:var(--fs-sm);color:var(--muted)}
.div-hint a{color:var(--muted);border-bottom:1px dashed var(--border-strong)}
.div-hint a:hover{color:var(--accent);border-color:var(--accent)}

/* the mini plot card reuses the #cl-plot / .cl-plotcard look */
.div-plotcard{display:block;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4);box-shadow:var(--shadow-sm);text-decoration:none;
  transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.div-plotcard:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
#home-tsne{width:100%;height:auto;max-width:460px;margin:0 auto;display:block;
  background:var(--surface-2);border-radius:var(--r)}
.div-plotcap{font-size:var(--fs-xs);color:var(--muted);text-align:center;margin:var(--sp-3) 0 0}

/* ============================================================================
   FEATURE INTRO - five product surfaces
   ========================================================================== */
.feature-band{padding-top:var(--sp-10);padding-bottom:var(--sp-10);
  border-top:1px solid var(--border);background:var(--card)}
.feature-head{margin:0 0 var(--sp-6)}
.feature-head h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:var(--text);margin:var(--sp-1) 0 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--sp-4)}
/* feature cards ARE .card objects (same as gallery cards) - extend, don't redefine */
/* the apo->holo duotone top edge is .card's OWN rule (style.css: background-image:var(--grad-apoholo)
   painted at background-size:100% 0 and grown to 3px on hover). These five cards simply show it AT REST -
   one declaration, no second gradient, no ::before. */
.feat-card{display:flex;flex-direction:column;gap:var(--sp-2);text-decoration:none;box-shadow:var(--shadow-card);
  background-size:100% 3px}
.feat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.feat-featured{position:relative}
.feat-ico{width:40px;height:40px;border-radius:var(--r);display:inline-flex;align-items:center;justify-content:center;flex:none}
.feat-ico svg{width:21px;height:21px}
.feat-card h3{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--text);text-transform:none;letter-spacing:-.01em;font-family:var(--font-display)}
.feat-card p{margin:0;font-size:var(--fs-base);color:var(--muted);line-height:1.5;flex:1}
.feat-go{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-sm);font-weight:700;color:var(--text-2);
  transition:color var(--transition)}
.feat-go svg{width:14px;height:14px;transition:transform var(--transition)}
.card:hover .feat-go{color:var(--accent)}
.card:hover .feat-go svg{transform:translateX(3px)}
/* tinted icon tiles - one semantic pair each */
.ti-blue{background:var(--t-blue-bg);color:var(--t-blue-fg)}
.ti-orange{background:var(--t-orange-bg);color:var(--t-orange-fg)}
.ti-purple{background:var(--t-purple-bg);color:var(--t-purple-fg)}
.ti-indigo{background:var(--t-indigo-bg);color:var(--t-indigo-fg)}
.ti-green{background:var(--t-green-bg);color:var(--t-green-fg)}
/* slim secondary links row beneath the grid */
.feature-more{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5);font-size:var(--fs-sm)}
.feature-more a{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600}
.feature-more a:hover{color:var(--accent)}
.feature-more svg{width:14px;height:14px;flex:none}
/* ---- bento: Database gallery featured (left, tall) + the other four as a 2x2 (right) ---- */
.feature-grid.feature-bento{grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:1fr}
.feat-featured{grid-column:1;grid-row:1 / span 2}
.feat-featured p{flex:none}
.feat-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);flex:1;margin:var(--sp-2) 0;min-height:240px}
.feat-thumbs img{width:100%;height:100%;min-height:110px;object-fit:cover;border-radius:var(--r);
  border:1px solid var(--border);background:var(--surface-2)}
@media (max-width:900px){
  .feature-grid.feature-bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .feat-featured{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:560px){
  .feature-grid.feature-bento{grid-template-columns:1fr}
  .feat-featured{grid-column:auto}
  .feat-thumbs{min-height:200px}
}

/* ============================================================================
   BROWSE ANCHOR - header above the preserved gallery console
   ========================================================================== */
#gallery-section{scroll-margin-top:72px}            /* so the sticky header doesn't cover the heading */
.gallery-lead{max-width:1180px;margin:var(--sp-8) auto var(--sp-2);padding:0 var(--sp-6)}
.gallery-lead h2{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 4px}
.gallery-lead p{margin:0;color:var(--muted);font-size:var(--fs-base)}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:980px){
  .hero-split{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero-band{padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
  .hero-stats .hero-stat{flex:1 1 calc(50% - var(--sp-3));min-width:0}  /* counters wrap 2x2 */
  .hero-morphs{grid-template-columns:1fr 1fr}         /* one column of hero: the tiles go side by side */
  /* LIFT THE 420px STAGE CAP HERE. Above 980 the cap is inert (the .hero-split max-width keeps the
     stage track at 400.7px at every viewport up to 3440), so it only ever bit BELOW 980, where the
     stage is a full-width row: it pinned the two side-by-side tiles to 202x139 inside a 932px column
     and left >half the row empty. Measured 2026-07-29: cap on 202x138.9 / cap off 458x314.9. */
  .hero-stage{max-width:none}
  .diversity-grid{grid-template-columns:1fr;gap:var(--sp-5)}            /* matches .cl-grid breakpoint */
  .div-plotcard{order:2}
  .peek-grid{grid-template-columns:1fr;gap:var(--sp-5)}
}
@media(max-width:820px){
  .hero-morphs{grid-template-columns:1fr}             /* tiles stack - 2HOO clamp FIRST (DOM order) */
  .morph-card{aspect-ratio:16/10;max-height:300px}
}
@media(max-width:560px){
  .peek-card{grid-template-columns:1fr}
  .peek-thumb{aspect-ratio:16/10}
}
@media(max-width:600px){
  .home-band{padding:0 var(--sp-4)}
  .gallery-lead{padding:0 var(--sp-4)}
}
@media(max-width:520px){
  .hero-stats .hero-stat{flex:1 1 100%}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%;justify-content:center}
}