/* Lucas Popan landing page. Page layout, hero, modal and form. Components live in lp.css. */
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; }
.wrap { max-width:1100px; margin:0 auto; padding:0 16px; }
section { padding:72px 0; }
@media (min-width:860px) { section { padding:112px 0; } }
.sec-head { max-width:62ch; margin-bottom:40px; }
.sec-head .lp-tracked { color:var(--accent); display:block; margin-bottom:14px; }
.sec-head p { color:var(--fg-60); font-size:17px; margin:12px 0 0; }
.center { text-align:center; margin-left:auto; margin-right:auto; }

/* nav: floats over the hero so the video runs from the top edge */
.lp-nav-wrap { position:fixed; top:16px; left:0; right:0; z-index:40; padding:0 16px; }
.lp-nav .lp-btn { white-space:nowrap; }

/* hero */
.hero { padding:0; min-height:100svh; display:flex; flex-direction:column; }
.hero .hero-inner { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:96px 16px 120px; }
.hero .lp-tracked { color:var(--accent); margin-bottom:20px; }
.hero h1 { max-width:12ch; }
.hero .lp-lede { margin:24px auto 36px; text-align:center; }
.hero .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* grids */
.cards { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px) { .cards { grid-template-columns:1fr 1fr; } }
@media (min-width:960px) { .cards { grid-template-columns:1fr 1fr 1fr; } }
.steps { display:grid; gap:16px; grid-template-columns:1fr; max-width:720px; }
.quotes { display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px) { .quotes { grid-template-columns:1fr 1fr; } }
.lp-quote { max-width:none; }

/* results: one clip beside the copy */
.results { display:grid; gap:40px; grid-template-columns:1fr; align-items:center; }
@media (min-width:860px) { .results { grid-template-columns:minmax(0,420px) 1fr; gap:64px; } }
.clip.solo { width:min(420px,100%); margin:0 auto; }
.results .points { grid-template-columns:1fr; margin-top:24px; }
/* results: clip grid (unused) */
.clipgrid { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (min-width:860px) { .clipgrid { grid-template-columns:repeat(4,1fr); gap:16px; } }
.clip { margin:0; position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; border:1px solid rgb(var(--fg-rgb)/.08); background:var(--charcoal-raised); }
.clip video { width:100%; height:100%; object-fit:cover; display:block; }
.clip::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgb(0 0 0/.55), transparent 45%); pointer-events:none; }
.clip figcaption { position:absolute; left:14px; bottom:12px; color:var(--fg); z-index:1; }
.points { list-style:none; padding:0; margin:32px 0 0; display:grid; gap:10px 32px; grid-template-columns:1fr; }
@media (min-width:860px) { .points { grid-template-columns:1fr 1fr 1fr; } }
.points li { display:flex; gap:10px; align-items:flex-start; color:var(--fg-70); font-size:15px; }
.points li svg { flex:none; color:var(--accent); margin-top:3px; }

/* final cta */
.cta-final { text-align:center; position:relative; }
.cta-final .glow { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:400px; max-width:100vw; border-radius:9999px; background:rgb(var(--accent-rgb)/.12); filter:blur(120px); pointer-events:none; }
.cta-final .inner { position:relative; }
.cta-final .actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* footer */
footer { padding:40px 0 32px; border-top:1px solid var(--line); }
footer .row { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; justify-content:space-between; }
footer .brand { display:flex; align-items:center; gap:10px; color:var(--fg); }
footer .brand svg { height:22px; width:auto; }
footer .brand span { font:700 12px var(--font-display); letter-spacing:.12em; text-transform:uppercase; }
footer a { color:var(--fg-60); text-decoration:none; font-size:14px; }
footer a:hover { color:var(--fg); }
footer small { color:var(--fg-40); font-size:12px; width:100%; }

/* modal */
dialog.apply { color:var(--eggshell); border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%; margin:0; }
dialog.apply::backdrop { background:rgb(0 0 0/.7); backdrop-filter:blur(6px); }
dialog.apply[open] { display:grid; place-items:center; padding:16px; }
.modal { color:var(--eggshell); width:100%; max-width:640px; max-height:calc(100svh - 32px); overflow:auto; background:var(--charcoal); border:1px solid rgb(var(--fg-rgb)/.1); border-radius:20px; padding:28px 20px 32px; position:relative; box-shadow:0 40px 100px -20px rgb(0 0 0/.9); }
@media (min-width:640px) { .modal { padding:40px 40px 44px; } }
.modal .close { position:sticky; top:0; float:right; margin:-8px -8px 0 0; width:40px; height:40px; border-radius:9999px; border:1px solid var(--line); background:var(--charcoal); color:var(--fg-60); cursor:pointer; display:grid; place-items:center; z-index:2; }
.modal .close:hover { color:var(--fg); border-color:var(--line-strong); }
.modal h2 { margin:0 0 8px; }
.modal .lp-tracked { color:var(--accent); display:block; margin-bottom:12px; }
.modal .intro { color:var(--fg-60); font-size:15px; margin:0 0 28px; }
.field { margin:0 0 20px; }
.field > label, .field > legend { display:block; font-weight:500; font-size:15px; margin:0 0 8px; padding:0; }
.field .req { color:var(--accent); }
fieldset.field { border:0; padding:0; margin:0 0 20px; }
.modal input[type=text], .modal input[type=email], .modal input[type=tel], .modal input[type=number], .modal textarea {
  width:100%; background:rgb(var(--fg-rgb)/.05); color:var(--fg); border:1px solid rgb(var(--fg-rgb)/.1); border-radius:12px; padding:12px 14px; font:inherit; font-size:15px; outline:0; transition:border-color .2s, box-shadow .2s; }
.modal input:focus, .modal textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgb(var(--accent-rgb)/.2); }
.modal textarea { min-height:100px; resize:vertical; }
.choices { display:grid; gap:8px; }
.choice { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; background:rgb(var(--fg-rgb)/.05); border:1px solid rgb(var(--fg-rgb)/.1); border-radius:12px; cursor:pointer; font-size:15px; transition:border-color .2s; }
.choice:hover { border-color:rgb(var(--fg-rgb)/.25); }
.choice:has(input:checked) { border-color:var(--accent); background:rgb(var(--accent-rgb)/.08); }
.choice input { margin:3px 0 0; accent-color:var(--accent); flex:none; }
.scale { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
@media (min-width:520px) { .scale { grid-template-columns:repeat(10,1fr); } }
.scale label { display:grid; place-items:center; aspect-ratio:1; background:rgb(var(--fg-rgb)/.05); border:1px solid rgb(var(--fg-rgb)/.1); border-radius:10px; cursor:pointer; font-size:14px; position:relative; }
.scale label:hover { border-color:rgb(var(--fg-rgb)/.25); }
.scale label:has(input:checked) { border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:600; }
.scale input { position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.scale-ends { display:flex; justify-content:space-between; font-size:12px; color:var(--fg-40); margin-top:6px; }
.modal .submit-row { display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.modal .lp-btn[disabled] { opacity:.5; transform:none; cursor:default; }
.error { display:none; color:#ef4444; font-size:13px; }
form.invalid .error { display:block; }
.thanks { display:none; text-align:center; padding:24px 0 8px; }
.thanks p { color:var(--fg-60); margin:8px 0 0; }
.modal.sent form { display:none; } .modal.sent .thanks { display:block; }
dialog.apply:focus, dialog.apply:focus-visible, .modal:focus { outline:none; }