/* Clearday site. Colors from brand/README.md. Nothing loads from other companies. */
/* Light only, like the brand and Clearday Home. Text uses the device's own font (San Francisco on Apple devices). */
:root {
  --sky: #0E5A7A; --sky-dark: #0A4560; --sun: #F2A83B; --ink: #13222E; --muted: #4f5d66; --line: #dbe3e8;
  --page: #f6f8f9; --surface: #ffffff; --soft: #e6f0f5;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
/* Everything is sized in rem, so the whole page scales with the screen: about 16px text on phones, 20px on large monitors. */
html { -webkit-text-size-adjust: 100%; font-size: clamp(16px, 0.55vw + 11.2px, 20px) }
body { margin: 0; background: var(--page); color: var(--ink); font: 1.0625rem/1.6 var(--font); padding-inline: clamp(20px, 4vw, 72px); padding-block: 0 3rem }
.wrap { max-width: 64rem; margin: 0 auto }
a { color: var(--sky); text-underline-offset: 3px }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 .5em }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.8rem); line-height: 1.04 }
h2 { font-size: 1.5rem; line-height: 1.2; margin-top: 2.6rem }
.top { display: flex; align-items: center; justify-content: space-between; padding-block: 1.25rem }
.brand img { width: 2.5rem; height: 2.5rem }
.brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em }
.pill { font-size: .8rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 3px 10px }
.hero { padding-block: 2.5rem .5rem; display: grid; grid-template-columns: minmax(0, 40rem) 15rem; gap: 3rem; justify-content: space-between; align-items: center }
.hero-art { display: flex; justify-content: flex-end }
.hero-art img { width: min(15rem, 100%); height: auto; filter: drop-shadow(0 12px 28px rgba(14, 90, 122, 0.14)) }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 600; color: var(--muted); margin: 0 0 .6rem }
.lede { font-size: 1.15rem; max-width: 38rem }
.button { display: inline-block; background: var(--sky); color: #fff; border: 0; border-radius: 12px; padding: 13px 22px; font: 600 1rem var(--font); text-decoration: none; cursor: pointer }
.button:hover { background: var(--sky-dark) }
.button:disabled { background: #9aa9b2; cursor: default }
.note h2, .note p { max-width: 44rem }
.sign { font-weight: 700; font-size: 1.15rem }
label { font-weight: 600 }
input[type=email], input[type=text] { font: inherit; color: var(--ink); background: #ffffff; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%; min-width: 0 }
fieldset { border: 0; padding: 0; margin: 4px 0; display: grid; gap: 6px }
legend { font-weight: 600; padding: 0; margin-bottom: 4px }
.choice { font-weight: 400; display: flex; gap: 10px; align-items: center; min-height: 44px }
.choice input { width: 20px; height: 20px; accent-color: var(--sky) }
.optional { font-weight: 400; color: var(--muted); font-size: .9rem }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden }
.status { min-height: 1.6em; margin: 0; font-weight: 600 }
.fine { font-size: .9rem; color: var(--muted); margin: 0 }
.foot { margin-top: 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted) }

/* Answers: a plain two-column list with a dash-dot-dot (Morse D) bullet, not boxes. */
.qa { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 48px }
.qa li { display: grid; gap: .25rem; padding-left: 2.75rem; position: relative }
.qa li::before { content: ""; position: absolute; left: 0; top: .62em; width: 16px; height: 5px; border-radius: 3px; background: var(--sky) }
.qa li::after { content: ""; position: absolute; left: 20px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--sky); box-shadow: 9px 0 0 var(--sky) }
.qa .q { font-weight: 700; font-size: 1.08rem }
.qa .a { color: var(--muted) }

/* How it works: numbered steps on a line. */
.timeline { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative }
.timeline::before { content: ""; position: absolute; top: calc(1.25rem - 1.5px); left: 1.25rem; right: calc((100% - 84px) / 4 - 1.25rem); height: 3px; border-radius: 2px; background: var(--line) }
.timeline li { position: relative }
.step { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sun); color: var(--ink); font-weight: 800; box-shadow: 0 0 0 6px var(--page) }
.timeline h3 { font-size: 1.08rem; margin: 14px 0 4px; letter-spacing: -0.01em }
.timeline p { margin: 0; color: var(--muted) }

/* Early access: one centered block on a soft band. */
.band { background: var(--soft); margin: 3.4rem calc(-1 * clamp(20px, 4vw, 72px)) 0; padding: 3rem clamp(20px, 4vw, 72px) }
.signup { max-width: 34rem; text-align: center }
.signup h2 { margin-top: 0 }
.signup-intro p { margin: 0 0 1.4rem }
.signup form { display: grid; gap: 12px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(19, 34, 46, 0.06) }

/* Tablets: the four steps as a 2 by 2 grid. */
@media (max-width: 1000px) {
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem }
  .timeline::before { display: none }
}

/* Phones and narrow windows: one column. */
@media (max-width: 760px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px }
  .hero-art { display: none }
  .qa, .timeline { grid-template-columns: minmax(0, 1fr) }
  .timeline::before { display: block; top: 1.25rem; bottom: 1.25rem; left: calc(1.25rem - 1.5px); right: auto; width: 3px; height: auto }
  .timeline li { padding-left: 3.6rem }
  .step { position: absolute; left: 0; top: 0 }
  .timeline h3 { margin-top: 8px }
}
.signup.single { max-width: 36rem; margin: 0; text-align: left }