/* The GoodLead Story v2 (goodlead-story-v2.html): Dave's pitch deck, drawn on the deck's own grid.
   The stage is 864 x 360 deck units; --u is one deck unit at the stage's current width, so every line, picture and card
   sits where the deck put it at any size. Below 760px the slide stacks (words, then picture) and keeps the deck's proportions. */
:root{--bg:#000;--ink:#fff;--amber:#da973e;--dim:#404040;--card:#1f1f1f;--line:rgba(255,255,255,.14);--muted:rgba(255,255,255,.62);--raised:#121212;--gut:72px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Outfit','Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* top bar */
.top{height:56px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 24px;border-bottom:1px solid var(--line)}
.wordmark{font-weight:700;font-size:19px;letter-spacing:-.3px;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--amber)}
.top .title{font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.top .for{justify-self:end;font-size:13px;color:var(--muted)}
.top .for b{color:var(--ink);font-weight:600}

/* the fold: stage + rail fit one screen */
.deck{--w:min(1440px,calc(100vw - 2 * var(--gut)),calc((100svh - 56px - 108px) * 2.4));min-height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18px 0 10px}
.stagewrap{position:relative;width:var(--w)}
.stage{position:relative;width:100%;aspect-ratio:864/360;container-type:inline-size;overflow:hidden;background:var(--bg);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.slide{position:absolute;inset:0;--u:calc(100cqw / 864);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.slide.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.slide .words{position:absolute;left:0;top:0;width:calc(389.8 * var(--u));height:100%}
.slide .ln{position:absolute;right:0;top:calc(var(--y) * var(--u));font-size:calc(var(--s) * var(--u));line-height:1.26;font-weight:800;letter-spacing:-.03em;font-variant-ligatures:none;white-space:pre;color:var(--ink);transform:translateX(calc(-6 * var(--u)));opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s ease}
.slide.on .ln{transform:none;opacity:1;transition-delay:calc(.08s + var(--i) * .05s)}
.ln em,.list em{font-style:normal;color:var(--amber)}
.ln small{font-size:calc(40em / 48)}
.ln .dim{color:var(--dim)}
.slide .vis{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--bw) * var(--u));aspect-ratio:var(--bw) / var(--bh);container-type:inline-size;--v:calc(100cqw / var(--bw))}
.vis img{position:absolute;left:calc(var(--ix) * var(--v));top:calc(var(--iy) * var(--v));width:calc(var(--iw) * var(--v));height:auto;display:block;-webkit-user-drag:none}
.vis .list{position:absolute;inset:0}
.vis .list div{position:absolute;left:calc(var(--x) * var(--v));top:calc(var(--y) * var(--v));font-size:calc(var(--s) * var(--v));line-height:1.26;font-weight:700;white-space:pre;letter-spacing:-.005em}
.vis .card div{position:absolute;left:calc(var(--x) * var(--v));top:calc(var(--y) * var(--v));font-size:calc(var(--s) * var(--v));line-height:var(--lh);font-weight:400;color:var(--card);white-space:nowrap}

/* arrows */
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,opacity .2s;z-index:3}
.arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.arrow:hover{background:var(--amber);border-color:var(--amber);color:#000}
.arrow:disabled{opacity:.25;cursor:default;background:none;border-color:rgba(255,255,255,.22);color:var(--ink)}
.arrow.prev{left:calc(-1 * var(--gut) + 12px)}
.arrow.next{right:calc(-1 * var(--gut) + 12px)}

/* the rail under the stage */
.rail{width:var(--w);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:22px}
.rail .arrow{display:none}
.count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.count b{color:var(--ink);font-weight:700}
.tabname{margin-left:12px;padding-left:12px;border-left:1px solid var(--line);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-size:11.5px}
.dots{display:flex;gap:8px;align-items:center}
.dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.28);cursor:pointer;transition:width .35s cubic-bezier(.2,.7,.2,1),background .2s}
.dots button:hover{background:rgba(255,255,255,.6)}
.dots button[aria-selected="true"]{width:28px;background:var(--amber)}
.cue{justify-self:end;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s}
.cue svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.4s ease-in-out infinite}
.cue:hover{color:var(--amber)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* below the fold: the live app */
.live{border-top:1px solid var(--line);background:var(--raised);padding:44px max(24px,calc((100vw - 1440px) / 2)) 64px}
.livehead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}
.eyebrow{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(218,151,62,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(218,151,62,.55)}70%{box-shadow:0 0 0 9px rgba(218,151,62,0)}100%{box-shadow:0 0 0 0 rgba(218,151,62,0)}}
.live h2{margin:8px 0 6px;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.live p{margin:0;max-width:760px;font:400 15px/1.5 'Geist',-apple-system,'Segoe UI',sans-serif;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;text-decoration:none;font:600 14px 'Outfit',sans-serif;border-radius:999px;padding:11px 18px;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s}
.btn.ghost{border-color:rgba(255,255,255,.24);color:var(--ink)}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn.primary{background:var(--amber);color:#000}
.btn.primary:hover{background:#e6a855}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.actions:empty{display:none}
.frames{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 60px rgba(0,0,0,.5)}
.frames iframe{display:block;width:100%;border:0;background:#fff}
.frames iframe[hidden]{display:none}
.frames .wait{display:grid;place-items:center;height:420px;color:#5f6368;font:500 14px 'Geist',sans-serif}
.foot{margin:22px 0 0;font:400 12.5px/1.5 'Geist',sans-serif;color:rgba(255,255,255,.45);max-width:900px}

@media (prefers-reduced-motion:reduce){.slide,.slide.on,.slide .ln,.slide.on .ln{transition:none}.cue svg,.eyebrow i{animation:none}html{scroll-behavior:auto}}

/* tablet: arrows tuck inside the gutter */
@media (max-width:1100px){:root{--gut:56px}.arrow{width:40px;height:40px}.arrow.prev{left:calc(-1 * var(--gut) + 8px)}.arrow.next{right:calc(-1 * var(--gut) + 8px)}}

/* phone and portrait tablet: the slide stacks — the deck's words, then its picture — and the arrows join the rail */
@media (max-width:760px),(max-width:1100px) and (orientation:portrait){
  :root{--gut:16px}
  .top{grid-template-columns:1fr auto;padding:0 16px}.top .title{display:none}
  .deck{min-height:0;justify-content:flex-start;padding:20px 0 8px}
  .deck{--w:min(calc(100vw - 32px),560px)}
  .stage{aspect-ratio:auto;height:auto}
  .slide{position:absolute;inset:0 0 auto 0;--u:calc(100cqw / 372);display:flex;flex-direction:column;align-items:center;gap:22px}
  .slide.on{position:relative}
  .slide .words{position:static;width:auto;height:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
  .slide .ln{position:static;line-height:1.02;transform:translateY(8px)}
  .slide .ln.gap{margin-top:.42em}
  .slide .vis{position:relative;left:auto;top:auto;width:100%;max-width:520px}
  .arrow{position:static;transform:none;width:44px;height:44px;flex:none}
  .stagewrap{display:flex;flex-direction:column}
  .stagewrap .arrow{display:none}
  .rail{grid-template-columns:auto 1fr auto;gap:12px;margin-top:20px}
  .rail .arrow{display:grid}
  .count,.cue{display:none}
  .dots{justify-content:center;flex-wrap:wrap;gap:7px}
  .live{padding:32px 16px 48px}
  .livehead{flex-direction:column;align-items:flex-start;gap:14px}
  .frames iframe{max-height:80svh}
}