/* Playful landing experiment (worktree only).
   1. White theme: cream surfaces become pure white / near-white.
   2. Split hero with the live Hairline figure, no chrome around it.
   3. Sticky section menu with travelling active marker (workspace.html).
   Loaded after site.css (+ graph.css / feature-details.css), so these rules win. */

:root{
  --paper:#ffffff;
  --soft:#f5f5f4;
  --line:#e6e6e2;
  --line-soft:#efefec;
}

/* Header veil and controls: pure white glass. */
.site-header::before{background:rgba(255,255,255,.45);}
.menu-trigger:hover{background:#f2f2f0;}
.is-open .menu-trigger{border-color:var(--line-soft);}

/* Cream sections -> white. */
.ai-section{background:#fff;}
.ai-integration{background:#fff;}
.pricing-section{background:#fff;}
.price-card{background:#fff;}
.table-scroll{background:#fff;}
.recording-mat{background:#f4f4f2;}
.screenshot-slot{background:#fff;}
.overview-graph .graph-body{background:#fff;}
#workspace .overview-feature-card{background:#fff;}
#workspace .overview-tool-link .overview-shot{background:#fff;}
#workspace .feature-composition{background:#f5f5f4;}
.case-icon{background:#f1f1ee;}
.auth-panel input{background:#fff;}
.download-option>em{background:#f0f0ec;}
.shot-choice:hover{background:#f1f1ee;}
.menu-body{background:transparent;}

/* ---------- Split hero with live figure ---------- */
.hero-split{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;text-align:left;padding-top:64px;padding-bottom:64px;}
.hero-split .hero-copy>p{font-size:16px;line-height:1.7;margin:40px 0 0;max-width:560px;color:var(--muted);}
.hero-split .hero-actions{justify-content:flex-start;margin-top:28px;}
.hero-figure{min-width:0;}
.hero-figure iframe{display:block;width:100%;aspect-ratio:5/4;border:0;background:transparent;}
@media(max-width:900px){
  .hero-split{grid-template-columns:minmax(0,1fr);gap:4px;text-align:center;padding-top:40px;}
  .hero-split .hero-copy>p{font-size:14px;margin-top:32px;}
  .hero-split .hero-actions{justify-content:center;}
  .hero-figure{width:100%;max-width:520px;margin:4px auto 0;}
}

/* Straight technical underline for the hero subline, broken at descenders. */
.topline{text-decoration:underline;text-decoration-thickness:.045em;text-underline-offset:.14em;text-decoration-color:#3a3a37;white-space:nowrap;}

/* ---------- Section menu (workspace.html, hairline skill style) ---------- */
.detail-workspace.has-menu{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;align-items:start;overflow:visible;}
.section-menu{position:sticky;top:110px;grid-row:1/-1;align-self:start;font-size:12px;color:#86877e;padding-top:8px;}
.section-menu strong{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:10px;}
.section-menu strong::before{content:none;}
.menu-group-icon{width:14px;height:14px;flex:none;color:var(--ink);}
.section-menu a{position:relative;display:block;padding:5px 0 5px 24px;color:#86877e;transition:color .25s;}
.section-menu a::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:var(--line);}
.section-menu a::after{content:"";position:absolute;left:7px;top:0;width:10px;height:15px;border-left:1px solid var(--line);border-bottom:1px solid var(--line);border-bottom-left-radius:5px;transition:border-color .25s;}
.section-menu a:hover{color:var(--ink);}
.section-menu a.is-active{color:var(--ink);font-weight:600;}
.section-menu a.is-active::before{background:var(--ink);}
.section-menu a.is-active::after{border-color:var(--ink);}
.menu-marker{position:absolute;left:13px;top:0;width:7px;height:7px;border-radius:50%;background:var(--ink);transition:top .38s var(--ease);pointer-events:none;}
.detail-workspace.has-menu>.workspace-detail{grid-column:2;min-width:0;}
@media(max-width:1000px){
  .detail-workspace.has-menu{display:block;}
  .section-menu{display:none;}
}