/* Nook marketing — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..900&display=swap');
:root{
  --cream:#F4F0E8; --ink:#2A2521; --soft:#6B6155; --terra:#C5573C; --sky:#7FA9C0;
  --sage:#8B9C5E; --gold:#D2A53F; --pink:#C77F8C; --lilac:#9686B2; --line:#E5DCC8; --white:#FFFDF9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Outfit',system-ui,sans-serif;background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5;display:flex;flex-direction:column;min-height:100vh;font-weight:400}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;width:100%}
h1,h2,h3{font-weight:700;letter-spacing:-.01em;line-height:1.06}
/* Display headlines in the warm editorial serif (matches the app + Nook ATM
   deck); subheads/nav/body stay in Outfit sans. */
h1,h2{font-family:'Fraunces','Georgia',serif;letter-spacing:-.02em}
.kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--terra)}
.acc{color:var(--terra)}

/* nav */
nav{padding:22px 0;position:sticky;top:0;z-index:40;background:rgba(244,240,232,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between}
.nav img{height:30px;display:block}
.nav .r{display:flex;align-items:center;gap:8px}
.nav .r a.tab{font-weight:600;color:var(--soft);font-size:15.5px;padding:9px 18px;border-radius:999px}
.nav .r a.tab.on{color:var(--ink);background:#fff;border:1px solid var(--line)}
@media(max-width:560px){.nav{flex-wrap:wrap;justify-content:center;row-gap:10px}.nav .r{width:100%;justify-content:center;gap:5px}.nav img{height:28px}.nav .r a.tab{padding:7px 11px!important;font-size:13px!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;
  border-radius:999px;padding:14px 28px;font-size:16px;cursor:pointer;border:0;font-family:inherit;transition:opacity .15s}
.btn:hover{opacity:.92}
.btn-terra{background:var(--terra);color:#fff}
.btn-sky{background:var(--sky);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}

/* hero type */
main{flex:1}
/* home: one full screen, ticker pinned to the bottom */
.screen{min-height:100vh;display:flex;flex-direction:column}
.screen main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 0}
.hero{text-align:center;max-width:1340px;margin:0 auto;padding:0 28px}
/* "One app for" — second largest, quieter, sits above the word */
.pre{font-size:clamp(30px,5vw,76px);font-weight:600;letter-spacing:-.02em;line-height:1.0;display:block;color:var(--ink)}
/* the changing word is the hero — sized to fill the width by JS, colour cycles */
.giant{display:inline-block;font-size:clamp(72px,15vw,200px);font-weight:800;letter-spacing:-.05em;line-height:.9;
  color:var(--terra);margin:0;min-height:1em;transition:opacity .28s ease, transform .28s ease, color .28s ease}
.giant.swap{opacity:0;transform:translateY(12px)}
/* fresh, minimal path choices */
.choose{display:flex;width:fit-content;align-items:center;gap:5px;margin:44px auto 0;background:var(--white);
  border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:0 10px 22px -20px rgba(40,28,18,.3)}
.choose a{display:inline-flex;align-items:center;gap:8px;font-size:clamp(14px,1.4vw,16px);font-weight:600;
  color:var(--ink);padding:10px 22px;border-radius:999px;transition:background .18s ease, color .18s ease}
.choose a .ar{transition:transform .18s ease;font-weight:400;opacity:.6}
.choose a:hover{background:var(--ink);color:#fff}
.choose a:hover .ar{transform:translateX(4px);opacity:1}
.choose .sep{width:1px;height:20px;background:var(--line)}
.sub{font-size:clamp(16px,1.7vw,19px);color:var(--soft);max-width:50ch;margin:16px auto 0;font-weight:500}
.herobottom{display:contents}
.actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:32px;flex-wrap:wrap}
.note{margin-top:18px;font-size:14px;color:var(--soft)}.note b{color:var(--ink);font-weight:700}
/* app store download pill (shown at launch) — sits lower with a gap, slimmer than the notify form */
.dl{margin-top:48px;padding:11px 22px;font-size:15px}

/* notify pill */
.notify{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;
  box-shadow:0 14px 30px -24px rgba(40,28,18,.28)}
.notify input{border:0;outline:0;font:inherit;font-size:16px;font-weight:500;background:transparent;width:230px;color:var(--ink)}
.notify input::placeholder{color:#9A8F80}

/* path cards (home) — coloured, centred, spaced off the ticker */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:720px;margin:22px auto 0}
.path{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--white);
  border-radius:22px;padding:24px 26px;border:2px solid;transition:transform .18s ease, box-shadow .18s ease}
.path .tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px;margin-bottom:12px}
.path h3{font-size:22px;margin:0 0 7px;color:var(--ink)}
.path p{font-size:14.5px;margin:0 0 16px;max-width:28ch;color:var(--soft);line-height:1.45}
.path p b{color:var(--ink);font-weight:700}
.path .cta{display:inline-flex;align-items:center;gap:7px;padding:10px 22px;border-radius:999px;font-weight:700;font-size:14.5px;color:#fff}
.path.you{border-color:#CBD6B6;box-shadow:0 22px 42px -28px rgba(139,156,94,.6)}
.path.you:hover{transform:translateY(-5px);box-shadow:0 32px 56px -28px rgba(139,156,94,.75)}
.path.you .tag{background:#EEF1E4;color:#6F8048}
.path.you .hl-you{color:#6F8048}.path.you .cta{background:#8B9C5E}
.path.venues{border-color:#EAD0D6;box-shadow:0 22px 42px -28px rgba(199,127,140,.55)}
.path.venues:hover{transform:translateY(-5px);box-shadow:0 32px 56px -28px rgba(199,127,140,.7)}
.path.venues .tag{background:#F7E9EC;color:#B26678}
.path.venues .hl-ven{color:#B26678}.path.venues .cta{background:#C77F8C}

/* page hero */
.phero{text-align:center;max-width:840px;margin:0 auto;padding:70px 0 6px}
.phero h1{font-size:clamp(38px,5.5vw,68px);margin:14px 0 0}
.phero .sub{margin-top:20px}

/* phone */
.phone{width:100%;max-width:260px;background:#1c1815;border-radius:40px;padding:9px;
  box-shadow:0 40px 80px -36px rgba(40,28,18,.5);position:relative;margin:0 auto;overflow:hidden}
.phone .island{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:74px;height:20px;background:#0c0a09;border-radius:999px;z-index:3}
/* aspect-ratio on the image itself (with a definite width) gives it a real height,
   so the frame wraps it and the screenshot can't spill out the bottom (iOS-safe) */
.phone img{display:block;width:100%;height:auto;aspect-ratio:1320/2868;object-fit:cover;border-radius:32px}

/* for-you: simple screenshot row */
.shots{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;margin:74px 0 0;align-items:start}
/* let the 5-phone row break out wider so each phone is bigger & crisper */
@media(min-width:1024px){.shots{width:min(1560px,95vw);max-width:none;margin-left:50%;transform:translateX(-50%);gap:36px}}
.shot .cap{margin-top:24px}
/* single map phone (for-you) */
.mapshot{display:flex;flex-direction:column;align-items:center;margin:58px auto 0}
.mapshot .phone{max-width:300px}
.mapshot .cap{margin-top:22px;font-size:17px;color:var(--soft);font-weight:500}
.mapshot .cap b{color:var(--ink);font-weight:700}

/* FOMO speech bubbles */
.bubbles{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:36px auto 0;max-width:780px}
.bubble2{border-radius:22px;padding:13px 24px;font-weight:700;font-size:19px;color:#fff;display:inline-flex;align-items:center;
  box-shadow:0 18px 36px -20px rgba(40,28,18,.5)}
.bubble2 .nk{top:.01em;height:.74em}

/* inline Nook wordmark used in copy — sized to match surrounding text */
.nk{height:.78em;width:auto;vertical-align:baseline;position:relative;top:.055em;margin:0 .06em}
/* inline logo in the small "coming soon" note: match the regular text size & baseline */
.note .nk{height:.68em;top:.045em;margin:0 .05em}

/* relatable questions (for-you) */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:16px 44px;margin:38px auto 0;max-width:900px;text-align:left}
.qaitem{display:flex;gap:15px;align-items:center;font-size:18px;font-weight:600;color:var(--ink)}
.qaitem .c{flex:0 0 32px;width:32px;height:32px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
@media(max-width:720px){.qa{grid-template-columns:1fr;gap:14px}}
.shot{text-align:center;position:relative}
.shot .cap{margin-top:22px;font-size:16.5px;color:var(--soft);font-weight:500;max-width:24ch;margin-left:auto;margin-right:auto;line-height:1.45}
.shot .cap b{color:var(--ink);font-weight:700}
.shot .step{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  color:#fff;font-weight:700;font-size:14px;margin-bottom:14px}

/* for-venues: colourful tick list */
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:18px 40px;margin:40px 0 0}
.tick{display:flex;gap:15px;align-items:flex-start;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:20px 22px}
.tick .c{flex:0 0 34px;width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:700;margin-top:1px}
.tick h4{font-size:18px;margin-bottom:3px}.tick p{color:var(--soft);font-size:15.5px;font-weight:500}

/* finder — soft baby-blue, friendly, with a wave + shadow */
.finder{background:linear-gradient(165deg,#EDF5FA,#D6E7F1);color:var(--ink);border-radius:32px;padding:40px 36px 44px;
  text-align:center;position:relative;margin:36px auto 90px;max-width:700px;overflow:visible;border:2px solid #B8D6E7;
  box-shadow:0 30px 62px -30px rgba(99,150,180,.8), inset 0 2px 0 rgba(255,255,255,.7)}
.finder h2,.finder>p{position:relative;z-index:1}
.fbubs{position:absolute;inset:0;overflow:hidden;border-radius:30px;z-index:0;pointer-events:none}
.fbub{position:absolute;border-radius:50%;z-index:0;pointer-events:none}
.ficon{width:60px;height:60px;border-radius:19px;background:#7FA9C0;display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;font-size:30px;box-shadow:0 14px 26px -10px rgba(127,169,182,.95);position:relative;z-index:2;
  transform:rotate(-4deg)}

/* venues: soft FOMO line above the ticks */
.fomoline{max-width:760px;margin:30px auto 0;background:#F1EEE4;border:1px solid #E6DDCB;border-radius:18px;
  padding:18px 28px;text-align:center}
.fomoline p{font-size:clamp(16px,1.8vw,19px);font-weight:600;color:var(--soft);line-height:1.45}
.fomoline b{color:var(--ink);font-weight:700}
/* venues: step-by-step guide */
.steps{max-width:700px;margin:42px auto 0;display:flex;flex-direction:column;gap:10px}
.stepitem{display:flex;gap:20px;align-items:flex-start;background:var(--white);border:1px solid var(--line);
  border-radius:18px;padding:20px 24px;box-shadow:0 16px 34px -30px rgba(40,28,18,.4)}
.stepitem .n{flex:0 0 40px;width:40px;height:40px;border-radius:50%;color:#fff;font-weight:700;font-size:17px;
  display:flex;align-items:center;justify-content:center}
.stepitem h4{font-size:19px;margin-bottom:3px}
.stepitem p{color:var(--soft);font-size:15.5px;line-height:1.5}
.stepitem b{color:var(--ink);font-weight:700}
/* venues: dashboard + tiers trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:40px 0 0}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:30px 26px;text-align:center;
  box-shadow:0 22px 44px -34px rgba(40,28,18,.4)}
.tcard .lab{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.tcard h4{font-size:21px;margin-bottom:7px}.tcard p{color:var(--soft);font-size:15.5px}
.tcard .tiers{display:flex;gap:8px;justify-content:center;margin-top:14px}
.tcard .tiers span{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px}
@media(max-width:860px){.trio{grid-template-columns:1fr}}
.finder .blob{display:none}
.finderwave{display:block;margin:0 auto 12px}
.finder h2{font-size:clamp(26px,3.6vw,38px);color:var(--ink);position:relative}
.finder>p{color:var(--soft);font-size:17px;margin:12px auto 0;max-width:44ch;position:relative;font-weight:500}
.finderbox{max-width:520px;margin:26px auto 0;text-align:left;position:relative;z-index:2}
.finderbox label{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5E7E90;margin-bottom:8px}
.finderbox>input{width:100%;border:1px solid #CDE0EB;border-radius:16px;padding:16px 20px;font:inherit;font-size:16px;font-weight:500;outline:0;background:#fff;color:var(--ink);box-shadow:0 8px 18px -10px rgba(99,150,180,.5)}
.finderbox>input:focus{border-color:var(--sky)}
.results{position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#fff;border-radius:16px;overflow:hidden auto;
  box-shadow:0 30px 60px -20px rgba(60,90,110,.4);max-height:280px;z-index:5;display:none}
.results.show{display:block}
.results button{display:block;width:100%;text-align:left;border:0;background:#fff;padding:13px 20px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;color:var(--ink);border-bottom:1px solid #EAF1F5}
.results button:hover{background:#F4F9FC}
.results button small{display:block;color:#9AA7AF;font-size:13px;font-weight:500}
.results .empty{padding:14px 20px;color:#9AA7AF;font-size:14.5px}
.selected{display:none;margin-top:14px;background:#fff;border:1px solid #CDE0EB;border-radius:16px;padding:16px 20px;align-items:center;justify-content:space-between;gap:10px}
.selected.show{display:flex}
.selected .nm{font-weight:700;color:var(--ink)}
.selected .x{background:none;border:0;color:var(--soft);cursor:pointer;font-size:22px;line-height:1}
.finderbox .em{display:flex;gap:8px;margin-top:14px}.finderbox .em .notify{flex:1}
.finder .done{font-weight:600;font-size:18px;padding:8px;position:relative;z-index:2}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.45)}
.ticker .row{display:flex;white-space:nowrap;animation:slide 34s linear infinite}
.ticker span{padding:16px 0;font-weight:700;font-size:16px}
.ticker .dot{padding:16px 24px;color:var(--line)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* footer */
footer{background:var(--ink);color:#EFE9DC;margin-top:auto}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:58px 0 26px}
.foot .brand img{height:30px;margin-bottom:16px}
.foot .brand p{color:rgba(239,233,220,.6);font-size:15px;max-width:24ch;font-weight:500}
.foot h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(239,233,220,.5);margin-bottom:16px;font-weight:700}
.foot a{display:block;color:rgba(239,233,220,.85);font-size:15.5px;font-weight:500;margin-bottom:11px}
.foot a:hover{color:#fff}
.fbadge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;margin-top:6px}
.fbadge small{display:block;font-size:10.5px;font-weight:500;opacity:.7}
.footbar{border-top:1px solid rgba(255,255,255,.12);padding:22px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:rgba(239,233,220,.55);font-size:13.5px;font-weight:500}

@media(max-width:860px){
  .wrap{padding:0 24px}
  .paths{grid-template-columns:1fr;margin-bottom:64px}
  .shots{grid-template-columns:1fr 1fr;gap:30px 24px}
  .ticks{grid-template-columns:1fr}
  .finder{padding:40px 24px}
  .foot{grid-template-columns:1fr 1fr;gap:30px}.foot .brand{grid-column:1/-1}
  .nav .r a.tab{padding:8px 13px;font-size:14px}
}
/* ---- desktop/tablet: make the home email pill smaller ---- */
@media(min-width:601px){
  .home .notify{padding:5px 5px 5px 18px}
  .home .notify input{width:178px;font-size:15px}
  .home .notify .btn{padding:11px 20px;font-size:15px}
}

/* ---- phones ---- */
@media(max-width:600px){
  .hero{padding:0 20px;text-align:center}
  /* keep "One app for" as-is; the changing word is one fixed size set by JS */
  .pre{font-size:clamp(28px,8vw,44px)}
  .giant{font-size:clamp(54px,15vw,90px);letter-spacing:-.04em}

  /* front page is exactly one screen — no dark footer peeking at the bottom,
     and the sliding words pin to the bottom of the visible screen (above Safari's bar) */
  body.home{min-height:100dvh}
  .home .screen{min-height:100dvh}
  .home footer{display:none}

  /* headline sits in the TRUE centre; the pills + email are anchored at the bottom */
  .home .screen main{justify-content:stretch;padding:0}
  /* padding-bottom lifts the centred headline a little higher; pills/email stay pinned (absolute) */
  .home .hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;position:relative;padding-bottom:120px}
  .home .herobottom{position:absolute;left:0;right:0;bottom:0;width:100%;display:flex;flex-direction:column;align-items:center}

  /* two separate pill boxes, hugged close together — 20% smaller */
  .choose{flex-direction:column;gap:8px;background:none;border:0;box-shadow:none;padding:0;width:100%;max-width:190px;margin:0 auto}
  .choose a{background:var(--white);border:1px solid var(--line);border-radius:999px;
    box-shadow:0 9px 20px -16px rgba(40,28,18,.4);width:100%;justify-content:center;padding:9px 13px;font-size:11.5px}
  .choose a .ar{font-size:11px}
  .choose .sep{display:none}

  /* big gap between the pills and the email pill; email pill 20% smaller */
  .actions{margin-top:58px}
  .notify{width:100%;max-width:186px;margin-left:auto;margin-right:auto;padding:3px 3px 3px 13px;gap:4px}
  .notify input{width:auto;flex:1;min-width:0;font-size:11px}
  .notify .btn{padding:7px 11px;font-size:11px;white-space:nowrap}
  .dl{margin-top:30px;padding:10px 20px;font-size:13px;white-space:nowrap}
  .dl svg{width:15px;height:15px}
  .note{padding:0 10px;font-size:11px;margin-top:20px;margin-bottom:18px}

  /* smaller sliding words, sitting flush against the bottom of the screen */
  .ticker span{font-size:12px;padding:9px 0}
  .ticker .dot{padding:9px 14px}
}
@media(max-width:520px){.shots{grid-template-columns:1fr;max-width:300px;margin-left:auto;margin-right:auto}}