:root{
    /* ============ COLOR ============ */
    --teal:      #1B5449;   /* primary background — the page lives here */
    --teal-deep: #143E36;   /* deeper band: signup + closing */
    --teal-lite: #2E7A6F;   /* subtle fills */
    --cream:     #F1ECE0;   /* primary text on teal        (7.39:1 AA) */
    --muted:     #AEC7C0;   /* secondary text on teal      (4.87:1 AA) */
    --gold:      #DDA84E;   /* accent — CTA, emphasis, guide marks */
    --gold-hi:   #E7B85C;   /* button hover */
    --ink:       #23211C;   /* text on gold + on light fields */
    --field:     #F2EEE3;   /* light input surface */
    --rose:      #E3ACA2;   /* the heart mark (self-compassion) */
    --line:      rgba(241,236,224,.16);
    --placeholder:#6E6656;  /* input placeholder on --field (4.90:1 AA) */
    --err-line:  #D98A7E;   /* invalid border + badge */
    --err-bg:    #FBEEEB;   /* invalid field fill */
    --err-text:  #F5C0B6;   /* error message on teal-deep  (7.39:1 AA) */

    /* ============ TYPE FAMILIES ============ */
    --font-display:"Fraunces", Georgia, serif;
    --font-util:   "Archivo", system-ui, sans-serif;

    /* ============ TYPE SCALE ============
       Root is set to 62.5% below, so 1rem = 10px.
       Core scale: 4px steps from 16px (--fs-16 = 1.6rem = 16px).
       --fs-12 / --fs-14 are sub-base UI steps for captions & legal text;
       raise the floor to --fs-16 everywhere if you prefer a strict 16px minimum. */
    --fs-12: 1.2rem;   /* 12px – micro UI, legal, hints        */
    --fs-14: 1.4rem;   /* 14px – labels, captions              */
    --fs-16: 1.6rem;   /* 16px – base body                     */
    --fs-20: 2rem;     /* 20px – lead paragraph                */
    --fs-24: 2.4rem;   /* 24px                                 */
    --fs-28: 2.8rem;   /* 28px – section heading (min)         */
    --fs-32: 3.2rem;   /* 32px                                 */
    --fs-36: 3.6rem;   /* 36px – heading (max)                 */
    --fs-40: 4rem;     /* 40px                                 */
    --fs-60: 6rem;     /* 60px – hero display (max)            */

    /* ============ SPACING (2px steps) ============
       Padding, margins, and gaps snap to this scale (1rem = 10px). */
    --sp-4:  .4rem;   --sp-6:  .6rem;   --sp-8:  .8rem;   --sp-10: 1rem;
    --sp-12: 1.2rem;  --sp-14: 1.4rem;  --sp-16: 1.6rem;  --sp-18: 1.8rem;
    --sp-20: 2rem;    --sp-22: 2.2rem;  --sp-24: 2.4rem;  --sp-26: 2.6rem;
    --sp-28: 2.8rem;  --sp-32: 3.2rem;  --sp-36: 3.6rem;  --sp-40: 4rem;
    --sp-42: 4.2rem;  --sp-48: 4.8rem;  --sp-54: 5.4rem;  --sp-56: 5.6rem;
    --sp-64: 6.4rem;  --sp-80: 8rem;    --sp-96: 9.6rem;

    /* ============ RADII (2px steps) ============ */
    --r-2:  2px;
    --r-4:  4px;
    --r-6:  6px;
    --r-8:  8px;
    --r-pill:100px;
    --r-full:50%;

    --maxw: 660px;
  }

  *{ box-sizing:border-box; }
  html{ font-size:62.5%; scroll-behavior:smooth; }   /* 1rem = 10px */
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

  body{
    margin:0; background:var(--teal); color:var(--cream);
    font-family:var(--font-display); font-weight:400;
    font-size:var(--fs-16); line-height:1.7;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }

  /* ---- shared focus + skip ---- */
  a:focus-visible, button:focus-visible, input:focus-visible{
    outline:3px solid var(--gold); outline-offset:3px;
  }
  .skip{
    position:absolute; left:8px; top:-48px; background:var(--gold); color:var(--ink);
    font-family:var(--font-util); font-weight:600; font-size:var(--fs-14);
    padding:var(--sp-10) var(--sp-16); border-radius:var(--r-6); z-index:100; transition:top .15s ease;
  }
  .skip:focus{ top:8px; }

  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(var(--sp-22),6vw,var(--sp-40)); }

  /* ============ SHARED UTILITY LABEL (eyebrow / kicker) ============ */
  .eyebrow, .kicker{
    font-family:var(--font-util); font-weight:600; font-size:var(--fs-12);
    letter-spacing:.22em; text-transform:uppercase; color:var(--cream);
    margin:0 0 var(--sp-16); display:flex; align-items:center;
  }
  .eyebrow{ gap:var(--sp-12); margin-bottom:var(--sp-26); }
  .eyebrow .dot{ width:7px; height:7px; border-radius:var(--r-full); background:var(--gold); flex:none; }
  .eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }
  .kicker{ gap:var(--sp-10); }
  .kicker::before{ content:""; width:16px; height:2px; background:var(--gold); flex:none; }

  /* ============ SHARED MICRO CAPTION (util + muted + 12px) ============ */
  .cta-note, .hint, .form-foot, .colophon{
    font-family:var(--font-util); color:var(--muted);
  }
  .hint, .form-foot, .colophon{ font-size:var(--fs-12); }
  .cta-note{ font-size:var(--fs-14); }

  /* ============ HERO ============ */
  .hero{ padding:clamp(var(--sp-48),9vw,var(--sp-96)) 0 clamp(var(--sp-32),6vw,var(--sp-56)); }
  .hero h1{
    font-optical-sizing:auto; font-weight:500;
    font-size:clamp(var(--fs-36),8vw,var(--fs-60));
    line-height:1.08; letter-spacing:-0.02em; margin:0 0 var(--sp-28); text-wrap:balance;
  }
  .hero h1 em{ font-style:italic; font-weight:400; color:var(--gold); }

  .title-line{
    font-family:var(--font-util); font-weight:700; letter-spacing:.02em;
    font-size:var(--fs-16); margin:0; color:var(--cream);
  }
  .sub{
    font-style:italic; color:var(--muted);
    font-size:var(--fs-16); line-height:1.5; margin:var(--sp-8) 0 0; max-width:36ch;
  }

  .cta-row{ margin-top:var(--sp-36); display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-16); }

  /* continuous single-stroke heart — dusty rose */
  .heart-mark{ display:block; width:clamp(120px,26vw,168px); height:auto; margin:clamp(var(--sp-42),7vw,var(--sp-64)) auto 0; }
  .heart-path{ fill:none; stroke:var(--rose); stroke-width:2.2; stroke-linecap:round; }
  .pulse-line{ fill:none; stroke:var(--rose); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

  /* ---- buttons ---- */
  .btn{
    display:inline-flex; align-items:center; gap:var(--sp-8);
    font-family:var(--font-util); font-weight:600; font-size:var(--fs-16);
    text-decoration:none; cursor:pointer; border:none; border-radius:var(--r-pill);
    padding:var(--sp-14) var(--sp-28); transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
  }
  .btn-primary{ background:var(--gold); color:var(--ink); }
  .btn-primary:hover{ background:var(--gold-hi); transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
  .btn-block{ width:100%; justify-content:center; padding:var(--sp-16); }

  /* ============ SECTIONS ============ */
  .section{ padding:clamp(var(--sp-42),7vw,var(--sp-64)) 0; }
  .divider{ border:none; border-top:1px solid var(--line); margin:0; }

  .section h2{
    font-weight:500; font-size:clamp(var(--fs-28),5vw,var(--fs-36));
    line-height:1.2; letter-spacing:-0.015em; margin:0 0 var(--sp-20); text-wrap:balance; color:var(--cream);
  }
  .section p{ margin:0 0 var(--sp-18); max-width:60ch; }
  .section p:last-child{ margin-bottom:0; }
  .lead{ font-size:var(--fs-20); }
  .toll{
    font-size:var(--fs-20); font-weight:500; line-height:1.45; margin:0 0 var(--sp-18);
    max-width:60ch; padding-left:var(--sp-16); border-left:2px solid var(--gold);
  }
  .muted-p{ color:var(--muted); }

  /* ============ SIGNUP ============ */
  .g-form{
    height: 845px;
    max-width: 660px;
    width: 100%;
  }
  @media (max-width:320px){
  .g-form{
    height: 1175px;
  }
}
  .signup{ background:var(--teal-deep); }
  form{ margin-top:var(--sp-28); }
  .field{ margin:0 0 var(--sp-18); }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-14); }
  @media (max-width:460px){ .field-row{ grid-template-columns:1fr; gap:0; } }

  .lab{
    display:block; font-family:var(--font-util); font-weight:600;
    font-size:var(--fs-14); letter-spacing:.03em; margin:0 0 var(--sp-6); color:var(--cream);
  }
  .req{ color:var(--gold); }
  input[type="text"], input[type="email"]{
    width:100%; font-family:var(--font-util); font-size:var(--fs-16); color:var(--ink);
    background:var(--field); border:1.5px solid transparent; border-radius:var(--r-8);
    padding:var(--sp-14); transition:box-shadow .15s ease, background-color .15s ease;
  }
  input::placeholder{ color:var(--placeholder); }
  input:focus{ box-shadow:0 0 0 3px var(--gold); outline:none; }
  input[aria-invalid="true"]{ box-shadow:0 0 0 2px var(--err-line); background:var(--err-bg); }

  .hint{ margin:var(--sp-6) 0 0; }
  .err{
    display:none; font-family:var(--font-util); font-size:var(--fs-12); font-weight:600;
    color:var(--err-text); margin:var(--sp-6) 0 0; align-items:center; gap:var(--sp-6);
  }
  .err::before{
    content:"!"; display:inline-flex; align-items:center; justify-content:center;
    width:1.68rem; height:1.68rem; background:var(--err-line); color:#3a1712; border-radius:var(--r-full);
    font-size:var(--fs-12); font-weight:700; flex:none;
  }
  .field.invalid .err{ display:flex; }

  .check{
    display:flex; align-items:flex-start; gap:var(--sp-12); background:rgba(241,236,224,.06);
    border:1.5px solid var(--line); border-radius:var(--r-8); padding:var(--sp-14) var(--sp-16); margin:0 0 var(--sp-22); cursor:pointer;
  }
  .check:hover{ border-color:rgba(241,236,224,.32); }
  .check input{ margin:.288rem 0 0; width:1.84rem; height:1.84rem; accent-color:var(--gold); flex:none; cursor:pointer; }
  .check span{ font-family:var(--font-util); font-size:var(--fs-14); line-height:1.45; color:var(--cream); }

  .form-foot{ text-align:center; margin:var(--sp-16) 0 0; }

  .success{
    display:none; background:rgba(221,168,78,.1); border:1.5px solid var(--gold);
    border-radius:var(--r-8); padding:var(--sp-22) var(--sp-24); margin-top:var(--sp-28);
  }
  .success h3{ font-weight:500; font-size:var(--fs-24); margin:0 0 var(--sp-8); color:var(--cream); }
  .success p{ font-family:var(--font-util); font-size:var(--fs-16); color:var(--muted); margin:0; }
  form[hidden]{ display:none; }

  /* ============ ABOUT ============ */
  .about .wrap{ display:grid; grid-template-columns:20rem 1fr; gap:var(--sp-26); align-items:start; }
  @media (max-width:520px){ .about .wrap{ grid-template-columns:1fr; gap:var(--sp-20); } }
  .portrait{
    width:100%; height:auto; border-radius:var(--r-8);
    background:linear-gradient(150deg, var(--teal), var(--teal-deep));
    display:block; align-items:center; justify-content:center; text-align:center;
    color:var(--cream); font-family:var(--font-util); font-size:var(--fs-12); letter-spacing:.06em; padding:var(--sp-4);
    border:1px solid var(--line);
  }
  @media (max-width:520px){ .portrait{ width:100%; height:auto; } }
  .about h2{ margin-top:0; }
  .name{ font-family:var(--font-util); font-weight:700; font-size:var(--fs-16); margin:0 0 var(--sp-10); color:var(--cream); }
  .about p{ font-size:var(--fs-16); line-height:1.6; color:var(--muted); }
  .about p em{ color:var(--cream); font-style:italic; }

  /* ============ AFFIRMATION ============ */
  .closing{ background:var(--teal-deep); border-top:1px solid var(--line); }
  .closing .wrap{ padding-top:clamp(var(--sp-54),9vw,var(--sp-80)); padding-bottom:clamp(var(--sp-54),9vw,var(--sp-80)); }
  .affirm{
    font-style:italic; font-weight:400; font-size:clamp(var(--fs-24),5vw,var(--fs-36));
    line-height:1.38; letter-spacing:-0.01em; margin:0; text-wrap:balance; color:var(--cream);
  }
  .affirm .g{ font-style:normal; color:var(--gold); }
  .enough{
    display:block; margin-top:var(--sp-18); font-family:var(--font-util); font-style:normal;
    font-weight:500; font-size:var(--fs-14); letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  }
  .colophon{ margin-top:var(--sp-42); }

  /* ============ MOTION ============ */
  @media (prefers-reduced-motion: no-preference){
    .heart-path{ stroke-dasharray:520; stroke-dashoffset:520; animation:draw 2s ease-out .3s forwards; }
    .pulse-line{ stroke-dasharray:900; stroke-dashoffset:900; animation:draw 4s ease-out .9s forwards; }
    .rise{ opacity:0; transform:translateY(14px); animation:rise .8s ease-out forwards; }
    .r1{ animation-delay:.05s; } .r2{ animation-delay:.18s; } .r3{ animation-delay:.32s; } .r4{ animation-delay:.46s; }
  }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  @keyframes rise{ to{ opacity:1; transform:none; } }