/* Blanks home, v8 (2026-11-16): layout copied from the founder's reference lassie.ai, in OUR colours
   (cool white, black, cobalt #3478F7; Lassie's orange/green → cobalt). Serif headings with an italic line,
   pill nav, full-bleed photo hero, stacked rounded image cards with one product card each, a big number
   surrounded by photos + cards, three "how it works" panels with connected mini cards, centred FAQ,
   photo closing, giant wordmark footer. Photos generated with the founder's ChatGPT (Codex) image tool. */
:root {
  --bg: #f6f7f8; --panel: #eceef1; --card: #ffffff; --row: #f7f8f9;
  --ink: #0b0b0c; --ink-2: #555961; --ink-3: #8a8e96; --line: rgba(10,10,12,.08);
  --cobalt: #3478F7; --cobalt-text: #1f5fd6; --cobalt-soft: #e9f0fe;
  --serif: 'Newsreader', Georgia, serif; --sans: 'Geist', ui-sans-serif, system-ui, sans-serif; --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(52,120,247,.2); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.02em; }
em { font-style: italic; }

/* ── nav: two floating pill groups ── */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; padding: 0 14px; }
.pills { pointer-events: auto; display: inline-flex; gap: 3px; padding: 3px; border-radius: 14px; background: rgba(255,255,255,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(10,10,12,.06), 0 6px 20px -10px rgba(10,10,12,.3); }
.pills a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 11px; background: #fff; font-size: 15px; color: var(--ink); }
.pills a.mark { padding: 0 11px; }
.pills a.cta { background: var(--cobalt); color: #fff; }
.nav .right { position: absolute; right: 14px; top: 0; }
.mk { width: 22px; height: 22px; border-radius: 6px; background: var(--ink); position: relative; flex: none; display: inline-block; }
.mk::before, .mk::after { content: ""; position: absolute; left: 5px; right: 5px; height: 2px; border-radius: 2px; background: #fff; }
.mk::before { top: 7px; } .mk::after { top: 12px; right: 8px; }
@media (max-width: 640px) { .nav { justify-content: flex-start; } .pills .hide-sm { display: none; } }

/* ── hero: full-bleed photo ── */
.hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; color: #fff; display: grid; place-items: center; text-align: center; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,10,25,.18) 0%, rgba(5,10,25,.34) 50%, rgba(5,10,25,.42) 100%); }
.hero .in { position: relative; z-index: 1; padding: 0 20px; }
.hero h1 { font-size: clamp(48px, 6.4vw, 88px); line-height: 1; text-shadow: 0 2px 24px rgba(0,0,20,.25); }
.hero .sub { margin: 26px 0 0; font-size: 17px; font-weight: 500; }
.ticker { margin-top: 10px; display: inline-flex; align-items: center; gap: 9px; font-size: 16px; color: rgba(255,255,255,.82); min-height: 26px; }
.ticker svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.ticker span { transition: opacity .4s; }
.hero form, .closing form { display: inline-flex; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(255,255,255,.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.hero form { position: absolute; z-index: 1; bottom: 28px; left: 50%; transform: translateX(-50%); }
form input { width: 200px; border: 0; outline: 0; background: transparent; color: #fff; font: 400 15px/1 var(--sans); padding: 0 14px; }
form input::placeholder { color: rgba(255,255,255,.75); }
form button { white-space: nowrap; height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: #fff; color: var(--ink); font: 500 15px/1 var(--sans); cursor: pointer; }
@media (max-width: 480px) { form input { width: 150px; } }
@media (max-width: 760px) { .hero > img { object-position: 22% center; } }

/* ── centred intro line ── */
.intro { text-align: center; padding: clamp(120px, 16vw, 220px) 20px clamp(80px, 10vw, 140px); }
.intro .mk { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 26px; }
.intro .mk::before, .intro .mk::after { left: 9px; right: 9px; height: 3.5px; } .intro .mk::before { top: 13px; } .intro .mk::after { top: 21px; right: 15px; }
.intro h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; }

/* ── stacked image cards with side text ── */
.stack { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 820px) minmax(0, 1fr); align-items: center; padding: clamp(40px, 6vw, 90px) 24px; gap: 24px; }
.stack .side { font-size: 16px; }
.stack .side h3 { font-size: 26px; line-height: 1.12; margin-bottom: 10px; }
.stack .side p { margin: 0; color: var(--ink-2); max-width: 270px; line-height: 1.45; }
.stack .side.r { grid-column: 3; grid-row: 1; justify-self: start; }
.stack .media { grid-column: 2; grid-row: 1; position: relative; padding-bottom: 38px; }
.deck { position: relative; aspect-ratio: 820 / 515; border-radius: 48px; overflow: hidden; z-index: 3; }
.deck > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media::before, .media::after { content: ""; position: absolute; left: 7%; right: 7%; bottom: 20px; height: 60px; border-radius: 0 0 44px 44px; background: #b9c7e4; z-index: 2; }
.media::after { left: 14%; right: 14%; bottom: 2px; background: #cdd7ec; z-index: 1; }
.deck .ui { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(430px, 82%); }
@media (max-width: 1060px) { .stack { grid-template-columns: 1fr; } .stack .side, .stack .side.r { grid-column: 1; grid-row: auto; justify-self: start; } .stack .media { grid-column: 1; grid-row: auto; } .deck { border-radius: 28px; aspect-ratio: 4 / 3.4; } }

/* ── product UI cards (Lassie card language) ── */
.ui { background: var(--card); border-radius: 13px; box-shadow: 0 1px 2px rgba(10,10,12,.06), 0 16px 40px -18px rgba(10,10,12,.35); padding: 14px; font-size: 13px; text-align: left; color: var(--ink); }
.ui-h { display: flex; align-items: center; gap: 9px; font-size: 14px; padding: 2px 2px 10px; }
.ui-h .mk { width: 18px; height: 18px; border-radius: 5px; } .ui-h .mk::before, .ui-h .mk::after { left: 4px; right: 4px; height: 1.6px; } .ui-h .mk::before { top: 5.5px; } .ui-h .mk::after { top: 9.5px; right: 7px; }
.ui-h .r { margin-left: auto; }
.wrow { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.spin { width: 15px; height: 15px; flex: none; color: var(--ink-3); }
.wrow .box { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--row); border-radius: 8px; padding: 9px 11px; font-size: 12.5px; box-shadow: inset 0 0 0 1px var(--line); }
.wrow .box svg { width: 13px; height: 13px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; flex: none; }
.wrow .box .r { margin-left: auto; color: var(--ink-3); white-space: nowrap; }
.mono { font-family: var(--mono); letter-spacing: -.01em; }
.num { font-family: var(--mono); color: var(--cobalt-text); white-space: nowrap; }
.ok { width: 16px; height: 16px; border-radius: 50%; background: var(--cobalt); display: inline-grid; place-items: center; flex: none; }
.ok::after { content: ""; width: 6px; height: 3.5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.chipm { display: inline-flex; align-items: center; gap: 5px; font: 500 10.5px/1 var(--mono); color: var(--cobalt-text); background: var(--cobalt-soft); padding: 5px 7px; border-radius: 5px; white-space: nowrap; }
.chipm svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.av { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font: 600 12px/1 var(--sans); flex: none; }
.av.k { background: var(--ink); color: #fff; } .av.c { background: var(--cobalt); color: #fff; } .av.s { background: var(--cobalt-soft); color: var(--cobalt-text); }
.ask { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 8px 8px 8px 16px; box-shadow: 0 16px 40px -18px rgba(10,10,12,.4); font-size: 13.5px; width: min(440px, 86%); }
.ask .send { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; flex: none; }
.ask .send svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; }
.ask svg.q { width: 16px; height: 16px; stroke: var(--ink-3); fill: none; stroke-width: 1.6; flex: none; }

/* ── big number with photos + cards around ── */
.collage { position: relative; min-height: 1040px; display: grid; place-items: center; padding: 80px 24px; overflow: hidden; }
.collage .big { text-align: center; position: relative; z-index: 2; }
.collage .big b { display: block; font: 400 clamp(64px, 7vw, 96px)/1 var(--serif); letter-spacing: -.03em; }
.collage .big span { display: block; font: 400 clamp(34px, 3.8vw, 52px)/1.12 var(--serif); letter-spacing: -.02em; max-width: 560px; margin-top: 6px; }
.ph { position: absolute; border-radius: 14px; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.fc { position: absolute; z-index: 3; }
.fc.tint { background: var(--panel); box-shadow: none; }
.tl { display: grid; grid-template-columns: 16px 1fr; gap: 4px 10px; align-items: center; margin-top: 4px; font-size: 13.5px; }
.tl .line { width: 1px; height: 14px; background: var(--ink-3); justify-self: center; }
.tl .when { color: var(--ink-3); margin-left: 8px; }
.wk { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 9px 10px; margin-top: 6px; font-size: 12px; }
.wk svg { width: 13px; height: 13px; stroke: var(--ink-2); fill: none; stroke-width: 1.6; flex: none; }
.wk .num { margin-left: auto; font-size: 11.5px; }
@media (max-width: 1100px) { .collage { min-height: 0; display: flex; flex-direction: column; gap: 16px; } .ph, .fc { position: relative; inset: auto !important; width: min(420px, 100%) !important; height: auto !important; } .ph { display: none; } .collage .big { margin-bottom: 18px; } }

/* ── how it works: three tinted panels ── */
.how { padding: clamp(80px, 10vw, 140px) 32px 40px; }
.how > h2 { text-align: center; font-size: clamp(34px, 3.4vw, 48px); margin-bottom: clamp(40px, 5vw, 72px); }
.how .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.how .pan { background: var(--panel); border-radius: 32px; aspect-ratio: 1 / .99; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; }
.how .pan .ui { width: min(290px, 100%); padding: 12px 13px; box-shadow: none; }
.how .pan .ui + .ui { margin-top: 0; }
.conn { display: flex; flex-direction: column; align-items: center; }
.conn::before, .conn::after { content: ""; width: 1px; height: 10px; border-left: 1px dashed #b7bcc5; }
.how h3 { font: 400 21px/1.2 var(--sans); letter-spacing: -.01em; margin: 26px 0 6px; }
.how p { margin: 0; color: var(--ink-2); font-size: 16.5px; line-height: 1.45; max-width: 440px; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-top: 8px; }
.kv span:first-child { color: var(--ink-3); }
.hr { height: 1px; background: var(--line); margin: 10px 0; }
@media (max-width: 960px) { .how .grid { grid-template-columns: 1fr; } }

/* ── FAQ ── */
.faq { padding: clamp(80px, 10vw, 140px) 20px; display: flex; flex-direction: column; align-items: center; }
.faq h2 { font-size: clamp(34px, 3.4vw, 48px); margin-bottom: 26px; }
.faq .list { width: min(480px, 100%); display: grid; gap: 6px; }
.faq details { background: #fff; border-radius: 10px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; font-size: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: rotate(45deg) translateY(-2px); flex: none; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin: 0; padding: 0 16px 16px; color: var(--ink-2); font-size: 14px; }

/* ── closing photo ── */
.closing { margin: 0 14px; border-radius: 48px; overflow: hidden; position: relative; height: clamp(520px, 64vw, 860px); display: grid; place-items: center; text-align: center; color: #fff; }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing::after { content: ""; position: absolute; inset: 0; background: rgba(5,15,40,.18); }
.closing .in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 20px; }
.closing .mk { width: 46px; height: 46px; border-radius: 12px; background: #fff; }
.closing .mk::before, .closing .mk::after { background: var(--ink); left: 11px; right: 11px; height: 4px; } .closing .mk::before { top: 15px; } .closing .mk::after { top: 24px; right: 18px; }
.closing h2 { font-size: clamp(38px, 4vw, 56px); line-height: 1.05; text-shadow: 0 2px 18px rgba(0,0,20,.25); }
@media (max-width: 640px) { .closing { border-radius: 28px; } }

/* ── footer with giant wordmark ── */
footer { position: relative; margin-top: 14px; }
.foot { position: relative; z-index: 2; background: var(--bg); border-radius: 0 0 48px 48px; padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 56px) 40px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .5fr)); gap: 32px; }
.foot h2 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; }
.foot .btn { display: inline-flex; margin-top: 22px; height: 36px; padding: 0 14px; align-items: center; border-radius: 9px; background: var(--ink); color: #fff; font-size: 14px; }
.foot h5 { margin: 0 0 10px; font: 400 13px/1 var(--sans); color: var(--ink-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14px; }
.foot .copy { grid-column: 2 / -1; display: flex; align-items: flex-end; gap: 12px; font: 400 11.5px/1.5 var(--mono); color: var(--ink-2); margin-top: 60px; }
.foot .soon { color: var(--ink-3); }
.sky { position: relative; margin-top: -60px; height: clamp(220px, 26vw, 400px); overflow: hidden; }
.sky img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sky .word { position: absolute; left: 0; right: 0; bottom: -.18em; text-align: center; font: 400 clamp(150px, 27vw, 420px)/1 var(--serif); letter-spacing: -.04em; color: #fff; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr; } .foot > :first-child { grid-column: 1 / -1; } .foot .copy { grid-column: 1 / -1; } }