/* Landing pages (/lets-talk, /welcome). Loaded after styles.css and reuses its tokens, type,
   .wrap, .eyebrow, .btn and .rec. Everything here is prefixed lp- so the home page is untouched. */

/* minimal header: logo only, no navigation after someone converts */
.lp-top{background:var(--ink);border-bottom:1px solid var(--line-dark);padding-top:env(safe-area-inset-top,0px)}
.lp-top .wrap{display:flex;align-items:center;height:68px}
.lp-logo{display:flex;height:46px;color:var(--paper)}
.lp-logo svg{height:100%;width:auto}

/* hero */
.lp-hero{background:
  radial-gradient(60% 70% at 50% 0%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 70%),
  var(--ink);padding-block:clamp(48px,8vw,96px) clamp(36px,6vw,64px);text-align:center}
.lp-hero .wrap{max-width:860px;display:grid;justify-items:center;gap:18px}
.lp-hero .eyebrow{color:var(--accent)}
.lp-hero h1{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(48px,9.6vw,104px);line-height:.88;letter-spacing:-.01em;text-wrap:balance}
.lp-hero h1 .hl{color:var(--accent)}
.lp-sub{font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(17px,2.2vw,21px);color:var(--paper)}
.lp-intro{display:grid;gap:14px;max-width:62ch;color:var(--soft-on-dark);font-size:clamp(17px,1.9vw,19px);line-height:1.6}

/* video */
.lp-video-wrap{background:var(--ink);padding-bottom:clamp(56px,8vw,104px)}
.lp-video-wrap .wrap{max-width:1000px;display:grid;gap:14px}
.lp-video-label{justify-self:center;color:var(--soft-on-dark)}
.lp-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line-dark);box-shadow:0 30px 80px rgba(0,0,0,.45)}
@supports not (aspect-ratio:16/9){.lp-video::before{content:"";display:block;padding-top:56.25%}}
.lp-video-media{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
/* "coming soon" state: a real photo of Jan, dimmed, with the message on top */
.lp-video-soon{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}
.lp-video-soon img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.32;filter:saturate(.7)}
.lp-video-soon::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,transparent,color-mix(in srgb,var(--ink) 80%,transparent))}
.lp-video-soon > :not(img){position:relative;z-index:1}
.lp-play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 14%,transparent);border:2px solid color-mix(in srgb,var(--paper) 45%,transparent)}
.lp-play svg{width:30px;height:30px;margin-left:4px;color:var(--paper);opacity:.85}
.lp-video-soon p{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(24px,3.6vw,36px);line-height:1;color:var(--paper)}
.lp-video-soon small{font-size:15px;color:var(--soft-on-dark)}

/* light content band */
.lp-band{background:var(--paper);color:var(--ink);padding-block:clamp(64px,8vw,112px)}
.lp-band .wrap,.lp-dark .wrap{max-width:1040px}
.lp-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:720px}
.lp-head .eyebrow{color:var(--soft-on-light)}
.lp-head h2{font-size:clamp(40px,6vw,68px)}
.lp-head p{color:var(--soft-on-light);font-size:clamp(17px,1.9vw,19px)}

/* four discussion topics */
.lp-topics{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:760px){.lp-topics{grid-template-columns:1fr 1fr}}
.lp-topics li{background:#fff;border:1px solid var(--line-light);border-radius:20px;padding:24px 22px;display:grid;grid-template-columns:48px 1fr;gap:6px 16px;align-content:start}
.lp-topics .ic{grid-row:span 2;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent)}
.lp-topics .ic svg{width:24px;height:24px}
.lp-topics h3{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:26px;line-height:1}
.lp-topics p{color:var(--soft-on-light);font-size:16px}

/* dark band: homework, what happens next */
.lp-dark{background:var(--ink-2);color:var(--paper);padding-block:clamp(64px,8vw,104px);border-top:1px solid var(--line-dark)}
.lp-card{background:var(--ink);border:1px solid var(--line-dark);border-left:4px solid var(--accent);border-radius:20px;padding:clamp(24px,4vw,40px);display:grid;gap:14px;max-width:820px}
.lp-card h2{font-size:clamp(36px,5vw,56px)}
.lp-card p{color:var(--soft-on-dark);font-size:clamp(17px,1.9vw,19px);max-width:60ch}
.lp-sign{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(24px,3vw,30px);line-height:1.1;color:var(--paper)!important;margin-top:4px}
.lp-sign span{color:var(--accent)}
.lp-final{font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:16px;color:var(--soft-on-dark)!important}

/* onboarding steps */
.lp-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:none}
@media (min-width:980px){.lp-steps{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.lp-step{background:#fff;border:1px solid var(--line-light);border-radius:22px;padding:26px 24px;display:grid;gap:12px;align-content:start;grid-template-rows:auto auto 1fr auto}
.lp-step-top{display:flex;align-items:center;gap:12px}
.lp-step-num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--accent);color:var(--on-accent);font-family:var(--display);font-weight:900;font-size:22px}
.lp-step-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--ink);background:var(--paper-2)}
.lp-step-ic svg{width:22px;height:22px}
.lp-step h3{margin:0;font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(26px,2.6vw,30px);line-height:1}
.lp-step-body{display:grid;gap:10px;color:var(--soft-on-light);font-size:16px;align-content:start}
.lp-step-body strong{color:var(--ink)}
.lp-step-body ul{margin:0;padding-left:20px;display:grid;gap:4px}
.lp-action{margin-top:6px}
.lp-action .btn{width:100%;min-height:50px;font-size:16px}
.lp-pending{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:14px;background:var(--paper);color:var(--ink);font-size:15px;font-weight:600;line-height:1.4}
.lp-pending svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:1px}

/* small notes and footer */
.lp-note{margin-top:22px;font-size:15px;color:var(--soft-on-dark)}
.lp-textlink{color:var(--paper);font-weight:700;text-underline-offset:3px}
.lp-foot{background:var(--ink);border-top:1px solid var(--line-dark);padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));font-size:14px;color:var(--soft-on-dark)}
.lp-foot .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.lp-foot a{color:var(--paper);text-underline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* a designed thumbnail (/lets-talk): shown as is, with a small "coming soon" tag instead of a play button */
.lp-video-thumb img{opacity:1;filter:none}
.lp-video-thumb::after{display:none}
.lp-video-soon .lp-soon-tag{position:absolute;top:14px;right:14px;z-index:2;margin:0;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--ink) 82%,transparent);border:1px solid var(--line-dark);font-family:var(--cond);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;line-height:1.2;color:var(--paper);backdrop-filter:blur(4px)}
/* once the video is set: the thumbnail is a play button; the player loads only on click */
.lp-facade{all:unset;position:absolute;inset:0;cursor:pointer;display:grid;align-items:start;justify-items:start;padding:clamp(12px,2.4vw,22px)}
.lp-facade img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
/* top-left pill, so the thumbnail's own headline stays readable */
.lp-play-pill{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 16px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-family:var(--cond);font-weight:800;font-size:17px;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .15s ease}
.lp-play-pill svg{width:22px;height:22px}
.lp-facade:hover .lp-play-pill{transform:translateY(-2px)}
.lp-facade.at-bottom-right{align-items:end;justify-items:end}
.lp-facade:focus-visible{outline:4px solid var(--accent);outline-offset:-4px;border-radius:24px}
@media (max-width:600px){.lp-facade{padding:10px}.lp-play-pill{min-height:32px;padding:0 11px 0 9px;font-size:12px;gap:6px}.lp-play-pill svg{width:13px;height:13px}.lp-video-soon .lp-soon-tag{top:10px;right:10px;font-size:11.5px;padding:6px 10px}}
/* location pages (/dallas-fort-worth, /midland-odessa) */
.lp-top-cta{margin-left:auto;min-height:44px;font-size:15px;padding:0 18px}
@media (max-width:420px){.lp-top-cta{min-height:40px;font-size:13px;padding:0 12px}}
.lp-cta{justify-content:center}
.lp-foot span a{color:var(--paper)}