/* Links + opt-ins add-on styles. Brand colors and fonts come from site.config.json (written to /css/brand.css by build.mjs). */
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ background:var(--cream); }
  body{ font-family:var(--font-body); color:var(--navy); background:var(--cream); font-weight:600; line-height:1.45; -webkit-font-smoothing:antialiased; }
  a{ color:inherit; }
  .wrap{ max-width:520px; margin:0 auto; padding:28px 16px 0; overflow:hidden; }
  h1,h2,h3{ font-family:var(--font-heading); font-weight:700; line-height:1.05; }
  .scrawl{ font-family:var(--font-script); font-weight:700; color:var(--gold); line-height:1.05; }
  .hl{ background:linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%); padding:0 3px; }

  /* Top */
  .top{ text-align:center; position:relative; padding-top:6px; }
  .blob{ position:absolute; border-radius:50%; z-index:0; pointer-events:none; }
  .top .blob{ width:300px; height:300px; background:var(--sun); top:-120px; right:-140px; opacity:.55; }
  .top > *:not(.blob){ position:relative; z-index:1; }
  .avatar{ width:132px; height:132px; border-radius:50%; object-fit:cover; object-position:50% 28%; border:5px solid var(--off); box-shadow:0 6px 0 rgba(var(--navy-rgb),.12); }
  .name{ font-size:32px; margin-top:12px; }
  .handle{ display:inline-block; font-weight:800; font-size:15px; color:var(--muted); text-decoration:none; margin-top:2px; }
  .identity{ font-size:19px; font-weight:700; margin:14px auto 0; max-width:400px; }
  .fuel{ display:inline-block; margin-top:14px; font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.12em; background:var(--navy); color:var(--sun); padding:7px 14px; border-radius:999px; transform:rotate(-1.5deg); }

  /* Sections */
  section{ margin-top:30px; }
  .label{ font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .intro{ font-size:16px; margin-bottom:14px; }

  .card{ display:block; background:var(--off); border-radius:24px; padding:20px 20px 22px; box-shadow:0 6px 0 rgba(var(--navy-rgb),.12); margin-bottom:16px; text-decoration:none; position:relative; }
  .card h3{ font-size:23px; margin-bottom:6px; }
  .card p{ font-size:16px; }
  .card .em{ font-size:28px; display:block; margin-bottom:6px; }
  .mint{ background:var(--mint); } .sky{ background:var(--sky); } .peach{ background:var(--peach); } .pink{ background:var(--pink); }

  .btn{ display:inline-block; margin-top:14px; background:var(--green); color:var(--navy); font-family:var(--font-heading); font-weight:700; font-size:18px; padding:12px 22px; border-radius:999px; box-shadow:0 5px 0 var(--green-dk); text-decoration:none; transition:transform .08s, box-shadow .08s; }
  .btn:active{ transform:translateY(4px); box-shadow:0 1px 0 var(--green-dk); }
  .btn.long{ font-size:16px; padding:12px 18px; line-height:1.2; }
  .btn.navy{ background:var(--navy); color:var(--off); box-shadow:0 5px 0 var(--navy-dk); }
  .fine{ font-size:13px; color:var(--muted); margin-top:10px; font-weight:700; }

  /* Featured guide */
  .featured{ background:var(--sun); border-radius:28px; padding:26px 22px 26px; box-shadow:0 8px 0 rgba(var(--navy-rgb),.16); position:relative; overflow:hidden; }
  .featured .tag{ display:inline-block; background:var(--green); color:var(--navy); font-family:var(--font-heading); font-weight:700; font-size:14px; padding:5px 13px; border-radius:999px; transform:rotate(-3deg); }
  .featured h2{ font-size:31px; margin:12px 0 10px; max-width:330px; }
  .featured h2 .hl{ background:linear-gradient(transparent 58%, #fff 58%, #fff 92%, transparent 92%); }
  .featured p{ font-size:16.5px; max-width:360px; }
  .featured .scrawl{ color:var(--navy); font-size:22px; margin-top:14px; padding-right:96px; transform:rotate(-2deg); }
  .featured .brain{ position:absolute; right:12px; bottom:12px; width:98px; }

  /* Note-style about */
  .note{ background:var(--off); border-radius:10px; padding:26px 22px 22px; box-shadow:0 10px 22px rgba(var(--navy-rgb),.12); position:relative; transform:rotate(-1deg); }
  .note::before{ content:""; position:absolute; top:-12px; left:50%; width:96px; height:26px; margin-left:-48px; background:rgba(var(--sun-rgb),.75); transform:rotate(-3deg); border-radius:3px; }
  .note h2{ font-size:28px; margin-bottom:10px; }
  .note p{ font-size:16px; margin-bottom:12px; }
  .note p:last-child{ margin-bottom:0; }
  .about-photo{ float:right; width:96px; height:120px; object-fit:cover; object-position:50% 25%; border-radius:16px; margin:0 0 8px 12px; transform:rotate(2deg); border:4px solid #fff; box-shadow:0 5px 12px rgba(var(--navy-rgb),.15); }

  /* Build-on row */
  .tools{ display:grid; gap:14px; }

  /* Footer */
  footer{ margin:40px -16px 0; background:var(--navy); color:var(--off); text-align:center; padding:34px 20px 40px; border-radius:32px 32px 0 0; }
  footer img{ width:120px; }
  footer .tagline{ font-family:var(--font-heading); font-weight:600; font-size:min(23px, 5.2vw); line-height:1.25; margin-top:8px; }
  footer .tagline .sun{ color:var(--sun); }
  footer a.ig{ display:inline-block; margin-top:16px; font-weight:800; font-size:15px; color:var(--footer-link); text-decoration:none; }

  .nw{ white-space:nowrap; }
  /* Motion: content is visible by default; .js turns on the entrance states. */
  @media (prefers-reduced-motion: no-preference){
    .js .rise{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
    .js .rise.in{ opacity:1; transform:none; }
    .js .note.rise{ transform:translateY(22px) rotate(-1deg); }
    .js .note.rise.in{ transform:rotate(-1deg); }
    .js .top > .avatar{ animation:pop .7s cubic-bezier(.3,1.5,.5,1) both; }
    .js .top > .name{ animation:up .6s .15s cubic-bezier(.2,.7,.2,1) both; }
    .js .top > .handle{ animation:up .6s .25s cubic-bezier(.2,.7,.2,1) both; }
    .js .top > div .fuel{ animation:stick .7s .4s cubic-bezier(.3,1.6,.5,1) both; }
    .js .top > .identity{ animation:up .6s .55s cubic-bezier(.2,.7,.2,1) both; }
    .brain, footer img{ animation:breathe 4.5s ease-in-out infinite; transform-origin:50% 90%; }
    .btn{ transition:transform .15s ease, box-shadow .15s ease; }
    .btn:active{ animation:none; }
    @media (hover:hover){
      .btn:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--green-dk); }
      .btn.navy:hover{ box-shadow:0 8px 0 var(--navy-dk); }
    }
  }
  @keyframes pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
  @keyframes up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  @keyframes stick{ from{ opacity:0; transform:rotate(-12deg) scale(.7); } to{ opacity:1; transform:rotate(-1.5deg); } }
  @keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.045) translateY(-2px); } }
  a, .btn{ -webkit-tap-highlight-color:transparent; }

  [hidden]{ display:none !important; }
  @media (min-width:560px){ .wrap{ padding-top:44px; } }

  /* Opt-in pages */
  .back{ display:inline-block; font-weight:800; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:14px; }
  .hero{ border-radius:28px; padding:26px 22px; box-shadow:0 8px 0 rgba(var(--navy-rgb),.14); position:relative; overflow:hidden; }
  .hero.sun{ background:var(--sun); }
  .hero.sun .hl{ background:linear-gradient(transparent 58%, #fff 58%, #fff 92%, transparent 92%); }
  .hero .tag{ display:inline-block; background:var(--green); color:var(--navy); font-family:var(--font-heading); font-weight:700; font-size:14px; padding:5px 13px; border-radius:999px; transform:rotate(-3deg); }
  .hero h1{ font-size:34px; margin:12px 0 10px; }
  .hero p{ font-size:16.5px; }
  .checks{ list-style:none; }
  .checks li{ font-size:16px; font-weight:700; padding:9px 0 9px 44px; position:relative; }
  .checks li::before{ content:"✓"; position:absolute; left:0; top:7px; width:30px; height:30px; border-radius:10px; background:var(--green); color:var(--navy); font-weight:800; display:flex; align-items:center; justify-content:center; transform:rotate(-6deg); }
  .checks li:nth-child(even)::before{ transform:rotate(5deg); }
  form .field{ margin-bottom:12px; }
  form label{ display:block; font-weight:800; font-size:14px; margin-bottom:5px; }
  form label .opt{ font-weight:600; color:var(--muted); }
  form input{ width:100%; font:inherit; font-size:17px; color:var(--navy); background:#fff; border:2.5px solid rgba(var(--navy-rgb),.18); border-radius:14px; padding:12px 14px; outline:none; }
  form input:focus{ border-color:var(--navy); box-shadow:0 0 0 4px rgba(var(--sun-rgb),.55); }
  form .btn{ width:100%; text-align:center; border:0; cursor:pointer; font-size:19px; padding:14px 22px; }
  form .btn[disabled]{ opacity:.7; cursor:wait; }
  .consent{ font-size:13px; color:var(--muted); margin-top:12px; font-weight:700; }
  .err{ color:var(--error); font-weight:800; font-size:14px; margin-top:10px; }
  .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .done{ text-align:center; padding:8px 4px; }
  .done .big{ font-size:46px; display:block; }
  .done h2{ font-size:28px; margin:6px 0 8px; }
  .done p{ font-size:16px; }
  .strip{ display:flex; gap:14px; align-items:center; }
  .strip img{ width:64px; height:64px; border-radius:50%; object-fit:cover; object-position:50% 28%; border:3px solid #fff; box-shadow:0 4px 10px rgba(var(--navy-rgb),.15); flex:none; }
  .strip p{ font-size:15px; }
  .strip a{ font-weight:800; }

  /* Confirmation + download pages */
  .hero.confirm{ padding-top:22px; }
  .hero.confirm .brain{ display:block; width:110px; margin:0 auto 4px; animation:breathe 4.5s ease-in-out infinite; transform-origin:50% 90%; }
  .hero.confirm h1{ text-align:center; margin-top:4px; }
  .hero p + p{ margin-top:10px; }
  .hero p.small{ font-size:14.5px; font-weight:700; color:rgba(var(--navy-rgb),.8); } /* softer than body text, still 5.7:1 on the darkest hero color (sun) */
  .downloads{ display:grid; gap:12px; margin-top:18px; }
  .downloads .btn{ margin-top:0; text-align:center; }
  @media (prefers-reduced-motion: reduce){ .hero.confirm .brain{ animation:none; } }
  .subj{ background:#fff; padding:1px 7px; border-radius:7px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
  .dl-notes{ margin-top:18px; display:grid; gap:10px; }
  .dl-notes p{ display:flex; gap:10px; align-items:flex-start; background:rgba(255,255,255,.6); border-radius:14px; padding:10px 12px; font-size:14.5px; }
  .dl-notes .em{ font-size:20px; line-height:1.2; flex:none; }
  /* Footer legal line + content pages */
  footer .legal{ margin-top:14px; font-size:12px; line-height:1.6; color:var(--footer-link); font-weight:600; }
  footer .legal a{ color:var(--footer-link); }
  .doc{ padding:24px 20px; }
  .doc h1{ font-size:30px; margin-bottom:8px; }
  .doc .meta{ font-size:13px; font-weight:700; margin-bottom:16px; }
  .doc h2{ font-size:20px; margin:22px 0 8px; }
  .doc h2[id]{ scroll-margin-top:16px; }
  .doc h3{ font-size:17px; margin:16px 0 6px; }
  .doc p, .doc li{ font-size:15px; line-height:1.55; }
  .doc p{ margin-bottom:10px; }
  .doc ul, .doc ol{ padding-left:22px; margin-bottom:10px; }
  .doc li{ margin-bottom:4px; }
  .doc a{ font-weight:800; word-break:break-word; }
  .suggest{ margin-top:8px; font-size:14.5px; font-weight:700; background:#fff7d6; border-radius:12px; padding:8px 10px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .suggest[hidden]{ display:none; }
  .suggest b{ overflow-wrap:anywhere; }
  .suggest .fix{ font:inherit; font-family:var(--font-heading); font-weight:700; font-size:14px; background:var(--navy); color:var(--off); border:0; border-radius:999px; padding:6px 12px; cursor:pointer; }
  .intro-video{ margin:16px auto 4px; max-width:300px; scroll-margin-top:16px; }
  .intro-video figcaption{ font-size:22px; color:var(--navy); text-align:center; margin-bottom:6px; transform:rotate(-1.5deg); }
  .intro-video video{ display:block; width:100%; height:auto; aspect-ratio:9/16; border-radius:18px; background:var(--navy); box-shadow:0 6px 0 rgba(var(--navy-rgb),.16); }