/* The home page in the "A day" design (index.html). The page's content and structure are the classic home page's
   (home.css, loaded first, still lays most of it out); this file adds the top (an example day as a 24-hour
   clock, drawn by day.js, and the four steps on a line) and restyles the rest: Instrument Sans headings,
   round buttons, softer cards, a wider page, and the privacy band in the night colours in both modes.
   Colours and fonts are shared/tokens.css (day: warm paper and teal; night: blue-black and amber).
   The previous lime-and-dark design is saved in docs/design-archive/2026-10-lime-dark. */

/* the clock's kinds of site */
:root {
  --a1: #5DAEAE; --a2: #EDB980; --a3: #CD7769; --a4: #3B434D;
  --soft: #3B2A17; --shadow: rgba(0, 0, 0, .5);
}
:root[data-theme="light"] {
  --a1: #16827D; --a2: #D19853; --a3: #BB6E62; --a4: #C5BDB0;
  --soft: #D1EBE9; --shadow: rgba(40, 30, 15, .28);
}

body { font: 400 17px/1.6 var(--font); overflow-x: clip; }
.wrap { max-width: 1360px; padding-inline: 48px; }
.nav .d-navbar { max-width: 1360px; padding-inline: 48px; min-height: 72px; }

/* Type: Instrument Sans, regular weight, tight */
h1, h2, h3, .d-card-title, .price { font-family: var(--font-head); }
.hero h1, .head h2, .where h2, .split-copy h2, .try-head :is(h2, h3), .where-story h3, .final h2, .first-visit h2, .price {
  font-weight: 400; letter-spacing: -.035em;
}
.head h2, .split-copy h2 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.05; }
.head { max-width: 760px; margin-bottom: 40px; }
.head.wide { max-width: 860px; }
.try-head :is(h2, h3) { font-size: clamp(28px, 3vw, 38px); }
.gain h3, .kind .d-card-title, .band-cards .d-card-title, .extra .d-card-title, .plan .d-card-title, .kept-label { font-weight: 500; letter-spacing: -.02em; }
.gain h3 { font-size: 24px; }
.eyebrow { font: 400 13px/1.4 var(--font-mono); letter-spacing: 0; text-transform: none; color: var(--muted); }
.split-copy .eyebrow, .hero .eyebrow { color: var(--accent-text); }

/* Round buttons and chips, softer cards */
.d-btn { border-radius: 999px; font-weight: 500; }
.d-btn-lg { height: 52px; padding-inline: 24px; font-size: 16px; }
.d-btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 18px -10px var(--shadow); }
.d-badge { border-radius: 999px; font-family: var(--font-mono); font-weight: 400; }
.d-card, .gain, .mock, .kept, .table-box, .first-visit, .fv-card { border-radius: 20px; }
.try-frame { border-radius: 20px; box-shadow: 0 40px 80px -56px var(--shadow); }
.film video { border-radius: 22px; box-shadow: 0 40px 80px -48px var(--shadow); }
.mock { box-shadow: 0 40px 80px -52px var(--shadow); }
.beta-pill { border-radius: 999px; }
.block { padding-top: 144px; }

/* ---------- Hero: the copy beside the clock ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; padding-block: 40px 96px; }
.hero-copy { gap: 22px; }
.hero h1 { font-size: clamp(44px, 5vw, 76px); line-height: 1.02; }
.lede { font-size: 19px; max-width: 48ch; }
.clock-fig { margin: 0; justify-self: center; width: 100%; max-width: 600px; }
.clock { position: relative; aspect-ratio: 1; width: 100%; }
.clock svg { width: 100%; height: 100%; overflow: visible; }
.clock svg text { font-family: var(--font-mono); }
.clock svg path.arc { cursor: pointer; transition: opacity .2s; }
.clock.focus svg path.arc { opacity: .3; }
.clock.focus svg path.arc.on { opacity: 1; }
.clock .mid { position: absolute; inset: 24%; display: grid; place-content: center; text-align: center; pointer-events: none; }
.clock .mid b { font: 400 clamp(40px, 4.4vw, 68px)/1 var(--font-head); letter-spacing: -.04em; display: block; }
.clock .mid span { color: var(--muted); font-size: 15px; display: block; margin-top: 8px; }
.clock .mid .site { font: 500 13px var(--font-mono); color: var(--text); margin-top: 6px; min-height: 1.4em; }
.pin { position: absolute; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 3px solid var(--bg); box-shadow: 0 10px 20px -8px var(--shadow); transform: translate(-50%, -50%); padding: 0; cursor: pointer; background: var(--panel-2); transition: transform .2s; }
.pin:hover, .pin:focus-visible { transform: translate(-50%, -50%) scale(1.12); }
.pin img { width: 100%; height: 100%; object-fit: cover; }
.pop { position: absolute; z-index: 5; width: 240px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 40px -20px var(--shadow); transform: translate(-50%, 0); }
.pop img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pop div { padding: 10px 14px 12px; font-size: 14px; }
.pop b { display: block; font-weight: 600; font-size: 15px; }
.pop span { color: var(--muted); font: 12px var(--font-mono); }
.legend { margin-top: 40px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 14px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.legend .k1 { background: var(--a1); } .legend .k2 { background: var(--a2); } .legend .k3 { background: var(--a3); } .legend .k4 { background: var(--a4); }
.clock-note { text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* ---------- How it works: four steps on a line ---------- */
.how { padding-bottom: 24px; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.how ol::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.how li { position: relative; padding-top: 36px; }
.how li::before { content: ''; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent-mark); }
.how li:last-child::before { background: var(--accent-mark); }
.how h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.15; font-weight: 400; letter-spacing: -.03em; }
.how p { margin: 0; color: var(--muted); max-width: 34ch; }

/* ---------- What you get, the demo and the mocks ---------- */
.gain { padding: 28px 26px; }
.gain-icon { border-radius: 50%; }
.try-chips .d-btn { border-radius: 999px; }
.st-sum b, .mock-title { font-family: var(--font-head); font-weight: 400; letter-spacing: -.03em; }
.st-sum b { font-size: 46px; }
.st-time, .st-opens, .mock-count, .st-bars em { font-family: var(--font-mono); }
.st-bars i { border-radius: 6px 6px 3px 3px; }
.mock-btn { border-radius: 999px; }

/* ---------- Privacy: the night colours in both modes (stay-dark in the markup) ---------- */
.band { background: var(--panel); color: var(--text); border: 0; }
.band-inner { padding-block: 112px; }
.band .promise { font: 400 clamp(20px, 2vw, 26px)/1.35 var(--font-head); letter-spacing: -.02em; color: var(--muted); }
.band .d-card { background: var(--panel-2); border-color: var(--line-2); color: var(--text); }
.band .d-card-body p, .band .d-card-body ul { color: var(--muted); }
.band .d-badge-outline { color: var(--muted); border-color: var(--line-2); }
.band .more summary { color: var(--text); }
.kept { background: var(--panel-2); border-color: var(--line-2); }
.roo-strip { border-radius: 20px; background: #080E18; }
.roo-strip .b1 { background: #16827D; }
.roo-strip .b2 { background: #EDB980; opacity: .7; }
.roo-strip .b3 { background: #CD7769; opacity: .7; }

/* ---------- Pricing and the end ---------- */
.price { font-size: 60px; line-height: 1; }
.plan.pro { border-color: var(--accent-mark); box-shadow: 0 0 0 1px var(--accent-mark); }
.final .d-card { border-radius: 24px; }
.final h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }

/* ---------- First visit ---------- */
.fv-art { background: radial-gradient(60% 90% at 8% 0%, rgba(93, 174, 174, .45), transparent 70%), radial-gradient(55% 80% at 100% 110%, rgba(237, 185, 128, .4), transparent 70%), #080E18; }
.fv-card i { background: var(--soft); }

@media (max-width: 1080px) {
  .how ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .how ol::before { display: none; }
}
@media (max-width: 900px) {
  .wrap, .nav .d-navbar { padding-inline: 16px; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 24px 64px; }
  .lede { font-size: 17px; }
  .pin { width: 52px; height: 52px; }
  .how ol { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .how li { padding: 0 0 24px 32px; }
  .how li::before { top: 5px; }
  .block { padding-top: 96px; }
  .band-inner { padding-block: 72px; }
  .film video, .try-frame { border-radius: 14px; }
}
@media (max-width: 760px) {
  .gain h3 { font-size: 16px; letter-spacing: -.01em; }
}

/* "Example" tag on the made-up mock-ups */
.mock .st-top { position: relative; }
.mock-eg { font: 400 11px/1 var(--font-mono); color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 8px; margin: 0 auto 0 10px; white-space: nowrap; }