/* The Sleep Window Plan on Strong Mornings (brands/strong-mornings/design.md): the funnel is light (warm white, one teal
   accent, Lexend from brand.css), one job per phone screen; the member app is the night variant (--night #0f1b2d). */
:root { --night: #0f1b2d; --night-2: #182a42; --night-3: #22385a; --night-ink: #eef2f7; --night-soft: #b7c3d4; }
.shell { max-width: 560px; margin: 0 auto; padding: 0 var(--gut) 132px; }
.flow { background: var(--linen); }
.appbar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; height: 64px; max-width: 560px; margin: 0 auto; padding: 0 var(--gut); background: var(--linen); }
.appbar .x { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 22px; background: none; border: 0; cursor: pointer; }
.prog { display: grid; gap: 6px; text-align: center; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.prog .track { height: 8px; border-radius: 99px; background: var(--linen-2); overflow: hidden; }
.prog .segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.prog .segs span { height: 8px; border-radius: 99px; background: var(--linen-2); overflow: hidden; }
.prog .segs i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 99px; transition: width 250ms var(--ease-out); }
.prog .track i { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 99px; transition: width 250ms var(--ease-out); }

/* Quiz: one question, its answer cards */
.q { padding-top: 22px; }
.q h1, .q h2 { font-size: clamp(28px, 1.5vw + 22px, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--deep); }
.q .lead { color: var(--ink-2); font-size: 18px; margin: 0 0 20px; }
.opts { display: grid; gap: 10px; margin: 18px 0 0; }
.opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; border: 0; border-radius: 20px;
  background: var(--surface); color: var(--ink); font: 500 18px/1.25 var(--font); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--hair), var(--shadow-1); transition: transform 120ms var(--ease-out), background-color 160ms var(--ease-out); }
.opt:active { transform: scale(.98); }
.opt .tick { margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--ring); display: grid; place-items: center; color: #fff; font-size: 14px; }
.opt[aria-pressed="true"] { background: var(--mist); box-shadow: inset 0 0 0 2px var(--teal); }
.opt[aria-pressed="true"] .tick { background: var(--teal); box-shadow: none; }
.opt[aria-pressed="true"] .tick::after { content: "✓"; }
@media (hover: hover) { .opt:hover { background: var(--linen-2); } .opt[aria-pressed="true"]:hover { background: var(--mist); } }
.times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.times .opt { justify-content: center; text-align: center; min-height: 56px; padding: 8px; font-variant-numeric: tabular-nums; }
.times .opt .tick { display: none; }
.pinned { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--linen) 72%, transparent); }
.pinned .btn { display: flex; width: 100%; max-width: 520px; margin: 0 auto; }
.fact { text-align: left; padding-top: 34px; }
.fact .num-big { margin: 0; font-size: clamp(72px, 16vw, 104px); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--teal); }
.fact .num-big small { font-size: 26px; letter-spacing: -0.01em; color: var(--deep); }
.fact p { font-size: 19px; margin: 14px 0 0; color: var(--ink); }
.loader { padding-top: 40px; text-align: center; }
.ring { --p: 0; width: 168px; height: 168px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--teal) calc(var(--p) * 1%), var(--linen-2) 0); }
.ring span { width: 140px; height: 140px; border-radius: 50%; background: var(--linen); display: grid; place-items: center; font-size: 34px; font-weight: 600; color: var(--deep); }
.loader ul { list-style: none; padding: 0; margin: 22px auto 0; display: grid; gap: 12px; max-width: 340px; text-align: left; }
.loader li { display: flex; gap: 12px; align-items: center; font-size: 18px; color: var(--ink-2); }
.loader li i { flex: none; width: 24px; height: 24px; border-radius: 99px; box-shadow: inset 0 0 0 2px var(--ring); display: grid; place-items: center; color: #fff; font-style: normal; font-size: 14px; }
.loader li.on { color: var(--ink); }
.loader li.on i { background: var(--teal); box-shadow: none; }
.loader li.on i::after { content: "✓"; }
form[data-kit] label { font-weight: 600; color: var(--deep); }
form[data-kit] input[type=email] { width: 100%; min-height: 56px; font-size: 18px; border-radius: var(--r-field); border: 0; box-shadow: inset 0 0 0 1.5px var(--ring); padding: 0 16px; background: var(--surface); margin-top: 6px; }

/* Landing: the ad's words, one line, one button */
.land { min-height: calc(100dvh - 140px); display: grid; align-content: center; padding: 24px 0 40px; }
.clockface { margin: 0 0 14px; font-size: clamp(76px, 16vw, 128px); line-height: 1; font-weight: 600; letter-spacing: -0.045em; color: var(--teal); font-variant-numeric: tabular-nums; }
.land h1 { font-size: clamp(34px, 3.4vw + 20px, 56px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 14px; color: var(--deep); }
.land .lead { font-size: 20px; color: var(--ink-2); max-width: 32ch; margin: 0 0 26px; }
.land .micro { margin: 14px 0 0; font-size: 16px; color: var(--ink-2); }

@media (min-width: 1024px) {
  .appbar, .shell { max-width: 640px; }
  .pinned { position: static; background: none; padding: 26px 0 0; }
  .land { min-height: 70vh; }
}
/* Landing on desktop: the words left, the real result screen right (a phone column fails the bench). */
.landshot { display: none; }
@media (min-width: 1024px) {
  .shell.landwrap { max-width: 1120px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 72px; align-items: center; }
  .landshot { display: block; margin: 0; justify-self: center; }
  .landshot img { width: 340px; height: auto; border-radius: 40px; box-shadow: var(--shadow-2), 0 0 0 10px #1c1b19; }
}
/* Short product pages (answer, founding, cancel, lost link) on desktop: the words left, the action right. */
@media (min-width: 1024px) {
  body.product .shell:not(.landwrap) { max-width: 1120px; }
  body.product .shell:not(.landwrap) > section.q:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; align-items: start; padding-top: 56px; }
  body.product .shell:not(.landwrap) > section.q > * { grid-column: 2; }
  body.product .shell:not(.landwrap) > section.q > .qhead { grid-column: 1; grid-row: 1 / span 12; }
  body.product main.page { max-width: 1120px; column-count: 2; column-gap: 64px; }
  body.product main.page > h1 { column-span: all; }
  body.product main.page > h2 { break-after: avoid; }
}