/* FamFit — famfit.app home.
   ---------------------------------------------------------------------------
   Layout and story from the Base44 draft; colour and type from the FamFit
   design system (lib/theme.ts in the app, site/styles.css for the other
   pages), so the site and the app read as one product:

   - Olive is the one primary action. Teal is the partner, only ever paired
     with olive (the two-ring mark, the progress bars). Deep olive carries the
     announcement bar and the footer.
   - Atkinson Hyperlegible for everything people read.
   - Numbers are Nunito, and only the digits: the "FamFit Numbers" face below
     covers U+0030–0039 and sits first in every font stack, so any digit
     anywhere on the page is soft and rounded while the words around it stay
     Atkinson. Numbers are set at text size, inside sentences — a goal should
     read as a promise, not a scoreboard.

   privacy/, support/ and join/ use styles.css; this file is the home page only. */

/* Colours and fonts: tokens.css (generated from lib/palette.ts). Only layout
   values live here. */
:root {
  --deep-line: rgba(245, 239, 227, 0.16);
  --wrap: 72rem;
  --gutter: clamp(16px, 4.5vw, 44px);
  --radius: 14px;
  --bar-h: 38px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--focus);
  text-underline-offset: 3px;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 0.6em;
}
h3 {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
}
p {
  margin: 0 0 1em;
  text-wrap: pretty;
}
strong {
  font-weight: 700;
  color: var(--text);
}
:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 6px;
}
.hero :focus-visible,
.footer :focus-visible,
.announce:focus-visible,
.nav:not(.is-scrolled) :focus-visible {
  outline-color: var(--brand-action-on-deep-hover);
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--text);
  color: var(--ground);
}
.skip:focus {
  top: 12px;
}

/* The mark: assets/brand (copied to /brand). Two files, because the rings
   change colour with the background: dark rings on cream, light rings on
   photos, deep olive and dark mode. */
.mark {
  width: 34px;
  height: auto;
  flex: none;
}
.nav .mark-on-light {
  display: none;
}
.nav.is-scrolled .mark-on-light {
  display: block;
}
.nav.is-scrolled .mark-on-dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  .nav.is-scrolled .mark-on-light {
    display: none;
  }
  .nav.is-scrolled .mark-on-dark {
    display: block;
  }
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
}
/* Two short strokes before every label: the pair, in miniature. */
.eyebrow::before {
  content: '';
  width: 14px;
  height: 6px;
  flex: none;
  background: linear-gradient(var(--action), var(--action)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--partner), var(--partner)) 0 100% / 100% 2px no-repeat;
}
.eyebrow-light {
  color: var(--brand-action-on-deep-hover);
}
.eyebrow-light::before {
  background: linear-gradient(var(--brand-action-on-deep-hover), var(--brand-action-on-deep-hover)) 0 0 / 100% 2px
      no-repeat,
    linear-gradient(#6ea3a3, #6ea3a3) 0 100% / 100% 2px no-repeat;
}

/* ------------------------------------------------------------ buttons */

.btn {
  --b-bg: var(--action);
  --b-fg: var(--text-on-action);
  --b-line: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 1.5px solid var(--b-line);
  border-radius: var(--radius);
  background: var(--b-bg);
  color: var(--b-fg);
  font: 700 1rem/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s, transform 0.2s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: none;
}
.btn:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}
.btn-primary:hover {
  --b-bg: var(--action-pressed);
}
@media (prefers-color-scheme: dark) {
  .btn-primary:hover {
    --b-fg: var(--text-on-action);
  }
}
/* On photos and deep olive: the design system's dark-mode action colour. */
.btn-light {
  --b-bg: var(--brand-action-on-deep);
  --b-fg: var(--brand-text-on-action-on-deep);
}
.btn-light:hover {
  --b-bg: var(--brand-action-on-deep-hover);
}
.btn-ghost {
  --b-bg: transparent;
  --b-fg: #fff;
  --b-line: rgba(255, 255, 255, 0.7);
}
.btn-ghost:hover {
  --b-bg: rgba(255, 255, 255, 0.12);
}
.btn-sm {
  min-height: 40px;
  padding: 0 1rem;
  font-size: 0.9rem;
}
.btn-block {
  width: 100%;
}

/* ------------------------------------------------------------ bar + nav */

.announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: var(--bar-h);
  padding: 0 12px;
  background: var(--brand-deep-olive);
  color: var(--brand-on-deep-olive);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}
.announce:hover {
  color: var(--brand-action-on-deep-hover);
}

/* Transparent over the hero; once the bar scrolls away it pins to the top as
   a solid strip. Absolute → fixed at exactly the bar's height, so no jump. */
.nav {
  position: absolute;
  top: var(--bar-h);
  left: 0;
  right: 0;
  z-index: 50;
  color: #fff;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s;
}
.nav.is-scrolled {
  position: fixed;
  top: 0;
  background: var(--ground);
  color: var(--text);
  box-shadow: 0 1px 0 var(--border-subtle);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--nav-h);
}
.nav nav {
  margin-left: auto;
}
.nav-links {
  display: flex;
  gap: 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  color: inherit;
  opacity: 0.88;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
}
.nav-links a:hover {
  opacity: 1;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.nav:not(.is-scrolled) .btn-primary {
  --b-bg: var(--brand-action-on-deep);
  --b-fg: var(--brand-text-on-action-on-deep);
}
@media (max-width: 820px) {
  .nav nav {
    display: none;
  }
  .nav .btn {
    margin-left: auto;
  }
}

/* ------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(88svh, 820px);
  padding: calc(var(--nav-h) + 72px) 0 clamp(48px, 8vw, 96px);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background: #281e19;
}
.hero-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Darkest at the bottom-left, where the copy sits, so it reads on any crop. */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(18, 14, 8, 0.86) 0%, rgba(18, 14, 8, 0.45) 50%, rgba(18, 14, 8, 0.2) 100%),
    linear-gradient(to right, rgba(18, 14, 8, 0.55), transparent 70%);
}
.hero h1 {
  max-width: 15ch;
  margin-bottom: 0.35em;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}
.lede {
  max-width: 34rem;
  margin-bottom: 1.8rem;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, 0.88);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
@media (max-width: 560px) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 140px);
  }
  .hero-img {
    object-position: 60% 25%;
  }
  .actions .btn {
    flex: 1 1 100%;
  }
}

/* ------------------------------------------------------------ sections */

.section {
  padding-block: clamp(72px, 9vw, 128px);
}
.section-sand {
  background: var(--raised);
}
/* Copy beside media on wide screens, stacked (copy first) on narrow ones. */
.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.split-founder,
.split-join {
  grid-template-columns: 0.85fr 1.15fr;
}
.copy {
  max-width: 38rem;
}
.copy > p:not(.eyebrow) {
  color: var(--text-secondary);
}
.pull {
  margin: 1.6rem 0;
  padding: 0.15rem 0 0.15rem 1.2rem;
  border-left: 3px solid;
  border-image: linear-gradient(var(--action), var(--partner)) 1;
}
.pull p {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--sunken);
  box-shadow: 0 36px 70px -40px rgba(59, 47, 42, 0.5);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.arch {
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--radius) var(--radius);
}
.portrait {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
}

@media (max-width: 900px) {
  .split,
  .split-founder,
  .split-join {
    grid-template-columns: 1fr;
  }
  .photo {
    width: 100%;
    max-width: 440px;
    justify-self: center;
  }
  .portrait {
    position: relative;
    top: 0;
  }
  /* Photo after the words for story; before for founder and join, as on wide. */
  .split > .arch:last-child {
    order: 2;
  }
}

/* ------------------------------------------------------------ how it works */

.steps {
  display: grid;
  gap: 1.7rem;
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}
.steps li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1rem;
}
.step-n {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  background: var(--ground);
  font-weight: 700;
}
.steps h3 {
  margin: 0.6rem 0 0.4rem;
}
.steps p {
  margin: 0;
  color: var(--text-secondary);
}

/* The phone shows the app's light theme, with the streak as a sentence. */
.device-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 56px 0 8px;
}
.device {
  width: min(300px, 80vw);
  aspect-ratio: 9 / 16.5;
  padding: 10px;
  border-radius: 46px;
  background: #3b2f2a;
  box-shadow: 0 50px 90px -45px rgba(59, 47, 42, 0.6);
}
.screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 48px 18px 20px;
  border-radius: 37px;
  background: #f5efe3;
  color: #3b2f2a;
  overflow: hidden;
}
.screen p {
  margin: 0;
}
.scr-title {
  font-weight: 700;
  font-size: 0.95rem;
}
.scr-streak {
  padding: 16px;
  border-radius: 16px;
  background: #faf6ec;
  border: 1px solid #dfd0b6;
}
.scr-days {
  font-size: 1.35rem;
  font-weight: 700;
  color: #4a5a26;
}
.scr-sub {
  font-size: 0.85rem;
  color: #574840;
}
.member p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px !important;
  font-size: 0.82rem;
}
.member p span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.member p span:last-child {
  color: #574840;
}
.member .done {
  color: #2f6b6b !important;
  font-weight: 700;
}
.av {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.68rem;
  color: #faf6ec;
}
.av-you {
  background: #4a5a26;
}
.av-them {
  background: #2f6b6b;
}
.bar {
  display: block;
  height: 8px;
  border-radius: 8px;
  background: #dfd0b6;
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
}
.fill-you {
  width: 80%;
  background: #4a5a26;
}
.fill-them {
  width: 100%;
  background: #2f6b6b;
}
.week {
  padding: 12px;
  border-radius: 14px;
  background: #faf6ec;
  border: 1px solid #dfd0b6;
}
.week-h {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px !important;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #574840;
}
.ticks {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
/* One column a day: top mark you, bottom mark them. Today they're in. */
.ticks span {
  display: grid;
  gap: 3px;
  justify-items: center;
  font-size: 0.62rem;
  color: #574840;
}
.ticks i {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: #4a5a26;
}
.ticks i + i {
  background: #2f6b6b;
}
.ticks .today i:first-child {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #4a5a26;
}
.scr-foot {
  margin-top: auto !important;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4a5a26;
}
.notif {
  position: absolute;
  top: 18px;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: min(330px, 92%);
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(250, 246, 236, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #3b2f2a;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 20px 44px -22px rgba(59, 47, 42, 0.5), 0 0 0 1px rgba(59, 47, 42, 0.06);
}
.notif p {
  margin: 0;
}
.notif .mark {
  width: 30px;
  margin-top: 2px;
}
@media (prefers-reduced-motion: no-preference) {
  .notif {
    animation: float 6s ease-in-out infinite;
  }
}
@keyframes float {
  50% {
    transform: translateY(-6px);
  }
}

/* ------------------------------------------------------------ founder */

.follow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.social {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--border-subtle);
  border-radius: 50%;
  color: var(--text);
  transition: border-color 0.2s, background-color 0.2s;
}
.social:hover {
  border-color: var(--action);
  background: var(--raised);
}
.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ------------------------------------------------------------ forms */

.card {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  background: var(--ground);
  box-shadow: 0 28px 60px -46px rgba(59, 47, 42, 0.45);
}
.form {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
}
.form p {
  margin: 0;
}
.row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
@media (max-width: 420px) {
  .row-2 {
    grid-template-columns: 1fr;
  }
}
.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font-size: 0.92rem;
  font-weight: 700;
}
.opt {
  font-weight: 400;
  color: var(--text-secondary);
}
.form input[type='text'],
.form input[type='email'],
.form input[type='tel'],
.form textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 0.95rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: 1rem; /* 16px+: no iOS zoom on focus */
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}
.form input::placeholder,
.form textarea::placeholder {
  color: var(--text-disabled);
}
.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 4px rgba(74, 90, 38, 0.16);
}
.form [aria-invalid='true'] {
  border-color: var(--urgent) !important;
}
.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.consent[hidden] {
  display: none;
}
.consent input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--action);
}
.fine {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.status {
  font-weight: 700;
}
.status:empty {
  display: none;
}
.status.ok {
  color: var(--action);
}
.status.err {
  color: var(--urgent);
}
.form.is-done .field,
.form.is-done .row-2,
.form.is-done .consent,
.form.is-done .btn,
.form.is-done .fine {
  display: none;
}
.form.is-done .status {
  padding: 0.6rem 0;
  font-size: 1.2rem;
}
/* Joining the waitlist is the site's one celebration, so it gets the sun
   (docs/brand.md: sun is for celebration only). */
#waitlist-form.is-done .status {
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--celebrate);
  border-radius: 12px;
  background: var(--celebrate-surface);
  color: var(--text);
}
#waitlist-form.is-done .status::before {
  content: '✦ ';
  color: var(--celebrate-ink);
}
/* Honeypot: off-screen, not display:none (smarter bots skip hidden fields). */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ footer */

.footer {
  padding-block: clamp(56px, 7vw, 88px) 28px;
  background: var(--brand-deep-olive);
  color: var(--brand-on-deep-olive);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}
.card-deep {
  background: var(--brand-deep-olive-raised);
  border-color: var(--deep-line);
  box-shadow: none;
  scroll-margin-top: calc(var(--nav-h) + 12px);
}
.card-deep h2 {
  margin-bottom: 0.35em;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  color: var(--brand-on-deep-olive);
}
.card-deep > p {
  color: var(--brand-on-deep-olive-secondary);
}
.form-deep {
  margin-top: 1.2rem;
}
.form-deep .field label {
  color: var(--brand-on-deep-olive);
}
.form-deep input[type='text'],
.form-deep input[type='email'],
.form-deep textarea {
  border-color: var(--deep-line);
  background: rgba(0, 0, 0, 0.18);
  color: var(--brand-on-deep-olive);
}
.form-deep input::placeholder,
.form-deep textarea::placeholder {
  color: rgba(245, 239, 227, 0.5);
}
.form-deep input:focus,
.form-deep textarea:focus {
  border-color: var(--brand-action-on-deep);
  box-shadow: 0 0 0 4px rgba(149, 165, 118, 0.25);
}
.form-deep .status.ok {
  color: var(--brand-action-on-deep-hover);
}
.form-deep .status.err {
  color: #efaf9d;
}
.footer-side {
  display: grid;
  gap: 40px;
}
.brand-footer {
  font-size: 1.6rem;
}
.brand-footer .mark {
  width: 44px;
}
.tagline {
  margin: 0.7rem 0 0;
  color: var(--brand-on-deep-olive-secondary);
}
.cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.col-title {
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-on-deep-olive-secondary);
}
.cols ul {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cols a,
.legal a {
  color: var(--brand-on-deep-olive);
  text-decoration: none;
}
.cols a:hover,
.legal a:hover {
  color: var(--brand-action-on-deep-hover);
}
.legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--deep-line);
  font-size: 0.88rem;
  color: var(--brand-on-deep-olive-secondary);
}
.legal p {
  margin: 0;
}
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .cols {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }
  .announce {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }
}