/* Shared landing styles — extracted verbatim from index.html <style> on 2026-07-01. Keep in sync with index.html. Do not restyle here. */

  /* ---------- Tokens ---------- */
  :root{
    --bg:#FAF6F0;
    --bg-raised:#FFFFFF;
    --bg-subtle:#F4EFE7;
    --text:#2C2621;
    --text-2:#534A42;
    --text-3:#7D7065;
    --bd:#EDE8E3;
    --bd-2:#D9D1C4;
    --hv:#7A8B5C;
    --hv-d:#5E6E45;
    --hv-l:#EEF2E5;
    --hv-l2:#E4EBD6;
    --amber:#C08B5C;
    --amber-l:#FBF0E6;
    --coral:#C25B4D;
    --coral-l:#FBEAE6;
    --sky:#6B8CAE;
    --sky-l:#E7EEF6;
    --blossom:#D88BA1;
    --blossom-l:#FBEAEF;
    --shadow-sm:0 1px 2px rgba(44,38,33,.04), 0 4px 12px rgba(44,38,33,.05);
    --shadow-md:0 4px 12px rgba(44,38,33,.06), 0 16px 40px rgba(44,38,33,.08);
    --shadow-lg:0 8px 24px rgba(44,38,33,.08), 0 24px 64px rgba(44,38,33,.12);
    --nav-bg:rgba(250,246,240,.92);
    --radius:14px;
    --radius-lg:22px;
  }
  html[data-theme="dark"]{
    --bg:#1C1B18;
    --bg-raised:#262420;
    --bg-subtle:#2D2B27;
    --text:#F2EDE6;
    --text-2:#C0B8AE;
    --text-3:#8E867E;
    --bd:#36332F;
    --bd-2:#48433D;
    --hv:#9DAE7A;
    --hv-d:#B8C68F;
    --hv-l:#2B3520;
    --hv-l2:#36402A;
    --amber-l:#3A2D20;
    --coral-l:#3A201D;
    --sky-l:#1F2A37;
    --blossom-l:#3A2027;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.4);
    --shadow-md:0 4px 12px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
    --shadow-lg:0 8px 24px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.6);
    --nav-bg:rgba(28,27,24,.92);
  }

  /* ---------- Reset ---------- */
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-feature-settings:"ss01" on, "cv11" on;
    transition:background .25s, color .25s;
  }
  img{max-width:100%;display:block}
  a{color:var(--hv-d);text-decoration:none;font-weight:600}
  a:hover{color:var(--hv)}
  button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}

  h1,h2,h3{
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    color:var(--text);
    letter-spacing:-.01em;
    line-height:1.18;
  }
  h1{font-size:clamp(34px,4vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.05}
  h1 em{font-style:italic;color:var(--hv-d);font-weight:500}
  h2{font-size:clamp(28px,4vw,44px)}
  h3{font-size:clamp(20px,2.4vw,26px)}

  /* Container width tracks Apple's marketing-page standard
     (~980-1100px). The margins on either side aren't wasted space —
     they're the frame around the content. Line lengths stay
     readable, hero compositions stay anchored at the size they were
     designed for, and large displays don't stretch type into a
     tracking nightmare. Inside padding stays generous on either
     edge so the content never butts up against the rule. */
  .container{max-width:1080px;margin:0 auto;padding:0 28px}

  .eyebrow{
    font-size:11px;
    font-weight:800;
    color:var(--hv-d);
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:18px;
  }

  /* ---------- Banner ---------- */
  .pre-release-banner{
    background:linear-gradient(180deg, var(--amber-l), var(--bg-subtle));
    color:var(--text-2);
    text-align:center;
    padding:10px 20px;
    font-size:13.5px;
    font-weight:600;
    border-bottom:1px solid var(--bd);
  }
  .pre-release-banner a{margin-left:6px}

  /* ---------- Nav ---------- */
  .nav{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    background:var(--nav-bg);
    border-bottom:1px solid var(--bd);
  }
  .nav-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 28px;
    max-width:1080px;
    margin:0 auto;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:20px;
    letter-spacing:-.01em;
  }
  .brand-mark{
    width:32px;
    height:32px;
    background:transparent;
    display:inline-block;
    flex:none;
  }
  .brand-mark img{
    width:100%;
    height:100%;
    display:block;
  }
  .brand-tag{
    font-family:'Nunito',sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--amber);
    background:var(--amber-l);
    border-radius:999px;
    padding:3px 9px;
    margin-left:6px;
  }
  .nav-links{display:flex;gap:22px;align-items:center}
  .nav-links a{
    color:var(--text-2);
    font-weight:500;
    font-size:14.5px;
    transition:color .15s;
  }
  .nav-links a:hover{color:var(--hv-d)}
  .mobile-menu-toggle,
  .mobile-menu-backdrop,
  .mobile-menu-header{display:none}
  .nav-cta{
    background:var(--hv);
    color:#FAF6F0 !important;
    padding:8px 16px;
    border-radius:999px;
    font-weight:600;
    font-size:13.5px;
    transition:transform .15s, background .15s;
  }
  .nav-cta:hover{background:var(--hv-d);transform:translateY(-1px)}
  .theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    color:var(--text-2);
    transition:background .15s, color .15s;
  }
  .theme-toggle:hover{background:var(--bg-subtle);color:var(--hv-d)}
  .theme-toggle .moon{display:none}
  .theme-toggle .sun{display:none}
  html[data-theme="dark"] .theme-toggle .sun{display:block;width:16px;height:16px}
  html[data-theme="light"] .theme-toggle .moon{display:block;width:16px;height:16px}
  .theme-toggle-label{display:none}

  @media (max-width:760px){
    .nav-inner{padding:12px 18px}
    .brand{font-size:19px}
    .brand-tag{display:none}
    .mobile-menu-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:56px;
      height:42px;
      border:1px solid rgba(122,139,92,.18);
      border-radius:999px;
      color:var(--text);
      background:rgba(255,255,255,.58);
      box-shadow:var(--shadow-sm);
      cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    html[data-theme="dark"] .mobile-menu-toggle{
      background:rgba(38,36,32,.72);
      border-color:rgba(255,255,255,.08);
    }
    .mobile-menu-toggle span,
    .mobile-menu-toggle::before,
    .mobile-menu-toggle::after{
      content:"";
      display:block;
      width:18px;
      height:2px;
      border-radius:999px;
      background:currentColor;
      transition:transform .18s ease, opacity .18s ease;
    }
    .mobile-menu-toggle{
      flex-direction:column;
      gap:4px;
    }
    body.mobile-menu-open .mobile-menu-toggle::before{transform:translateY(6px) rotate(45deg)}
    body.mobile-menu-open .mobile-menu-toggle span{opacity:0}
    body.mobile-menu-open .mobile-menu-toggle::after{transform:translateY(-6px) rotate(-45deg)}
    .mobile-menu-backdrop{
      display:block;
      position:fixed;
      inset:0;
      /* Must sit BELOW .nav (z-index:50), which is its own stacking context
         (it sets both z-index and backdrop-filter). The drawer (.nav-links)
         lives inside .nav, so its z-index:60 is scoped to that context and
         cannot beat a root-level backdrop at 58 -- that let the backdrop
         paint over the menu links and swallow every tap, so tapping an item
         only closed the menu instead of navigating. Keeping the backdrop
         under .nav lets the drawer receive taps while still dimming the page. */
      z-index:49;
      background:rgba(28,27,24,.22);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease;
    }
    body.mobile-menu-open .mobile-menu-backdrop{
      opacity:1;
      pointer-events:auto;
    }
    body.mobile-menu-open{overflow:hidden}
    .nav-links{
      position:fixed;
      top:calc(52px + env(safe-area-inset-top));
      left:14px;
      z-index:60;
      display:flex;
      flex-direction:column;
      align-items:stretch;
      gap:0;
      width:min(344px,calc(100vw - 28px));
      max-height:calc(100vh - 76px - env(safe-area-inset-top));
      overflow:auto;
      padding:14px 12px;
      border:1px solid rgba(255,255,255,.42);
      border-radius:28px;
      background:rgba(255,255,255,.96);
      backdrop-filter:saturate(160%) blur(22px);
      -webkit-backdrop-filter:saturate(160%) blur(22px);
      box-shadow:0 22px 54px rgba(44,38,33,.18);
      transform:translateX(calc(-100% - 28px));
      opacity:0;
      pointer-events:none;
      transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
    }
    html[data-theme="dark"] .nav-links{
      background:rgba(38,36,32,.96);
      border-color:rgba(255,255,255,.08);
      box-shadow:0 22px 54px rgba(0,0,0,.42);
    }
    body.mobile-menu-open .nav-links{
      transform:translateX(0);
      opacity:1;
      pointer-events:auto;
    }
    .mobile-menu-header{
      display:flex;
      align-items:center;
      gap:12px;
      padding:6px 4px 12px;
      order:-2;
    }
    .mobile-menu-header .menu-avatar{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:40px;
      height:40px;
      border-radius:999px;
      background:var(--hv-l);
      color:var(--hv-d);
      font-family:'Fraunces',Georgia,serif;
      font-weight:600;
    }
    .mobile-menu-header strong{
      display:block;
      color:var(--text);
      font-size:15px;
      line-height:1.15;
    }
    .mobile-menu-header span:last-child{
      display:block;
      color:var(--text-3);
      font-size:12px;
      line-height:1.2;
      margin-top:2px;
    }
    .nav-links a,
    .nav-links .theme-toggle{
      width:100%;
      min-height:52px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:12px;
      padding:0 6px;
      border-radius:12px;
      color:var(--text);
      font-size:15px;
      font-weight:700;
      text-align:left;
    }
    .nav-links a + a,
    .nav-links a + .theme-toggle,
    .nav-links .theme-toggle + a{
      border-top:1px solid rgba(217,209,196,.55);
    }
    html[data-theme="dark"] .nav-links a + a,
    html[data-theme="dark"] .nav-links a + .theme-toggle,
    html[data-theme="dark"] .nav-links .theme-toggle + a{
      border-top-color:rgba(255,255,255,.08);
    }
    .nav-links a:hover,
    .nav-links .theme-toggle:hover{
      background:var(--bg-subtle);
      color:var(--hv-d);
      text-decoration:none;
    }
    .nav-links a::before,
    .nav-links .theme-toggle::before{
      content:attr(data-menu-icon);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:30px;
      height:30px;
      flex:none;
      border-radius:8px;
      background:var(--hv-l);
      color:var(--hv-d);
      font-size:13px;
      font-weight:800;
    }
    .nav-links .theme-toggle::before{content:"☾"}
    html[data-theme="dark"] .nav-links .theme-toggle::before{content:"☀"}
    .nav-links .theme-toggle{
      height:auto;
      border-radius:12px;
      transition:none;
    }
    .nav-links .theme-toggle .moon,
    .nav-links .theme-toggle .sun{display:none !important}
    .theme-toggle-label{display:inline}
    .nav-cta{
      order:-1;
      min-height:44px !important;
      margin:0 0 8px;
      padding:0 14px !important;
      border-radius:10px;
      background:var(--hv-l);
      color:var(--hv-d) !important;
    }
    .nav-cta::before{
      content:"→" !important;
      background:rgba(122,139,92,.15) !important;
    }
  }

  /* ---------- Hero ---------- */
  .hero{padding:72px 0 104px}
  .hero-grid{
    display:grid;
    grid-template-columns:1.7fr 1fr;
    gap:56px;
    align-items:center;
  }
  /* Keep both lines of the hero headline — "The mental load is real."
     and "Let an app carry it." — on single lines at desktop widths.
     The left grid column claims a larger share so the headline column
     has the room it needs, and white-space:nowrap on the whole h1
     ensures neither sentence breaks mid-line. The explicit <br>
     between the two still produces the visual two-line stacking.
     Below 900px the hero stacks vertically and wrapping is allowed
     normally so very narrow viewports don't overflow horizontally. */
  .hero h1{ white-space:nowrap; }
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:48px}
    .hero h1{ white-space:normal; }
  }
  .hero p.lead{
    font-size:clamp(17px,2vw,20px);
    color:var(--text-2);
    line-height:1.6;
    margin-top:20px;
    max-width:560px;
  }
  .hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 22px;
    border-radius:999px;
    font-weight:700;
    font-size:14.5px;
    transition:transform .15s, background .15s, box-shadow .15s;
    text-decoration:none;
    cursor:pointer;
    border:none;
  }
  .btn-primary{
    background:var(--hv);
    color:#FAF6F0 !important;
    box-shadow:var(--shadow-sm);
  }
  .btn-primary:hover{background:var(--hv-d);transform:translateY(-1px);box-shadow:var(--shadow-md)}
  .btn-secondary{
    background:var(--bg-raised);
    color:var(--text) !important;
    border:1px solid var(--bd-2);
  }
  .btn-secondary:hover{border-color:var(--hv);color:var(--hv-d) !important}
  .hero-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px 26px;
    margin-top:32px;
    color:var(--text-3);
    font-size:13.5px;
    font-weight:500;
  }
  .hero-meta span{display:inline-flex;align-items:center;gap:6px}

  /* Hero magnet explainer line — sits between CTA buttons and meta */
  .hero-magnet-line{
    margin-top:14px;
    font-size:14px;
    color:#4A6741;
    font-style:italic;
    max-width:520px;
    line-height:1.45;
  }

  /* ---------- Sections ---------- */
  section{padding:96px 0}
  .section-alt{background:var(--bg-subtle)}
  .section-title{
    text-align:center;
    margin-bottom:8px;
  }
  .section-intro{
    text-align:center;
    color:var(--text-2);
    font-size:clamp(16px,1.6vw,18px);
    max-width:680px;
    margin:0 auto 56px;
    line-height:1.6;
  }

  /* ---------- Mental Load section ---------- */
  .mental-load-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
    margin-top:48px;
  }
  @media (max-width:760px){
    .mental-load-grid{grid-template-columns:1fr}
  }
  .load-card{
    background:var(--bg-raised);
    border:1px solid var(--bd);
    border-radius:var(--radius);
    padding:28px;
    box-shadow:var(--shadow-sm);
  }
  .load-card .load-from{
    color:var(--text-3);
    font-size:13px;
    font-weight:600;
    margin-bottom:6px;
    letter-spacing:.4px;
  }
  .load-card .load-strain{
    color:var(--coral);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:21px;
    line-height:1.35;
    margin-bottom:14px;
  }
  .load-card .load-fix{
    color:var(--text-2);
    font-size:15px;
    line-height:1.6;
  }
  .load-card .load-fix strong{color:var(--hv-d);font-weight:700}

  /* ---------- Surfaces tour ---------- */
  .surfaces-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:48px 32px;
    margin-top:64px;
  }
  @media (max-width:980px){
    .surfaces-grid{grid-template-columns:repeat(2, 1fr);gap:48px 24px}
  }
  @media (max-width:600px){
    .surfaces-grid{grid-template-columns:1fr;gap:64px}
  }
  .surface{text-align:left}
  .surface h3{margin-bottom:8px;font-size:21px}
  .surface p{color:var(--text-2);font-size:15px;line-height:1.6}

  /* ---------- Feature card grid (no device frame) ---------- */
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
    margin-top:40px;
  }
  @media (max-width:760px){ .feature-grid{grid-template-columns:1fr} }
  .feature-card{
    background:var(--bg-raised);
    border:1px solid var(--bd);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow-sm);
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .feature-card .feature-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--hv);
  }
  .feature-card h3{
    font-family:'Fraunces',Georgia,serif;
    font-weight:600;
    font-size:21px;
    line-height:1.25;
    margin:0;
    color:var(--text);
  }
  .feature-card p{
    color:var(--text-2);
    font-size:15px;
    line-height:1.6;
    margin:0;
  }
  .feature-card .pull{
    color:var(--coral);
    font-style:italic;
    font-family:'Fraunces',Georgia,serif;
    font-size:18px;
    line-height:1.35;
    margin:0 0 4px;
  }
  .feature-card.span-2{ grid-column:1/-1; }
  @media (max-width:760px){ .feature-card.span-2{ grid-column:auto; } }

  /* ---------- Privacy ---------- */
  .privacy-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:48px;
  }
  @media (max-width:780px){
    .privacy-grid{grid-template-columns:1fr}
  }
  .privacy-card{
    background:var(--bg-raised);
    border:1px solid var(--bd);
    border-radius:var(--radius);
    padding:26px;
    box-shadow:var(--shadow-sm);
  }
  .privacy-card .ico{
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--hv-l);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    margin-bottom:14px;
  }
  .privacy-card h3{font-size:18px;margin-bottom:8px}
  .privacy-card p{color:var(--text-2);font-size:14.5px;line-height:1.6}

  /* ---------- Built for ---------- */
  .built-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:center;
    margin:32px auto 0;
    max-width:780px;
  }
  .chip{
    background:var(--bg-raised);
    border:1px solid var(--bd-2);
    color:var(--text);
    border-radius:999px;
    padding:8px 16px;
    font-weight:600;
    font-size:14px;
  }

  /* ---------- FAQ ---------- */
  .faq{max-width:760px;margin:0 auto}
  .faq details{
    border-bottom:1px solid var(--bd);
    padding:18px 0;
  }
  .faq summary{
    font-weight:600;
    cursor:pointer;
    font-size:17px;
    color:var(--text);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .faq summary::after{
    content:'+';
    font-size:22px;
    color:var(--text-3);
    font-weight:300;
    transition:transform .2s;
  }
  .faq details[open] summary::after{content:'−'}
  .faq summary::-webkit-details-marker{display:none}
  .faq-body{
    padding-top:14px;
    color:var(--text-2);
    line-height:1.7;
    font-size:15px;
  }

  /* ---------- Signup ---------- */
  .signup-wrap{
    background:var(--bg-raised);
    border:1px solid var(--bd);
    border-radius:var(--radius-lg);
    padding:48px;
    box-shadow:var(--shadow-md);
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:48px;
    align-items:center;
  }
  @media (max-width:780px){
    .signup-wrap{grid-template-columns:1fr;padding:32px}
  }
  .signup-form{display:flex;flex-direction:column;gap:14px}
  .signup-form input[type="email"]{
    padding:14px 18px;
    border:1px solid var(--bd-2);
    border-radius:12px;
    font-size:16px;
    font-family:inherit;
    background:var(--bg);
    color:var(--text);
    transition:border-color .15s;
  }
  .signup-form input[type="email"]:focus{
    outline:none;
    border-color:var(--hv);
    box-shadow:0 0 0 3px var(--hv-l);
  }
  .signup-form .signup-meta{
    font-size:12.5px;
    color:var(--text-3);
    line-height:1.55;
  }
  .signup-msg{
    padding:12px 14px;
    border-radius:10px;
    font-size:14px;
  }
  .signup-msg.success{background:var(--hv-l);color:var(--hv-d);border:1px solid var(--hv)}
  .signup-msg.error{background:var(--coral-l);color:var(--coral);border:1px solid var(--coral)}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* ---------- Footer ---------- */
  footer{
    background:var(--bg-subtle);
    border-top:1px solid var(--bd);
    padding:48px 0 32px;
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    color:var(--text-3);
    font-size:14px;
  }
  .footer-links{display:flex;gap:18px;flex-wrap:wrap}
  .footer-links a{color:var(--text-2);font-weight:500}
  .footer-disclaimer{
    margin-top:28px;
    font-size:12.5px;
    color:var(--text-3);
    line-height:1.65;
    max-width:760px;
  }

  .signup-cta{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
  .signup-cta .btn{ font-size:16px; padding:14px 20px; }
  .signup-cta .meta{ font-size:13px; color:var(--text-3); }

  /* ---------- Subscribe modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0;
    background:rgba(28,27,24,0.55);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center;
    padding:20px; z-index:1000;
    opacity:0; transition:opacity .18s ease;
  }
  .modal-backdrop.is-open{ display:flex; opacity:1; }
  .modal-dialog{
    background:var(--bg-raised);
    color:var(--text);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    width:100%; max-width:480px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:32px;
    position:relative;
    transform:translateY(8px);
    transition:transform .18s ease;
    border:1px solid var(--bd);
  }
  .modal-backdrop.is-open .modal-dialog{ transform:translateY(0); }
  .modal-close{
    position:absolute; top:14px; right:14px;
    width:32px; height:32px;
    border:none; border-radius:8px;
    background:transparent; color:var(--text-3);
    cursor:pointer; font-size:20px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .modal-close:hover{ background:var(--bg-subtle); color:var(--text); }
  .modal-eyebrow{
    text-transform:uppercase; letter-spacing:.12em;
    font-size:11px; font-weight:700;
    color:var(--hv); margin-bottom:8px;
  }
  .modal-title{
    font-family:'Fraunces',Georgia,serif;
    font-size:26px; font-weight:600;
    margin:0 0 8px; color:var(--text); letter-spacing:-.01em;
  }
  .modal-sub{
    font-size:14.5px; line-height:1.55;
    color:var(--text-2); margin:0 0 20px;
  }
  .modal-form .field{ margin-bottom:14px; }
  .modal-form label{
    display:block; font-size:12px; font-weight:600;
    color:var(--text-2); margin-bottom:6px;
  }
  .modal-form label .req{ color:var(--coral); margin-left:2px; }
  .modal-form input[type=email],
  .modal-form input[type=text]{
    width:100%; box-sizing:border-box;
    padding:11px 13px;
    border-radius:10px;
    border:1px solid var(--bd-2);
    background:var(--bg);
    color:var(--text);
    font:inherit; font-size:15px;
  }
  .modal-form input[type=email]:focus,
  .modal-form input[type=text]:focus{
    outline:none;
    border-color:var(--hv);
    box-shadow:0 0 0 3px rgba(122,139,92,.18);
  }
  .modal-form .gdpr{
    display:flex; align-items:flex-start; gap:10px;
    padding:12px 14px; border-radius:10px;
    background:var(--bg-subtle);
    margin:6px 0 16px; cursor:pointer;
    font-size:13px; color:var(--text-2); line-height:1.5;
  }
  .modal-form .gdpr input[type=checkbox]{
    margin-top:3px; accent-color:var(--hv);
    width:16px; height:16px; flex-shrink:0;
  }
  .modal-form .submit{
    width:100%; padding:13px 18px;
    border-radius:12px;
    background:var(--hv); color:#fff; border:none;
    font:inherit; font-weight:600; font-size:15px;
    cursor:pointer; transition:background .15s ease;
  }
  .modal-form .submit:hover:not(:disabled){ background:var(--hv-d); }
  .modal-form .submit:disabled{ opacity:.6; cursor:default; }
  .modal-msg{
    margin-top:14px; padding:12px 14px;
    border-radius:10px; font-size:13.5px; line-height:1.55;
  }
  .modal-msg.success{
    background:var(--hv-l); color:var(--hv-d);
    border:1px solid rgba(122,139,92,.25);
  }
  .modal-msg.error{
    background:var(--coral-l); color:var(--coral);
    border:1px solid rgba(194,91,77,.2);
  }
  .modal-fineprint{
    margin-top:16px; font-size:11.5px;
    color:var(--text-3); line-height:1.55;
  }
  .modal-fineprint a{ color:var(--text-2); }
  /* Beta-mode "what happens next" explainer card. Calm color block
     so caregivers feel briefed rather than tricked. */
  .modal-beta-explainer{
    background:var(--hv-l);
    border-radius:10px;
    padding:14px 16px;
    margin:0 0 18px;
    font-size:14px;
    line-height:1.55;
    color:var(--text);
  }
  .modal-beta-explainer em{
    color:var(--text-2);
    font-style:normal;
    display:block;
    margin-top:6px;
    font-size:13px;
  }
  /* Beta-mode "what's actually expected of you" block. Sits ABOVE the
     TestFlight explainer so the reader sees the ask (use the app +
     leave honest feedback) before the install mechanics. The amber
     tint differentiates it from the sage beta-explainer below so the
     two blocks don't read as a single wall of color. */
  .modal-beta-role{
    background:var(--amber-l);
    border-left:3px solid var(--amber);
    border-radius:10px;
    padding:14px 16px;
    margin:0 0 14px;
    font-size:13.5px;
    line-height:1.55;
    color:var(--text);
  }
  .modal-beta-role strong{
    color:var(--text);
  }
  .modal-beta-role ul{
    margin:8px 0 6px;
    padding:0;
    list-style:none;
  }
  .modal-beta-role li{
    padding:2px 0;
    color:var(--text-2);
    font-style:italic;
    font-size:13px;
  }
  .modal-beta-role li::before{
    content:"— ";
    color:var(--text-3);
    font-style:normal;
  }
  .modal-skip-row{
    margin:10px 0 0;
    text-align:center;
    font-size:13px;
  }
  .modal-skip-link{
    color:var(--text-2);
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .modal-skip-link:hover{ color:var(--text); }

  /* ---------- App-peek: real app screenshots on landing pages ----------
     Ported from index.html so the segment pages can show the ACTUAL app
     screens behind each lead magnet. .phone-frame + the dark-mode
     screenshot swap are verbatim from index.html; .app-peek is the 2-up
     layout used inside each page's "See it in the app" section.
     Concentric bezel: outer radius (52) minus the padding (14) equals
     the inner/screen radius (38); ::after draws a Dynamic Island cutout
     so this reads as an actual iPhone, not a generic rounded card. */
  .phone-frame{
    margin:0 auto;
    max-width:340px;
    border-radius:52px;
    padding:14px;
    background:linear-gradient(160deg, #2A2722, #1A1816);
    box-shadow:var(--shadow-lg);
    position:relative;
    overflow:hidden;
  }
  .phone-frame::before{
    content:'';
    position:absolute;
    top:14px;left:14px;right:14px;bottom:14px;
    border-radius:38px;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.05);
    pointer-events:none;
  }
  .phone-frame::after{
    content:'';
    position:absolute;
    top:2.6%;
    left:50%;
    transform:translateX(-50%);
    width:30%;
    aspect-ratio:3.2/1;
    min-width:34px;
    border-radius:999px;
    background:#000;
    box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08);
    z-index:5;
    pointer-events:none;
  }
  .phone-frame img{
    border-radius:38px;
    display:block;
    width:100%;
    height:auto;
  }
  /* Dark-mode screenshots: swap each app screenshot for its dark-rendered
     variant when the site is in dark mode. Keyed off data-theme (manual
     toggle), matching index.html. Degrades gracefully: a browser without
     content-replacement keeps the light shot. */
  html[data-theme="dark"] img[src="/screenshots/home.png"]{content:url('/screenshots/home-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/schedule.png"]{content:url('/screenshots/schedule-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/patterns.png"]{content:url('/screenshots/patterns-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/cues.png"]{content:url('/screenshots/cues-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/milestones.png"]{content:url('/screenshots/milestones-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/goals.png"]{content:url('/screenshots/goals-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/search.png"]{content:url('/screenshots/search-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/profile-hub.png"]{content:url('/screenshots/profile-hub-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/calm-tools.png"]{content:url('/screenshots/calm-tools-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/sensory-profile.png"]{content:url('/screenshots/sensory-profile-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/lock.png"]{content:url('/screenshots/lock-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/handoff.png"]{content:url('/screenshots/handoff-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/stuck.png"]{content:url('/screenshots/stuck-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/empty-state.png"]{content:url('/screenshots/empty-state-dark.png')}
  /* Eleanor (elderly-care demo) shots — used only on the aging-parents page. */
  html[data-theme="dark"] img[src="/screenshots/home-eleanor.png"]{content:url('/screenshots/home-eleanor-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/patterns-eleanor.png"]{content:url('/screenshots/patterns-eleanor-dark.png')}
  /* Matched-profile shots — eli (seizure), felix (medically-complex), casey (Type 1). */
  html[data-theme="dark"] img[src="/screenshots/patterns-eli.png"]{content:url('/screenshots/patterns-eli-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/schedule-eli.png"]{content:url('/screenshots/schedule-eli-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/home-felix.png"]{content:url('/screenshots/home-felix-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/schedule-felix.png"]{content:url('/screenshots/schedule-felix-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/home-casey.png"]{content:url('/screenshots/home-casey-dark.png')}
  html[data-theme="dark"] img[src="/screenshots/patterns-casey.png"]{content:url('/screenshots/patterns-casey-dark.png')}

  .app-peek{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:44px;
    max-width:760px;
    margin:48px auto 0;
    align-items:start;
  }
  @media (max-width:600px){
    .app-peek{grid-template-columns:1fr;gap:56px;max-width:340px}
  }
  .app-peek > div{min-width:0}
  .app-peek .phone-frame{max-width:300px}
  .app-peek .cap{
    text-align:center;
    color:var(--text-2);
    font-size:14.5px;
    line-height:1.55;
    margin:18px auto 0;
    max-width:300px;
  }