/* Pakratt: the landing page. One family's summer, in order: a short top, six
   scenes (each a moment and what the phone showed), then the sign-up. */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--pk-bg) 86%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid transparent; transition: border-color .3s; }
.nav.scrolled { border-bottom-color: var(--pk-line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 66px; }
.nav .lockup { font-size: 25px; }
.nav .links { margin-left: auto; display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; }
.nav .links a:not(.store) { text-decoration: none; color: var(--pk-text); opacity: .82; }
.nav .links a:not(.store):hover { opacity: 1; }
@media (max-width: 640px) { .nav .wrap { gap: 14px; height: 58px; } .nav .lockup { font-size: 21px; } .nav .links { gap: 16px; font-size: 14px; } .nav .links .hide-s { display: none; } }

.eyebrow { margin-bottom: 12px; }
h2 { font-weight: 500; font-size: clamp(34px, 4.2vw, 56px); line-height: 1.01; letter-spacing: -.038em; text-wrap: balance; }
/* Words a heading should not break between. */
h2 .nw { white-space: nowrap; }
.lede { margin-top: 16px; font-size: clamp(16.5px, 1.35vw, 18px); line-height: 1.52; color: var(--pk-text-2); max-width: 540px; text-wrap: pretty; }
.lede b { color: var(--pk-text); font-weight: 600; }

/* ---------- 1. Hero: trip five ---------- */
.hero { position: relative; padding: 18px 0 18px; overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -10%; top: -10%; width: 900px; height: 900px; background: radial-gradient(closest-side, color-mix(in srgb, var(--pk-glad) 22%, transparent), transparent 72%); pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: center; min-height: 720px; }
.hero h1 { font-weight: 500; font-size: clamp(46px, 6.4vw, 88px); line-height: .97; letter-spacing: -.044em; text-wrap: balance; }
.hero h1 em { letter-spacing: .01em; }
.hero .sub { margin-top: 24px; font-size: clamp(17.5px, 1.55vw, 20.5px); line-height: 1.5; color: var(--pk-text-2); max-width: 470px; text-wrap: pretty; }
.hero .ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero .ctas .btn { height: 52px; }
.hero-vis { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; align-items: center; }
.five-ph { --ph-w: 326px; --ph-shadow: 0 60px 90px -40px rgba(46, 33, 24, .6), 0 2px 8px rgba(46, 33, 24, .12); }
.f-phone { position: relative; z-index: 2; margin-left: 24px; }
.f-notes { position: relative; z-index: 3; display: grid; gap: 14px; margin-left: -18px; }
.f-count { position: absolute; z-index: 4; right: 0; top: 40px; display: grid; grid-template-columns: auto auto; gap: 10px; align-items: center; padding: 12px 18px 12px 16px; border-radius: 18px; background: var(--pk-card); box-shadow: 0 0 0 1px var(--pk-line), 0 18px 34px -24px rgba(46, 33, 24, .6); transform: rotate(2deg); opacity: 0; translate: 0 8px; transition: opacity .4s, translate .5s var(--pk-ease-settle); }
.f-count b { font: italic 400 64px/.8 var(--pk-font-serif); color: var(--pk-packed); font-variant-numeric: tabular-nums; min-width: 1.05em; text-align: right; }
.f-count span { font-size: 14px; font-weight: 600; line-height: 1.2; }
[data-five].go .f-count { opacity: 1; translate: 0 0; }
.f-note { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--pk-card); box-shadow: 0 0 0 1px var(--pk-line), 0 18px 34px -26px rgba(46, 33, 24, .55); font-size: 14px; max-width: 250px; opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .6s var(--pk-ease-settle); }
.f-note b { font-weight: 600; }
.f-note > span:last-child { grid-column: 2; color: var(--pk-text-2); line-height: 1.35; }
.f-note .i-dot { width: 8px; height: 8px; margin: 0 auto; background: var(--pk-control); }
.f-note .i-dot.k { background: var(--pk-packed); }
.f-note svg { width: 20px; height: 20px; }
[data-five].done .f-note { opacity: 1; transform: none; }
[data-five].done .f-note.n2 { transition-delay: .15s; } [data-five].done .f-note.n3 { transition-delay: .3s; }
.f-note.n1 { margin-left: 26px; } .f-note.n2 { margin-left: 4px; } .f-note.n3 { margin-left: 34px; }
.f-again { position: absolute; z-index: 5; left: calc(24px + 326px / 2); bottom: -30px; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 11px; border-radius: 99px; background: var(--pk-card); box-shadow: 0 0 0 1px var(--pk-line-strong); font-size: 13px; font-weight: 600; color: var(--pk-text-2); opacity: 0; pointer-events: none; transition: opacity .3s; }
.f-again svg { width: 13px; height: 13px; }
[data-five].done .f-again { opacity: 1; pointer-events: auto; }
.f-again:hover { color: var(--pk-text); box-shadow: 0 0 0 1px var(--pk-text); }
.five-ph .p-it.usual .i-dot { background: var(--pk-packed); }
.five-ph .p-it.typed .i-dot { background: #d6a58b; }
.five-ph .p-it.in { animation: i-arrive .45s var(--pk-ease-settle) both, p-new 2.4s ease-out both; }
/* Room to bring the last card up over the keyboard. */
.five-ph .i-scroll { padding-bottom: calc(320 * var(--pt)); }
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); gap: 34px; min-height: 0; padding-top: 20px; }
  .hero-vis { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-bottom: 46px; }
  .f-phone { margin: 0; }
  .f-notes { display: none; }
  .f-count { right: auto; left: calc(50% + 110px); top: 70px; }
  .f-again { left: 50%; bottom: 4px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 8px; }
  .five-ph { --ph-w: 318px; }
  .f-count { left: auto; right: -4px; top: 232px; padding: 10px 12px; }
  .f-count b { font-size: 46px; }
  .f-count span { font-size: 12.5px; }
}
@media (max-width: 370px) { .five-ph { --ph-w: 300px; } .f-count { top: 220px; } }

/* ---------- 2. How it got there ---------- */
.how { padding: 50px 0 20px; }
.how-head { margin-bottom: 10px; }
.beat { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 56px; align-items: center; padding: 26px 0; }
.beat + .beat { border-top: 1px dashed var(--pk-line-strong); }
.beat.flip .beat-copy { order: 2; }
/* Flipped, the phone keeps the wide column, so its steps sit beside it. */
.beat.flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
.beat-n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pk-accent); color: var(--pk-on-accent); font: italic 400 21px/1 var(--pk-font-serif); }
.beat h3 { margin-top: 14px; font-weight: 500; font-size: clamp(28px, 3vw, 38px); line-height: 1.04; letter-spacing: -.035em; }
.beat-copy p { margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--pk-text-2); max-width: 440px; text-wrap: pretty; }
.beat-vis { min-width: 0; }
.bv { position: relative; }
/* Beat 1: three states of a first trip. */
.bv-write { display: flex; align-items: center; justify-content: center; gap: 34px; }
.bv-stack { position: relative; width: 290px; height: 390px; flex: none; }
.bv-st { position: absolute; inset: 0; visibility: hidden; }
.bv-st.on { visibility: visible; }
/* A step changes the screen, never the phone: the list on it fades out, then
   the next one fades in (landing.js waits for the first). A cross-fade drew
   both lists at once, each scrolled its own way, rows over rows. */
.bv-st .i-scroll, .bv-st .kb { opacity: 0; transition: opacity .24s ease; }
.bv-st.on .i-scroll, .bv-st.on .kb { opacity: 1; }
.bv-write.leaving .bv-st .i-scroll, .bv-write.leaving .bv-st .kb { opacity: 0; transition-duration: .14s; }
@media (prefers-reduced-motion: reduce) { .bv-st .i-scroll, .bv-st .kb { transition: none; } }
.beat-ph { --ph-w: 290px; height: 390px !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.beat-ph > .scr { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.beat-ph::after { display: none; }
/* Steps two and three: the list scrolled to Lake. In step three the caret is in
   Lake's blank line with the keyboard up and its offers over the keys; the
   frame is cropped, so the keys start where the crop still shows them. */
.beat-ph .kb { bottom: auto; top: calc(404 * var(--pt)); }
.beat-ph .i-scroll.up > .i-top { margin-top: calc(var(--up) * -1 * var(--pt)); }
/* The list carries room for the pressed chip's ring and the focus ring (3px
   out, 3px wide) inside its own box, without moving the chips. */
.bv-steps { display: grid; gap: 6px; padding: 6px; margin: -6px; }
.bv-steps button { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; font-size: 14.5px; font-weight: 600; white-space: nowrap; color: var(--pk-text-2); transition: background .2s, color .2s; }
.bv-steps button span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--pk-line-strong); font: italic 400 15px/1 var(--pk-font-serif); }
.bv-steps button:hover { color: var(--pk-text); }
.bv-steps [aria-pressed="true"] { background: var(--pk-card); color: var(--pk-text); box-shadow: 0 0 0 1px var(--pk-line); }
.bv-steps [aria-pressed="true"] span { background: var(--pk-accent); color: var(--pk-on-accent); box-shadow: none; }
/* Beat 3: trip five, scene one's steps five trips later, and a caption
   that counts what came with Lake and what was typed. */
.bv-side { display: grid; gap: 16px; justify-items: start; }
.bv-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-left: 8px; font-size: 13.5px; line-height: 1.4; color: var(--pk-text-2); }
.bv-cap i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; background: var(--pk-control); }
.bv-cap i.k { background: var(--pk-packed); }
@media (max-width: 980px) {
  .beat, .beat.flip { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .beat.flip .beat-copy { order: 0; }
}
@media (max-width: 640px) {
  .how { padding-top: 40px; }
  .beat { padding: 30px 0; }
  .bv-write { flex-direction: column; gap: 14px; }
  .bv-steps { gap: 4px; }
  .bv-steps button { padding: 6px 10px 6px 6px; font-size: 12.5px; gap: 6px; }
  .bv-steps button span { width: 20px; height: 20px; font-size: 13px; }
}
@media (max-width: 370px) { .bv-steps button { font-size: 11.5px; } }

/* ---------- 3. Glad we had it ---------- */
.sec-glad { padding: 50px 0 40px; }
.glad-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.glad-rat { margin-top: 10px; width: min(200px, 56%); }
.glad-vis { min-width: 0; }
@media (max-width: 900px) { .glad-in { grid-template-columns: minmax(0, 1fr); gap: 24px; } .glad-copy { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: end; gap: 10px; } .glad-rat { width: 150px; margin: 0; } }
@media (max-width: 560px) { .glad-copy { grid-template-columns: minmax(0, 1fr); } .glad-rat { width: 120px; justify-self: end; margin-top: -10px; } }

/* Stepped phones at full height (the extra blanket, trip five): scene one's
   steps, but the whole screen, so the keyboard sits where it does. */
.bv-tall { --st-w: 300px; flex-wrap: wrap; row-gap: 22px; }
.bv-tall .bv-stack { width: var(--st-w); height: calc((var(--st-w) - 20px) * 2.168 + 20px); }
.st-ph { --ph-w: var(--st-w); }
.st-ph .i-scroll.up > .i-top { margin-top: calc(var(--up) * -1 * var(--pt)); }
.st-ph .p-it.usual .i-dot { background: var(--pk-packed); }
.bv-tall .p-it.new { animation: i-arrive .45s var(--pk-ease-settle) both; animation-delay: calc(var(--i, 0) * 45ms); }
.bv-tall .p-it.new .p-row { animation-delay: calc(var(--i, 0) * 45ms); }
@media (prefers-reduced-motion: reduce) { .bv-tall .p-it.new, .bv-tall .p-it.new .p-row { animation: none; } }
/* A thing with words from last time: the web's "Last time" line, under the name. */
.st-ph .p-it.noted .p-row { align-items: flex-start; }
.st-ph .p-it.noted .i-dot { margin-top: calc(8 * var(--pt)); }
.st-ph .p-it.noted .n { white-space: normal; }
.p-last { display: block; margin-top: calc(2 * var(--pt)); font-size: calc(13 * var(--pt)); line-height: 1.3; color: var(--pk-text-2); letter-spacing: 0; }
.p-last q { font: italic 400 calc(16 * var(--pt))/1.2 var(--pk-font-serif); color: var(--pk-text); letter-spacing: 0; quotes: '\201C' '\201D'; }
/* The road (ios/shots/road-*, form-*; ios/Pakratt/Components/Say.swift):
   Forgot, Picked up and Note under the title, each opening its form in
   their place, one card of rows drawn as the list draws its lines: a
   symbol in the rings' column, a hairline from where the words start to
   the card's edge, then Cancel and Save. Then Said, then Still to do. */
.rd-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--pt)); margin: 0 calc(16 * var(--pt)) calc(12 * var(--pt)); }
.rd-bt { display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--pt)); height: calc(46 * var(--pt)); border-radius: 99px; background: var(--pk-card); box-shadow: var(--pk-shadow-card); font-size: calc(16 * var(--pt)); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.rd-f { margin: 0 calc(12 * var(--pt)) calc(12 * var(--pt)); padding: 0 calc(16 * var(--pt)) calc(16 * var(--pt)); border-radius: calc(22 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); }
.rd-l, .rd-r { position: relative; display: flex; gap: calc(12 * var(--pt)); min-height: calc(44 * var(--pt)); font-size: calc(17 * var(--pt)); line-height: 1.3; }
.rd-l { align-items: flex-start; padding: calc(10 * var(--pt)) 0; }
.rd-r { align-items: center; padding: calc(6 * var(--pt)) 0; }
.rd-r::before { content: ''; position: absolute; left: calc(34 * var(--pt)); right: calc(-16 * var(--pt)); top: 0; border-top: 1px solid var(--pk-line); }
.rd-s { display: grid; place-items: center; width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); flex: none; color: var(--pk-text-2); }
.rd-s svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
.rd-bt .rd-s { width: calc(19 * var(--pt)); }
.rd-s.forgot { color: var(--pk-forgot); }
.rd-s.picked { color: var(--pk-accent); }
.rd-l .t { min-width: 0; }
.rd-l .p-caret { height: calc(20 * var(--pt)); margin-left: 1px; vertical-align: calc(-4 * var(--pt)); }
.rd-r .n { flex: 1; min-width: 0; }
.rd-r .v { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); color: var(--pk-text-2); white-space: nowrap; }
.rd-r .ud { width: calc(9 * var(--pt)); height: calc(14 * var(--pt)); }
.rd-cs { display: flex; flex-wrap: wrap; gap: calc(6 * var(--pt)); margin: calc(-2 * var(--pt)) 0 calc(12 * var(--pt)) calc(34 * var(--pt)); }
.rd-c { display: inline-flex; align-items: center; height: calc(26 * var(--pt)); padding: 0 calc(10 * var(--pt)); border-radius: 99px; background: var(--pk-accent-tint); color: var(--pk-accent); font-size: calc(14 * var(--pt)); font-weight: 600; letter-spacing: 0; }
.rd-a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(12 * var(--pt)); margin-top: calc(8 * var(--pt)); }
.rd-a .i-btn { height: calc(44 * var(--pt)); }
.rd-a .rd-no { background: color-mix(in srgb, var(--pk-text) 7%, var(--pk-card)); color: var(--pk-text); }
.sd { list-style: none; margin: 0 calc(12 * var(--pt)) calc(14 * var(--pt)); padding: calc(4 * var(--pt)) calc(16 * var(--pt)); border-radius: calc(22 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); }
.sd > li { padding: calc(10 * var(--pt)) 0; }
.sd-t { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--pt)); font-size: calc(17 * var(--pt)); }
.sd-t b { font-weight: 600; letter-spacing: -.015em; }
.sd-t .i-chip { height: calc(24 * var(--pt)); padding: 0 calc(9 * var(--pt)); font-size: calc(12.5 * var(--pt)); }
.sd-m { display: block; margin-top: calc(3 * var(--pt)); font-size: calc(14 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; }
.i-chip.picked { background: var(--pk-accent-tint); color: var(--pk-accent); }
.sd-h { display: flex; justify-content: space-between; padding: 0 calc(28 * var(--pt)) calc(8 * var(--pt)); font-size: calc(14 * var(--pt)); font-weight: 600; letter-spacing: 0; }
.sd-h span + span { font-weight: 400; color: var(--pk-text-2); }
.sd.td > li { display: flex; align-items: center; gap: calc(12 * var(--pt)); font-size: calc(17 * var(--pt)); }
/* Finish trip (ios/Pakratt/Screens/FinishSheet.swift, ios/shots/finish-*):
   with one question the sheet stops at half height over the road. Each
   question is the thing, why it is asked, and two answers with nothing
   picked until one is tapped; here Leave it home is, a beat after the
   step shows (landing.js restarts .tap on the way in). */
.fs { height: calc(410 * var(--pt)); padding: calc(5 * var(--pt)) calc(16 * var(--pt)) 0; border-radius: calc(38 * var(--pt)) calc(38 * var(--pt)) calc(var(--ph-w) * .155 - 8 * var(--pt)) calc(var(--ph-w) * .155 - 8 * var(--pt)); background: var(--pk-bg); box-shadow: 0 0 0 .5px var(--pk-line), 0 calc(-6 * var(--pt)) calc(30 * var(--pt)) rgba(28, 20, 16, .16); }
.fs-grab { width: calc(36 * var(--pt)); height: calc(5 * var(--pt)); margin: 0 auto; border-radius: 9px; background: var(--pk-line-strong); }
.fs-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; margin-top: calc(9 * var(--pt)); }
.fs-bar b { font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; }
.fs-b { justify-self: start; display: inline-flex; align-items: center; height: calc(44 * var(--pt)); padding: 0 calc(16 * var(--pt)); border-radius: 99px; background: var(--pk-card); box-shadow: 0 0 0 .5px var(--pk-line-strong), 0 calc(2 * var(--pt)) calc(8 * var(--pt)) rgba(28, 20, 16, .08); font-size: calc(17 * var(--pt)); color: var(--pk-accent); white-space: nowrap; }
.fs-b.done { justify-self: end; font-weight: 600; }
.fs-q { margin-top: calc(22 * var(--pt)); padding: calc(14 * var(--pt)) calc(16 * var(--pt)) calc(16 * var(--pt)); border-radius: calc(24 * var(--pt)); background: var(--pk-card); box-shadow: var(--pk-shadow-card); }
.fs-q > b { display: block; font-size: calc(17 * var(--pt)); font-weight: 600; letter-spacing: -.02em; }
.fs-q > span { display: block; margin-top: calc(2 * var(--pt)); font-size: calc(15 * var(--pt)); color: var(--pk-text-2); letter-spacing: 0; }
.fs-seg { --fs-thumb: #fff; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(34 * var(--pt)); margin-top: calc(10 * var(--pt)); padding: calc(2 * var(--pt)); border-radius: 99px; background: color-mix(in srgb, var(--pk-text) 7%, var(--pk-card)); }
[data-theme="dark"] .fs { background: var(--pk-bg-2); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .fs { background: var(--pk-bg-2); } }
[data-theme="dark"] .fs-seg { --fs-thumb: color-mix(in srgb, var(--pk-text) 30%, var(--pk-card)); background: color-mix(in srgb, var(--pk-text) 10%, var(--pk-card)); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .fs-seg { --fs-thumb: color-mix(in srgb, var(--pk-text) 30%, var(--pk-card)); background: color-mix(in srgb, var(--pk-text) 10%, var(--pk-card)); } }
.fs-seg > span { position: relative; z-index: 1; display: grid; place-items: center; font-size: calc(14 * var(--pt)); color: var(--pk-text); white-space: nowrap; letter-spacing: -.01em; }
.fs-seg .thumb { position: absolute; top: calc(2 * var(--pt)); bottom: calc(2 * var(--pt)); left: 50%; right: calc(2 * var(--pt)); border-radius: 99px; background: var(--fs-thumb); box-shadow: 0 1px 3px rgba(28, 20, 16, .16), 0 0 0 .5px var(--pk-line); opacity: 0; }
.rv.in .fs-seg.tap .thumb { animation: fs-thumb .4s 1.6s var(--pk-ease-settle) both; }
.rv.in .fs-seg.tap > span:last-child { animation: fs-pick 0s 1.6s both; }
@keyframes fs-thumb { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes fs-pick { to { font-weight: 600; } }
@media (prefers-reduced-motion: reduce) { .fs-seg .thumb { animation: none !important; opacity: 1; } .fs-seg > span:last-child { animation: none !important; font-weight: 600; } }

/* ---------- 4. Your household, one list ---------- */
.sec-hh { padding: 50px 0 30px; overflow: hidden; }
.hh-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; }
.hh-sig { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 99px; background: var(--pk-card); box-shadow: 0 0 0 1px var(--pk-line); font-size: 14.5px; font-weight: 600; transition: box-shadow .2s; }
.hh-sig:hover { box-shadow: 0 0 0 1px var(--pk-text); }
.hh-sig .sw { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--pk-packed); transition: background .25s; flex: none; }
.hh-sig .sw::after { content: ''; position: absolute; top: 3px; left: 21px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .25s var(--pk-ease-settle); }
.hh-sig[aria-pressed="true"] .sw { background: var(--pk-line-strong); }
.hh-sig[aria-pressed="true"] .sw::after { left: 3px; }
/* The two phones fade out together, under one mask. A mask on each phone
   made Greg's see-through where it lies over Jess's, so her bezel, her
   screen and her cards showed through the bottom of his. The padding,
   given back by the margins, keeps the name tags and the tilted corners
   inside the mask; the fade ends above the highest cropped corner. The
   phones cast no shadow, as before, when each mask clipped its own. */
.hh-vis { position: relative; display: flex; justify-content: center; gap: 0; height: 556px; padding: 36px 36px 0; margin: -36px -36px 0; -webkit-mask-image: linear-gradient(#000 414px, transparent 534px); mask-image: linear-gradient(#000 414px, transparent 534px); }
.hh-ph.crop { -webkit-mask-image: none; mask-image: none; }
.hh-p { position: relative; }
.hh-g { z-index: 2; transform: rotate(-2.5deg) translateY(6px); margin-right: -26px; }
.hh-m { transform: rotate(2.5deg) translateY(30px); }
.hh-ph { --ph-w: 272px; --crop: 500px; --ph-shadow: 0 0 transparent; }
.hh-tag { position: absolute; z-index: 5; top: -14px; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px 0 5px; border-radius: 99px; background: var(--pk-card); box-shadow: var(--pk-shadow-raised); font: 600 14px/1 var(--pk-font-sans); --pt: 1.05px; }
.hh-net { display: none; margin: 0 calc(12 * var(--pt)) calc(10 * var(--pt)); align-items: center; gap: calc(8 * var(--pt)); padding: calc(9 * var(--pt)) calc(12 * var(--pt)); border-radius: calc(14 * var(--pt)); background: var(--pk-bg-2); font-size: calc(13.5 * var(--pt)); color: var(--pk-text-2); }
.hh-net svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); flex: none; }
.hh-net b { color: var(--pk-text); }
.hh-g.off .hh-net { display: flex; }
.hh-ph .i-row { cursor: pointer; }
.hh-ph .pk-grp .i-row { min-height: calc(42 * var(--pt)); padding: calc(8 * var(--pt)) 0; font-size: calc(16 * var(--pt)); gap: calc(12 * var(--pt)); }
.hh-ph .i-it.q .i-cb::after { content: ''; position: absolute; right: calc(-3 * var(--pt)); top: calc(-3 * var(--pt)); width: calc(9 * var(--pt)); height: calc(9 * var(--pt)); border-radius: 50%; background: var(--pk-glad); box-shadow: 0 0 0 calc(2 * var(--pt)) var(--pk-card); }
.hh-ph .i-it.ping .i-row { animation: p-ping 2s ease-out both; }
@keyframes p-ping { 0% { background: var(--pk-card); } 20% { background: color-mix(in srgb, #4f7f80 20%, var(--pk-card)); } 100% { background: var(--pk-card); } }
@media (max-width: 980px) { .hh-in { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
@media (max-width: 560px) {
  .hh-vis { height: 436px; -webkit-mask-image: linear-gradient(#000 317px, transparent 406px); mask-image: linear-gradient(#000 317px, transparent 406px); }
  .hh-ph { --ph-w: 172px; --crop: 370px; }
  .hh-g { margin-right: 2px; }
  .hh-m { transform: rotate(2.5deg) translateY(18px); }
  .hh-tag { font-size: 12.5px; height: 28px; }
  .hh-sig { font-size: 13.5px; }
}
@media (max-width: 370px) { .hh-ph { --ph-w: 160px; } .hh-g { margin-right: 0; } }

/* ---------- 5. The send-off: try it now, and a list for Android ---------- */
.sec-start { padding: 50px 0 60px; }
.start-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
.isnot { margin-top: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 24px; }
.isnot li { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; }
.isnot li::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--pk-accent); background: linear-gradient(-45deg, transparent calc(50% - .8px), var(--pk-accent) calc(50% - .8px), var(--pk-accent) calc(50% + .8px), transparent calc(50% + .8px)); }
.launch { padding: clamp(24px, 3.4vw, 40px); border-radius: 28px; }
.launch h2 { font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -.035em; }
.launch h2 em { font-size: 1.1em; color: var(--pk-accent); }
.launch > p { margin-top: 10px; font-size: 16px; color: var(--pk-text-2); line-height: 1.5; }
.ln-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.ln-ctas .btn { height: 52px; }
/* Android is not built: a small heading and the one-email list under a rule. */
.ln-and { margin-top: 28px; padding-top: 22px; border-top: 1px dashed var(--pk-line-strong); }
.ln-and h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.ln-and > p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--pk-text-2); }
.signup { margin-top: 14px; display: flex; gap: 8px; }
.signup input { flex: 1; min-width: 0; height: 50px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--pk-bg-2); box-shadow: inset 0 0 0 1px var(--pk-line-strong); font: 16px var(--pk-font-sans); color: var(--pk-text); outline: none; transition: box-shadow .2s; }
.signup input:focus { box-shadow: inset 0 0 0 2px var(--pk-accent), 0 0 0 4px color-mix(in srgb, var(--pk-accent) 16%, transparent); background: var(--pk-card); }
.signup input::placeholder { color: var(--pk-text-2); }
.signup .btn { height: 50px; }
.signup.bad input { box-shadow: inset 0 0 0 2px var(--pk-forgot); }
.signup.sending { pointer-events: none; }
.signup.sending .btn { opacity: .6; }
.signup.sent { opacity: .55; pointer-events: none; }
.signup-msg { margin-top: 8px; min-height: 20px; font-size: 14px; color: var(--pk-text-2); }
@media (max-width: 900px) { .start-in { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
@media (max-width: 560px) {
  .isnot { grid-template-columns: minmax(0, 1fr); }
  /* Room for the badge and Try on web side by side on a 390 phone. */
  .launch { padding: 24px 20px; }
  .ln-ctas { gap: 10px; }
  .signup { flex-direction: column; } .signup input { flex: none; width: 100%; } .signup .btn { width: 100%; }
}

/* ---------- The story: a short top, then one scene per section ---------- */
.top-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center; padding: 56px 0 40px; }
.hero .top-in h1 { font-size: clamp(42px, 5.4vw, 76px); line-height: 1; }
.hero .top-in .eyebrow { margin-bottom: 18px; }
.hero-rat { justify-self: center; width: min(300px, 100%); }
.scene { padding: 34px 0; }
.scene .beat { padding: 0; }
.beat-copy .lede { max-width: 460px; }
.scene-next { overflow: hidden; }
/* Trip two's phone casts a long shadow: clip only sideways, so it fades out
   below the scene instead of stopping in a straight line at its edge. */
@supports (overflow: clip) { .scene-next { overflow: visible; overflow-x: clip; } }
.next-in { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px; align-items: center; min-height: 680px; }
.start-in { grid-template-columns: minmax(0, 640px); justify-content: center; }
/* On a desktop the scenes breathe: twice the room between them. */
@media (min-width: 761px) {
  .top-in { padding: 72px 0 64px; }
  .scene { padding: 80px 0; }
  .sec-glad { padding: 96px 0 80px; }
  .sec-hh { padding: 96px 0 72px; }
  .sec-start { padding: 96px 0 100px; }
}
@media (max-width: 1080px) {
  .next-in { grid-template-columns: minmax(0, 1fr); gap: 34px; min-height: 0; }
}
@media (max-width: 760px) {
  .top-in { grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; padding: 30px 0 20px; align-items: end; }
  .top-in .ctas { grid-column: 1 / -1; }
  .hero-rat { width: 128px; }
}
@media (max-width: 560px) {
  .top-in { grid-template-columns: minmax(0, 1fr); }
  .hero-rat { grid-row: 1; justify-self: start; width: 112px; margin-bottom: -4px; }
  .scene { padding: 28px 0; }
}
/* The top is short now: let its glow fade into the first scene instead of
   stopping at a hard edge, and clip only sideways so 390 never scrolls. */
.hero { overflow: visible; overflow-x: clip; }
.hero::before { z-index: -1; }