/* collect.quest — the home page's layout, from Rob's Design handoff
   (HOME-DESIGN-1855). Loaded by site/index.html only, after the shell.

   ⛔ The hero's drawn card is NOT styled here: show.css and show-theme.css draw
   it, unchanged. This file only places the words around it, and moves the card
   below the words on a phone, as the Design does.
   ⚠ Fonts are the site's own (vault.css @font-face, /assets/fonts/): Instrument
   Serif, IBM Plex Sans and Mono. Nothing is loaded from a font service.
   ⚠ Colours come from the Design: dark is the default, light follows the
   visitor's setting or [data-theme], the same switch as show-theme.css. */

:root{
  --hv-bg:#080706; --hv-ink:#F0E9DA; --hv-text:#CFC7B8; --hv-mute:#A89F8E;
  --hv-rule:#2A2620; --hv-rule-soft:#2A2620; --hv-gold:#D8A94E;
  --hv-card:#12100C; --hv-band:#1A1712; --hv-chip-rule:#4A4234;
  --hv-chat-bg:#12100C; --hv-input-rule:#3A342A;
  --hv-bubble:#080706; --hv-bubble-rule:#2A2620; --hv-example-bg:#080706;
  --hv-frame:#F0E9DA; --hv-screen:#0A0908;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --hv-bg:#F6F1E7; --hv-ink:#17140F; --hv-text:#3B352B; --hv-mute:#575043;
    --hv-rule:#D8CFBE; --hv-rule-soft:#E6DFD1; --hv-gold:#7A5714;
    --hv-card:#FFFCF5; --hv-band:#EFE8DA; --hv-chip-rule:#B9AE98;
    --hv-chat-bg:#FFFFFF; --hv-input-rule:#CFC4AF;
    --hv-bubble:#F6F1E7; --hv-bubble-rule:#E2D8C5; --hv-example-bg:#F6F1E7;
    --hv-frame:#17140F; --hv-screen:#FBF8F2;
  }
}
:root[data-theme="light"]{
  --hv-bg:#F6F1E7; --hv-ink:#17140F; --hv-text:#3B352B; --hv-mute:#575043;
  --hv-rule:#D8CFBE; --hv-rule-soft:#E6DFD1; --hv-gold:#7A5714;
  --hv-card:#FFFCF5; --hv-band:#EFE8DA; --hv-chip-rule:#B9AE98;
  --hv-chat-bg:#FFFFFF; --hv-input-rule:#CFC4AF;
  --hv-bubble:#F6F1E7; --hv-bubble-rule:#E2D8C5; --hv-example-bg:#F6F1E7;
  --hv-frame:#17140F; --hv-screen:#FBF8F2;
}

.hv-home{color:var(--hv-ink)}
.hv-home a{color:var(--hv-gold);text-decoration:none}
.hv-home a:hover{color:var(--hv-ink)}
.hv-home a:focus-visible,.hv-home button:focus-visible,.hv-home input:focus-visible{outline:2px solid var(--hv-gold);outline-offset:2px}

/* one measure for every section: the shell header's own */
.hv-wrap{display:block;max-width:calc(var(--qs-wrap,1152px) + 2*var(--qs-gutter,64px));margin:0 auto;padding-left:var(--qs-gutter,64px);padding-right:var(--qs-gutter,64px)}

.hv-eyebrow{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hv-gold);margin-bottom:12px}
.hv-h2{margin:0;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.1;color:var(--hv-ink)}
.hv-btn{display:inline-block;background:var(--hv-ink);color:var(--hv-bg) !important;border-radius:999px;padding:16px 28px;font:500 17px/1 var(--sans);text-align:center;white-space:nowrap}
.hv-btn:hover{opacity:.88}

/* ---------- hero ---------- */
.hv-hero.hold{max-width:calc(var(--qs-wrap,1152px) + 2*var(--qs-gutter,64px));padding-left:var(--qs-gutter,64px);padding-right:var(--qs-gutter,64px)}
.hv-hero{padding-top:32px;padding-bottom:28px}
/* the Design puts the words first and the card under them on a phone */
.hv-hero .sh-hero-grid > .sh-cycle{order:0}
.hv-hero-copy{display:flex;flex-direction:column;gap:18px}
.hv-h1{margin:0;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1.04;letter-spacing:-.01em;color:var(--hv-ink);text-wrap:balance}
.hv-sub{margin:0;font:400 17px/1.5 var(--sans);color:var(--hv-text);max-width:34em;text-wrap:pretty}
.hv-cta{display:flex;flex-direction:column;align-items:stretch;gap:18px}
.hv-cta .hv-btn{padding:17px 24px}

/* what is free: every line in one grid cell, so the tallest sets the height */
.hv-free{display:flex;flex-direction:column;align-items:center;gap:6px;font:400 14px/1.4 var(--sans);color:var(--hv-text);text-align:center}
.hv-free-tag{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hv-gold);flex:none}
.hv-free-lines{display:grid;width:100%;max-width:300px}
.hv-free-lines > span{grid-area:1/1;visibility:hidden}
.hv-free-lines > span.on{visibility:visible}
.hv-free.is-rotating .hv-free-lines > span{visibility:visible;opacity:0;transition:opacity .35s}
.hv-free.is-rotating .hv-free-lines > span.on{opacity:1}

@media (min-width:900px){
  .hv-hero{padding-top:72px;padding-bottom:64px}
  .hv-hero .sh-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px}
  .hv-hero-copy{gap:24px}
  .hv-h1{font-size:62px}
  .hv-sub{font-size:20px}
  .hv-cta{flex-direction:row;align-items:center;gap:20px;margin-top:4px}
  .hv-cta .hv-btn{padding:16px 28px}
  .hv-free{flex-direction:row;align-items:baseline;gap:8px;flex:1;min-width:0;max-width:340px;font-size:15px;text-align:left}
  .hv-free-tag{font-size:11px}
  .hv-free-lines{flex:1;min-width:0;max-width:none}
}

/* ---------- four ways in ---------- */
.hv-do{border-top:1px solid var(--hv-rule);padding:36px 0}
.hv-do .hv-h2{font-size:30px;margin-bottom:20px}
.hv-doors{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.hv-door{display:flex;flex-direction:column;gap:8px;background:var(--hv-card);border:1px solid var(--hv-rule);border-radius:14px;padding:18px;color:var(--hv-ink) !important}
.hv-door:hover{border-color:var(--hv-gold)}
.hv-door-n,.hv-door-l{display:none}
.hv-door-n{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--hv-gold)}
.hv-door-t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--serif);font-size:25px;line-height:1.1}
.hv-door-arrow{font:500 18px/1 var(--sans);color:var(--hv-gold)}
.hv-door-d{font:400 15px/1.45 var(--sans);color:var(--hv-text);flex:1;text-wrap:pretty}
.hv-door-l{font:500 15px/1 var(--sans);color:var(--hv-gold)}
@media (min-width:900px){
  .hv-do{padding:56px 0 64px}
  .hv-do .hv-h2{font-size:38px;margin-bottom:28px}
  .hv-doors{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .hv-door{gap:12px;padding:22px 22px 20px}
  .hv-door-n,.hv-door-l{display:block}
  .hv-door-arrow{display:none}
  .hv-door-t{font-size:28px;line-height:1.08}
  .hv-door-d{line-height:1.5}
}

/* ---------- shops and shows ---------- */
.hv-companion{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid var(--hv-rule);border-radius:14px;background:var(--hv-band)}
.hv-companion p{margin:0;font:400 16px/1.45 var(--sans);color:var(--hv-ink)}
.hv-companion a{text-align:center;border:1px solid var(--hv-gold);border-radius:999px;padding:13px 0;font:500 15px/1 var(--sans)}
.hv-companion .hv-arrow{display:none}
@media (max-width:899px){
  .hv-companion{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
  .hv-companion p{grid-column:1/-1}
}
@media (min-width:900px){
  .hv-companion{flex-direction:row;align-items:center;gap:28px;padding:22px 28px}
  .hv-companion p{flex:1;font-size:17px}
  .hv-companion a{border:0;border-radius:0;padding:0;white-space:nowrap}
  .hv-companion .hv-arrow{display:inline}
}

/* ---------- the phone screens (images and videos) ---------- */
.hv-media{display:flex;justify-content:flex-start;height:300px}
.hv-media img,.hv-media video{display:block;height:100%;width:auto;max-width:100%;box-sizing:border-box;border:6px solid var(--hv-frame);border-radius:26px;background:var(--hv-screen);object-fit:contain}
.hv-media video{aspect-ratio:1320/2868;object-fit:cover;background:#0A0908}
/* the light and dark screen of the same thing: one shows, per theme */
.hv-media .hv-skin-light{display:none}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .hv-media .hv-skin-light{display:block}
  :root:not([data-theme="dark"]) .hv-media .hv-skin-dark{display:none}
}
:root[data-theme="light"] .hv-media .hv-skin-light{display:block}
:root[data-theme="light"] .hv-media .hv-skin-dark{display:none}

/* ---------- beyond the photo ---------- */
.hv-more{padding:44px 0 36px}
.hv-more .hv-h2{font-size:30px;margin-bottom:28px}
.hv-feats{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.hv-feat{display:flex;flex-direction:column;gap:10px}
.hv-feat h3{margin:0;font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.1;color:var(--hv-ink)}
.hv-feat p{margin:0;font:400 15px/1.5 var(--sans);color:var(--hv-text);text-wrap:pretty}
.hv-feat > a{font:500 15px/1 var(--sans);padding:6px 0}
.hv-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--hv-rule);display:grid;grid-template-columns:minmax(0,1fr)}
.hv-list li{border-bottom:1px solid var(--hv-rule)}
.hv-list a{display:flex;flex-direction:column;gap:5px;padding:14px 0;color:var(--hv-ink) !important}
.hv-list b{font:600 15px/1.2 var(--sans)}
.hv-list span{font:400 14px/1.45 var(--sans);color:var(--hv-text);text-wrap:pretty}
.hv-list a:hover b{color:var(--hv-gold)}
@media (min-width:900px){
  .hv-more{padding:72px 0 64px}
  .hv-more .hv-h2{font-size:38px;margin-bottom:32px}
  .hv-feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .hv-feat{gap:14px}
  .hv-feat .hv-media{height:340px}
  .hv-feat .hv-media img,.hv-feat .hv-media video{border-width:7px;border-radius:30px}
  .hv-feat h3{font-size:28px}
  .hv-feat > a{padding:0}
  .hv-list{margin-top:40px;grid-template-columns:repeat(4,minmax(0,1fr))}
  .hv-list li{border-bottom:0}
  .hv-list a{gap:6px;padding:18px 20px 4px 0}
}

/* ---------- meet lexi ---------- */
.hv-lexi{display:flex;flex-direction:column;gap:14px;padding:26px 18px;border-radius:16px;background:var(--hv-card);border:1px solid var(--hv-rule)}
.hv-lexi-main,.hv-lexi-examples{display:flex;flex-direction:column;gap:14px;min-width:0}
.hv-lexi .hv-eyebrow{margin:0}
.hv-lexi h2{margin:0;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.08;color:var(--hv-ink)}
.hv-lexi .lede{margin:0;font:400 15px/1.55 var(--sans);color:var(--hv-text);max-width:none}
.hv-note{margin:0;font:400 13px/1.4 var(--sans);color:var(--hv-mute)}

/* the chat box: show.css's .sh-chat, re-dressed in the Design's colours */
.hv-chat.sh-chat{margin-top:6px;display:flex;flex-direction:column;background:var(--hv-chat-bg);border:1px solid var(--hv-rule);border-radius:14px;box-shadow:none;color:var(--hv-ink)}
.hv-chat-top.sh-chat-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--hv-rule-soft)}
.hv-avatar{flex:none;width:32px;height:32px;border-radius:50%;background:var(--hv-ink);color:var(--hv-bg);display:grid;place-items:center;font:400 17px/1 var(--serif)}
.hv-who{flex:1;display:flex;flex-direction:column;gap:3px}
.hv-who b{font:600 14px/1 var(--sans)}
.hv-who span{font:400 12px/1 var(--sans);color:var(--hv-mute)}
.hv-chat .sh-pill,.hv-pill{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--hv-text);border:1px solid var(--hv-chip-rule);border-radius:999px;padding:4px 8px}
.hv-chat-log.sh-examples{display:flex;flex-direction:column-reverse;max-height:260px;overflow-y:auto;padding:12px 14px}
.hv-chat-log .sh-msgs{gap:10px}
.hv-msg{margin:0;font:400 14.5px/1.45 var(--sans)}
.hv-msg.me{align-self:flex-end;max-width:88%;background:var(--hv-ink);color:var(--hv-bg);border-radius:14px 14px 4px 14px;padding:9px 12px;line-height:1.4}
.hv-msg.her{align-self:flex-start;max-width:94%;background:var(--hv-bubble);border:1px solid var(--hv-bubble-rule);border-radius:14px 14px 14px 4px;padding:9px 12px;color:var(--hv-ink)}
.hv-typing{font:italic 400 13px/1 var(--sans);color:var(--hv-mute);padding:2px}
.hv-chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 10px}
.hv-chips[hidden]{display:none}
.hv-chip{cursor:pointer;font:500 13px/1 var(--sans);color:var(--hv-ink);background:var(--hv-bubble);border:1px solid var(--hv-rule);border-radius:999px;padding:11px 12px}
.hv-chip:hover{border-color:var(--hv-gold)}
.hv-chat .sh-compose{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--hv-rule-soft)}
.hv-chat .sh-compose input{flex:1;min-width:0;background:var(--hv-chat-bg);border:1px solid var(--hv-input-rule);border-radius:999px;padding:12px 14px;font:400 16px/1 var(--sans);color:var(--hv-ink)}
.hv-chat .sh-compose input::placeholder{color:var(--hv-mute)}
.hv-chat .sh-compose button{cursor:pointer;flex:none;border:0;background:var(--hv-ink);color:var(--hv-bg);border-radius:999px;padding:0 18px;min-height:44px;font:500 15px/1 var(--sans);opacity:1}
.hv-chat .sh-compose input:disabled{opacity:.6;cursor:not-allowed}
.hv-chat .sh-compose button:disabled{opacity:.45;cursor:not-allowed}

/* ⛔ LIVE: when /assets/lexi-chat.js mounts the real concierge, the box keeps
   the paper look show.css's live transcript and forms were drawn for, in both
   themes, so a reply is never light-on-light. */
.hv-chat.live{
  --hv-ink:#17140F; --hv-text:#3B352B; --hv-mute:#575043; --hv-rule:#D8CFBE; --hv-rule-soft:#E6DFD1;
  --hv-chat-bg:#FFFFFF; --hv-input-rule:#CFC4AF; --hv-bubble:#F6F1E7; --hv-bubble-rule:#E2D8C5;
  --hv-chip-rule:#B9AE98; --hv-bg:#F6F1E7; --hv-gold:#7A5714;
  background:#FFFFFF;color:#17140F;
}
.hv-chat.live .hv-chips{display:none}

/* the two examples */
.hv-example{border:1px solid var(--hv-rule);border-radius:14px;background:var(--hv-example-bg);padding:14px;display:flex;flex-direction:column;gap:10px}
.hv-example-top{display:flex;justify-content:space-between;align-items:center}
.hv-example-top b{font:600 14px/1 var(--sans)}
.hv-example .hv-msg.me{max-width:88%;padding:10px 12px}
.hv-answer.hv-msg.her{background:var(--hv-card);border-color:var(--hv-rule);display:flex;flex-direction:column;gap:6px;padding:10px 12px;font-size:14px}
.hv-row{font:400 12.5px/1.3 var(--mono);color:var(--hv-text)}
.hv-after{color:var(--hv-text)}

@media (min-width:900px){
  .hv-lexi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start;padding:48px 52px;border-radius:18px}
  .hv-lexi h2{font-size:40px}
  .hv-lexi .lede{font-size:16px}
  .hv-chat.sh-chat{margin-top:10px}
  .hv-chat-log.sh-examples{max-height:240px}
  .hv-chip{padding:8px 11px}
  .hv-chat .sh-compose input{font-size:15px}
  .hv-example{padding:16px}
  .hv-example .hv-msg.me{max-width:85%;padding:10px 13px;font-size:15px}
  .hv-answer.hv-msg.her{max-width:92%;padding:11px 13px;font-size:14.5px}
  .hv-row{font-size:13px}
}

/* ---------- see how quest works ---------- */
.hv-loop{padding-top:48px}
.hv-loop-head{padding-bottom:8px}
.hv-loop-head .hv-h2{font-size:28px;line-height:1.12;max-width:22em}
.hv-step{display:flex;flex-direction:column;gap:12px;padding:28px 0;border-bottom:1px solid var(--hv-rule)}
.hv-step-text{display:flex;flex-direction:column;gap:12px}
.hv-step-n{font:500 12px/1 var(--mono);color:var(--hv-gold)}
.hv-step h3{margin:0;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;color:var(--hv-ink)}
.hv-step p{margin:0;font:400 15px/1.55 var(--sans);color:var(--hv-text);text-wrap:pretty}
.hv-step .hv-lexi-line{font-size:14.5px;line-height:1.45;color:var(--hv-ink)}
.hv-lexi-line b{font-weight:600}
.hv-shots{display:flex;gap:10px;margin-top:4px}
.hv-shot{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;gap:6px}
.hv-shot .hv-media{height:420px}
.hv-shots.is-two .hv-media{height:300px}
.hv-shot figcaption{font:400 12.5px/1.35 var(--sans);color:var(--hv-text)}
.hv-own{display:block;margin-top:2px;color:var(--hv-mute)}
.hv-step-link{font:500 15px/1 var(--sans);padding:8px 0}
@media (min-width:900px){
  .hv-loop{padding-top:80px}
  .hv-loop-head{padding-bottom:40px}
  .hv-loop-head .hv-h2{font-size:38px;line-height:1.1}
  /* words left, screens right; the link sits under the words */
  .hv-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". shots" "text shots" "link shots" ". shots";column-gap:56px;align-items:center;padding:40px 0;border-bottom:0;border-top:1px solid var(--hv-rule)}
  .hv-step-text{grid-area:text;gap:14px}
  .hv-shots{grid-area:shots;gap:16px;justify-content:center;margin:0}
  .hv-step-link{grid-area:link;justify-self:start;margin-top:14px;padding:0}
  .hv-step-n{font-size:13px}
  .hv-step h3{font-size:32px}
  .hv-step p{font-size:16px}
  .hv-step .hv-lexi-line{font-size:15px}
  .hv-shot{flex:none;width:230px;gap:8px}
  .hv-shot .hv-media,.hv-shots.is-two .hv-media{height:420px}
  .hv-shot .hv-media img,.hv-shot .hv-media video{border-width:7px;border-radius:32px}
  .hv-shot figcaption{font-size:13px}
}

/* ---------- pricing and sign-up ---------- */
.hv-pricing{margin-top:36px;padding:24px 20px;border-radius:16px;background:var(--hv-band);display:flex;flex-direction:column;gap:10px}
.hv-pricing .hv-eyebrow{font-size:11px;margin-bottom:10px}
.hv-pricing h2{margin:0 0 10px;font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.1;color:var(--hv-ink)}
.hv-pricing p{margin:0;font:400 15px/1.5 var(--sans);color:var(--hv-text)}
.hv-pricing > a{font:500 15px/1 var(--sans);padding:8px 0}
.hv-join{padding:44px 0}
#join{display:flex;flex-direction:column;gap:14px}
#join h2{margin:0;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1.05;color:var(--hv-ink)}
#join p{margin:0;font:400 16px/1.5 var(--sans);color:var(--hv-text)}
#join .hv-btn{padding:17px 24px}
@media (min-width:900px){
  .hv-pricing{margin-top:48px;padding:40px 44px;border-radius:18px;flex-direction:row;align-items:center;gap:40px}
  .hv-pricing > div{flex:1}
  .hv-pricing .hv-eyebrow{font-size:12px}
  .hv-pricing h2{font-size:34px}
  .hv-pricing p{font-size:16px}
  .hv-pricing > a{font-size:16px;white-space:nowrap;padding:0}
  .hv-join{padding:72px 0}
  #join{display:grid;grid-template-columns:1fr auto;grid-template-areas:"h btn" "p btn";column-gap:40px;row-gap:10px;align-items:center}
  #join h2{grid-area:h;font-size:44px}
  #join p{grid-area:p;font-size:17px}
  #join .hv-btn{grid-area:btn;padding:17px 30px}
}

@media (prefers-reduced-motion:reduce){
  .hv-free.is-rotating .hv-free-lines > span{transition:none}
}

/* The shell's Start Here button, on this page only: in dark it takes the
   Design's cream (the hero's own .hv-btn colours), not the shell's gold.
   html:root outranks shell.css's :root, and the shell's two light-mode
   selectors outrank this, so light keeps its ink button unchanged. */
html:root{--qs-btn:#F0E9DA;--qs-btn-text:#080706}