
:root{
  --bg:#FFFFFF;
  --alt:#F4F4F4;
  --surface:#FFFFFF;
  --ink:#1F2E33;
  --ink-soft:#56676C;
  --teal:#0FC2C9;
  --teal-deep:#0A8F95;
  --mint:#81D3C9;
  --mint-wash:#E6F6F3;
  --line:#DCE6E7;
  --night:#E6F6F3;
  --night-2:#F4FBFA;
  --night-ink:#1F2E33;
  --night-soft:#56676C;
  --night-line:#CFE9E4;
  --field:#FFFFFF;
  --star:15,194,201;
  --moon:#F3E9C6;
  --on-teal:#06272B;
  --shadow:0 20px 50px -28px rgba(10,60,70,.45);
  --font:"Poppins",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
#jn-sleep-2026 *{box-sizing:border-box}
#jn-sleep-2026{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){#jn-sleep-2026{scroll-behavior:auto}#jn-sleep-2026 *, #jn-sleep-2026 *::before{transition:none!important;animation:none!important}}
#jn-sleep-2026{background:var(--bg) !important;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.75;font-weight:400}
#jn-sleep-2026 .wrap{max-width:1100px;margin:0 auto;padding-inline:24px}
@media (max-width:480px){#jn-sleep-2026 .wrap{padding-inline:16px}}
#jn-sleep-2026 h1, #jn-sleep-2026 h2, #jn-sleep-2026 h3{font-weight:500;line-height:1.2;text-wrap:balance;margin:0;letter-spacing:-.01em}
#jn-sleep-2026 h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:400}
#jn-sleep-2026 h3{font-size:1.08rem;font-weight:600}
#jn-sleep-2026 p{margin:0}
#jn-sleep-2026 .eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep)}
#jn-sleep-2026 .lede{color:var(--ink-soft);max-width:62ch}
#jn-sleep-2026 .sec{padding-block:clamp(64px,9vw,104px)}
#jn-sleep-2026 .sec.alt{background:var(--alt)}
#jn-sleep-2026 .sec-head{display:grid;gap:14px;margin-bottom:44px;max-width:680px}
#jn-sleep-2026 .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 .95rem/1 var(--font);text-decoration:none;border-radius:6px;padding:1.05em 1.8em;border:0 !important;background:var(--teal) !important;color:var(--on-teal) !important;cursor:pointer;transition:background .25s,transform .25s,box-shadow .25s}
#jn-sleep-2026 .btn:hover{background:var(--mint) !important;transform:translateY(-2px);box-shadow:var(--shadow)}
#jn-sleep-2026 .btn.soft{background:transparent !important;color:var(--teal-deep) !important;box-shadow:inset 0 0 0 1.5px var(--teal)}
#jn-sleep-2026 .btn.soft:hover{background:var(--mint-wash) !important;box-shadow:inset 0 0 0 1.5px var(--teal)}
#jn-sleep-2026 a:focus-visible, #jn-sleep-2026 .btn:focus-visible, #jn-sleep-2026 summary:focus-visible, #jn-sleep-2026 input:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
#jn-sleep-2026 header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--night);border-bottom:1px solid var(--night-line)}
#jn-sleep-2026 .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
#jn-sleep-2026 .brand{color:var(--night-ink);text-decoration:none;font-weight:500;font-size:1.05rem;line-height:1.2}
#jn-sleep-2026 .brand span{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep);font-weight:500}
#jn-sleep-2026 .nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
#jn-sleep-2026 .nav ul a{color:var(--night-soft);text-decoration:none;font-size:.9rem;transition:color .2s}
#jn-sleep-2026 .nav ul a:hover{color:var(--night-ink)}
#jn-sleep-2026 .nav .btn{padding:.8em 1.3em;font-size:.85rem}
@media (max-width:760px){#jn-sleep-2026 .nav ul{display:none}}
#jn-sleep-2026 .hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 78%,var(--night-2) 100%) !important;color:var(--night-ink) !important;padding-block:clamp(72px,10vw,120px) clamp(80px,10vw,128px)}
#jn-sleep-2026 .hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#jn-sleep-2026 .hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}
@media (max-width:860px){#jn-sleep-2026 .hero .wrap{grid-template-columns:1fr}}
#jn-sleep-2026 .kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-deep);border:1px solid var(--mint);background:var(--surface);border-radius:999px;padding:.5em 1em}
#jn-sleep-2026 .kicker i{width:7px;height:7px;border-radius:50%;background:var(--moon);box-shadow:0 0 10px var(--moon)}
#jn-sleep-2026 .hero h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:300;margin-block:22px 20px}
#jn-sleep-2026 .hero h1 em{font-style:normal;font-weight:500;color:var(--teal-deep)}
#jn-sleep-2026 .hero .sub{color:var(--night-soft);max-width:56ch;font-size:1.05rem}
#jn-sleep-2026 .hero .ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:34px}
#jn-sleep-2026 .hero .ctas small{color:var(--night-soft);font-size:.85rem}
#jn-sleep-2026 .moon{justify-self:center;width:min(280px,70vw);aspect-ratio:1;max-width:100%;border-radius:50%;background:radial-gradient(circle at 38% 36%,#FFF8E1 0%,var(--moon) 45%,#D9CB9C 100%);box-shadow:0 0 80px 14px rgba(129,211,201,.35),inset -26px -18px 0 0 rgba(13,42,51,.08);position:relative}
#jn-sleep-2026 .moon::after{content:"";position:absolute;width:22%;height:22%;left:58%;top:52%;border-radius:50%;background:rgba(13,42,51,.06)}
@media (max-width:860px){#jn-sleep-2026 .moon{display:none}}
#jn-sleep-2026 .about{display:grid;grid-template-columns:1fr;max-width:760px}
@media (max-width:820px){#jn-sleep-2026 .about{grid-template-columns:1fr;gap:32px}}
#jn-sleep-2026 .portrait{border-radius:8px;overflow:hidden;background:var(--mint-wash);aspect-ratio:4/5;max-width:100%;display:grid;place-items:center;position:relative}
#jn-sleep-2026 .portrait img{width:100%;height:100%;object-fit:cover;display:block}
#jn-sleep-2026 .portrait .fallback{color:var(--teal-deep);font-size:3rem;font-weight:300}
#jn-sleep-2026 .about .body{display:grid;gap:18px;min-width:0}
#jn-sleep-2026 .about .body p{color:var(--ink-soft);max-width:62ch}
#jn-sleep-2026 .creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;list-style:none;padding:0}
#jn-sleep-2026 .creds li{font-size:.82rem;font-weight:500;background:var(--mint-wash);color:var(--ink);border-radius:999px;padding:.45em 1em}
#jn-sleep-2026 .quote{border-left:3px solid var(--teal);padding-left:18px;font-style:italic;font-weight:300;color:var(--ink);font-size:1.08rem}
#jn-sleep-2026 .night-path{display:grid;gap:0;position:relative}
#jn-sleep-2026 .step{display:grid;grid-template-columns:28px 1fr;gap:0 22px;align-items:start}
#jn-sleep-2026 .step .rail{position:relative;align-self:stretch;display:flex;justify-content:center}
#jn-sleep-2026 .step .rail::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--line)}
#jn-sleep-2026 .step:first-child .rail::before{top:10px}
#jn-sleep-2026 .step:last-child .rail::before{bottom:auto;height:10px}
#jn-sleep-2026 .step .dot{position:relative;margin-top:6px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 3px var(--teal)}
#jn-sleep-2026 .step.intro .dot{background:var(--teal)}
#jn-sleep-2026 .step.dawn .dot{background:var(--moon);box-shadow:inset 0 0 0 3px #D9B65A}
#jn-sleep-2026 .step .card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin-bottom:18px;min-width:0;transition:border-color .25s,transform .25s}
#jn-sleep-2026 .step .card:hover{border-color:var(--mint);transform:translateX(4px)}
#jn-sleep-2026 .step .label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
#jn-sleep-2026 .step h3{margin-block:4px 6px}
#jn-sleep-2026 .step p{color:var(--ink-soft);font-size:.95rem}
@media (max-width:600px){#jn-sleep-2026 .step{gap:0 14px}}
#jn-sleep-2026 .who{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:820px){#jn-sleep-2026 .who{grid-template-columns:1fr;gap:32px}}
#jn-sleep-2026 .ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#jn-sleep-2026 .ticks li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;color:var(--ink)}
#jn-sleep-2026 .ticks svg{margin-top:4px}
#jn-sleep-2026 .not{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:26px;display:grid;gap:12px}
#jn-sleep-2026 .not p{color:var(--ink-soft);font-size:.95rem}
#jn-sleep-2026 .checkout{display:grid;grid-template-columns:1.05fr .95fr;background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
@media (max-width:860px){#jn-sleep-2026 .checkout{grid-template-columns:1fr}}
#jn-sleep-2026 .stack{padding:clamp(28px,4vw,44px);display:grid;gap:22px;align-content:start}
#jn-sleep-2026 .price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
#jn-sleep-2026 .price b{font-size:3rem;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
#jn-sleep-2026 .price span{color:var(--ink-soft);font-size:.9rem}
#jn-sleep-2026 .items{list-style:none;margin:0;padding:0;display:grid;gap:0}
#jn-sleep-2026 .items li{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
#jn-sleep-2026 .items li:first-child{border-top:0;padding-top:0}
#jn-sleep-2026 .items .ic{width:40px;height:40px;border-radius:8px;background:var(--mint-wash);display:grid;place-items:center;color:var(--teal-deep)}
#jn-sleep-2026 .items li.core .ic{background:var(--teal);color:var(--on-teal)}
#jn-sleep-2026 .items b{font-weight:600;display:block;font-size:.98rem}
#jn-sleep-2026 .items small{color:var(--ink-soft);font-size:.88rem;line-height:1.6;display:block}
#jn-sleep-2026 .items .tag{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--teal-deep);margin-bottom:2px}
#jn-sleep-2026 .pay{background:var(--night);color:var(--night-ink);padding:clamp(28px,4vw,44px);display:grid;gap:18px;align-content:start}
#jn-sleep-2026 .pay h3{font-size:1.25rem;font-weight:500}
#jn-sleep-2026 .pay p{color:var(--night-soft);font-size:.9rem}
#jn-sleep-2026 .field{display:grid;gap:6px}
#jn-sleep-2026 .field label{font-size:.82rem;font-weight:500;color:var(--night-ink)}
#jn-sleep-2026 .field input{font:400 1rem var(--font);padding:.85em 1em;border-radius:6px;border:1px solid var(--night-line);background:var(--field);color:var(--night-ink);width:100%}
#jn-sleep-2026 .field input::placeholder{color:var(--night-soft);opacity:.7}
#jn-sleep-2026 .field input[aria-invalid="true"]{border-color:#C9574B}
#jn-sleep-2026 .err{font-size:.8rem;color:#B5463A;min-height:1.2em}
#jn-sleep-2026 .pay .btn{width:100%;font-size:1rem}
#jn-sleep-2026 .secure{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--night-soft)}
#jn-sleep-2026 .notice{background:var(--surface);border:1px solid var(--mint);border-radius:6px;padding:12px 14px;font-size:.88rem;color:var(--night-ink)}
#jn-sleep-2026 .faq{display:grid;gap:12px;max-width:820px}
#jn-sleep-2026 details{background:var(--surface);border:1px solid var(--line);border-radius:8px;transition:border-color .25s}
#jn-sleep-2026 details[open]{border-color:var(--mint)}
#jn-sleep-2026 summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font-weight:500;position:relative}
#jn-sleep-2026 summary::-webkit-details-marker{display:none}
#jn-sleep-2026 summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;border-right:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
#jn-sleep-2026 details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
#jn-sleep-2026 details .a{padding:0 22px 22px;color:var(--ink-soft);max-width:68ch}
#jn-sleep-2026 footer{background:var(--alt);color:var(--night-ink);padding-block:72px 40px}
#jn-sleep-2026 footer .close{display:grid;gap:18px;max-width:640px}
#jn-sleep-2026 footer h2{font-weight:300;font-size:clamp(1.6rem,3.2vw,2.3rem)}
#jn-sleep-2026 footer h2 em{font-style:normal;color:var(--teal-deep);font-weight:500}
#jn-sleep-2026 .contact{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:10px;color:var(--night-soft);font-size:.95rem}
#jn-sleep-2026 .contact b{color:var(--night-ink);font-weight:500;user-select:all}
#jn-sleep-2026 .copy{margin-top:56px;padding-top:22px;border-top:1px solid var(--night-line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--night-soft)}

#jn-sleep-2026 .mock{margin-top:4px;font-size:.88rem;color:var(--night-soft);background:var(--surface);border:1px solid var(--mint);border-radius:6px;padding:12px 14px}
