@font-face { font-family: Gelasio; src: url("assets/Gelasio-Italic.ttf") format("truetype"); font-style: italic; font-weight: 400 700; font-display: swap; }
.experimental { --bg:#faf9f6; --ink:#252b2a; --muted:#646e6b; --line:#dfe3de; --accent:#46756b; --accent-bright:#638c80; background:var(--bg); }
.experimental .nav { background:rgba(250,249,246,.94); }
.experimental .brand-mark { color:#293c36; }
/* One clear introduction, followed by the full product demo. */
.lab-hero { max-width:1100px; margin:auto; padding:86px 24px 64px; text-align:center; }
.lab-title .eyebrow { justify-content:center; font-size:11px; margin-bottom:26px; }
.lab-title h1 { font-size:clamp(52px,7.2vw,98px); line-height:1.04; letter-spacing:-4px; }
.lab-title em { font-family:Gelasio,Georgia,serif; font-weight:400; color:var(--accent); }
.lab-intro { font-size:20px; line-height:1.65; margin:26px auto 0; max-width:51ch; color:var(--muted); }
.lab-hero .hero-actions { justify-content:center; gap:12px; margin-top:30px; }
.btn-outline { border:1px solid #cbd4cc; background:transparent; color:var(--ink); }
.btn-outline:hover { background:#edf1eb; }
.experimental #calls { padding-top:0; }
.demo-intro { display:flex; align-items:baseline; justify-content:space-between; gap:24px; border-top:1px solid var(--line); padding-top:24px; }
.experimental #calls .demo-intro h2 { font-size:18px; letter-spacing:-.4px; line-height:1.4; max-width:none; }
.demo-intro p { font-size:13px; color:var(--muted); }
.experimental #calls .demo { margin-top:22px; }
.experimental .ex { padding-top:65px; }
.experimental .ex h2 { max-width:24ch; font-size:clamp(38px,4.5vw,60px); }
.experimental .last .a { background:#e9eee7; color:var(--ink); padding:60px; }
.experimental .last h2 { font-size:clamp(48px,6vw,76px); }
.experimental .btn-dark,.experimental .last .btn { background:#293c36; color:#fff; }
.experimental .btn-dark:hover,.experimental .last .btn:hover { background:#3c534a; }
.experimental .last .section-copy { color:var(--muted); }
.experimental .demo-frame { border-color:var(--line); box-shadow:0 20px 65px -30px #46756b25; }
.experimental .moment-link { color:var(--accent); border-color:#b3c9bf; }
@media(max-width:760px) {
 .lab-hero { padding:56px 20px 44px; }
 .lab-title h1 { font-size:clamp(42px,8.3vw,62px); letter-spacing:-2px; }
 .lab-title .eyebrow { font-size:10px; }
 .lab-intro { font-size:17px; }
 .lab-hero .hero-actions { flex-wrap:wrap; }
 .demo-intro { flex-direction:column; gap:8px; }
 .experimental #calls .demo-intro h2 { font-size:17px; }
 .demo-intro p { font-size:12px; }
 .experimental .last .a { padding:35px 24px; }
 .experimental .nav-links { display:none; }
}

/* Compact links to specific moments, without repeating the demo explanation. */
.demo-moments { margin-top:72px; display:grid; grid-template-columns:1fr 2fr; align-items:center; gap:32px; }
.moments-label h2 { font-size:25px; letter-spacing:-.7px; line-height:1.2; }
.moments-label p { font-size:13px; color:var(--muted); margin-top:8px; }
.moments-links { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); }
.moments-links button { display:grid; grid-template-columns:1fr auto; gap:9px 14px; text-align:left; border:0; background:transparent; padding:22px 20px; color:var(--ink); font-size:14px; cursor:pointer; }
.moments-links button+button { border-left:1px solid var(--line); }
.moment-time { grid-column:1/-1; font-size:11px; color:var(--muted); }
.moment-play { color:var(--accent); font-size:17px; line-height:1.3; }
.moments-links button:hover { background:#edf1eb; }
@media(max-width:1000px) { .demo-moments { grid-template-columns:1fr; gap:22px; } }
@media(max-width:600px) { .demo-moments { margin-top:48px; } .moments-links { grid-template-columns:1fr; } .moments-links button { grid-template-columns:50px 1fr auto; padding:18px 4px; align-items:center; } .moments-links button+button { border-left:0; border-top:1px solid var(--line); } .moment-time { grid-column:auto; } }

/* "Book a pilot" form dialog (pilot.js). The dialog has no padding so a click on it means the backdrop. */
.pilot { width:min(520px, calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:0; border-radius:14px; background:var(--bg); color:var(--ink); box-shadow:0 30px 90px -20px #1b2a2580; }
.pilot::backdrop { background:#1b2a2559; backdrop-filter:blur(3px); }
.pilot-form, .pilot-done { padding:36px 36px 30px; }
.pilot-form { display:grid; gap:14px; }
.pilot [hidden] { display:none; }
.pilot h2 { font-size:30px; letter-spacing:-1px; line-height:1.15; max-width:none; }
.pilot-sub { color:var(--muted); font-size:15px; margin-top:-8px; }
.pilot-close { position:absolute; top:14px; right:14px; width:36px; height:36px; border:0; border-radius:50%; background:transparent; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; }
.pilot-close:hover { background:#edf1eb; color:var(--ink); }
.pilot label { display:grid; gap:6px; font-size:13px; font-weight:600; }
.pilot small { font-weight:400; color:var(--muted); }
.pilot input, .pilot textarea { width:100%; padding:11px 13px; border:1px solid #cbd4cc; border-radius:7px; background:#fff; color:var(--ink); font:400 15px/1.4 var(--sans); }
.pilot textarea { resize:vertical; }
.pilot input:focus, .pilot textarea:focus { outline:2px solid var(--accent-bright); outline-offset:0; border-color:transparent; }
.pilot [aria-invalid] { border-color:#b4533a; }
.pilot fieldset { border:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pilot legend { padding:0; font-size:13px; font-weight:600; margin-bottom:6px; }
.pilot .pilot-chip { display:block; position:relative; }
.pilot-chip input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.pilot-chip { padding:8px 16px; border:1px solid #cbd4cc; border-radius:999px; font-weight:400; font-size:14px; cursor:pointer; }
.pilot-chip:has(input:checked) { background:#293c36; border-color:#293c36; color:#fff; }
.pilot-chip:has(input:focus-visible) { outline:2px solid var(--accent-bright); outline-offset:2px; }
.pilot-trap { position:absolute; left:-9999px; width:1px; height:1px; }
.pilot-error { color:#b4533a; font-size:14px; }
.pilot-error a { text-decoration:underline; }
.pilot-send { width:100%; margin-top:4px; }
.pilot-send:disabled { opacity:.7; cursor:progress; }
.pilot-alt { text-align:center; font-size:13px; color:var(--muted); }
.pilot-alt a { color:var(--accent); text-decoration:underline; }
.pilot-done { text-align:center; display:grid; justify-items:center; gap:14px; padding-block:48px 40px; }
.pilot-check { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#e9eee7; color:var(--accent); font-size:24px; }
.pilot-done p { color:var(--muted); max-width:34ch; }
.pilot-done strong { color:var(--ink); font-weight:600; }
@media(max-width:600px) { .pilot-form, .pilot-done { padding:30px 20px 24px; } .pilot h2 { font-size:26px; } }

/* Video transcripts (scripts/transcripts.py): collapsed by default, timestamps jump the video. */
.transcript { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.transcript summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--accent); width: fit-content; }
.transcript ol { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 10px; max-width: 760px; }
.transcript li { display: grid; grid-template-columns: 52px 64px 1fr; align-items: start; gap: 10px; font-size: 15px; line-height: 1.5; }
.transcript li i { color: var(--muted); font-size: 13px; }
.transcript li.bg { color: var(--muted); font-style: italic; }
.transcript li button { border: 0; background: none; padding: 0; text-align: left; font-size: 12px; color: var(--accent); cursor: pointer; line-height: 1.9; }
.transcript li button:hover { text-decoration: underline; }
.transcript b { font-weight: 600; }
@media(max-width:600px) { .transcript li { grid-template-columns: 44px 1fr; } .transcript li span { grid-column: 2; } }