/* ==========================================================================
   SRT Agency - shared funnel styles
   Served from /funnel.css (root, crawlable: /assets is Disallow'ed in robots).
   Pure black med spa palette. Extracted verbatim from invisible/index.html
   so /invisible renders identically before any new screen is added.
   ========================================================================== */

:root{
  --bg:#0a0a0a;
  --card:#111111;
  --card-2:#0f0f0f;
  --field:#171717;
  --border:#1f1f1f;
  --border-2:#262626;
  --reef:#00C9A7;
  --reef-dim:rgba(0,201,167,.10);
  --reef-line:rgba(0,201,167,.28);
  --reef-ink:#04252b;
  --text:#ffffff;
  --text-2:#a3a3a3;
  --text-3:#737373;
  --danger:#ff6568;
  --warn:#f7c15f;
  --radius:12px;
  --maxw:1080px;
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  line-height:1.55;font-weight:400;letter-spacing:-.01em;
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---- header / nav (mirrors the shared site-header, dark palette) ---- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid #1a1a1a;
}
.nav{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text);font-size:1rem;letter-spacing:-.02em}
.logo-mark{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.logo-mark i{width:4px;border-radius:2px;display:block}
.logo-mark i:nth-child(1){height:10px;background:var(--reef-line)}
.logo-mark i:nth-child(2){height:15px;background:rgba(0,201,167,.6)}
.logo-mark i:nth-child(3){height:20px;background:var(--reef)}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:var(--text-2);font-size:.9rem}
.nav-links a:hover{color:var(--text)}
.nav-links a.cta{background:var(--reef);color:var(--reef-ink);font-weight:500;padding:9px 16px;border-radius:999px}
.nav-links a.cta:hover{color:var(--reef-ink);opacity:.92}
.nav-toggle{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:8px;font-size:1.1rem}

/* ---- screens ---- */
main{width:100%}
.screen{display:none}
.screen.active{display:block;animation:rise .32s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ---- screen 1: landing / screen 2: email ---- */
.landing{max-width:560px;margin:0 auto;padding:56px 24px 72px}
.pill{
  display:inline-block;background:var(--reef-dim);color:var(--reef);
  font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;margin-bottom:22px;
}
h1{font-size:32px;font-weight:500;letter-spacing:-1px;line-height:1.14;margin-bottom:16px}
h1 em{color:var(--reef);font-style:italic}
.sub{color:var(--text-2);font-size:16px;line-height:1.6;margin-bottom:26px}

.input-group{position:relative;margin-bottom:12px}
.input-group input{
  width:100%;background:var(--card-2);color:var(--text);
  border:1.5px solid var(--reef-line);border-radius:10px;
  font-family:inherit;font-size:15px;padding:15px 118px 15px 15px;
  outline:none;transition:border-color .15s;
}
.input-group input::placeholder{color:var(--text-3)}
.input-group input:focus{border-color:var(--reef)}
.input-group button{
  position:absolute;top:6px;right:6px;bottom:6px;
  background:var(--reef);color:var(--reef-ink);border:none;border-radius:7px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;padding:0 16px;transition:opacity .15s;
}
.input-group button:hover{opacity:.9}
.input-group button:disabled{opacity:.55;cursor:default}
.err{color:var(--danger);font-size:13px;margin-bottom:12px;display:none}
.err.show{display:block}
.trust{color:var(--text-3);font-size:12px;margin-bottom:40px}

.pillars{display:grid;grid-template-columns:1fr;gap:12px}
.pillar{background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:16px}
.pillar .n{color:var(--reef);font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;display:block;margin-bottom:8px}
.pillar h3{font-size:15px;font-weight:500;margin-bottom:5px}
.pillar p{color:var(--text-3);font-size:13px;line-height:1.5}

.mini{color:var(--text-3);font-size:13px;margin-bottom:22px}
.mini b{color:var(--text-2);font-weight:500}

/* ---- screen 3: scanning ---- */
.scanning{padding:40px 24px 72px;max-width:900px;margin:0 auto}
.scan-status{color:var(--text-3);font-size:13px;margin-bottom:22px}
.scan-status b{color:var(--text);font-weight:500}
.steps{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.step{
  display:flex;align-items:center;gap:8px;
  background:var(--card-2);border:1px solid var(--border);border-radius:999px;
  padding:6px 13px 6px 6px;transition:border-color .3s,background .3s;
}
.step .dot{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--border-2);color:var(--text-3);
  font-size:11px;font-weight:600;transition:background .3s,color .3s;
}
.step .lbl{font-size:12.5px;color:var(--text-3);transition:color .3s}
.step.active{border-color:var(--reef-line)}
.step.active .dot{background:var(--reef);color:var(--reef-ink)}
.step.active .lbl{color:var(--text)}
.step.done{border-color:var(--border-2)}
.step.done .dot{background:var(--reef-dim);color:var(--reef)}
.step.done .lbl{color:var(--text-2)}

.scan-grid{display:grid;grid-template-columns:1fr;gap:16px}

.panel{
  background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;
}
.panel .idx{color:var(--text-3);font-size:11px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:8px}
.panel h2{font-size:17px;font-weight:500;color:var(--text);margin-bottom:18px;line-height:1.3}
.tasks{font-family:var(--mono);font-size:12px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:104px}
.task{color:var(--text-3);display:flex;gap:9px;align-items:flex-start;animation:rise .25s var(--ease) both}
.task .pre{color:var(--reef);flex:none;width:11px}
.task.running .pre{animation:pulse 1s ease-in-out infinite}
.task.done{color:var(--text)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.bar{height:3px;background:var(--border-2);border-radius:2px;overflow:hidden;margin-top:20px}
.bar i{display:block;height:100%;width:0;background:var(--reef);transition:width .6s linear}

/* the teaching panel that runs alongside the scan */
.lesson{
  background:var(--card-2);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;
}
.lesson .kicker{
  display:inline-block;background:var(--reef-dim);color:var(--reef);
  font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;margin-bottom:14px;
}
.lesson h3{font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.4px;margin-bottom:14px}
.lesson p{color:var(--text-2);font-size:14.5px;line-height:1.65;margin-bottom:13px;animation:rise .45s var(--ease) both}
.lesson p:last-child{margin-bottom:0}
.lesson p b{color:var(--text);font-weight:500}
.lesson .quiet{color:var(--text-3);font-size:13px;font-style:italic}
.lesson .stat{
  display:block;border-left:2px solid var(--reef-line);padding:2px 0 2px 14px;
  color:var(--text-2);font-size:14px;margin-bottom:13px;
  animation:rise .45s var(--ease) both;
}
.lesson .stat b{color:var(--reef);font-weight:500}

/* ---- screen 4: capture ---- */
.capture{max-width:620px;margin:0 auto;padding:44px 24px 72px}
.done-pill{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.done-pill i{width:7px;height:7px;border-radius:50%;background:var(--reef);animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.done-pill span{color:var(--reef);font-size:12px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase}
.capture h2{font-size:26px;font-weight:500;letter-spacing:-.6px;line-height:1.2;margin-bottom:12px}
.capture .sub{margin-bottom:24px;font-size:15px}
.grid{display:grid;grid-template-columns:1fr;gap:20px}

.card{background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.card-head .k{color:var(--text-3);font-size:12px}
.card-head .v{color:var(--reef);font-size:12px;font-weight:500;letter-spacing:.4px}

label{display:block;color:var(--text-2);font-size:12px;margin-bottom:5px}
.field{margin-bottom:12px}
.field input{
  width:100%;background:var(--field);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  font-family:inherit;font-size:13px;padding:11px;outline:none;transition:border-color .15s;
}
.field input::placeholder{color:var(--text-3)}
.field input:focus{border-color:var(--reef-line)}
.field input.bad{border-color:var(--danger)}
.field input:disabled{opacity:.55}
.field .msg{color:var(--danger);font-size:11.5px;margin-top:4px;display:none}
.field .msg.show{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.submit{
  width:100%;background:var(--reef);color:var(--reef-ink);border:none;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:500;padding:13px;margin-top:4px;
  transition:opacity .15s,background .15s;
}
.submit:hover{opacity:.92}
.submit:disabled{cursor:default;opacity:1}
.submit.sent{background:#0b6d5c;color:#cfeee7}
.fine{color:var(--text-3);font-size:11px;margin-top:10px;line-height:1.5}
.fine a{color:var(--text-2);text-decoration:underline}

.deliver{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:16px}
.deliver li{display:flex;gap:9px;font-size:13px;color:var(--text-2);line-height:1.45}
.deliver li b{color:var(--text);font-weight:500}
.deliver .tick{color:var(--reef);flex:none}

/* ---- screen 5: report loading + book the call ---- */
.wrapup{max-width:620px;margin:0 auto;padding:44px 24px 72px}
.loadnote{
  background:var(--reef-dim);border:1px solid var(--reef-line);border-radius:10px;
  padding:16px 18px;margin-bottom:22px;
}
.loadnote h3{font-size:15px;font-weight:500;margin-bottom:6px;color:var(--text)}
.loadnote p{color:var(--text-2);font-size:13.5px;line-height:1.6}
.spin{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--reef-line);border-top-color:var(--reef);
  animation:sp .75s linear infinite;margin-right:8px;vertical-align:-1px;
}
@keyframes sp{to{transform:rotate(360deg)}}
.wrapup h2{font-size:24px;font-weight:500;letter-spacing:-.5px;line-height:1.25;margin-bottom:12px}
.book{
  display:block;width:100%;text-align:center;
  background:var(--reef);color:var(--reef-ink);border-radius:8px;
  font-size:15px;font-weight:500;padding:15px;margin:18px 0 10px;transition:opacity .15s;
}
.book:hover{opacity:.92;color:var(--reef-ink)}
.offer{list-style:none;display:flex;flex-direction:column;gap:10px;margin:16px 0}
.offer li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2);line-height:1.5}
.offer li b{color:var(--text);font-weight:500}
.offer .tick{color:var(--reef);flex:none}
.live{
  border-top:1px solid var(--border);margin-top:20px;padding-top:16px;
  font-family:var(--mono);font-size:11.5px;color:var(--text-3);line-height:1.6;
}
.live b{color:var(--text);font-weight:500}
.live .score{color:var(--reef);font-size:26px;font-weight:500;display:block;margin-top:6px}
.live a{color:var(--reef);text-decoration:underline}

.strip{margin-top:20px;background:var(--card-2);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.strip h3{font-size:13px;font-weight:500;margin-bottom:8px}
.strip p{color:var(--text-3);font-size:12.5px;line-height:1.6}
.strip p a{color:var(--text-2);text-decoration:underline}

footer{border-top:1px solid #1a1a1a;padding:22px 0;margin-top:20px}
footer .container{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer p,footer a{color:var(--text-3);font-size:12px}
footer a:hover{color:var(--text-2)}
footer nav{display:flex;gap:16px}

/* ---- desktop ---- */
@media (min-width:640px){
  h1{font-size:44px}
  .landing{padding:72px 24px 88px}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:1fr 1fr}
  .scanning{padding:52px 32px 88px}
  .lesson{padding:26px}
  .lesson h3{font-size:22px}
}
@media (min-width:900px){
  .scan-grid{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
}
@media (max-width:820px){
  .nav-links{
    position:absolute;top:60px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--card);border-bottom:1px solid var(--border);
    padding:8px 24px 16px;display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid var(--border)}
  .nav-links a.cta{margin-top:12px;text-align:center;border-bottom:none}
  .nav-toggle{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

/* ==========================================================================
   Screens added 2026-08-26: revenue gate, channels, no-website path,
   the A/B/C booking card, the downsell and the booked hand-off.
   ========================================================================== */

/* The line that does not move.
   Sits above the rotating kicker in the teaching panel and is a separate
   node from everything teach() rewrites, so it structurally cannot change
   between pillars. */
.lesson-static{
  color:var(--text-3);font-size:12px;line-height:1.45;
  margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid var(--border);
}

/* A single narrow column for the question screens. */
.narrowform{max-width:520px}
.narrowform .field{margin-bottom:14px}
.narrowform .submit{margin-top:6px}

/* Option lists: revenue buckets, and where clients find you. */
.opts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.opt{
  width:100%;text-align:left;cursor:pointer;
  background:var(--card-2);color:var(--text);
  border:1px solid var(--border);border-radius:10px;
  padding:15px 16px;font:inherit;font-size:15px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.opt:hover{border-color:var(--border-2);background:var(--field)}
.opt.picked{border-color:var(--reef);background:var(--reef-dim);color:var(--reef)}
.opt:focus-visible{outline:2px solid var(--reef);outline-offset:2px}

textarea{
  width:100%;background:var(--card-2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;
  padding:12px 13px;font:inherit;font-size:14.5px;resize:vertical;
}
textarea::placeholder{color:var(--text-3)}
textarea:focus{border-color:var(--reef-line);outline:none}

/* Secondary CTAs on the downsell and booked screens. WhatsApp keeps its own
   green: it is a platform mark, not our accent, and recolouring it to reef
   makes it read as just another button. */
.book.wa{background:#25D366;color:#05270f}
.book.wa:hover{color:#05270f}
.book.alt{
  background:transparent;color:var(--text);
  border:1px solid var(--border-2);margin-top:10px;
}
.book.alt:hover{border-color:var(--reef-line);color:var(--text)}

#calMount{margin:6px 0 14px}
#calMount .calendly-inline-widget{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
}

#bookEyebrow{margin-bottom:14px}

/* Review ribbon. Only ever rendered on localhost or a *.vercel.app preview,
   and it says out loud whether posting is suppressed, because the one thing
   worse than a broken review is a review that silently wrote real leads. */
.srt-review-ribbon{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#f7c15f;color:#1a1400;
  font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 12px;text-align:center;pointer-events:none;
}

@media (min-width:720px){
  .opts{gap:11px}
}

/* A button that reads as a link. It has to be a <button> for the keyboard and
   for screen readers: it performs an action, it does not go to a URL. */
.linkish{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--text-2);font:inherit;font-size:13px;
  text-decoration:underline;text-underline-offset:3px;
}
.linkish:hover{color:var(--reef)}
.linkish:focus-visible{outline:2px solid var(--reef);outline-offset:3px;border-radius:3px}

/* The entity block on the homepage. Deliberately quiet and below the fold:
   it exists for crawlers and for the ~25 retired funding URLs that 301 here,
   not to compete with the funnel. */
.entity{
  margin-top:44px;padding-top:24px;
  border-top:1px solid var(--border);
}
.entity h2{font-size:15px;font-weight:600;margin-bottom:10px;color:var(--text-2)}
.entity p{color:var(--text-3);font-size:13px;line-height:1.6;margin-bottom:10px}
.entity p b{color:var(--text-2);font-weight:600}
.entity a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
.entity a:hover{color:var(--reef)}

/* ==========================================================================
   The booking card, in the /LHR treatment.
   Ported from srt-mission-control/src/app/lhr/lhr.css so the two pages agree:
   eyebrow pill, italic display headline whose accented clause IS the promise,
   then the sub with the commitment underlined.
   ========================================================================== */
.book-hero{text-align:center;max-width:44rem;margin:0 auto 26px}
.book-h1{
  font-size:clamp(1.7rem,5.6vw,2.7rem);
  line-height:1.14;font-weight:700;font-style:italic;
  letter-spacing:-.02em;margin:14px 0 18px;color:var(--text);
  text-wrap:balance;
}
.book-h1 em{font-style:italic;color:var(--reef)}
.book-sub{
  font-size:1.02rem;line-height:1.6;color:var(--text-2);
  margin:0 auto;max-width:34rem;text-wrap:pretty;
}
.book-sub strong{
  color:var(--text);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}
/* The glow the reference page puts on its hero button. Only on the fallback
   link, because when the inline calendar loads it IS the call to action and a
   glowing button above an embedded calendar is two asks for one decision. */
.book-hero-cta{
  max-width:26rem;margin:0 auto 6px;display:block;
  box-shadow:0 0 0 1px var(--reef-dim), 0 8px 30px rgba(0,201,167,.28);
}

/* ==========================================================================
   The lock, and the deferred calendar. Founder 2026-08-26.
   ========================================================================== */

/* ‼️ THE FUNNEL HAS NO EXIT once it is running. Applied by go() from screen 2
   on. The nav goes, and the logo stops being a link rather than disappearing,
   so the page keeps its branding without offering a way out mid-check. Same
   doctrine as /PDF, where the logo is a div for exactly this reason. */
body.srt-locked .site-header .nav-links,
body.srt-locked .site-header .nav-toggle { display:none }
body.srt-locked .site-header .brand{ pointer-events:none; cursor:default }
body.srt-locked .site-header .nav{ justify-content:center }
/* The footer nav is an exit too. The legal links have to survive, so only the
   ones that leave the funnel are pulled. */
body.srt-locked footer nav a[href="/method"],
body.srt-locked footer nav a[href="/pricing"],
body.srt-locked footer nav a[href="/about"]{ display:none }

/* The reveal button is a <button>, not an <a>: it performs an action on this
   page, it does not navigate. .book styles an anchor, so reset the bits a
   button brings with it. */
button.book{
  width:100%;border:none;font:inherit;font-weight:600;cursor:pointer;
  display:block;text-align:center;
}
button.book:disabled{
  cursor:default;background:var(--field);color:var(--text-3);
  box-shadow:none;
}

/* Hidden until the button is pressed. `hidden` alone loses to .book's display,
   so it is stated here rather than relied on. */
#calMount[hidden]{ display:none }

/* The progress note now sits under Status rather than above the headline. */
#loadNote{ margin-top:10px }

/* What is left of the entity block on the homepage: three quiet links. The
   prose that used to sit here moved to the /method FAQ, see index.html. */
.entity-line{
  margin-top:40px;padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--text-3);font-size:13px;
}
.entity-line a{color:var(--text-3);text-decoration:underline;text-underline-offset:3px}
.entity-line a:hover{color:var(--reef)}