/* After All — the home page (site/index.html), v3. The design system (type, buttons, frames, the page gradient, floating
   drawings, drift rows, the FAQ list) is site.css; this file only lays out the home page's eight screens:
   1 hero · drift row · 2 how it works · 3 ways to meet · 4 small on purpose (numbers, or the dashboard's quotes) · press ·
   5 safety · 6 cities · 7 FAQ · 8 the last word. Phone first; wider screens add columns. */

.home {
  /* the asterisk between words in a row (the mark, simple cut; ink, or cream in the dark) */
  --sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-316 -316 632 632'%3E%3Cg fill='%231E1433'%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(-90)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(30)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(90)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(150)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(210)'/%3E%3Ccircle r='46'/%3E%3C/g%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(-30)' fill='%23E0246A'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home {
    --sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-316 -316 632 632'%3E%3Cg fill='%23FFF6EE'%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(-90)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(30)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(90)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(150)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(210)'/%3E%3Ccircle r='46'/%3E%3C/g%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(-30)' fill='%23E0246A'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .home {
  --sep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-316 -316 632 632'%3E%3Cg fill='%23FFF6EE'%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(-90)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(30)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(90)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(150)'/%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(210)'/%3E%3Ccircle r='46'/%3E%3C/g%3E%3Cpath d='M5.98,34.05L211.75,82.54A84.8,84.8 0 1 0 211.75,-82.54L5.98,-34.05A34.98,34.98 0 0 0 5.98,34.05Z' transform='rotate(-30)' fill='%23E0246A'/%3E%3C/svg%3E");
}
.home main { max-width: none; margin: 0; padding: 0; }

/* ============================== 1. hero: the film, edge to edge, the full first screen ==============================
   The card is the whole first screen with no inset and no corners. The bar (site.css §7, a glass pill) floats over it.
   Inside: .hero-melt carries a mask whose last --edge fades softly to clear, so the film's bottom edge melts into the page
   (that soft edge is all there is without motion). In it, .hero-in holds the film, the shade, the words and the pause
   button, and .hero-glow (a brand haze, shown with motion only) sits just above the soft edge. With motion (motion.js
   data-blend), .hero-melt moves up and .hero-in moves back down by the same amount: the soft edge and the glow rise
   through the film, and the page's own gradient shows through below them. Transform and opacity only. */
.hero { position: relative; padding: 0; }
.hero > .floaters { z-index: 2; }
.hero-card { position: relative; z-index: 1; overflow: hidden; isolation: isolate; color: var(--on-photo); }
.hero-melt { --edge: clamp(26px, 5.2svh, 58px); position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), rgb(0 0 0 / .8) calc(100% - var(--edge) * .74), rgb(0 0 0 / .45) calc(100% - var(--edge) * .46), rgb(0 0 0 / .14) calc(100% - var(--edge) * .2), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - var(--edge)), rgb(0 0 0 / .8) calc(100% - var(--edge) * .74), rgb(0 0 0 / .45) calc(100% - var(--edge) * .46), rgb(0 0 0 / .14) calc(100% - var(--edge) * .2), transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hero-in { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #1E1433;
  min-height: 100vh; min-height: clamp(560px, 100svh, 1400px); }
/* the film fills the card exactly and scrolls with the page: no parallax, no overscan, no zoom, so it stays as sharp as
   its file and never trails the scroll */
.hero-media { position: absolute; inset: 0; z-index: 0; margin: 0; }
/* the built-in film keeps the table in the middle (the couple sits just right of centre); the dashboard's film and photo
   use their own focal point (home.js, site-media.js) */
.hero-media > img:not(.slot-photo), .hero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 56% 50%; }
.hero-media > .film-video { opacity: 0; transition: opacity 1s var(--ease-out); }
.hero-media.is-playing > .film-video { opacity: 1; }
.hero-media.slot-real > .film-video { display: none; }
/* the words' shade: ink only where they sit (the bottom left, and a low band along the bottom), never a veil over the film */
.hero-shade { position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(84% 96% at 0% 100%, rgba(var(--shade), .7) 0%, rgba(var(--shade), .46) 46%, rgba(var(--shade), 0) 82%),
    linear-gradient(0deg, rgba(var(--shade), .5) 0%, rgba(var(--shade), .18) 26%, rgba(var(--shade), 0) 44%),
    radial-gradient(50% 46% at 0% 100%, rgba(224, 36, 106, .2), rgba(224, 36, 106, 0) 72%); }
/* the brand glow that rides the melt as it rises (motion.js fades it in): from clear, through a violet and pink haze over
   the film, to the page's own peach and cream at the soft edge and through it, so the film gives way to the page
   smoothly. It moves with .hero-melt (the mask fades it out with the film). Hidden without motion. */
.hero-glow { position: absolute; left: 0; right: 0; bottom: 0; height: calc(62% + var(--edge)); z-index: 7; pointer-events: none; display: none; opacity: 0;
  background:
    radial-gradient(46% 30% at 14% 70%, rgb(224 36 106 / .26), rgb(224 36 106 / 0)),
    radial-gradient(50% 30% at 88% 62%, rgb(139 108 240 / .26), rgb(139 108 240 / 0)),
    linear-gradient(180deg, rgb(139 108 240 / 0) 0%, rgb(139 108 240 / .1) 26%, rgb(224 36 106 / .2) 46%, rgb(var(--tone-1) / .58) 70%,
      rgb(var(--tone-0) / .88) calc(100% - var(--edge)), rgb(var(--tone-0) / .92) 100%); }
.anim .hero-glow { display: block; }
.anim .hero-melt, .anim .hero-in { will-change: transform; }
.anim .hero-glow { will-change: opacity; }
.hero-copy { position: relative; z-index: 5; width: 100%; padding: calc(var(--top-h) + 40px) var(--gutter) clamp(56px, 9svh, 112px);
  padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.hero-title { color: var(--on-photo); max-width: 9.6em; }
.hero-sub { color: var(--on-photo-soft); margin-top: clamp(16px, 1.8vw, 24px); }
.hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: clamp(26px, 3vw, 40px); }
.hero-note { display: inline-flex; align-items: center; gap: 9px; margin: 0; font: 500 15px/1.2 var(--font-ui); color: var(--on-photo-soft); }
.hero-ast { width: 15px; height: 15px; fill: #FFF6EE; flex: none; }
/* the pause button: the bar's glass, under the bar on the right */
.film-toggle { position: absolute; z-index: 6; top: calc(var(--bar-y) + var(--bar-h) + 14px); right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--glass-line); border-radius: 50%; background: var(--glass); color: var(--text); cursor: pointer; box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: background-color .26s var(--ease-out), transform .2s var(--ease-out); }
.film-toggle .ic { width: 20px; height: 20px; }
.film-toggle[hidden] { display: none; }
.film-toggle:hover { background: var(--glass-solid); }
.film-toggle:active { transform: scale(.94); }
.film-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.film-toggle .ic-play, .film-toggle.is-paused .ic-pause { display: none; }
.film-toggle.is-paused .ic-play { display: block; }
/* the first look: the words rise once (only with motion; the scroll then takes over). The film is never scaled up at rest. */
.anim .hero-copy > * { animation: hero-in 1.1s var(--ease-expo) backwards; }
.anim .hero-sub { animation-delay: .14s; }
.anim .hero-act { animation-delay: .26s; }
.anim .hero-media > .film-still { animation: hero-still 1.2s var(--ease-out) backwards; }
@keyframes hero-in { from { opacity: 0; transform: translate3d(0, 34px, 0); } }
@keyframes hero-still { from { opacity: .3; } }

/* ============================== the drift row (words) ============================== */
.drift-words { --drift-gap: clamp(24px, 3vw, 52px); padding: clamp(44px, 6vw, 88px) 0 clamp(8px, 2vw, 24px); }
.drift-words li { display: inline-flex; align-items: center; gap: var(--drift-gap); font: 800 clamp(30px, 4.6vw, 68px)/1.15 var(--font-display); letter-spacing: -0.04em;
  color: var(--text); white-space: nowrap; }
.drift-words li::after { content: ''; flex: none; width: .4em; height: .4em; background: var(--sep) center / contain no-repeat; }
.drift-words li.soon { color: var(--muted); }
/* still (no scripts, or Reduce Motion): the words wrap, so they are set smaller */
.drift-words:not(.is-live) { --drift-gap: clamp(14px, 1.8vw, 26px); }
.drift-words:not(.is-live) li { font-size: clamp(22px, 2.8vw, 38px); }
.drift-words:not(.is-live) .drift-list { row-gap: 6px; max-width: 1100px; margin: 0 auto; }

/* ============================== 2. how it works ============================== */
.steps { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4.4vw, 72px); max-width: 1100px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; text-align: center; }
.step-n { display: grid; place-items: center; width: clamp(64px, 5.6vw, 80px); aspect-ratio: 1; margin-bottom: clamp(10px, 1.4vw, 18px); border-radius: 50%;
  background: var(--c, var(--seat-sun)); color: #1E1433; font: 800 clamp(28px, 2.4vw, 34px)/1 var(--font-display); letter-spacing: -0.03em; }
.step:nth-child(2) .step-n { --c: var(--seat-lime); }
.step:nth-child(3) .step-n { --c: var(--seat-sky); }
.step p { margin: 0; max-width: 25ch; font-size: var(--fs-body); line-height: 1.5; color: var(--text-soft); }

/* ============================== 3. ways to meet ============================== */
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 2.4vw, 32px) clamp(16px, 1.8vw, 26px); }
.way { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.way .frame { width: 100%; margin-bottom: 20px; }
.way .frame > img:not(.slot-photo) { transition: transform .8s var(--ease-expo); }
.way:hover .frame > img { transform: scale(1.035); }
.way h3 { margin: 0 0 8px; }
.way p:last-child { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-soft); max-width: 30ch; }
.chip { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 6px 11px; border-radius: 999px; font: 600 13px/1 var(--font-ui); letter-spacing: .01em;
  color: var(--text-soft); box-shadow: inset 0 0 0 1.25px var(--hairline-strong); }
.chip-open { background: var(--lime); color: var(--lime-ink); box-shadow: none; }
.chip-open::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ============================== 4. small on purpose: three numbers (or the dashboard's quotes) ============================== */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px); max-width: 1100px; margin: 0 auto; text-align: center; }
.fact { margin: 0; }
.fact dt { font: 800 clamp(88px, 10.4vw, 160px)/.9 var(--font-display); letter-spacing: -0.055em; color: var(--text); white-space: nowrap; }
.fact .unit { font-size: .4em; letter-spacing: -0.02em; margin-left: .12em; }
.fact dd { margin: clamp(10px, 1.4vw, 18px) auto 0; max-width: 17ch; font-size: var(--fs-sub); line-height: 1.4; color: var(--text-soft); }
/* real quotes from the dashboard take the numbers' place */
.proof:has(.quotes:not([hidden])) .proof-facts { display: none; }
.quote-row { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); max-width: 1100px; }
.quote-row.n1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.quote-row.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.quote { margin: 0; }
.quote figure { height: 100%; margin: 0; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-frame); background: color-mix(in srgb, var(--surface) 72%, transparent); }
.quote blockquote { margin: 0 0 18px; font: italic 400 clamp(22px, 2vw, 28px)/1.3 var(--font-serif); color: var(--text); }
.quote figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); }
.quote figcaption b { display: block; color: var(--text); font-weight: 600; font-size: 15px; }

/* ============================== press (hidden until the dashboard has a real logo) ============================== */
.press { padding: 0 0 var(--sec-y); position: relative; }
.press[hidden] { display: none; }
.press-title { margin: 0 0 26px; text-align: center; font: 600 13px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.press-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; }
.press-row li { position: relative; width: clamp(120px, 12vw, 160px); aspect-ratio: 3 / 1; margin: 0; }
.press-row li[hidden] { display: none; }
.press-row .slot-photo { object-fit: contain; }
:root[data-theme="dark"] .press-row li { border-radius: 14px; background: #FFF6EE; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .press-row li { border-radius: 14px; background: #FFF6EE; } }

/* ============================== 5. safety ============================== */
.safe-list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4.4vw, 64px); max-width: 1100px; text-align: center; }
.safe-list li { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; }
.safe-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c); color: #FFF6EE; }
.safe-ic .ic { width: 28px; height: 28px; }
.safe-list p { margin: 0; max-width: 20ch; font: 700 clamp(21px, 1.9vw, 26px)/1.22 var(--font-display); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; }

/* ============================== 6. cities: one row ============================== */
.city-row { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 8px; }
.city-row li { display: inline-flex; align-items: center; margin: 0; font: 700 clamp(22px, 2.3vw, 34px)/1.25 var(--font-display); letter-spacing: -0.025em; color: var(--text); white-space: nowrap; }
.city-row li + li::before { content: ''; flex: none; width: .36em; height: .36em; margin: 0 .5em; background: var(--sep) center / contain no-repeat; }

/* ============================== 7. FAQ ============================== */
.faq-more { font-size: 16px; color: var(--muted); }
.faq-more a { color: var(--text); font-weight: 600; }

/* ============================== 8. the last word ============================== */
.close { padding-bottom: clamp(56px, 8vw, 112px); }
.close-card { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(480px, 52vw, 680px);
  padding: clamp(56px, 7vw, 104px) clamp(22px, 5vw, 64px); border-radius: var(--r-frame); background: #1E1433; color: var(--on-photo); text-align: center; }
.close-card::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 12% 108%, rgba(224, 36, 106, .5), rgba(224, 36, 106, 0) 70%),
              radial-gradient(55% 60% at 96% -8%, rgba(139, 108, 240, .55), rgba(139, 108, 240, 0) 70%); }
.close-mark { position: absolute; z-index: 1; right: -9%; bottom: -24%; width: clamp(300px, 44vw, 620px); height: auto; fill: #FFF6EE; opacity: .07; pointer-events: none; }
.close-card.slot-real::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(80% 80% at 50% 55%, rgba(var(--shade), .55), rgba(var(--shade), .78)); }
.close-copy { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3.2vw, 44px); }
.close-title { color: var(--on-photo); max-width: 11em; }
.close-store { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: -6px; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px; border-radius: 12px; color: #FFF6EE; box-shadow: inset 0 0 0 1.25px rgba(255, 246, 238, .42); }
.store .ic { width: 22px; height: 22px; }
.store > span { font: 600 16px/1.1 var(--font-ui); text-align: left; }
.store small { display: block; font-size: 11px; font-weight: 500; opacity: .8; }
.close-web { color: #FFF6EE; font: 600 16px/1.2 var(--font-ui); text-underline-offset: 4px; }
.close-web:hover { text-decoration-thickness: 2px; }
.close-card a:focus-visible { outline: 3px solid #FFF6EE; outline-offset: 3px; }

/* ============================== tablets and phones ============================== */
@media (max-width: 1060px) {
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero-copy { padding: calc(var(--top-h) + 32px) 22px clamp(40px, 7svh, 64px); }
  .hero-act { gap: 14px 18px; }
  /* phones: the words take the width, so their shade is a band along the bottom */
  .hero-shade { background:
    linear-gradient(0deg, rgba(var(--shade), .8) 0%, rgba(var(--shade), .55) 30%, rgba(var(--shade), .16) 52%, rgba(var(--shade), 0) 64%),
    radial-gradient(80% 40% at 0% 100%, rgba(224, 36, 106, .22), rgba(224, 36, 106, 0) 72%); }
  .steps, .facts, .safe-list { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 48px; }
  .facts { gap: 44px; }
  .safe-list { gap: 40px; }
  .quote-row, .quote-row.n2 { grid-template-columns: minmax(0, 1fr); }
  /* names wrap here: no asterisk may start a line, so the row is spaced instead */
  .city-row { column-gap: .8em; }
  .city-row li + li::before { display: none; }
}
@media (max-width: 560px) {
  .ways { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .way .frame { aspect-ratio: 3 / 2; }
  .close-card { min-height: 520px; }
}

/* ============================== Reduce Motion: nothing loops, nothing travels ============================== */
@media (prefers-reduced-motion: reduce) {
  .anim .hero-copy > *, .anim .hero-media > .film-still { animation: none; }
  .film-toggle { transition: none; }
  .way .frame > img, .hero-media > .film-video { transition: none; }
}