/* MODE3 site v4 · direction B · the page (on top of shared.css) */
.sec { position: relative; padding-block: clamp(5rem, 12vh, 8rem); }
.eyebrow { color: var(--accent); margin: 0 0 1rem; }
.sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin-inline: 0.7em; opacity: 0.5; }
.h2 { font-size: clamp(1.7rem, 4.2vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0; max-width: 20ch; text-wrap: balance; }
.h2--wide { max-width: 30ch; }
.t-mono { font-size: clamp(1.6rem, 4.6vw, 3.2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin: 0; max-width: 24ch; text-wrap: balance; }
.lead { font-size: var(--t-lead); color: var(--ink-2); max-width: 54ch; margin: 1.3rem 0 0; }
.tabnum { font-variant-numeric: tabular-nums; }
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--e-out), transform 900ms var(--e-out); }
html.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- hero (B): the clock beside the headline, never behind it ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 6.5rem 0 3rem; }
.hero-field { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--accent) 10%, transparent)), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.55em 0.95em; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-2); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--prime); box-shadow: 0 0 8px var(--prime); }
.hero-h1 { font-size: clamp(2.5rem, 6.6vw, 5.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; margin: 1.2rem 0 0; max-width: 14ch; text-wrap: balance; }
.hero-h1 .l2 { display: block; color: var(--ink-2); }
.hero-sub { font-size: var(--t-lead); color: var(--ink-2); max-width: 36ch; margin: 1.4rem 0 1.8rem; }
.hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(1rem, 3vh, 2rem); }
.hero-clock { font-size: clamp(4rem, 11vw, 9.5rem); color: var(--ink); opacity: 0.18; letter-spacing: -0.06em; white-space: nowrap; }
.hero-bottles { display: flex; align-items: flex-end; justify-content: flex-end; height: clamp(170px, 30vh, 320px); padding-bottom: 6px; }
.hero-bottles img { height: 90%; width: auto; margin-inline: -6%; filter: drop-shadow(0 22px 28px rgba(0,0,0,0.5)); }
.hero-bottles img:nth-child(2) { height: 96%; position: relative; z-index: 1; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
@media (max-width: 720px) {
  .hero { padding-top: 5.5rem; align-items: flex-start; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-side { order: -1; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .hero-clock { font-size: 17vw; opacity: 0.22; }
  .hero-bottles { align-self: flex-end; }
  .hero-bottles { height: 22svh; padding-bottom: 0; }
  .hero-bottles img { margin-inline: -9%; }
}
@media (prefers-reduced-motion: reduce) { .hero-bottles img:nth-child(2) { animation: none; } }

/* ---------- the day (B): fixed zones ----------
   clock      top  12svh → 24svh (left)
   word       middle, 40svh → 60svh, full-bleed
   copy       bottom 68svh → 88svh (left, free zone)
   bottle     right, behind the word's right end, above the copy zone on phones */
.day-scene { background: var(--scene-old, var(--bg)); }
.wipe { position: absolute; inset: 0; z-index: 1; background: var(--scene-new, var(--bg)); clip-path: polygon(0 0, -20% 0, -60% 100%, 0 100%); will-change: clip-path; }
.day-clock { position: absolute; left: clamp(1rem, 6vw, 5rem); top: 12svh; z-index: 4; font-size: min(9.5vw, 11svh); }
.word { position: absolute; left: -1vw; right: -1vw; top: 50svh; transform: translateY(-50%); z-index: 2; pointer-events: none;
  font-size: min(23vw, 24svh); font-weight: 900; letter-spacing: -0.06em; line-height: 0.9; text-align: center; white-space: nowrap; color: var(--wc, var(--accent)); opacity: 0; }
.word.on { opacity: 1; }
.word.out { color: var(--ink); opacity: 0.22; }
.edge { position: absolute; top: -20%; height: 140%; width: clamp(40px, 6vw, 90px); left: 0; z-index: 3; pointer-events: none; opacity: 0;
  transform: translateX(-140%) skewX(-22deg); background: linear-gradient(90deg, transparent, var(--ink) 50%, transparent); mix-blend-mode: overlay; }
.day-copy { position: absolute; left: clamp(1rem, 6vw, 5rem); bottom: 12svh; z-index: 4; max-width: 34ch; }
.day-line { min-height: 2.5em; }
.day-line .ln { display: block; opacity: 0; transform: translateY(0.3em); transition: opacity 400ms var(--e-out), transform 600ms var(--e-out); }
.day-line .ln.on { opacity: 1; transform: none; }
.day-scene .bottle { z-index: 3; height: min(44svh, 420px); right: clamp(1rem, 6vw, 5rem); bottom: 9svh; }
.hold { z-index: 5; bottom: 3svh; }
.night-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 900ms; background: radial-gradient(40% 36% at 50% 50%, rgba(176,122,205,0.3), transparent 70%); }
html[data-state="night"] .night-glow { opacity: 1; }
@media (max-width: 720px) {
  .day-clock { top: 10svh; font-size: min(15vw, 8svh); }
  .word { top: 46svh; font-size: min(21vw, 14svh); }
  .day-copy { bottom: 13svh; max-width: 60vw; }
  .day-line { font-size: 1.1rem; }
  .day-scene .bottle { height: 28svh; right: -2vw; bottom: 22svh; }
}

/* ---------- the moments curve ---------- */
.moments { padding-top: clamp(6rem, 14vh, 9rem); }
.curve { position: relative; max-width: 68rem; margin: 3rem auto 0; padding-inline: clamp(1rem, 6vw, 3.5rem); color: var(--ink-3); touch-action: pan-y; cursor: crosshair; -webkit-user-select: none; user-select: none; }
.curve svg { display: block; width: 100%; height: auto; }
.curve-scale { display: flex; justify-content: space-between; margin-top: 0.9rem; color: var(--ink-3); }
.curve-hint { text-align: center; margin-top: 0.8rem; color: var(--ink-3); }
.curve-cursor { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; will-change: transform; }
.curve-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--cc, var(--accent)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cc, var(--accent)) 25%, transparent), 0 0 18px var(--cc, var(--accent)); transition: background 200ms, box-shadow 200ms; }
.curve-time { position: absolute; left: 12px; top: -2.2em; font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.curve-stateword { position: absolute; left: 12px; top: -0.9em; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.22em; color: var(--cc, var(--accent)); white-space: nowrap; }
.curve[data-state] svg { color: color-mix(in srgb, var(--cc) 55%, var(--ink-3)); transition: color 300ms; }
.moments-list { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.moment { border-top: 1px solid var(--line); padding-top: 1.2rem; }
.moment-time { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -0.04em; margin: 0; }
.moment-line { color: var(--ink-2); margin: 0.6rem 0 0.7rem; }
.moment-tag { color: var(--accent); margin: 0; }
@media (max-width: 720px) { .moments-list { grid-template-columns: 1fr; } }

/* ---------- the kit gallery ---------- */
.gallery { position: relative; height: clamp(420px, 62svh, 620px); margin-top: 2.5rem; overflow: hidden; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.gallery.drag { cursor: grabbing; }
.gal-track { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.gal-item { position: absolute; left: 0; top: 4%; width: clamp(220px, 28vw, 300px); margin-left: calc(clamp(220px, 28vw, 300px) / -2); transform-origin: 50% 100%; will-change: transform, opacity; outline: none; margin-block: 0; }
.gal-media { height: clamp(220px, 34svh, 340px); display: flex; align-items: flex-end; justify-content: center; }
.gal-media img { height: 100%; width: auto; filter: drop-shadow(0 30px 36px rgba(0,0,0,0.55)); pointer-events: none; }
.gal-outline { position: relative; color: var(--c, var(--ink-2)); }
.gal-outline svg { width: 78%; height: auto; opacity: 0.85; }
.gal-ph { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); color: var(--ink-3); white-space: nowrap; }
.gal-item figcaption { margin-top: 1.1rem; text-align: center; opacity: 0; transition: opacity 300ms; }
.gal-item.on figcaption { opacity: 1; }
.gal-name { display: block; color: var(--c, var(--accent)); }
.gal-name em { font-style: normal; color: var(--ink-3); margin-left: 0.6em; letter-spacing: 0.14em; }
.gal-line { display: block; margin-top: 0.5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.gal-use { display: block; margin-top: 0.3rem; color: var(--ink-2); font-size: 0.95rem; }
.gal-dots { display: flex; justify-content: center; gap: 7px; position: absolute; left: 0; right: 0; bottom: 0.6rem; }
.gal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background 200ms, transform 200ms; }
.gal-dots i.on { background: var(--ink); transform: scale(1.3); }
.kit-drawers { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.drawer summary { list-style: none; cursor: pointer; font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); padding: 0.8rem 0; border-top: 1px solid var(--line); }
.drawer summary::-webkit-details-marker { display: none; }
.drawer[open] summary { color: var(--ink); }
.drawer p { margin: 0 0 1rem; color: var(--ink-2); font-size: 0.95rem; }
.kit-trust { grid-column: 1 / -1; margin: 1.6rem 0 0; color: var(--ink-3); font-size: 0.95rem; }
.kit-trust a { color: var(--ink-2); }
@media (max-width: 720px) { .kit-drawers { grid-template-columns: 1fr; } .gallery { height: 58svh; } }

/* ---------- the app: floating UI ---------- */
.float-stage { position: relative; height: clamp(520px, 86svh, 760px); margin-top: 2.5rem; overflow: clip; }
.float { position: absolute; margin: 0; width: clamp(180px, 22vw, 260px); will-change: transform; }
.float img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.8); }
.float figcaption { margin-top: 0.8rem; color: var(--ink-3); text-align: center; }
.float-1 { left: 10%; top: 14%; }
.float-2 { left: 50%; top: 0; margin-left: calc(clamp(180px, 22vw, 260px) / -2); z-index: 2; }
.float-3 { right: 10%; top: 22%; }
@media (max-width: 720px) {
  .float-stage { height: 92svh; }
  .float { width: 44vw; }
  .float-1 { left: 2%; top: 8%; }
  .float-2 { left: 50%; top: 32%; margin-left: -22vw; }
  .float-3 { right: 2%; top: 2%; }
}

/* ---------- protocol + huddle ---------- */
.proto-cols { margin-top: 2.4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem 2rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.proto-k { color: var(--accent); margin: 0 0 0.8rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { padding: 0.55em 0.95em; border-radius: 100px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 4%, transparent); font-size: 0.92rem; font-weight: 600; }
.chips li span { color: var(--ink-3); font-size: var(--t-micro); letter-spacing: 0.16em; text-transform: uppercase; margin-left: 0.5em; }
.proto-line { margin-top: 2rem; }
@media (max-width: 720px) { .proto-cols { grid-template-columns: 1fr; } }

/* ---------- founder ---------- */
.founder-q { margin: 0; }
.founder-sig { margin-top: 1.6rem; color: var(--ink-3); }
.fnote { margin-top: 3rem; padding: 1.4rem 1.6rem; border-left: 2px solid var(--accent); max-width: 58ch; }
.fnote-label { color: var(--ink-3); margin: 0 0 0.7rem; }
.fnote-body { margin: 0; color: var(--ink-2); }

/* ---------- offer: the card wears the stroke as its border ---------- */
.offer-sub { max-width: 44ch; }
.offer-count { margin: 1.2rem 0 0; color: var(--ink-2); }
.offer-card { position: relative; margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 18px; background: color-mix(in srgb, var(--ink) 4%, transparent); isolation: isolate; }
.offer-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--ang, 0deg), var(--prime), var(--perform), var(--unwind), var(--prime));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: ring 9s linear infinite; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ring { to { --ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .offer-card::before { animation: none; } }
.reserve-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.reserve-field { display: grid; gap: 0.55rem; min-width: 0; }
.reserve-label { color: var(--ink-3); }
.reserve-opt { text-transform: none; letter-spacing: 0.04em; font-weight: 600; opacity: 0.8; }
.wait-input { width: 100%; padding: 0.95rem 1rem; border-radius: 6px; border: 1px solid var(--line); background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); font: inherit; font-size: 1rem; }
.wait-input::placeholder { color: var(--ink-3); }
.wait-input:focus { outline: none; border-color: var(--accent); }
.wait-hp { position: absolute; left: -9999px; }
.reserve-btn { margin-top: 1.6rem; border: 0; cursor: pointer; font-family: inherit; }
.btn-claim { position: relative; display: inline-flex; align-items: center; gap: 0.8em; padding: 1rem 1.6rem; border-radius: 4px; background: var(--ink); color: var(--bg); font-size: var(--t-micro); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.btn-claim:disabled { opacity: 0.6; cursor: default; }
.hold-ring { width: 20px; height: 20px; display: inline-block; }
.hold-ring svg { width: 100%; height: 100%; }
.hold-ring-track { fill: none; stroke: color-mix(in srgb, var(--bg) 30%, transparent); stroke-width: 3; }
.hold-ring-fill { fill: none; stroke: var(--bg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--hold, 0)); transform: rotate(-90deg); transform-origin: 50% 50%; }
.reserve-micro, .offer-guarantee { margin-top: 1rem; color: var(--ink-3); font-size: 0.92rem; }
.wait-msg { margin-top: 0.8rem; color: var(--ink-2); font-size: 0.95rem; }
.reserve-done { outline: none; }
.reserve-number { font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; margin: 0; color: var(--accent); }
.reserve-done-h { margin-top: 1rem; font-size: clamp(1.25rem, 3.4vw, 1.7rem); font-weight: 700; line-height: 1.3; max-width: 24ch; }
.reserve-done-p { max-width: 44ch; }
.reserve-info { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.reserve-price { margin: 0; color: var(--ink-2); }
.reserve-price .tabnum { color: var(--ink); font-weight: 800; }
.reserve-price a { color: var(--ink-2); }
.offer-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; color: var(--ink-2); font-size: 0.95rem; }
.offer-k { color: var(--ink); font-weight: 700; }
.offer-fine { margin-top: 1.6rem; color: var(--ink-3); }
@media (max-width: 720px) { .reserve-fields { grid-template-columns: 1fr; } .btn-claim { width: 100%; justify-content: center; } }

/* ---------- questions ---------- */
.faq-near { margin-top: 3.5rem; max-width: 60ch; }
.faq-list { margin-top: 2rem; max-width: 60ch; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 700; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0.9rem; color: var(--ink-3); font-weight: 400; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 1.1rem; color: var(--ink-2); max-width: 56ch; }
.faq-item a { color: var(--ink-2); }
.faq-more { margin-top: 1.2rem; }
.faq-more a { color: var(--ink-2); text-decoration: none; }

/* ---------- close + footer ---------- */
.scan-block { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); max-width: 54ch; }
.scan-block .lead { margin-top: 0.4rem; }
.scan-block p:last-child { margin-top: 1.4rem; }
.footer { margin-top: 5rem; padding-top: 2rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; color: var(--ink-3); }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer a { color: inherit; text-decoration: none; }

/* ---------- round C: the next morning. Sections carry the sky; the kit runs from cold grey-blue into mint ---------- */
/* the body carries the sky (with its transition); the kit only adds a mint overlay from cold to dawn, so no section edge ever fights the body colour */
.kit { background: linear-gradient(180deg, transparent 0%, transparent 30%, color-mix(in srgb, var(--sky-prime) 70%, transparent) 100%); }
.offer-card { background: color-mix(in srgb, var(--ink) 5%, transparent); }
html[data-state="perform"] .hud-chip { background: color-mix(in srgb, var(--sky-perform) 78%, transparent); }
/* the app placeholders: the screenshot's frame, 780 x 1688 */
.ph-frame { position: relative; aspect-ratio: 780 / 1688; width: 100%; border-radius: 22px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg)); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.8); overflow: hidden; }
.ph-frame::before { content: ""; position: absolute; left: 12%; right: 12%; top: 9%; height: 1px; background: color-mix(in srgb, var(--accent) 50%, transparent); }
.ph-frame::after { content: ""; position: absolute; left: 12%; top: 16%; width: 46%; height: 18%; border-radius: 10px; border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); }
.ph-tab { position: absolute; left: 12%; top: 4.5%; color: var(--accent); }
.ph-note { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; color: var(--ink-3); }
.reserve-btn .hold-ring { display: none; }