/* superstreak.app: one stylesheet for every page. Colours and type follow the app's
   design tokens (CLAUDE.md); layouts follow WebiPhone / WebAndroid / WebDesktop.dc.html.
   Fonts are served from this site (SIL Open Font License), never from Google. */

@font-face { font-family: "Archivo Black"; src: url("/assets/fonts/ArchivoBlack-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/Figtree-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  --royal: #5B21B6;
  --deep: #2C105C;
  --card: #3D1780;
  --gold: #F2B630;
  --cream: #FFF8E7;
  --lavender: #D8CCF0;
  --muted: #A897C9;
  --soft-red: #FFB4A8;
  --ink-soft: #5E5378;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  background-color: var(--deep);
  background-image: radial-gradient(rgba(242, 182, 48, 0.10) 1.2px, transparent 1.6px);
  background-size: 16px 16px;
  color: var(--cream);
  font-family: "Figtree", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  /* The footer sits at the bottom on short pages. */
  display: flex;
  flex-direction: column;
}
body > * { width: 100%; }
body > main { flex: 1 0 auto; }

a { color: var(--gold); }
a:hover { color: var(--cream); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--cream); color: var(--deep); padding: 8px 12px; border-radius: 8px; z-index: 10; }

/* Header: mascot badge and the gold wordmark. */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gold); }
.brand:hover { color: var(--gold); }
.badge-circle {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  background: var(--cream); border: 2px solid var(--gold);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.badge-circle img { width: 47px; height: 47px; object-fit: cover; margin-top: 6px; }
.wordmark { font-family: "Archivo Black", sans-serif; font-size: 22px; line-height: 1; }

.site-header { display: flex; justify-content: center; padding: 28px 20px 0; }
.site-header.wide { justify-content: space-between; align-items: center; max-width: 1080px; margin: 0 auto; }
.site-nav { display: flex; gap: 22px; font-weight: 600; font-size: 15px; }
.site-nav a { color: var(--lavender); text-decoration: none; padding: 10px 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold); }

/* Shared text pieces. */
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2.4px; color: var(--gold); text-transform: uppercase; }
h1, h2, h3 { font-family: "Archivo Black", sans-serif; font-weight: 400; color: var(--cream); margin: 0; }
h1 { font-size: 29px; line-height: 1.12; }
h2 { font-size: 22px; line-height: 1.2; }
.lede { color: var(--lavender); font-size: 16px; line-height: 1.5; margin: 0; }
.fine { font-size: 13px; color: var(--muted); }

.card {
  background: var(--card);
  border: 1px solid rgba(242, 182, 48, 0.28);
  border-radius: 20px;
  padding: 18px 16px;
}

.button {
  min-height: 56px; border-radius: 28px; background: var(--gold); color: var(--deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700; text-decoration: none; padding: 0 24px;
}
.button:hover { color: var(--deep); background: #f5c453; }

.store-badge { display: inline-flex; justify-content: center; }
.store-badge img { height: 54px; width: auto; display: block; }

/* Invite page, phone layout (iPhone without the app, Android). */
.invite { max-width: 430px; margin: 0 auto; padding: 0 20px 40px; display: flex; flex-direction: column; }
/* A long name with no spaces wraps instead of running off the screen (name stress test, Oct 24). */
.invite, .invite-wide { overflow-wrap: anywhere; }
.invite .intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 28px; }
.invite .intro .lede { max-width: 320px; }
.steps { margin: 24px 0 0; padding: 18px 16px; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.35; }
.step-number {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  background: var(--gold); color: var(--deep);
  display: flex; align-items: center; justify-content: center;
  font-family: "Archivo Black", sans-serif; font-size: 14px;
}
.invite .store-badge, .invite .button { margin-top: 22px; }
.invite .free { text-align: center; margin-top: 8px; }

/* Android waitlist. */
.waitlist { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.waitlist label { font-size: 16px; font-weight: 700; }
.waitlist .row { display: flex; flex-direction: column; gap: 10px; }
.waitlist input[type="email"] {
  height: 50px; border-radius: 14px; border: 1.5px solid rgba(255, 248, 231, 0.3);
  background: var(--deep); color: var(--cream); font: inherit; font-size: 16px; padding: 0 14px; min-width: 0;
}
.waitlist input::placeholder { color: var(--muted); }
.waitlist button {
  min-height: 50px; padding: 0 22px; border-radius: 25px; border: 1.5px solid var(--gold);
  background: transparent; color: var(--gold); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.waitlist button:hover { background: rgba(242, 182, 48, 0.12); }
.waitlist .note { font-size: 12px; line-height: 1.5; color: var(--muted); }
.waitlist .thanks { font-size: 15px; line-height: 1.5; text-align: center; margin: 0; }
.waitlist .problem { font-size: 14px; color: var(--soft-red); margin: 0; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* Invite page, computer layout (with the QR card). */
.invite-wide { width: 100%; max-width: 1080px; margin: 0 auto; padding: 40px 64px 64px; display: flex; align-items: center; justify-content: center; gap: 72px; }
.invite-wide .text { width: 520px; display: flex; flex-direction: column; gap: 14px; }
.invite-wide .eyebrow { font-size: 13px; letter-spacing: 2.6px; }
.invite-wide h1 { font-size: 46px; line-height: 1.08; }
.invite-wide .lede { font-size: 18px; line-height: 1.55; }
.invite-wide .waitlist { margin-top: 14px; }
.invite-wide .waitlist .row { flex-direction: row; }
.invite-wide .waitlist input[type="email"] { flex: 1 1 auto; }
.qr-card {
  width: 320px; flex: 0 0 320px; background: var(--cream); border-radius: 28px; padding: 30px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--deep); text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}
.qr-card .eyebrow { color: var(--royal); font-size: 12px; letter-spacing: 2.2px; }
.qr-code { padding: 14px; background: #fff; border-radius: 16px; border: 3px solid var(--gold); display: flex; }
.qr-code svg { width: 180px; height: 180px; display: block; }
.qr-card .scan { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.qr-card .or { font-size: 14px; line-height: 1.45; color: var(--ink-soft); margin: 0; }

/* Home, Support and the legal pages. */
.page { max-width: 760px; margin: 0 auto; padding: 32px 20px 48px; }
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 36px 20px 8px; max-width: 760px; margin: 0 auto; }
.hero .mascot {
  width: 132px; height: 132px; border-radius: 50%; background: var(--cream); border: 4px solid var(--gold);
  overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.hero .mascot img { width: 172px; height: 172px; object-fit: cover; margin-top: 23px; }
.hero h1 { font-size: 34px; }
.hero h1 span { display: block; }
.hero .subhead { margin: 0; color: var(--cream); font-size: 20px; font-weight: 600; line-height: 1.35; max-width: 520px; }
.hero .lede { max-width: 520px; font-size: 18px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 4px; padding: 0; list-style: none; }
.chips li { border: 1.5px solid rgba(242, 182, 48, 0.45); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; color: var(--cream); }
.chips li span { color: var(--muted); font-weight: 500; margin-left: 6px; }
.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
/* Each box spans three shared rows (icon, heading, text), so the headings line up and
   the text in every box starts on the same line, even when one heading wraps. */
.how .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; justify-items: center; text-align: center; padding: 26px 20px; }
.how .card h2 { font-size: 22px; margin: 14px 0 8px; }
.how .card p { margin: 0; color: var(--lavender); font-size: 17px; line-height: 1.5; }
/* Card icons, all filled (Nov 3): target, megaphone with sound waves, and Setup 4's trophy. */
.how .icon { width: 60px; height: 60px; border-radius: 18px; background: rgba(242, 182, 48, 0.16); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.points { margin: 28px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.points li { display: flex; gap: 10px; color: var(--lavender); }
.points li::before { content: "★"; color: var(--gold); }
.get { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 32px; text-align: center; }

.prose h1 { font-size: 30px; margin-bottom: 8px; }
.prose h2 { font-size: 20px; margin: 30px 0 10px; }
.prose p, .prose li { color: var(--lavender); }
.prose strong { color: var(--cream); }
.prose ul { padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 8px; border-bottom: 1px solid rgba(255, 248, 231, 0.14); color: var(--lavender); }
.prose th { color: var(--cream); }
.table-scroll { overflow-x: auto; }
.draft {
  background: var(--gold); color: var(--deep); font-weight: 700; border-radius: 14px;
  padding: 12px 16px; margin: 0 0 22px;
}
.confirm { background: rgba(255, 180, 168, 0.18); color: var(--soft-red); border-radius: 6px; padding: 1px 4px; }

.page.tight { padding-top: 0; }
h1.spaced { margin-top: 8px; }
.address { margin-top: 32px; }
.contact { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.contact a { font-size: 20px; font-weight: 700; }
.faq h2 { font-size: 18px; margin: 26px 0 6px; }
.faq p { margin: 0; color: var(--lavender); }

.site-footer {
  width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 20px 40px; display: flex; flex-wrap: wrap; gap: 8px 22px;
  justify-content: center; font-size: 14px; color: var(--muted); border-top: 1px solid rgba(255, 248, 231, 0.10);
}
.site-footer a { color: var(--lavender); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }

/* Home (website copy approved Nov 3, layout revision the same day): Sam's main screen
   beside the headline, eight goal examples, the three beats, Why one streak?, How it
   works (each item with a screenshot) and the closing call to action. */
.hero .below-badge { margin: 0; }
.goals { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 18px; }
.goals .fine { margin: 8px 0 0; }
.bridge { margin: 18px auto 0; max-width: 560px; text-align: center; color: var(--cream); font-weight: 600; font-size: 17px; line-height: 1.45; }
.why { margin-top: 48px; }
.why h2 { margin-top: 6px; font-size: 26px; }
.why .points { margin-top: 18px; gap: 14px; }
.why .points strong { color: var(--cream); }
/* Screenshots in a simple iPhone frame (docs/screenshots, 6.9-inch). */
.phone { width: 240px; padding: 9px; border-radius: 46px; background: #0d0718; border: 2px solid rgba(255, 248, 231, 0.18); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); flex: none; }
.phone img { display: block; width: 100%; height: auto; border-radius: 37px; }
.watch { width: 118px; padding: 7px; border-radius: 34px; background: #0d0718; border: 2px solid rgba(255, 248, 231, 0.18); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); }
.watch img { display: block; width: 100%; height: auto; border-radius: 27px; }
.hero { max-width: 980px; }
.hero-text { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-phone { margin-top: 18px; }
/* The three beats (up to 960px) and How it works (up to 860px) are wider than the text column. */
.how { margin-inline: calc(50% - min(480px, 50vw - 20px)); }
.works { margin-inline: calc(50% - min(400px, 50vw - 20px)); }
/* How it works: no boxes, like Why one streak?; text beside a screenshot, alternating. */
.works { margin-top: 56px; }
.works h2 { font-size: 26px; text-align: center; margin: 0 0 28px; }
.works ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 36px; }
.works li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 48px; }
.works li.flip .text { order: 2; }
.works li.text-only { display: block; max-width: 560px; }
.works .phone { width: 200px; padding: 8px; border-radius: 40px; }
.works .phone img { border-radius: 32px; }
.works .text { display: flex; flex-direction: column; gap: 12px; }
.works .text p { margin: 0; color: var(--lavender); font-size: 17px; line-height: 1.55; }
.works .text strong { display: block; color: var(--cream); font-size: 20px; margin-bottom: 4px; }
.works .icon { width: 44px; height: 44px; border-radius: 13px; background: rgba(242, 182, 48, 0.16); color: var(--gold); display: flex; align-items: center; justify-content: center; }
.works .shots { display: flex; justify-content: center; }
.works .with-watch { position: relative; padding-left: 56px; }
.works .watch { width: 104px; }
/* iPhone Duo: the unfolded Mission complete, centred and capped at 560px so it doesn't
   overpower the phone screenshots (round 5); within the page margins on phones. */
.duo { margin-top: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.duo h2 { font-size: 26px; }
.duo .lede { max-width: 560px; }
.duo-frame { margin-top: 18px; width: 100%; max-width: 560px; padding: 8px; border-radius: 28px; background: #0d0718; border: 2px solid rgba(255, 248, 231, 0.18); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.duo-frame img { display: block; width: 100%; height: auto; border-radius: 21px; }
.works .with-watch .watch { position: absolute; left: 0; bottom: 36px; }
.closing { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-top: 52px; }
.closing h2 { font-size: 28px; }
.closing .store-badge { margin-top: 8px; }

/* Support: groups of questions (website copy approved Nov 3). */
.faq .group { font-size: 22px; color: var(--gold); margin: 40px 0 0; }
.faq .group:first-child { margin-top: 26px; }
.faq .group { scroll-margin-top: 20px; }
/* Jump links to the seven groups (Nov 3, round 4). */
.jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border: 1.5px solid rgba(242, 182, 48, 0.45); border-radius: 999px; color: var(--cream); font-weight: 600; font-size: 14px; text-decoration: none; }
.jump a:hover, .jump a:focus-visible { border-color: var(--gold); color: var(--gold); }
.faq h3 { font-size: 17px; line-height: 1.25; margin: 22px 0 6px; }

@media (min-width: 861px) {
  /* How it works phones as wide as the top phone on desktop (round 6); the watch scales with them. */
  .works .phone { width: 240px; padding: 9px; border-radius: 46px; }
  .works .phone img { border-radius: 37px; }
  .works .with-watch { padding-left: 64px; }
  .works .watch { width: 118px; }
  .hero { flex-direction: row; justify-content: center; gap: 64px; text-align: left; padding-top: 44px; }
  .hero-text { align-items: flex-start; max-width: 520px; }
  .hero-phone { margin-top: 0; }
  .goals .chips { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; text-align: center; }
  .goals .chips li { white-space: nowrap; }
}

/* Goal tags: two per row on phones (four even rows), four across on desktop. */
@media (max-width: 860px) {
  .goals .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 420px; text-align: center; }
  /* Text may wrap inside a tag rather than spill past its outline (it fits on one line
     from 360 px up); "Build" or "Quit" stays in one piece. */
  .goals .chips li { min-width: 0; padding: 6px 6px; overflow-wrap: break-word; }
  .goals .chips li span { display: inline-block; }
  .works li { grid-template-columns: 1fr; gap: 28px; }
  .works li.flip .text { order: 0; }
  .invite-wide { flex-direction: column; gap: 32px; padding: 32px 20px 48px; }
  .invite-wide .text { width: auto; max-width: 520px; }
  .invite-wide h1 { font-size: 34px; }
  .how { grid-template-columns: 1fr; }
  .how .card { display: block; grid-row: auto; }
}

@media (max-width: 520px) {
  .site-header.wide { flex-direction: column; gap: 6px; }
  .hero h1 { font-size: 29px; }
  .hero .subhead { font-size: 18px; }
  .hero .lede { font-size: 16px; }
  .why h2, .closing h2 { font-size: 24px; }
}

/* Very small screens (an iPhone with Display Zoom set to Larger Text is about 320 px):
   one goal tag per row (Nov 3). */
@media (max-width: 359px) {
  .goals .chips { grid-template-columns: 1fr; max-width: 280px; }
}

/* Footer on phones: the copyright on its own centred line, then Support · Privacy · Terms
   centred below it (Nov 3). The dots are decoration only (empty alt text after the slash). */
@media (max-width: 520px) {
  .site-footer { gap: 6px 0; }
  .site-footer span { flex-basis: 100%; text-align: center; }
  .site-footer a + a::before { content: "·" / ""; color: var(--muted); margin: 0 10px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
.contact .lede { margin: 0; }
/* Support: the contact card after the last answer, clearly apart from it. */
.contact.still-need-help { margin-top: 44px; }
.contact.still-need-help h2 { font-size: 18px; margin: 0 0 2px; }

/* The 404 page (Nov 3): the site's header and footer, and between them one centred
   480px column, vertically centred: mascot, heading, line, and the button at its own width. */
.not-found { flex: 1; width: 100%; max-width: 520px; margin: 0 auto; padding: 48px 20px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.not-found .mascot {
  width: 112px; height: 112px; border-radius: 50%; background: var(--cream); border: 4px solid var(--gold);
  overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.not-found .mascot img { width: 146px; height: 146px; object-fit: cover; margin-top: 20px; }
.not-found h1 { font-size: 34px; text-wrap: balance; }
.not-found .lede { font-size: 18px; }
.not-found .button { display: inline-flex; white-space: nowrap; margin-top: 8px; }
@media (max-width: 520px) { .not-found h1 { font-size: 29px; } .not-found .lede { font-size: 16px; } }

/* Screenshots are <picture> elements (WebP with the JPEG as fallback, Nov 3): the picture
   behaves like the img it wraps. */
.phone picture, .watch picture, .duo-frame picture { display: block; }

/* Android waitlist on the home page (Android only) and the support page. */
.android-waitlist { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 6px; }
.android-waitlist .waitlist { width: 100%; margin-top: 12px; text-align: left; }
.android-waitlist .waitlist, .support-waitlist { padding: 20px; }
.android-waitlist .waitlist form, .support-waitlist form { display: flex; flex-direction: column; gap: 10px; }
.android-waitlist .waitlist .note, .support-waitlist .note { margin-top: 2px; }
.support-waitlist { width: 100%; margin: 16px 0 36px; }