/* ==========================================================================
   home-v2.html only: the rebuilt homepage sections (after the hero).
   Loaded after css/home-v2.css (shared v2 base) and uses its tokens.
   Every section headline sits beside its visual on desktop (.hs-split) and
   directly above it on phones. Canvas visuals: js/home/viz-*.js.
   ========================================================================== */

/* Homepage accent: #ff9d34 (brief). Other v2 pages keep the base #FF9D34. */
body.page-home {
  --accent: #ff9d34;
  --accent-hi: #ffd9ad;
  --accent-soft: rgba(255, 157, 52, .14);
  --accent-glow: rgba(255, 157, 52, .5);
  --act-up: #ff9d34;
  --act-down: #7fb3d0;
  --act-same: #666666;
}

.hs-inner { display: grid; gap: var(--s-7); }
.hs-head { display: grid; gap: var(--s-4); align-content: start; }
.hs-head .lead { margin-top: 0; }
.hs-head h2 { margin: 0; }
.hs-split, .hs-stack-wrap { display: grid; gap: var(--s-6); align-items: center; }
.hs-viz { margin: 0; display: grid; gap: var(--s-3); min-width: 0; }
.hs-canvas { display: block; width: 100%; }
.hs-framed { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #050505; }
.hs-square { aspect-ratio: 1 / 1; max-width: 520px; justify-self: center; }
.hs-ctx { aspect-ratio: 4 / 4.6; }
@media (min-width: 640px) { .hs-ctx { aspect-ratio: 4 / 3.2; } }
.hs-cap, .hs-label {
  margin: 0; font: 400 .85rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.hs-head em, .hs-stack-text em { font-style: normal; color: var(--text); }

/* The AI-to-Cell technology stack */
.hs-stack-text { display: grid; gap: var(--s-6); align-content: start; }
.hs-closing { margin: 0; max-width: 34em; font-size: clamp(1.1rem, 1.6vw, 1.2rem); line-height: 1.5; color: var(--text); }
.hs-stack { list-style: none; margin: 0; padding: 0; display: grid; }
.hs-stack li { position: relative; display: grid; gap: 6px; padding: 18px 0 18px 32px; border-left: 1px solid rgba(255, 157, 52, .35); }
.hs-stack li::before {
  content: ""; position: absolute; left: -5px; top: 25px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--accent);
}
.hs-stack li:first-child { border-image: linear-gradient(to bottom, transparent 25px, rgba(255, 157, 52, .35) 25px) 1; }
.hs-stack li:last-child { border-image: linear-gradient(to bottom, rgba(255, 157, 52, .35) 25px, transparent 25px) 1; }
.hs-stack b { font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.55rem); letter-spacing: -0.01em; }
.hs-stack span { color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.5; }
/* Stack block (Nov 2026): big orange title, components left beside the image right */
.hs-stack-block { display: grid; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.hs-stack-title { margin: 0; color: var(--accent); font-weight: 500; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.025em; }
.hs-stack-sub { margin: 0; max-width: 40em; font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.5; color: var(--text); }
.hs-stack-block .hs-stack-wrap { margin-top: var(--s-4); align-items: stretch; }
.hs-stack-block .hs-stack { align-content: space-between; }
@media (min-width: 901px) {
  .hs-stack-block .hs-stack-wrap { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hs-stack-block .hs-stack li { padding: 22px 0 22px 36px; }
}

/* Experimental loop */
.hs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.hs-steps li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid rgba(255, 157, 52, .35); }
.hs-n { font: 400 .8rem/1 var(--mono); color: var(--accent); }
.hs-steps b { font-weight: 500; font-size: 1.3rem; }
.hs-steps li > span:last-child { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.hs-resolve { display: grid; gap: var(--s-4); }
.hs-panel { margin: 0; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .015); }
.hs-panel svg { display: block; width: 100%; height: auto; }
.hs-panel figcaption { display: flex; justify-content: space-between; font: 400 .7rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hs-panel figcaption b { color: var(--text); font-weight: 500; }
.hs-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: 400 .7rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hs-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
body.page-home .lg-up { background: var(--act-up); }
body.page-home .lg-down { background: var(--act-down); }
body.page-home .lg-same { background: var(--act-same); }
.lg-none { background: transparent; border: 1px solid #3a3631; }

/* Visual Biology Tokens: the existing time-lapse and flip cards sit below */
#tokens .vbt-feature { margin-top: 0; }

/* The core technology */
.hs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.hs-big { display: grid; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.hs-big b { font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hs-big span { font: 400 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hs-chips span { padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .88rem; color: #cccccc; }
.hs-compound { display: grid; gap: var(--s-5); }
.hs-cols { display: grid; gap: var(--s-4); }
.hs-col {
  display: grid; gap: var(--s-3); align-content: start; padding: var(--s-6) var(--s-5);
  border: 1px solid rgba(255, 157, 52, .28); border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(255, 157, 52, .06), rgba(255, 157, 52, 0));
}
.hs-col-viz { height: 170px; margin-bottom: var(--s-2); }
.hs-who { font: 400 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.hs-col b { font-weight: 500; font-size: 1.35rem; letter-spacing: -0.01em; }
.hs-col p { margin: 0; color: var(--muted); font-size: .97rem; line-height: 1.6; }

/* Applications */
.hs-design { height: 460px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .012); }
.hs-cycle { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.hs-cycle li { position: relative; display: grid; gap: 8px; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: .97rem; line-height: 1.45; }
.hs-cycle li span { font: 400 .7rem/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
.hs-modalities { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: 1.05rem; color: #cccccc; }
.hs-modalities[hidden], [data-flag][hidden] { display: none; }

.hs-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }

/* CTA: the agent session replaces the old sculpture */
.hs-cta .hs-agent { height: 400px; }

/* Footer line */
.hs-footline {
  margin: 0; padding-block: var(--s-7); border-top: 1px solid var(--line); text-align: center;
  font: 400 .75rem/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted);
}

@media (min-width: 640px) {
  .hs-steps, .hs-cycle { gap: var(--s-4); }
  .hs-cycle li:not(:last-child)::after {
    content: "→"; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
    color: var(--accent); background: var(--bg); font-size: 14px;
  }
  .hs-cycle li:nth-child(2)::after { display: none; }
  .hs-resolve { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hs-design { height: 380px; }
}

@media (min-width: 901px) {
  .hs-inner { gap: var(--s-8); }
  .hs-split, .hs-stack-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .hs-steps, .hs-cycle, .hs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hs-cycle li:nth-child(2)::after { display: block; }
  .hs-cycle li:last-child::after {
    content: "↺ next design cycle"; position: absolute; left: 18px; bottom: -26px;
    font: 400 .7rem/1 var(--mono); color: var(--muted);
  }
  .hs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-design { height: 340px; }
  .hs-cta > .container { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hs-cta .hs-agent { height: 260px; }
}

/* Applications: cellular systems proof point (data: js/cells/cell-systems-data.js) */
.hs-proof { margin-bottom: var(--s-4); max-width: 62ch; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.hs-proof b { color: var(--text); font: 500 1rem/1 var(--mono); }

/* Differentiation, validation, model generations, scale (Yochi feedback, Nov 2026) */
.hs-diff { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.hs-diff li { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.hs-diff li b { font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; }
.hs-diff li p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.hs-diff li:not(.is-us) .hs-who { color: var(--muted); }
.hs-diff li.is-us { border-color: rgba(255, 157, 52, .55); background: linear-gradient(180deg, rgba(255, 157, 52, .08), rgba(255, 157, 52, 0)); }
.hs-moat { display: grid; gap: var(--s-4); }
.hs-moat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.hs-moat li { display: grid; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.hs-moat li b { font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.hs-moat li span { color: var(--muted); font-size: .95rem; line-height: 1.5; }
.hs-val { display: grid; gap: var(--s-4); }
.hs-val ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); color: #cccccc; font-size: .97rem; line-height: 1.5; }
.hs-note { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; max-width: 70ch; }
.hs-gen { display: grid; gap: var(--s-3); margin-top: var(--s-6); overflow-x: auto; }
.hs-gen table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
.hs-gen th, .hs-gen td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hs-gen thead th { font: 400 .68rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hs-gen tbody th { font-weight: 500; }
.hs-scale { margin-top: var(--s-5); }
@media (min-width: 640px) { .hs-moat ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) {
  .hs-diff { grid-template-columns: 1fr 1fr 1.4fr; }
  .hs-moat ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hs-val { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Content owed by Iris: red flags, must be replaced before publishing */
.ph-iris { font: 500 .78rem/1.4 var(--mono); letter-spacing: 0; text-transform: none; color: #ff7a7a; background: rgba(255, 90, 90, .1); border: 1px dashed #ff7a7a; border-radius: 4px; padding: 1px 6px; display: inline-block; }
.hs-big b .ph-iris { font-size: .8rem; }
.flag-iris { margin: 0; padding: 10px 14px; border: 1px solid #ff7a7a; border-radius: var(--radius-sm); background: rgba(255, 90, 90, .08); color: #ff9a9a; font: 500 .8rem/1.5 var(--mono); }
.hs-case .hs-n { white-space: nowrap; }
@media (min-width: 901px) { .hs-steps.hs-case { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Our approach: three equal pillars */
@media (min-width: 901px) { .hs-diff.hs-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Pharma examples on the homepage: one horizontal loop per modality (no vertical diagrams; 2x2 on phones) */
.ex-grid { display: grid; gap: var(--s-5); }
.ex-card { display: grid; gap: var(--s-4); align-content: start; padding: var(--s-6) var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
.ex-card h3 { margin: 0; font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.ex-card .hs-who { margin: 0; font-size: .9rem; }
.ex-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.ex-flow li { position: relative; display: grid; gap: 6px; align-content: start; padding: var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.ex-flow li.is-biogpu { border-color: var(--accent); background: rgba(255, 157, 52, .08); }
.ex-flow .ex-n { font: 500 .85rem/1 var(--mono); color: var(--accent); }
.ex-flow b { font-weight: 500; font-size: 1.1rem; line-height: 1.3; }
.ex-flow li > span:last-child { color: var(--muted); font-size: 1rem; line-height: 1.45; }
.ex-back { margin: 0; text-align: center; border: 1px dashed rgba(255, 157, 52, .5); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); padding: 6px 0 8px; margin-top: calc(-1 * var(--s-2)); }
.ex-back span { font: 500 .9rem/1.4 var(--mono); color: var(--accent); }
@media (min-width: 901px) {
  .ex-grid { grid-template-columns: 1fr; }
  .ex-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .ex-flow li:not(:last-child)::after { content: "→"; position: absolute; right: calc(-1 * var(--s-5) + 4px); top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 1.1rem; }
}

/* Modality chips (modalities-v2.html) */
.mod-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mod-chips a { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 1rem; }
.mod-chips a:hover { border-color: var(--accent); color: var(--accent); }

/* Already built: a bridge from the hero (definition at reading size + proof), not a second headline */
.built { padding: var(--s-8) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-alt, #0b0b0b); }
.built-grid { display: grid; gap: var(--s-7); }
.built-text { display: grid; gap: var(--s-4); align-content: start; }
.built-tag { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--mono); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; color: var(--label); }
.built-def { margin: 0; max-width: 34em; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.4; letter-spacing: -0.01em; color: #CCCCCC; }
.built-def b { color: var(--text, #F5F5F5); font-weight: 500; }
.built-lead { margin: 0; max-width: 40em; color: var(--muted); font-size: clamp(1.05rem, 1.4vw, 1.15rem); line-height: 1.6; }
.built-proof { display: grid; gap: var(--s-4); align-content: start; padding-top: var(--s-6); border-top: 1px solid var(--line); }
.built-num { margin: 0; font-family: var(--mono); font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--accent); }
.built-money { margin: 0; font-size: 1.05rem; line-height: 1.55; color: #CCCCCC; max-width: 30em; }
.built .proof-logos { justify-content: flex-start; flex-wrap: nowrap; gap: var(--s-6); max-width: 100%; grid-row: auto; grid-column: auto; margin-top: var(--s-2); }
.built .proof-logos .logo-abbvie { height: 24px; }
.built .proof-logos .logo-takeda { height: 56px; }
.built .proof-logos .logo-lilly { height: 46px; }
.built .text-link { font-size: 1rem; }
@media (min-width: 901px) {
  .built-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--s-9); align-items: center; }
  .built-proof { padding: 0 0 0 var(--s-8); border-top: 0; border-left: 1px solid var(--line); }
}

/* Intelligence that compounds: tokens building up around disease networks (js/home/viz-compound.js) */
#compoundviz { aspect-ratio: 16 / 7; }
@media (max-width: 639px) {
  #compoundviz { aspect-ratio: 1 / 0.72; }
  .built .proof-logos { justify-content: space-between; gap: var(--s-4); }
  .built .proof-logos .logo-abbvie { height: 18px; }
  .built .proof-logos .logo-takeda { height: 40px; }
  .built .proof-logos .logo-lilly { height: 34px; }
}

/* Core technology model visual (concrete readout) and the cellular network experiment */
#recogviz { aspect-ratio: 4 / 3.3; }
#expviz { aspect-ratio: 16 / 8.6; }
@media (max-width: 639px) { #recogviz { aspect-ratio: 1 / 0.82; } #expviz { aspect-ratio: 1 / 1; } }

/* Applications: modality links under the design visual */
.mod-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mod-links a { padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .95rem; color: var(--text); text-decoration: none; transition: border-color .2s var(--ease), color .2s var(--ease); }
.mod-links a:hover, .mod-links a:focus-visible { border-color: var(--accent); color: var(--accent); }
.mod-links a.is-on { border-color: var(--accent); color: var(--accent); }
#applications .ex-grid { margin-top: var(--s-2); }

/* Therapeutic workflows: hero and per-modality loops (js/mod/mod-loops.js) */
#mod-hero { aspect-ratio: 1 / 0.92; }
.mod-loop { aspect-ratio: 4 / 3; }
@media (max-width: 639px) { .mod-loop { aspect-ratio: 1 / 0.85; } }

/* Applications: one antibody example as a loop (js/home/viz-antibody.js), then the modality links */
.ab-example { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.ab-title { margin: 0; font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; max-width: 26em; }
#abviz { aspect-ratio: 16 / 7.2; }
.ab-across { margin: var(--s-3) 0 0; font-size: 1.05rem; color: #CCCCCC; }
@media (max-width: 639px) { #abviz { aspect-ratio: 1 / 1.05; } }

/* Where BioGPU fits and the team (js/home/viz-fit-team.js) */
#diffviz { aspect-ratio: 16 / 6; }
#teamviz { aspect-ratio: 16 / 8; }
.team-viz { margin: var(--s-6) 0 var(--s-7); }
@media (max-width: 639px) { #diffviz { aspect-ratio: 1 / 0.8; } #teamviz { aspect-ratio: 1 / 1; } }

/* The platform section (stack) now has a section heading */
#platform .hs-stack-block { margin-top: 0; padding-top: 0; border-top: 0; }

/* Visual Biology Tokens: healthy vs disease time course (js/home/viz-timecourse.js) */
#tcviz { aspect-ratio: 16 / 9.5; }
@media (max-width: 639px) { #tcviz { aspect-ratio: 1 / 0.82; } }
.tc-compare figcaption { margin-top: var(--s-3); }

/* Second headline sentence under a section title (homepage model section) */
.hs-strap { margin: calc(var(--s-3) * -1) 0 var(--s-4); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; font-weight: 500; color: var(--accent); max-width: 30em; }

/* Hero: the differentiator, in Anima orange */
.hero-em { color: var(--accent); font-weight: 600; white-space: nowrap; }

/* Homepage leadership: six across on desktop */
@media (min-width: 901px) { .page-home .team { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Therapeutic workflows: the shared four steps under the hero */
.mod-steps-h { margin: var(--s-6) 0 var(--s-3); font: 500 .9rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--label); }

/* Technology: reasoning on the network (js/tech/tech-reason.js) */
#reasonviz { aspect-ratio: 16 / 7.5; }
@media (max-width: 639px) { #reasonviz { aspect-ratio: 1 / 1.05; } }