/* the first screen for an ad visitor (same deep sea as the questions that follow it), and the direct-start nudge on home */
.intro { min-height:100dvh; background:var(--sea); color:var(--on-sea); padding:16px 16px 40px; }
.intro > * { max-width:1080px; margin-inline:auto; }
.in-top { display:flex; align-items:center; justify-content:space-between; min-height:52px; }
.intro .wordmark .wm { color:var(--on-sea); }
.in-hero { display:grid; gap:28px; align-items:center; margin-top:20px; }
.in-hero h1 { font:700 clamp(30px,7vw,50px)/1.3 var(--display); margin:0; color:var(--on-sea); }
.in-lede { font:400 18px/1.75 var(--body); color:var(--on-sea-soft); margin:14px 0 0; max-width:36ch; }
.in-act { display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:24px; }
.intro .main { background:var(--brass); color:var(--on-brass); font:700 18px var(--display); min-height:54px; padding:0 26px; border-radius:var(--r); border:0; cursor:pointer; }
.in-sub { color:var(--on-sea-soft); font:500 14px var(--body); }
.in-demo { margin:0; background:var(--sea-2); border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:20px; display:grid; gap:12px; }
.in-live { margin:0; display:flex; align-items:center; gap:8px; color:var(--listen); font:600 14px var(--body); }
.in-live .dot { width:10px; height:10px; border-radius:50%; background:var(--listen); box-shadow:0 0 0 4px rgba(47,211,160,.2); }
.in-said { margin:0; background:rgba(255,255,255,.06); border-radius:14px; padding:12px 14px; font:400 16px/1.7 var(--body); }
.in-tip { margin:0; background:#EEF1FA; color:#0A1630; border-radius:14px; padding:14px; border-inline-start:4px solid var(--listen); font:600 17px/1.7 var(--body); }
.in-tip .tag { display:inline-block; font:700 12px var(--body); background:#DDF5EC; color:#0B6B52; border-radius:999px; padding:1px 8px; margin-inline-end:6px; vertical-align:2px; }
.in-demo figcaption { color:var(--on-sea-soft); font:500 12px var(--body); }
.in-how { list-style:none; counter-reset:n; padding:0; margin:40px auto 0; display:grid; gap:12px; }
.in-how li { counter-increment:n; display:grid; gap:2px; padding:16px 18px; border-radius:var(--r); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); }
.in-how li::before { content:counter(n); font:700 14px var(--mono); color:var(--listen); }
.in-how b { font:700 17px var(--display); } .in-how span { color:var(--on-sea-soft); font-size:15px; }
.in-trust { display:grid; gap:12px; margin-top:16px; }
.intro .card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r); padding:16px 18px; display:grid; gap:4px; color:var(--on-sea); }
.intro .card span { color:var(--on-sea-soft); font-size:15px; line-height:1.7; }
.in-price { margin-top:24px; color:var(--on-sea); font:600 15px var(--body); }
.in-price:empty { display:none; }
.in-foot { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font-size:14px; color:var(--on-sea-soft); }
.in-foot a { color:var(--on-sea-soft); }
@media (min-width:760px) { .in-how, .in-trust { grid-template-columns:repeat(3,1fr); } .in-trust { grid-template-columns:1fr 1fr; } }
@media (min-width:960px) { .intro { padding:24px 32px 56px; } .in-hero { grid-template-columns:1.1fr .9fr; margin-top:48px; } }

/* home: a person who started directly can tune the coach later, never forced */
.j-tune { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 12px; background:var(--primary-soft); border-radius:var(--r); padding:12px 16px; margin:0 0 14px; }
.j-tune p { flex:1 1 240px; margin:0; font:500 14.5px/1.6 var(--body); color:var(--ink); }
.j-tune .main { flex:0 0 auto; width:auto; margin:0; min-height:44px; padding:0 18px; }

/* the test environment's banner */
.stg-bar { position:sticky; top:0; z-index:50; padding:6px 12px; background:#b7791f; color:#fff; font:600 13px/1.4 var(--body); text-align:center; }