/* The page header every feature page shares (founder 2026-11-01: "Make this beautiful", then "DO IT" for the
   rest of the pages). A glass panel in the app's own language: the --gl-* tokens come from app-shell.css, which
   nginx injects after this file, so a page header matches every other panel instead of inventing a second look.
   The fallback after each var() is what the page draws on tanimawoai.com, where the shell is not injected.
   No rounded corners: nginx injects square.css after this file and squares everything off (founder 2026-10-06).
   The only movement is one entrance. Nothing floats and nothing follows a mouse.

   Markup:
     <header class="ph">
       <div class="ph-top">
         <span class="ph-mark" aria-hidden="true"><svg .../></span>
         <div><h1>Two <span>words</span></h1><p class="ph-lead">One or two rows.</p></div>
       </div>
       <div class="tc-bar" data-chips="..."> ... </div>   <!-- optional, list-chips.js -->
     </header>
   Keep the lead to two rows: past about 250 characters it spills onto a third. */
.ph {
  position: relative; overflow: hidden; margin: 0 0 20px; padding: 26px 28px;
  border: 1px solid var(--gl-edge, rgba(255,255,255,.1));
  background: var(--gl-fill, linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.022) 46%, rgba(255,255,255,.012)));
  box-shadow: inset 0 1px 0 var(--gl-edge-hi, rgba(255,255,255,.2)), var(--gl-lift, 0 18px 40px -32px rgba(0,0,0,.95));
  animation: ph-in .5s cubic-bezier(.2,.7,.3,1) both;
}
/* The light behind the mark. Drawn once and left alone. */
.ph::before {
  content: ""; position: absolute; top: -200px; right: -80px; width: 520px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(56,182,255,.2), rgba(56,182,255,0) 70%);
}
.ph-top { position: relative; display: flex; align-items: flex-start; gap: 18px; }
.ph-mark {
  flex: none; width: 56px; height: 56px; display: grid; place-items: center; color: #04121f;
  background: linear-gradient(145deg, #7dd3fc, #38b6ff 55%, #1d7bff);
  box-shadow: 0 10px 24px -14px rgba(56,182,255,.9), inset 0 1px 0 rgba(255,255,255,.5);
}
.ph-mark svg { width: 28px; height: 28px; }
.ph h1 {
  font-family: var(--font-head, "Space Grotesk", "Segoe UI", sans-serif); font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em; margin: 1px 0 10px;
}
.ph h1 span { background: linear-gradient(90deg, #7dd3fc, #38b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Two rows, not three (founder 2026-11-01): the cap is off so the sentence uses the hero's width. */
.ph-lead { margin: 0; max-width: none; font-size: 1.02rem; line-height: 1.62; color: var(--text-muted, #8b93ad); }
/* The three facts are the chip bar from list-chips.js: clickable, and they sort what each website shows. */
.ph .tc-bar { position: relative; }
.ph .tc-chip:nth-child(2):not([aria-pressed="true"]) svg { color: #ffd666; }
.ph .tc-chip:nth-child(3):not([aria-pressed="true"]) svg { color: var(--gl-mint, #7ee8a8); }
@keyframes ph-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ph { animation: none; } }
@media (max-width: 640px) {
  .ph { padding: 20px 18px; }
  .ph-top { gap: 14px; }
  .ph-mark { width: 46px; height: 46px; }
  .ph-mark svg { width: 23px; height: 23px; }
  .ph-lead { font-size: .96rem; }
}