/* ============================================================
   GENE HEW v10 - REFINE PASS (2026-09-22)
   Additive layer, loaded LAST. Answers the 2026-09-21 critique:
   (1) three opener shapes instead of one, (2) the AI selector becomes
   a trail map so it stops twinning the app tray, (3) hero: quiet zone
   under the type, five photos, hand-drawn underline, (4) builds: real
   frames, lighter tray, (5) tools rail, (6) featured site, (7) design
   and brand-world walls, (8) analytics opener, (9) van, (10) contact
   centered on its own dark ground. Uses only v3 tokens plus the
   motion tokens added to base.css in the same pass.
   ============================================================ */

/* ---------- 1. opener rhythm ----------
   Before: every section opened eyebrow / title / intro, left-aligned at the same x.
   Now: stack (builds, ai, explore) · split spread (tools, sites, design) ·
   inline column (analytics, see index.html) · centered (contact). */
@media (min-width: 861px) {
  .more-tools .sec-head, #sites .sec-head, .design .sec-head {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(28px, 4vw, 72px); align-items: end;
  }
  .more-tools .sec-head > .sec-eyebrow, #sites .sec-head > .sec-eyebrow, .design .sec-head > .sec-eyebrow,
  .more-tools .sec-head > .sec-title, #sites .sec-head > .sec-title, .design .sec-head > .sec-title { grid-column: 1; }
  .more-tools .sec-head > .sec-intro, #sites .sec-head > .sec-intro, .design .sec-head > .sec-intro {
    grid-column: 2; margin-top: 0; padding-bottom: 0.3em; max-width: 44ch;
  }
}
/* the section title carries the split spreads on its own; no eyebrow needed there */
.more-tools .sec-head, .design .sec-head { margin-bottom: 28px; }

/* ---------- 2. AI selector as a trail map ----------
   Five numbered waypoints on a dashed guide line that draws itself in once
   (genre-trail-map mechanic). Same buttons, same ARIA, same browse.js; only
   the surface changes. v9/tabs.css made this a second segmented tray, which
   twinned the app tray directly above it. */
/* inherits: true so the ::before guide line reads the value set on the list */
@property --trail { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
.ai-browser .browse-navigation { align-items: flex-start; gap: 18px; margin: 0 0 30px; border-bottom: 0; }
.ai-browser .browse-navigation .ai-tabs {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  counter-reset: waypoint; --trail: 0%;
}
.ai-browser .browse-navigation .ai-tabs::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 19px; height: 0;
  border-top: 2px dashed color-mix(in oklab, var(--green), transparent 40%);
  -webkit-mask-image: linear-gradient(90deg, #000 var(--trail), transparent var(--trail));
          mask-image: linear-gradient(90deg, #000 var(--trail), transparent var(--trail));
  transition: --trail var(--dur-enter) var(--ease-out) 0.15s;
}
.ai-browser .browse-navigation .ai-tabs.trail-in { --trail: 100%; }
/* no JS (motion.js never adds body.js): the line is simply there, like the underline */
body:not(.js) .ai-browser .browse-navigation .ai-tabs { --trail: 100%; }
.ai-browser .browse-navigation .ai-tabs button,
.ai-browser .browse-navigation .ai-tabs button[aria-selected="true"],
.ai-browser .browse-navigation .ai-tabs button:not([aria-selected="true"]):hover,
.ai-browser .browse-navigation .ai-tabs button:not([aria-selected="true"]):active {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 0; padding: 0 4px 8px; overflow: visible; isolation: auto;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--ink-soft); font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0;
  counter-increment: waypoint;
}
/* tabs.css lifts a hovered tab by 1px inside its own hover gate; a waypoint stays put */
@media (hover: hover) {
  .ai-browser .browse-navigation .ai-tabs button:not([aria-selected="true"]):hover { transform: none; }
}
.ai-browser .browse-navigation .ai-tabs button::before {
  content: counter(waypoint, decimal-leading-zero); display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; position: relative; z-index: 1;
  border: 2px solid color-mix(in oklab, var(--green), transparent 30%); background: var(--paper);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--green-deep);
  transition: background var(--dur-feedback) ease, border-color var(--dur-feedback) ease, color var(--dur-feedback) ease, box-shadow var(--dur-feedback) ease;
}
.ai-browser .browse-navigation .ai-tabs button::after { display: none; }
.ai-browser .browse-navigation .ai-tabs button:hover { color: var(--green-deep); }
.ai-browser .browse-navigation .ai-tabs button:hover::before { border-color: var(--green-deep); }
.ai-browser .browse-navigation .ai-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 650; }
.ai-browser .browse-navigation .ai-tabs button[aria-selected="true"]::before {
  background: var(--green-deep); border-color: var(--green-deep); color: #fff;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--green), transparent 82%);
}
/* autoplay countdown: a hairline growing under the active label, not a card fill */
.ai-browser .browse-navigation .ai-tabs button > .tab-timer {
  inset: auto 22% 0; width: 56%; height: 2px; border-radius: 2px; margin: 0; z-index: 0;
  background: var(--green); transform: scaleX(var(--tab-progress, 0)); transform-origin: left;
}
.ai-browser .browse-navigation .ai-tabs button:focus-visible { outline: 0; }
.ai-browser .browse-navigation .ai-tabs button:focus-visible::before { outline: 3px solid var(--green); outline-offset: 3px; }
.ai-browser .browse-navigation .view-switcher { align-self: flex-start; margin-top: -3px; }
@media (max-width: 720px) {
  .ai-browser .browse-navigation { gap: 8px; margin-bottom: 22px; }
  .ai-browser .browse-navigation .ai-tabs { gap: 0; padding: 0; border-radius: 0; }
  .ai-browser .browse-navigation .ai-tabs::before { top: 15px; left: 10%; right: 10%; }
  .ai-browser .browse-navigation .ai-tabs button,
  .ai-browser .browse-navigation .ai-tabs button[aria-selected="true"] { gap: 7px; padding: 0 1px 6px; font-size: 11px; letter-spacing: -0.01em; border-radius: 0; background: transparent; white-space: nowrap; }
  .ai-browser .browse-navigation .ai-tabs button::before { width: 30px; height: 30px; font-size: 10px; }
  .ai-browser .browse-navigation .ai-tabs button[aria-selected="true"]::before { box-shadow: 0 0 0 4px color-mix(in oklab, var(--green), transparent 82%); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-browser .browse-navigation .ai-tabs { --trail: 100%; }
  .ai-browser .browse-navigation .ai-tabs::before { transition: none; }
}


/* ---------- 3. hero ----------
   The contour field ran straight under the headline. A radial mask lifts it out of the
   type column and leaves it at full strength behind the photos. */
.hero-c #flow-canvas {
  -webkit-mask-image: radial-gradient(ellipse 36% 44% at 50% 52%, transparent 30%, #000 100%);
          mask-image: radial-gradient(ellipse 36% 44% at 50% 52%, transparent 30%, #000 100%);
}
/* five photos, one deliberately larger (fp6 was the sixth, a small duplicate corner) */
.hero-floats .fp6 { display: none; }
.hero-floats .fp1 { width: clamp(150px, 16vw, 290px); top: 17%; left: 2%; }
.hero-floats .fp3 { bottom: 11%; left: 24%; }
/* phones: the headline was 9.6vw on a 390px screen; give it real hero scale */
@media (max-width: 520px) {
  .hero-core h1 { font-size: clamp(2.5rem, 11vw, 3.4rem); max-width: 12ch; }
}
/* "existed": after the solid word lifts off, a hand-drawn green stroke underlines the
   outline (the same hand that drew the contour lines). refine.js inserts the svg. */
.weight { padding-bottom: 0.02em; }
.weight .w-under { position: absolute; left: -3%; bottom: -0.1em; width: 106%; height: 0.24em; overflow: visible; pointer-events: none; }
.weight .w-under path { fill: none; stroke: var(--green); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 230; stroke-dashoffset: 230; }
body.js .hero-core h1.go .w-under path, body.js .hero-core h1.go-done .w-under path { animation: wUnder 0.75s var(--ease-out) 3s forwards; }
body:not(.js) .weight .w-under path { stroke-dashoffset: 0; }
@keyframes wUnder { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .weight .w-under path { stroke-dashoffset: 0; animation: none !important; } }

/* ---------- 4. builds: the proof gets the weight, the selector gives some up ---------- */
.app-browser .browse-navigation .browse-tabs { padding: 4px; border-radius: 15px; }
.app-browser .browse-navigation .app-tabs button { min-height: 54px; padding: 8px 10px; border-radius: 11px; }
.app-browser .browse-navigation .app-tabs button > span { font-size: 14.5px; }
.app-browser .browse-navigation .app-tabs small { margin-top: 3px; font-size: 11.5px; }
/* screen cards: paper card, white browser frame with a three-dot bar, so a capture
   reads as a product window instead of a white rectangle on a pale-green rectangle */
.app-browser .screen-card { background: var(--paper); border-color: var(--line); }
.story-winbase .screen-card { background: var(--paper); }
.app-browser .capture-frame {
  position: relative; margin: 12px 12px 0; padding: 34px 10px 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.app-browser .capture-frame::before {
  content: ""; position: absolute; top: 12px; left: 14px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); box-shadow: 13px 0 0 var(--line), 26px 0 0 var(--line);
}
.app-browser .capture-frame :is(img, video) { border-radius: 6px; box-shadow: none; border: 1px solid color-mix(in oklab, var(--ink), transparent 92%); }
.app-browser .screen-card figcaption { padding-top: 14px; }
@media (max-width: 720px) {
  .app-browser .capture-frame { margin: 10px 10px 0; padding: 30px 8px 8px; }
  .app-browser .capture-frame::before { top: 10px; left: 12px; }
}

/* ---------- 5. tools rail ----------
   A raw scrollbar track sat under the rail on desktop; the chevrons already do that job.
   (Diagram box sizing moved to v11/grok.css.) */
.tools-shell .browse-rail { scrollbar-width: none; padding-bottom: 6px; }
.tools-shell .browse-rail::-webkit-scrollbar { display: none; }

/* ---------- 6. sites: one featured card sets the rhythm ---------- */
@media (min-width: 1001px) {
  .website-gallery .web-card:first-child { grid-column: span 2; }
  .website-gallery .web-card:first-child .web-shot { height: 380px; }
  .website-gallery .web-card:first-child .w-name { font-size: 22px; }
  /* the card sharing that first row matches its height, so no card stretches over dead space */
  .website-gallery .web-card:nth-child(2) .web-shot { height: 380px; }
}

/* ---------- 7. design and brand-world walls ----------
   Design and Explore were both pale green and adjacent, so their paddings merged into
   one dead band. Design goes back to paper; the page alternates paper / green / paper / dark. */
.design { background: var(--paper); }
.design .bw-tile { border-color: var(--line); }
/* the wall's edge fade was 5% wide, so a cut tile at the left edge read as a bug */
.bw-wall.is-live {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* touch: captions sit over busy artwork; give them a real scrim */
@media (hover: none) {
  .bw-tile::after { opacity: 1; background: linear-gradient(to top, rgba(6, 18, 12, 0.78), rgba(6, 18, 12, 0.35) 34%, transparent 58%); }
  .bw-tile .bw-n { font-size: 11px; left: 12px; bottom: 10px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); }
}

/* ---------- 8. analytics: the title lives in the quote column now (index.html) ----------
   The 7rem quotation mark left a dead band under itself on phones. */
#analytics .quote-block .sec-head { margin-bottom: 26px; }
#analytics .quote-block blockquote { font-size: clamp(1.45rem, 2.2vw, 2rem); }
@media (max-width: 900px) { #analytics .analyst-grid { gap: 32px; } }

/* ---------- 9. van: three text tiers were fighting; specs read like a build log ---------- */
.van-sec .sec-head { margin-bottom: clamp(28px, 4vw, 44px); }
.van-intro .lead { font-size: clamp(1.2rem, 1.75vw, 1.55rem); line-height: 1.35; }
.spec b {
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; margin-bottom: 7px;
}

/* ---------- 10. contact: centered on its own ground ----------
   The portrait hung outside the content column on desktop; the whole head now stacks
   centered over the booking card, which was already centered. */
.contact-head { flex-direction: column; align-items: center; text-align: center; gap: 22px; margin-bottom: clamp(32px, 4vw, 48px); }
.contact-portrait { width: 96px; height: 96px; rotate: 0deg; }
.contact-head .sec-head { display: flex; flex-direction: column; align-items: center; }
.contact-head .sec-title { max-width: 18ch; }
.contact-head .sec-intro { margin-left: auto; margin-right: auto; max-width: 54ch; }
@media (max-width: 860px) { .contact-head { align-items: center; } }
/* the booking card now takes the section's own ink, so the Calendly iframe
   (recolored through its URL params) sits on the same dark ground */
.book-embed { background: var(--black); box-shadow: 0 26px 64px -30px color-mix(in oklab, var(--green), transparent 55%); border: 1px solid var(--line-dark); }