:root {
    --ink: #14201a; --green-dark: #0d2f1b; --green-deep: #0a2414; --green: #1d6b3d;
    --green-bright: #4ade80; --amber: #d97706; --amber-dark: #b45309;
    --paper: #f4faf5; --line: #dbe7dd; --muted: #52655a;
  }
  * { box-sizing: border-box; }
  body { font-family: Inter, system-ui, sans-serif; margin: 0; color: var(--ink);
         line-height: 1.65; font-size: 17px;
         background: linear-gradient(180deg, #ffffff 0%, #eef7f0 60%, #e7f3ea 100%); }
  h1, h2, .amount { font-family: Calistoga, Georgia, serif; font-weight: 400; }
  h2 { font-size: 1.65rem; margin: 0 0 1.2rem; letter-spacing: .01em; }
  a { color: var(--green); }
  section { padding: 3.2rem 0; }
  section + section { border-top: 1px solid var(--line); }
  .wrap { max-width: 780px; margin: 0 auto; padding: 0 1.25rem; }
  .icon { width: 22px; height: 22px; stroke: var(--green); stroke-width: 2;
          fill: none; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

  /* buttons */
  .cta { display: inline-block; background: var(--amber); color: #fff; text-decoration: none;
         padding: .9rem 1.8rem; border-radius: 8px; font-weight: 700; font-size: 1.02rem;
         border: 0; cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
         box-shadow: 0 2px 10px rgba(217,119,6,.35); }
  .cta:hover { background: var(--amber-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(217,119,6,.4); }
  .cta:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible
    { outline: 3px solid var(--green-bright); outline-offset: 2px; }
  .cta-ghost { display: inline-block; color: #cfe3d6; text-decoration: none;
               padding: .9rem 1rem; font-weight: 550; transition: color .2s ease; }
  .cta-ghost:hover { color: #fff; }

  /* header / hero */
  header { position: relative; overflow: hidden;
    background: linear-gradient(160deg, var(--green-deep) 0%, var(--green-dark) 55%, #144424 100%);
    color: #fff; }
  header > .wrap { position: relative; z-index: 1; }
  header::before, header::after, .hero-glow { content: ""; position: absolute; border-radius: 50%;
    filter: blur(58px); z-index: 0; pointer-events: none; }
  header::before { width: 40rem; height: 40rem; top: -10rem; right: -5rem; opacity: .9;
    background: radial-gradient(circle, rgba(74,222,128,.85), transparent 60%);
    animation: heroDrift1 11s ease-in-out infinite alternate; }
  header::after { width: 34rem; height: 34rem; bottom: -9rem; left: -4rem; opacity: .85;
    background: radial-gradient(circle, rgba(20,170,95,.95), transparent 60%);
    animation: heroDrift2 15s ease-in-out infinite alternate; }
  .hero-glow { width: 30rem; height: 30rem; top: 26%; right: -3rem; opacity: .75;
    background: radial-gradient(circle, rgba(45,212,191,.8), transparent 60%);
    animation: heroDrift3 9s ease-in-out infinite alternate; }
  @keyframes heroDrift1 { from { transform: translate(0,0) scale(1); }
                          to   { transform: translate(-9rem, 7rem) scale(1.35); } }
  @keyframes heroDrift2 { from { transform: translate(0,0) scale(1); }
                          to   { transform: translate(9rem, -6rem) scale(1.3); } }
  @keyframes heroDrift3 { from { transform: translate(-3rem, -2rem) scale(1); }
                          to   { transform: translate(6rem, 4rem) scale(1.28); } }
  .hero-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

  /* sticky glass nav */
  .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: rgba(255,255,255,.72); backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,.6); box-shadow: 0 6px 20px rgba(13,47,27,.09);
    transform: translateY(-100%); transition: transform .35s ease; }
  .topbar.show { transform: translateY(0); }
  .topbar-inner { max-width: 780px; margin: 0 auto; padding: .55rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .topbar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700;
    color: var(--green-dark); font-size: 1rem; }
  .cta-sm { padding: .5rem 1.1rem; font-size: .92rem; box-shadow: 0 2px 8px rgba(217,119,6,.3); }
  .topbar-actions { display: flex; align-items: center; gap: .6rem; position: relative; }
  .burger { display: flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 40px; height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 9px;
    background: #fff; cursor: pointer; }
  .burger span { display: block; height: 2px; width: 100%; background: var(--green-dark);
    border-radius: 2px; transition: transform .2s, opacity .2s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .drawer { position: absolute; top: calc(100% + .55rem); right: 0; min-width: 210px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(13,47,27,.16);
    padding: .5rem; display: none; flex-direction: column; }
  .drawer.open { display: flex; }
  .drawer a { padding: .62rem .8rem; border-radius: 8px; color: var(--green-dark);
    text-decoration: none; font-weight: 600; font-size: .95rem; }
  .drawer a:hover { background: #eef7f0; color: var(--amber-dark); }
  .brand { display: flex; align-items: center; gap: .55rem; padding-top: 1.4rem;
           font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; }
  .hero { padding: 3.4rem 0 6.5rem; }
  h1 { font-size: clamp(2rem, 5.4vw, 2.9rem); line-height: 1.14; margin: 0 0 1.1rem; }
  .sub { font-size: 1.16rem; color: #cfe3d6; margin: 0 0 2rem; max-width: 580px; }

  /* glass stat strip overlapping the hero */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
           gap: 1rem; margin: -4.2rem 0 .8rem; position: relative; }
  .stat { background: rgba(255,255,255,.82); backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.6);
          box-shadow: 0 8px 28px rgba(13,47,27,.14); border-radius: 12px; padding: 1.15rem 1.3rem; }
  .stat b { font-family: Calistoga, Georgia, serif; font-weight: 400; font-size: 2.1rem;
            display: block; color: var(--green-dark); }
  .stat span { color: var(--muted); font-size: .92rem; line-height: 1.45; display: block; margin-top: .1rem; }
  .stats-note { color: var(--muted); font-size: .85rem; margin: 0 0 1.2rem; }

  /* how it works */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
  .step { border-radius: 14px; padding: 1.3rem 1.4rem;
          background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(238,247,240,.55));
          border: 1px solid rgba(255,255,255,.75);
          box-shadow: 0 8px 24px rgba(13,47,27,.1), inset 0 1px 1px rgba(255,255,255,.9);
          backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
          transition: transform .2s ease, box-shadow .2s ease; }
  .step:hover { transform: translateY(-3px);
          box-shadow: 0 14px 30px rgba(13,47,27,.14), inset 0 1px 1px rgba(255,255,255,.9); }
  .step .icon { width: 48px; height: 48px; padding: 12px; margin-bottom: .8rem;
    border-radius: 14px; stroke: var(--green-dark); stroke-width: 2;
    background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(74,222,128,.22) 55%, rgba(29,107,61,.16));
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 8px 20px rgba(13,47,27,.15),
                inset 0 1px 1px rgba(255,255,255,.95),
                inset 0 -8px 14px rgba(13,47,27,.06);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    transition: transform .25s ease, box-shadow .25s ease; }
  .step:hover .icon { transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(13,47,27,.2),
                inset 0 1px 1px rgba(255,255,255,.95),
                inset 0 -8px 14px rgba(13,47,27,.06); }
  .step h3 { margin: 0 0 .3rem; font-size: 1.03rem; }
  .step p { margin: 0; color: var(--muted); font-size: .95rem; }

  /* pricing */
  .price-card { border-radius: 16px; padding: 1.8rem 1.8rem 1.6rem; max-width: 480px;
    background: linear-gradient(155deg, rgba(255,255,255,.88), rgba(233,246,238,.62));
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 12px 34px rgba(13,47,27,.14), inset 0 1px 1px rgba(255,255,255,.95),
                0 0 0 1px rgba(29,107,61,.16);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .amount { font-size: 2.3rem; color: var(--green-dark); }
  .amount small { font-family: Inter, sans-serif; font-size: 1rem; font-weight: 500; color: var(--muted); }
  .trial-flag { display: inline-block; background: var(--amber); color: #fff;
    font-weight: 700; font-size: .82rem; border-radius: 99px; padding: .3rem .85rem;
    margin-bottom: .8rem; letter-spacing: .03em; }
  .price-card ul { margin: 1.1rem 0 0; padding: 0; list-style: none; }
  .price-card li { margin: .55rem 0; display: flex; gap: .6rem; align-items: flex-start; }
  .price-card li .icon { margin-top: .05rem; width: 27px; height: 27px; padding: 5px;
    border-radius: 8px; stroke: var(--green-dark);
    background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(74,222,128,.24) 55%, rgba(29,107,61,.16));
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 3px 9px rgba(13,47,27,.12), inset 0 1px 1px rgba(255,255,255,.9); }
  .price-card .skip-trial { color: var(--muted); font-size: .84rem; margin: 1.2rem 0 0; }
  .price-card .skip-trial a { color: var(--green-dark); }

  /* faq */
  details { border-radius: 12px; margin: .55rem 0;
            background: linear-gradient(155deg, rgba(255,255,255,.8), rgba(238,247,240,.5));
            border: 1px solid rgba(255,255,255,.7);
            box-shadow: 0 4px 14px rgba(13,47,27,.07), inset 0 1px 1px rgba(255,255,255,.85);
            backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
            transition: box-shadow .2s ease; }
  details[open] { box-shadow: 0 8px 20px rgba(13,47,27,.11), inset 0 1px 1px rgba(255,255,255,.85); }
  summary { cursor: pointer; padding: .9rem 1.15rem; font-weight: 600; list-style: none;
            display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--green);
    border-bottom: 2px solid var(--green); transform: rotate(45deg); transition: transform .2s ease; flex: 0 0 auto; }
  details[open] summary::after { transform: rotate(-135deg); }
  details p { margin: 0; padding: 0 1.15rem 1.05rem; color: var(--muted); }

  /* form */
  .signup { border-radius: 16px; padding: 1.7rem; max-width: 470px;
            background: linear-gradient(155deg, rgba(255,255,255,.85), rgba(238,247,240,.58));
            border: 1px solid rgba(255,255,255,.75);
            box-shadow: 0 10px 30px rgba(13,47,27,.12), inset 0 1px 1px rgba(255,255,255,.9);
            backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
  .signup label { display: block; font-weight: 600; font-size: .92rem; margin: .95rem 0 .25rem; }
  .signup input { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line);
    border-radius: 7px; font-size: 1rem; font-family: inherit; transition: border-color .2s ease; }
  .signup input:hover { border-color: var(--green); }
  .signup button { margin-top: 1.2rem; width: 100%; }
  .signup .fine { color: var(--muted); font-size: .84rem; margin: .9rem 0 0; }

  footer { border-top: 1px solid var(--line); background: var(--paper); }
  footer .wrap { padding: 1.6rem 1.25rem 2.1rem; }
  .note { color: var(--muted); font-size: .85rem; }

  /* scroll reveal */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .reveal { opacity: 1; transform: none; }
  }

  /* --- shared secondary-page header + checkbox hamburger + week teaser --- */
  .sechead { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82);
    backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid rgba(219,231,221,.85); box-shadow:0 6px 20px rgba(13,47,27,.08); }
  .sechead-inner { max-width:1000px; margin:0 auto; padding:.7rem 1.25rem;
    display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  .sechead .topbar-brand { text-decoration:none; }
  main.page { min-height:60vh; }
  .nav-toggle:checked ~ .burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .burger span:nth-child(2) { opacity:0; }
  .nav-toggle:checked ~ .burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .nav-toggle:checked ~ .drawer { display:flex; }