/* WellSavvy landing — single stylesheet.
   Brand rules (HARD): branded colors only; text/icons/illustrations solid
   navy (#0F183F) — light cream only on dark surfaces; cards = filled
   no-outline OR dashed-outline no-fill, 30px radius; thin lines; 8px
   grid; no shadows; one gradient use (footer); one button style. */

@layer reset, tokens, base, layout, components, utilities;

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  img, picture, svg { display: block; max-width: 100%; }
  input, button { font: inherit; }
  body { -webkit-font-smoothing: antialiased; }
}

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens {
  :root {
    /* color — verified app palette */
    --navy: #0F183F;
    --navy-soft: #4C5165;
    --cream: #FFFAEE;
    --cream-card: #F7EFDB;
    --cream-bright: #FFFCF6;
    --cream-deep: #E8DFC5;
    --green: #A3B48D;
    --green-pale: #D8E2CB;
    --green-lime: #D2D692;
    --green-deep: #7E9478;
    --gray-subtle: #D9D9D9;

    /* semantic */
    --bg: var(--cream);
    --ink: var(--navy);

    /* 8px grid */
    --s-05: 4px;  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;
    --s-4: 32px;  --s-5: 40px;  --s-6: 48px;  --s-8: 64px;
    --s-10: 80px; --s-12: 96px; --s-15: 120px; --s-20: 160px;

    /* shape */
    --r-card: 30px;
    --r-pill: 50px;
    --control-h: 56px;
    --line: 1.5px;

    /* type */
    --f-sans: "Averta PE", system-ui, -apple-system, sans-serif;
    --f-hand: "The Secret Things", "Averta PE", cursive;
    --fs-h1: clamp(1.875rem, 4.8vw + 0.5rem, 3.25rem);
    --fs-h2: clamp(1.5rem, 2.8vw + 0.5rem, 2.125rem);
    --fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
    --fs-small: 0.9375rem;
    --measure: 42rem;
    --shell: 1140px;
  }
}

/* ───────────────────────── base ───────────────────────── */
@layer base {
  @font-face {
    font-family: "Averta PE";
    src: url("/assets/fonts/AvertaPE-Light.woff2") format("woff2");
    font-weight: 300; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Averta PE";
    src: url("/assets/fonts/AvertaPE-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Averta PE";
    src: url("/assets/fonts/AvertaPE-Semibold.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
  }
  /* Handwriting accent — when TheSecretThings.woff2 lands in
     assets/fonts/, UNCOMMENT this block (kept commented until then so
     every page view doesn't 404 on a missing font; .hand falls back to
     Averta Light through the --f-hand stack either way). */
  /*
  @font-face {
    font-family: "The Secret Things";
    src: url("/assets/fonts/TheSecretThings.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  */

  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-sans);
    font-weight: 300;
    font-size: var(--fs-body);
    line-height: 1.65;
  }
  h1, h2, h3 {
    font-weight: 600;
    line-height: 1.18;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: 1.125rem; }
  a { color: var(--ink); }
  em { font-style: italic; }
  strong { font-weight: 600; }

  :focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .site-footer :focus-visible { outline-color: var(--cream); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
  }
}

/* ───────────────────────── layout ───────────────────────── */
@layer layout {
  .wrap {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--s-3);
  }
  .prose { max-width: var(--measure); margin-inline: auto; }

  /* Header: logo centered, scrolls with content (matches app home) */
  .site-header {
    display: flex;
    justify-content: center;
    padding: var(--s-2) var(--s-3) var(--s-2);
  }
  .site-header img { height: 32px; width: auto; }

  /* Full-bleed color bands */
  .band--card  { background: var(--cream-card); }
  .band--green { background: var(--green-pale); }

  /* Section vertical rhythm */
  .hero        { padding-block: var(--s-3) var(--s-10); }
  .see-you     { padding-block: var(--s-10); }
  .features    { padding-block: var(--s-12) var(--s-10); }
  .never       { padding-block: var(--s-4) var(--s-12); }
  .founders    { padding-block: var(--s-10); }
  .benefits    { padding-block: var(--s-12) var(--s-8); }
  .cta-2       { padding-block: var(--s-10); }
  .faq         { padding-block: var(--s-12) var(--s-15); }

  @media (min-width: 960px) {
    .hero     { padding-block: var(--s-6) var(--s-15); }
    .see-you  { padding-block: var(--s-15); }
    .features { padding-block: var(--s-15) var(--s-12); }
    .never    { padding-block: var(--s-4) var(--s-15); }
    .founders { padding-block: var(--s-15); }
    .benefits { padding-block: var(--s-15) var(--s-10); }
    .cta-2    { padding-block: var(--s-12); }
    .faq      { padding-block: var(--s-15) var(--s-20); }
  }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {

  /* — the one button style (matches app primary button) — */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--control-h);
    padding-inline: var(--s-4);
    background: var(--green);
    color: var(--navy);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1;
    border: none;
    border-radius: var(--r-pill);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0s;
  }
  .btn:hover { outline: var(--line) solid var(--navy); outline-offset: 0; transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }
  .btn[disabled] { cursor: default; transform: none; outline: none; }

  /* — inputs: transparent, thin solid navy outline — */
  .waitlist__input {
    height: var(--control-h);
    width: 100%;
    padding-inline: var(--s-3);
    background: transparent;
    color: var(--navy);
    border: var(--line) solid var(--navy);
    border-radius: var(--r-pill);
  }
  /* placeholders must be SOLID (defaults are translucent) */
  .waitlist__input::placeholder { color: var(--navy-soft); opacity: 1; }

  .waitlist { margin-top: var(--s-4); }
  .waitlist__row {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
  }
  @media (min-width: 640px) {
    .waitlist__row { flex-direction: row; }
    .waitlist__input { flex: 1; }
  }
  .waitlist__msg { margin-top: var(--s-1); font-size: var(--fs-small); font-weight: 400; min-height: 1.2em; }
  .waitlist__msg:empty { margin-top: 0; min-height: 0; }

  /* honeypot: off-screen, not display:none (bots skip display:none) */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }

  /* — dark (footer) form variant: cream on navy, all solid — */
  .waitlist--dark .waitlist__input {
    border-color: var(--cream);
    color: var(--cream);
  }
  .waitlist--dark .waitlist__input::placeholder { color: var(--cream); opacity: 1; }
  .waitlist--dark .waitlist__msg { color: var(--cream); }

  /* — cards: filled no-outline — */
  .card {
    background: var(--cream-card);
    border-radius: var(--r-card);
    padding: var(--s-3);
  }
  @media (min-width: 640px) { .card { padding: var(--s-4); } }

  /* — the page's ONLY dashed card: 2px round dots / 3px gaps, like the
       app's DashedBorderContainer. border-image can't do round dots, so
       an SVG data-URI draws the dotted rounded rect. — */
  .card--dashed {
    background: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect style='x:1.5px;y:1.5px;width:calc(100%25 - 3px);height:calc(100%25 - 3px)' rx='30' fill='none' stroke='%230F183F' stroke-width='2' stroke-linecap='round' stroke-dasharray='0.1 5'/%3E%3C/svg%3E");
    background-size: 100% 100%;
  }

  /* — phone frame: thin navy outline, no shadow, no 3D — */
  .phone {
    border: var(--line) solid var(--navy);
    border-radius: 40px;
    padding: 10px;
    background: var(--cream-bright);
    width: min(78vw, 300px);
    margin-inline: auto;
  }
  .phone img { border-radius: 30px; width: 100%; height: auto; }

  /* — hand-drawn underlines (assets from the app) — */
  .u {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left 100%;
    background-size: 100% 5px;
    padding-bottom: 7px;
    margin-bottom: -7px;
  }
  .u--1 { background-image: url("/assets/img/underline-1.svg"); }
  .u--2 { background-image: url("/assets/img/underline-2.svg"); }
  .u--3 { background-image: url("/assets/img/underline-3.svg"); }

  /* — handwriting accent — */
  .hand {
    font-family: var(--f-hand);
    font-weight: 300;
  }

  /* — illustrations (navy line art) — */
  .illus { margin-inline: auto; }

  /* ════ Block 1 · hero ════ */
  .hero__wrap { display: grid; gap: var(--s-6); }
  .hero__copy { max-width: var(--measure); margin-inline: auto; text-align: left; }
  .hero__sub { margin-top: var(--s-3); }
  .microline {
    margin-top: var(--s-2);
    font-size: var(--fs-small);
    font-weight: 400;
  }
  .hero__phone { display: none; }
  @media (min-width: 960px) {
    .hero__wrap {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
      align-items: center;
      gap: var(--s-10);
    }
    .hero__copy { margin-inline: 0; }
    .hero__phone { display: block; }
  }

  /* ════ Block 2 · we see you ════ */
  .see-you { text-align: left; }
  .see-you p { font-weight: 400; }            /* Regular on colored fill */
  .see-you p + p { margin-top: var(--s-3); }
  .illus--seeyou { width: 112px; height: auto; margin: 0 0 var(--s-3); }
  .see-you h2 { margin-bottom: var(--s-4); }
  .pivot {
    margin-top: var(--s-6) !important;
    font-weight: 600 !important;
    font-size: 1.25em;
    line-height: 1.4;
  }

  /* ════ Block 3 · features ════ */
  .features__head { text-align: left; }
  .features__intro { margin-top: var(--s-2); }
  .features__grid { margin-top: var(--s-8); display: grid; gap: var(--s-8); }
  .feature__text p + p { margin-top: var(--s-4); }
  .lead-in { font-weight: 600; }
  .feature--with-screen { display: grid; gap: var(--s-5); align-items: center; }
  @media (min-width: 960px) {
    .features__grid { gap: var(--s-12); }
    .feature--with-screen {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
      gap: var(--s-12);
    }
    .feature--flip .feature__text { order: 2; }
    .feature--flip .phone { order: 1; }
  }
  .feature--pair { display: grid; gap: var(--s-3); }
  @media (min-width: 640px) {
    .feature--pair { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  }
  .feature__card p { font-weight: 400; }       /* Regular on card fill */
  .features__closing {
    margin-top: var(--s-8);
    font-weight: 600;
    font-size: 1.125em;
    text-align: center;
  }

  /* ════ Block 4 · never ════ */
  .never__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
  }
  .illus--never { width: 64px; height: auto; flex: none; margin-inline: 0; }
  .never__intro { margin-bottom: var(--s-4); }
  .never__card { padding: var(--s-4) var(--s-3); }
  @media (min-width: 640px) { .never__card { padding: var(--s-5) var(--s-6); } }
  .never__list { list-style: none; padding: 0; }
  .never__list li + li { margin-top: var(--s-3); }

  /* ════ Block 5 · founders ════ */
  .founders__wrap { display: grid; gap: var(--s-6); }
  .founders__photo { width: min(60vw, 240px); margin-inline: auto; }
  .founders__photo svg {
    width: 100%; height: auto;
    border: var(--line) solid var(--navy);
    border-radius: var(--r-card);
  }
  .founders__names {
    margin-top: var(--s-2);
    text-align: center;
    font-size: var(--fs-small);
    font-weight: 400;
  }
  .founders__text p { font-weight: 400; }      /* Regular on colored fill */
  .founders__text h2 { margin-bottom: var(--s-4); }
  .founders__text p + p { margin-top: var(--s-3); }
  @media (min-width: 960px) {
    .founders__wrap {
      grid-template-columns: 280px minmax(0, 1fr);
      gap: var(--s-10);
      align-items: start;
      max-width: 980px;
    }
    .founders__photo { margin-top: var(--s-2); }
  }

  /* ════ Block 6 · benefits ════ */
  .benefits__head { text-align: left; }
  .illus--benefits { width: 96px; height: auto; margin: 0 0 var(--s-3); }
  .benefits__head p { margin-top: var(--s-2); }
  .benefits__grid { margin-top: var(--s-6); display: grid; gap: var(--s-3); }
  @media (min-width: 960px) {
    .benefits__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  }
  .benefit p { font-weight: 400; }             /* Regular on card fill */
  .benefits__closing { margin-top: var(--s-6); }

  /* ════ divider (decorative logo symbol) ════ */
  .divider {
    display: flex;
    justify-content: center;
    padding-block: var(--s-2) var(--s-8);
  }

  /* ════ Block 7 · second CTA ════ */
  .cta-2 .waitlist { margin-top: 0; }

  /* ════ Block 8 · FAQ ════ */
  .faq h2 { margin-bottom: var(--s-6); }
  .faq__item { border-top: 1px solid var(--navy); }
  .faq__item:last-child { border-bottom: 1px solid var(--navy); }
  .faq__h { margin: 0; font-size: inherit; }
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    padding: var(--s-3) var(--s-05);
    background: none;
    border: none;
    text-align: left;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--navy);
    cursor: pointer;
  }
  .faq__icon {
    position: relative;
    flex: none;
    width: 16px; height: 16px;
  }
  .faq__icon::before, .faq__icon::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 0;
    width: 16px; height: 1.5px;
    background: var(--navy);
    transition: transform 0.3s ease;
  }
  .faq__icon::after { transform: rotate(90deg); }
  .faq__item[data-open] .faq__icon::after { transform: rotate(0deg); }
  .faq__a {
    display: grid;
    grid-template-rows: 0fr;
    /* visibility keeps collapsed answers out of the accessibility tree
       (zero-height overflow:hidden alone does not), matching
       aria-expanded="false"; it participates in transitions so the
       animation is preserved. */
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, visibility 0.3s;
  }
  .faq__a-inner { overflow: hidden; }
  .faq__a-inner p { padding: 0 var(--s-05) var(--s-3); max-width: 38rem; }
  .faq__item[data-open] .faq__a { grid-template-rows: 1fr; visibility: visible; }

  /* ════ Block 9 · footer — the single gradient use ════ */
  .site-footer {
    background: linear-gradient(to bottom, var(--green-pale) 0%, var(--navy) 42%);
    color: var(--cream);
    padding-block: var(--s-20) var(--s-8);
  }
  .site-footer a { color: var(--cream); }
  .site-footer .btn { color: var(--navy); }   /* navy on green stays */
  .site-footer .btn:hover { outline-color: var(--cream); }
  .site-footer__links {
    margin-top: var(--s-6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    font-weight: 400;
    font-size: var(--fs-small);
  }
  .signature {
    margin-top: var(--s-8);
    text-align: center;
    font-size: 1.75rem;
    color: var(--cream);
  }

  /* ════ post-signup state ════ */
  .signup-success__line {
    font-weight: 600;
    font-size: 1.125em;
  }
  .signup-success__line:focus { outline: none; }
  .signup-success__invite { margin-top: var(--s-4); color: var(--navy); }
  .signup-success__invite p { font-weight: 400; }
  .signup-success__actions {
    margin-top: var(--s-3);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
  }
  .link-quiet {
    background: none;
    border: none;
    padding: var(--s-1);
    color: var(--navy);
    font-weight: 400;
    text-decoration: underline;
    cursor: pointer;
  }
  /* footer success line stays cream on navy */
  .waitlist--dark .signup-success__line { color: var(--cream); }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}