/* Home page — the hero deck and its moment, the live help rows, the science, the docked mark.
   Shared parts (type, header, bow, waitlist, closer, footer, mark) are in site.css. */
/* Hero: one centred column — her mark and question, the deck and its filter, the claim, the line under it, the form.
   On the web spacing scale: a group under the header, from her mark to her question and from her question to the deck, a block from the deck
   to its filter and from the filter to the claim, a group to the line under it and the form. The bow is the space
   below the form. */
.hero{padding:var(--grp) 0 0}
.hero-col{display:flex;flex-direction:column;align-items:center;text-align:center}
/* Her doodles, either side of her and the deck on wide screens only (home.js). */
.hero-deco{display:none;position:absolute;left:0;right:0;top:0;pointer-events:none;z-index:0}
.hero-deco span{position:absolute;display:block;line-height:0}
@media (min-width:1200px){.hero-deco{display:block}}
.her{display:flex;flex-direction:column;align-items:center}
.her .lm{z-index:1}
.hero .lm-disc{background:var(--bg)}
/* Her question, the lead line: Web title 2, up to 760 wide (the section-head width), balanced.
   Its words land in place over the finished line (home.js), so nothing below moves as she asks. */
.ask{margin-top:var(--grp);max-width:760px}
.deck-col{display:flex;flex-direction:column;align-items:center;gap:var(--blk);margin-top:var(--grp)}
/* How the deck works, under the cards: a block below the deck (clear of the cards fanned beneath it), a group above the filter. */
.deck-hint{margin-bottom:calc(var(--grp) - var(--blk))}
/* The deck: portrait 2 : 3, landscape 3 : 2 on desktop. Cards are the visitor's words, in skyInk with the hand's ink edge. */
.deck{position:relative;width:320px;height:480px}
@media (min-width:1000px){.deck{width:540px;height:360px}}
/* Without JavaScript the deck is its list of snags: each area's name in bold over its snags, areas a group
   apart, the deck sized to them. With it, the list shows until the first deal replaces it. */
html:not(.js) .deck{width:auto;height:auto}
.snag-list,.snag-list ul{list-style:none;margin:0;padding:0}
.snag-list > li{font-weight:700}
.snag-list > li + li{margin-top:var(--grp)}
.snag-list li li{font-weight:500}
.snag{position:absolute;inset:0;padding:24px;user-select:none;-webkit-user-select:none;background:var(--skyInk);color:var(--onInk);border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--ink);display:flex;flex-direction:column;text-align:left}
.snag.top{z-index:4;touch-action:pan-y;cursor:grab}
.snag.top.dragging{cursor:grabbing}
.snag-head{display:flex;align-items:center;gap:8px}
.snag-head .label{color:var(--skyWash)}
.snag-q{flex:1;display:flex;align-items:center}
.snag-q .headline{color:var(--onInk)}
.snag-btns{display:flex;gap:12px}
.snag-btns .btn{flex:1;min-width:0;padding-left:16px;padding-right:16px}
.btn-light{background:var(--white);color:var(--ink)}.btn-light:hover{color:var(--ink)}
.btn-on-ink{background:transparent;color:var(--onInk);box-shadow:inset 0 0 0 1px var(--skyWash)}.btn-on-ink:hover{color:var(--onInk)}
/* The filter: Web button small chips, each led by its glyph at 16; chosen is sky with the 2px skyInk edge. Phones: one line, no glyphs, 12px sides. */
.areas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--bnd)}
.area{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-size:16px;font-weight:700;line-height:22px;color:var(--ink);background:var(--white);border-radius:999px;padding:13px 16px;border:none;box-shadow:inset 0 0 0 1px var(--inkMuted);cursor:pointer;white-space:nowrap}
.area[aria-pressed="true"]{background:var(--sky);box-shadow:inset 0 0 0 2px var(--skyInk)}
.pitch{display:flex;flex-direction:column;align-items:center;margin-top:var(--blk);width:100%}
/* Each sentence of the line under the promise stays whole: one line on wider screens, a sentence per line on phones. */
.claim-sub{margin-top:var(--grp)}.claim-how{margin-top:var(--bnd)}.claim-how span{display:inline-block}
.pitch .wl{margin-top:var(--grp)}
/* In the hero on wider screens the field and its button share one row; the error and the age line sit under the row. */
@media (min-width:561px){.pitch .wl{max-width:720px}.pitch .wl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"in btn" "err err";gap:var(--bnd) var(--grp);align-items:center}.pitch .wl-input{grid-area:in}.pitch .wl-row .btn{grid-area:btn}.pitch .wl-err{grid-area:err}}
@media (max-width:560px){.hero{padding:var(--grp) 0 var(--grp)}.deck{width:260px;height:390px}.areas{flex-wrap:nowrap}.area{font-size:13px;line-height:18px;padding-left:12px;padding-right:12px}.area svg{display:none}}
/* "That's me": the modal scrim, her gold flooding up, the popup — the record card minted beside her offer and the form. */
.moment{position:fixed;inset:0;z-index:100}
.moment-scrim{position:absolute;inset:0;background:rgba(15,14,10,.75)}
.moment-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.moment-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:safe center;padding:72px 24px 24px;pointer-events:none;overflow-y:auto}
.moment-in>*{pointer-events:auto}
.pop{position:relative;display:flex;align-items:center;gap:var(--blk);width:100%;max-width:880px;padding:48px;background:var(--bg);border-radius:18px;box-shadow:0 18px 40px -12px rgba(15,14,10,.45)}
.pop-close{position:absolute;top:16px;right:16px;z-index:3;width:32px;height:32px;border-radius:50%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}
.pop-card-wrap{position:relative;flex:0 0 auto}
.pop-light{position:absolute;inset:-9%;border-radius:50%;background:radial-gradient(circle,rgba(204,221,238,.4),rgba(204,221,238,0) 68%);animation-delay:.7s;pointer-events:none}
.pop-card{position:relative;z-index:1;width:320px;height:480px;background:var(--skyInk);color:var(--onInk);border:1.5px solid var(--ink);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.pop-card-top{flex:1;padding:24px;display:flex;flex-direction:column}
.pop-reply{flex:0 0 auto;display:grid;padding:16px 24px;background:var(--gold);color:var(--ink);border-top:1.5px solid var(--ink)}
.pop-reply>*{grid-area:1/1}
.pop-reply .ghost{visibility:hidden}
.pop-side{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;animation-delay:1.5s}
.pop-side .wl{margin-top:var(--grp)}
@media (max-width:860px){.pop{flex-direction:column;gap:var(--grp);padding:56px 24px 24px;max-width:420px}.moment-in{justify-content:flex-start}}
@media (max-width:560px){.pop-card{width:260px;height:390px}}
@media (max-height:760px){.moment-in{padding-top:56px}}
/* The live help rows: a change on its ring opening its check-in (it plays once, in view), and the habit it became. */
.h-live{padding:24px;position:relative}
.h-live>.live-in{position:relative;z-index:1}
/* Getting to know you: the visitor's sky behind the white bubble. */
.h-know{background:var(--sky)}
/* The change, as the Behaviors tab draws it: on her gold, centred — the length in Label, the name with its emoji
   inline, what it asks — then the ring, white on the gold. */
.h-run{background:var(--gold)}
.change{text-align:center}
.change-name{font-size:22px;font-weight:700;line-height:28px;margin-top:8px;text-wrap:balance}
.change-desc{font-size:17px;font-weight:500;line-height:22px;margin-top:8px;text-wrap:pretty;max-width:36ch;margin-left:auto;margin-right:auto}
.ring-wrap{display:flex;justify-content:center;margin-top:var(--grp)}
.ring{position:relative;width:300px;height:300px}
.ring svg{display:block}
/* The ring's centre at the app's sizes: the line in Title 2, Check in as the app's button (Button on 12 × 24, the md
   shadow, breathing). Pressed it takes the app's press — .97 at once, the spring back over .5s — under the touch dot
   (WEB.touch: a 44 white disc at .5, in over .2s, out over .3s). */
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;white-space:nowrap;pointer-events:none}
.ring-q{font-size:22px;font-weight:700;line-height:28px}
.ring-btn{position:relative;margin-top:12px;background:var(--ink);color:var(--onInk);border-radius:999px;padding:12px 24px;font-size:17px;font-weight:700;line-height:22px;box-shadow:0 10px 22px -8px rgba(15,14,10,.5)}
.ring-btn.down{animation:none;transform:scale(.97)}
.ring-btn.up{animation:none;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.touch{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:var(--white);opacity:0;transform:scale(.6);transition:opacity .2s ease,transform .2s ease}
.touch.on{opacity:.5;transform:none}
.touch.off{opacity:0;transform:scale(1.2);transition:opacity .3s ease,transform .3s ease}
/* The check-in it opens, as the app opens it: the modal scrim over the art, and the panel (bg, the panel radius, the lg
   shadow over a line edge) centred on it at the app's own geometry — 362 × 584 — scaled down to fit inside the art 14
   from its edges, never up. In it the day and the change in Label and Card title, the three slots (the first holding the
   answer already played, the live one white with a 2px ink edge and the slow pulse), the question in Title 2, and the second hand: three 100 × 150 cards fanned
   ±7°, the sky ramp wash → base → deep, a 1.5px ink edge, the mark at 54 and the answer in Button small. */
.ci-layer{position:absolute;inset:0;z-index:2;border-radius:20px;overflow:hidden;visibility:hidden}
.ci-layer.on{visibility:visible}
.ci-scrim{position:absolute;inset:0;background:rgba(15,14,10,.75)}
.ci{position:absolute;left:50%;top:50%;width:362px;height:584px;margin:-292px 0 0 -181px;transform:scale(var(--k,1));background:var(--bg);border-radius:18px;box-shadow:0 18px 40px -12px rgba(15,14,10,.45),inset 0 0 0 1.5px var(--line)}
.ci-head{position:absolute;left:24px;right:24px;top:22px;text-align:left}
.ci-k{font-size:13px;font-weight:500;line-height:18px;letter-spacing:.12em;text-transform:uppercase;color:var(--inkMuted)}
.ci-t{font-size:17px;font-weight:700;line-height:22px;margin-top:4px;display:flex;align-items:baseline;gap:12px}
.ci-slot{position:absolute;top:94px;width:100px;height:150px;border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--line)}
.ci-slot.on{background:var(--white);box-shadow:inset 0 0 0 2px var(--ink)}
.ci-slot>svg{position:absolute;inset:0;pointer-events:none}
.ci-q{position:absolute;left:28px;width:309px;top:244px;height:172px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:22px;font-weight:700;line-height:28px;text-wrap:pretty}
.ci-card{position:absolute;width:100px;height:150px;filter:drop-shadow(0 8px 18px rgba(15,14,10,.14))}
.ci-face{width:100%;height:100%;box-sizing:border-box;border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--ink);padding:16px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
.ci-face svg{display:block;flex:0 0 auto}
.ci-lab{font-size:15px;font-weight:700;line-height:20px;text-align:center}
.habit{display:flex;flex-direction:column;gap:var(--grp)}
.habit .routine{visibility:hidden}
.habit.on .routine{visibility:visible}
/* The science, then the privacy record a block below it — one centred column at every width, the heading
   and line held to 880, the method rows to the full width (so each row holds one line on desktop),
   and the record to 560. The record's facts stay left-aligned inside it, ticks in a line. */
.sci{border-top:1px solid var(--line)}
.sci-grid{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;row-gap:var(--blk);text-align:center}
.sci-copy{width:100%}
.sci-copy .headline,.sci-copy .lead{max-width:880px;margin-left:auto;margin-right:auto}
.sci-copy .lead{margin-top:var(--grp)}
/* The methods she draws on, as four boxes a group apart, each on its own wash (gold · sky · mint ·
   coral) with the card radius and padding: the label (Web label, in that wash's ink) heads the box,
   its methods stacked under it, one per line in Web body ink, a bind apart. The columns share their
   rows (subgrid): every label starts at the top, and every list starts level below the tallest label. A 2 × 2 matrix held to 880 like the line above it, so
   every method holds one line on desktop; one column on phones. */
.methods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto auto;max-width:880px;margin-left:auto;margin-right:auto;column-gap:var(--grp);row-gap:var(--grp);margin-top:var(--blk);width:100%}
.m-row{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--grp);align-content:start;border-radius:20px;padding:var(--grp)}
.m-row:nth-child(1){background:var(--goldWash)}.m-row:nth-child(1) .label{color:var(--goldInk)}
.m-row:nth-child(2){background:var(--skyWash)}.m-row:nth-child(2) .label{color:var(--skyInk)}
.m-row:nth-child(3){background:var(--mintWash)}.m-row:nth-child(3) .label{color:var(--mintInk)}
.m-row:nth-child(4){background:var(--coralWash)}.m-row:nth-child(4) .label{color:var(--coralInk)}
.m-list{list-style:none;display:flex;flex-direction:column;gap:var(--bnd);font-size:21px;font-weight:500;line-height:27px;color:var(--ink)}
.m-list li{text-wrap:balance}
@media (max-width:560px){.methods{grid-template-columns:minmax(0,1fr);grid-template-rows:none}.m-row{grid-row:auto;grid-template-rows:none}.m-list{font-size:17px;line-height:22px}}
.sci-card{width:100%;max-width:560px;background:var(--white);border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--line);padding:24px}
.sci-card .title{margin-bottom:var(--grp)}
.facts{list-style:none;text-align:left}
.facts li{display:flex;align-items:center;gap:12px}
.facts li+li{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.facts svg{flex:0 0 auto}
/* Her mark, docked at the top centre once the hero's mark has scrolled away: 72 (48 on phones), the
   floating lift, her cream disc while her gold field is under her and her gold disc after. */
.dock{position:fixed;top:16px;left:50%;z-index:40;border:none;background:none;padding:0;cursor:pointer;transform:translate(-50%,-120px);opacity:0;pointer-events:none;transition:transform .4s cubic-bezier(.3,1.25,.5,1),opacity .3s ease}
.dock.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.dock .lm{--s:72px;border-radius:50%;box-shadow:0 1px 2px rgba(15,14,10,.05),0 14px 30px -16px rgba(15,14,10,.3)}
.dock.on-field .lm-disc{background:var(--bg)}
@media (max-width:560px){.dock .lm{--s:48px}}
@media (prefers-reduced-motion:reduce){.dock{transition:opacity .3s ease}}