:root {
    --deep: #0E4F5C; --sun: #FF9F5A; --glass: #BFE3DA; --sand: #F6EFE4; --paper: #FBF8F3;
    --ink: #10222A; --muted: #55656B; --card: #FFFFFF; --line: rgba(16, 34, 42, 0.12);
    --accent-text: #A4501A;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root { --paper: #0B1B20; --sand: #12292F; --card: #16323A; --ink: #EEF4F2; --muted: #A9BBBF; --line: rgba(238, 244, 242, 0.14); --accent-text: #FFB27A; color-scheme: dark; }
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 'Figtree', 'Segoe UI', system-ui, sans-serif; }
  .wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
  h1, h2, .display { font-family: 'Shrikhand', Georgia, serif; font-weight: 400; margin: 0; text-wrap: balance; }
  a { color: inherit; }

  /* Hero: the logo scene itself, full-bleed, as the opening image */
  .hero { background: var(--deep); color: #fff; overflow: hidden; position: relative; }
  .hero .wrap { display: grid; gap: 22px; padding-block: 56px 150px; position: relative; z-index: 1; }
  .brand { display: flex; align-items: center; gap: 10px; font-family: 'Shrikhand', Georgia, serif; font-size: 26px; }
  .hero h1 { font-size: clamp(54px, 11vw, 120px); line-height: .95; color: #fff; }
  .hero h1 em { font-style: normal; color: var(--sun); }
  .hero p { font-size: clamp(18px, 2.4vw, 22px); max-width: 34ch; margin: 0; color: var(--glass); }
  .cta { display: inline-flex; align-items: center; gap: 8px; width: fit-content; background: var(--sun); color: #10222A; font-weight: 800; text-decoration: none; padding: 15px 26px; border-radius: 999px; }
  .cta:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
  .sun { position: absolute; right: -40px; bottom: 30px; width: min(34vw, 340px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); }
  .waves { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 170px; }
  .stars { position: absolute; right: min(20vw, 190px); top: 60px; width: 90px; height: auto; }

  section { padding-block: 72px; }
  .eyebrow { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 8px; }
  h2 { font-size: clamp(34px, 5vw, 50px); line-height: 1.05; color: var(--deep); margin-bottom: 14px; }
  @media (prefers-color-scheme: dark) { h2 { color: var(--glass); } }
  .lead { max-width: 60ch; color: var(--muted); margin: 0; }

  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
  .step { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 6px; }
  .step .n { font-family: 'Shrikhand', Georgia, serif; font-size: 34px; color: var(--sun); line-height: 1; }
  .step h3 { margin: 0; font-size: 20px; }
  .step p { margin: 0; color: var(--muted); }

  .dreams { background: var(--sand); }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 32px; }
  .dream { background: var(--card); border-radius: 20px; overflow: hidden; border: 1px solid var(--line); display: grid; }
  .dream .pic { height: 110px; display: grid; place-items: center; font-size: 54px; }
  .dream .body { padding: 18px; display: grid; gap: 8px; }
  .dream .who { font-size: 14px; color: var(--muted); font-weight: 600; }
  .dream .text { font-family: Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.3; }
  .dream .text span { color: var(--muted); }
  .bar { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
  .bar i { display: block; height: 100%; background: var(--sun); border-radius: 4px; }
  .note { font-size: 13px; color: var(--muted); margin-top: 14px; }

  .trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 28px; }
  .trust div { border-left: 3px solid var(--sun); padding: 4px 0 4px 14px; }
  .trust b { display: block; }
  .trust span { color: var(--muted); font-size: 15px; }

  .join { background: var(--deep); color: #fff; }
  .join h2 { color: #fff; }
  .join .lead { color: var(--glass); }
  form { margin-top: 26px; display: grid; gap: 12px; max-width: 560px; }
  .roles { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
  .roles legend { font-weight: 700; margin-bottom: 8px; }
  .roles label { cursor: pointer; }
  .roles input { position: absolute; opacity: 0; pointer-events: none; }
  .roles span { display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); }
  .roles input:checked + span { background: var(--sun); color: #10222A; border-color: var(--sun); font-weight: 700; }
  .roles input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
  label.field { display: grid; gap: 6px; font-weight: 600; }
  input[type=email], input[type=text], textarea { font: inherit; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; width: 100%; }
  input::placeholder, textarea::placeholder { color: rgba(255,255,255,.55); }
  textarea { min-height: 80px; resize: vertical; }
  button { font: inherit; font-weight: 800; background: var(--sun); color: #10222A; border: 0; border-radius: 999px; padding: 15px 26px; cursor: pointer; width: fit-content; }
  button[disabled] { opacity: .6; cursor: wait; }
  .status { min-height: 1.6em; margin: 0; font-weight: 600; }
  .status.ok { color: var(--glass); }
  .status.err { color: #FFC9A6; }

  footer { padding-block: 32px 48px; color: var(--muted); font-size: 14px; }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

  @media (max-width: 640px) {
    .hero .wrap { padding-block: 40px 130px; }
    .sun { width: 46vw; right: -14vw; bottom: 40px; }
    .stars { right: 12vw; top: 30px; width: 64px; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Classes that replace inline styles (the Content-Security-Policy forbids inline styles). */
.defs { position: absolute; }
.pic-ocean { background: #DDEFFC; }
.pic-family { background: #FDE4EC; }
.pic-home { background: #E3F4E1; }
.bar .w64 { width: 64%; }
.bar .w29 { width: 29%; }
.bar .w100 { width: 100%; }
.eyebrow.on-deep { color: var(--sun); }
.select-all { user-select: all; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }