/* ==========================================================================
   Quiet Nerves — quietnervesofficialbuy.com
   Design: calm clinical editorial. Cool paper ground, deep navy ink,
   label gold as the single accent, one settling-signal motif in the hero.
   Type: Fraunces (display) + Figtree (text).
   ========================================================================== */

:root{
  color-scheme: light;

  /* Surfaces */
  --qn-canvas:#F3F7FC;
  --qn-paper:#FFFFFF;
  --qn-sink:#EAF1FA;

  /* Ink */
  --qn-ink:#0D2544;
  --qn-ink-2:#41587A;
  --qn-ink-3:#7F93AE;

  /* Brand */
  --qn-brand:#1B4E9B;
  --qn-brand-deep:#0F2F63;
  --qn-brand-tint:#E8F0FB;

  /* Accent (label gold) */
  --qn-gold:#BE8B14;
  --qn-gold-bright:#E8B93C;
  --qn-gold-tint:#FBF2DC;

  /* Signal */
  --qn-calm:#2F7F6B;
  --qn-calm-tint:#E4F2EE;
  --qn-warn:#9A5B12;

  /* Structure */
  --qn-line:#D5E1F0;
  --qn-line-soft:#E7EEF7;
  --qn-radius:14px;
  --qn-radius-lg:22px;
  --qn-shadow:0 1px 2px rgba(13,37,68,.04), 0 8px 24px rgba(13,37,68,.06);
  --qn-shadow-lift:0 2px 6px rgba(13,37,68,.06), 0 18px 44px rgba(13,37,68,.12);

  /* Type */
  --qn-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --qn-text:"Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --qn-bay:clamp(3rem, 6vw, 5.25rem);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:90px}

body{
  margin:0;
  font-family:var(--qn-text);
  font-size:1.0625rem;
  line-height:1.72;
  color:var(--qn-ink-2);
  background:var(--qn-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:74px;
}
@media (min-width:992px){ body{padding-bottom:0} }

img{max-width:100%; height:auto; display:block}

h1,h2,h3,h4,h5{
  font-family:var(--qn-display);
  color:var(--qn-ink);
  font-weight:600;
  line-height:1.18;
  text-wrap:balance;
  margin:0 0 .6em;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}

a{color:var(--qn-brand); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--qn-brand-deep)}

:focus-visible{outline:3px solid var(--qn-gold); outline-offset:3px; border-radius:4px}

.qn-skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--qn-ink); color:#fff; padding:.8rem 1.2rem;
  border-radius:0 0 var(--qn-radius) 0; font-weight:600;
}
.qn-skip:focus{left:0; color:#fff}

/* ---------- Shared rails ---------- */
.qn-bay{padding-block:var(--qn-bay)}
.qn-bay--tight{padding-block:clamp(2.25rem,4vw,3.25rem)}
.qn-paper{background:var(--qn-paper)}
.qn-sink{background:var(--qn-sink)}
.qn-canvas{background:var(--qn-canvas)}

.qn-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--qn-text); font-size:.73rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--qn-brand); margin:0 0 .85rem;
}
.qn-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--qn-gold),var(--qn-gold-bright));
}

.qn-head{max-width:46rem; margin-bottom:2.5rem}
.qn-head--mid{margin-inline:auto; text-align:center}
.qn-head--mid .qn-eyebrow::before{display:none}
.qn-head h2{font-size:clamp(1.65rem,3.4vw,2.5rem); margin-bottom:.5rem}
.qn-head p{font-size:1.08rem; color:var(--qn-ink-2); margin:0}

.qn-measure{max-width:44rem}
.qn-measure p{margin-bottom:1.1rem}
.qn-measure p:last-child{margin-bottom:0}

.qn-mark{
  background:linear-gradient(180deg, transparent 58%, var(--qn-gold-tint) 58%);
  color:var(--qn-gold); padding-inline:.08em;
}

/* ---------- Buttons ---------- */
.qn-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--qn-text); font-weight:700; font-size:1rem;
  padding:.92rem 1.75rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.qn-btn--gold{
  background:linear-gradient(135deg,var(--qn-gold-bright) 0%,var(--qn-gold) 100%);
  color:var(--qn-ink);
  box-shadow:0 2px 4px rgba(190,139,20,.2), 0 12px 28px rgba(190,139,20,.3);
}
.qn-btn--gold:hover{
  color:var(--qn-ink); transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(190,139,20,.24), 0 20px 40px rgba(190,139,20,.38);
}
.qn-btn--ink{background:var(--qn-brand); color:#fff; box-shadow:0 10px 26px rgba(27,78,155,.26)}
.qn-btn--ink:hover{background:var(--qn-brand-deep); color:#fff; transform:translateY(-2px)}
.qn-btn--ghost{background:transparent; color:var(--qn-brand); border-color:var(--qn-line)}
.qn-btn--ghost:hover{background:var(--qn-brand-tint); color:var(--qn-brand-deep); border-color:var(--qn-brand)}
.qn-btn--wide{width:100%}
.qn-btn--lg{font-size:1.06rem; padding:1.05rem 2rem}

/* ---------- 1. Trust strip ---------- */
.qn-strip{
  background:var(--qn-ink); color:#C3D4EA;
  font-size:.78rem; letter-spacing:.01em; padding:.6rem 0;
}
.qn-strip ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.35rem 1.5rem;
}
.qn-strip li{display:inline-flex; align-items:center; gap:.4rem}
.qn-strip b{color:#fff; font-weight:600}
.qn-strip .qn-dot{color:var(--qn-gold-bright)}
@media (max-width:575px){
  .qn-strip{font-size:.72rem}
  .qn-strip li:nth-child(n+3){display:none}
}

/* ---------- 2. Nav ---------- */
.qn-nav{
  position:sticky; top:0; z-index:1030;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--qn-line-soft);
  transition:box-shadow .25s ease;
}
.qn-nav.is-stuck{box-shadow:0 6px 24px rgba(13,37,68,.08)}
.qn-nav .navbar{padding-block:.7rem}
.qn-logo{
  font-family:var(--qn-display); font-weight:700; font-size:1.3rem;
  color:var(--qn-ink); text-decoration:none; letter-spacing:-.015em;
  display:inline-flex; align-items:baseline; gap:.1rem;
}
.qn-logo:hover{color:var(--qn-ink)}
.qn-logo span{color:var(--qn-brand)}
.qn-logo sup{color:var(--qn-gold); font-size:.5em; font-family:var(--qn-text)}

.qn-nav .nav-link{
  font-family:var(--qn-text); font-weight:600; font-size:.94rem;
  color:var(--qn-ink-2); padding:.48rem .8rem; border-radius:8px;
  transition:color .18s ease, background .18s ease;
}
.qn-nav .nav-link:hover,
.qn-nav .nav-link.is-active{color:var(--qn-brand); background:var(--qn-brand-tint)}
.qn-nav .navbar-toggler{border:1px solid var(--qn-line); padding:.4rem .6rem; border-radius:10px}
.qn-nav .navbar-toggler:focus{box-shadow:none}
.qn-nav .qn-btn{padding:.62rem 1.3rem; font-size:.92rem}
@media (max-width:991px){
  .qn-nav .navbar-collapse{padding-block:.75rem}
  .qn-nav .nav-link{padding:.72rem .5rem; border-bottom:1px solid var(--qn-line-soft); border-radius:0}
  .qn-nav .qn-btn{width:100%; margin-top:.85rem}
}

/* ---------- 3. Hero ---------- */
.qn-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% 14%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    linear-gradient(170deg,#FAFCFF 0%,var(--qn-canvas) 48%,#E9F1FA 100%);
  padding-block:clamp(2rem,4.5vw,4rem) clamp(2.75rem,5vw,4.5rem);
}
.qn-hero__field{
  position:absolute; inset:auto 0 0 0; height:62%;
  pointer-events:none; z-index:0; opacity:.5;
}
.qn-hero__field svg{width:100%; height:100%; display:block}
.qn-hero .container{position:relative; z-index:1}

.qn-hero__badge{
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--qn-paper); border:1px solid var(--qn-line);
  color:var(--qn-ink); font-size:.82rem; font-weight:600;
  padding:.46rem 1rem .46rem .6rem; border-radius:999px;
  box-shadow:0 2px 10px rgba(13,37,68,.05); margin-bottom:1.15rem;
}
.qn-hero__badge i{
  width:22px; height:22px; border-radius:50%; flex:none;
  background:var(--qn-calm-tint); color:var(--qn-calm);
  display:grid; place-items:center; font-size:.72rem; font-style:normal;
}

.qn-hero h1{
  font-size:clamp(1.95rem,4.6vw,3.3rem);
  letter-spacing:-.02em; margin-bottom:1rem;
}

/* Quick answer — the AEO block */
.qn-answer{
  background:var(--qn-paper);
  border:1px solid var(--qn-line);
  border-left:4px solid var(--qn-gold);
  border-radius:0 var(--qn-radius) var(--qn-radius) 0;
  padding:1.2rem 1.35rem; margin:1.4rem 0;
  box-shadow:var(--qn-shadow);
}
.qn-answer h2{
  font-family:var(--qn-text); font-size:.71rem; font-weight:800;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--qn-gold); margin:0 0 .6rem;
}
.qn-answer p{margin:0 0 .7rem; font-size:1rem; line-height:1.68; color:var(--qn-ink-2)}
.qn-answer p:last-child{margin-bottom:0}
.qn-answer p:first-of-type{color:var(--qn-ink); font-weight:500}

.qn-tags{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.2rem 0}
.qn-tags span{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  color:var(--qn-ink-2); font-size:.82rem; font-weight:600;
  padding:.36rem .85rem; border-radius:999px;
}

.qn-checks{list-style:none; margin:1.2rem 0; padding:0; display:grid; gap:.55rem}
.qn-checks li{position:relative; padding-left:1.95rem; font-size:.99rem; color:var(--qn-ink-2)}
.qn-checks li::before{
  content:"✓"; position:absolute; left:0; top:.1rem;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:var(--qn-calm-tint); color:var(--qn-calm);
  display:grid; place-items:center; font-size:.76rem; font-weight:800;
}

.qn-figures{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin:1.5rem 0;
}
.qn-figure{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  border-radius:var(--qn-radius); padding:.95rem .7rem; text-align:center;
  box-shadow:var(--qn-shadow);
}
.qn-figure b{
  display:block; font-family:var(--qn-display); font-size:1.75rem;
  font-weight:700; color:var(--qn-brand); line-height:1;
  font-variant-numeric:tabular-nums;
}
.qn-figure small{
  display:block; margin-top:.4rem; font-size:.68rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--qn-ink-3); line-height:1.35;
}

.qn-hero__cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.35rem}
.qn-score{
  display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  margin-top:1.15rem; font-size:.93rem; color:var(--qn-ink-2);
}
.qn-score .qn-stars{color:var(--qn-gold-bright); letter-spacing:.12em; font-size:1rem}
.qn-score b{color:var(--qn-ink)}

/* Hero product stage */
.qn-stage{position:relative; display:grid; place-items:center; padding:1rem 0}
.qn-stage__halo{
  position:absolute; width:min(88%,460px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(27,78,155,.13) 0%, rgba(232,185,60,.09) 42%, rgba(255,255,255,0) 70%);
  animation:qn-breathe 7s ease-in-out infinite;
}
.qn-stage__ring{
  position:absolute; width:min(80%,420px); aspect-ratio:1; border-radius:50%;
  border:1px dashed rgba(27,78,155,.18);
  animation:qn-turn 46s linear infinite;
}
.qn-stage__ring--inner{
  width:min(62%,330px); border-style:solid; border-color:rgba(190,139,20,.16);
  animation-duration:34s; animation-direction:reverse;
}
.qn-stage__shot{position:relative; z-index:2; width:min(100%,430px); animation:qn-drift 6.5s ease-in-out infinite}
.qn-stage__tag{
  position:absolute; z-index:3; background:var(--qn-paper);
  border:1px solid var(--qn-line); border-radius:999px;
  padding:.4rem .85rem; font-size:.78rem; font-weight:700; color:var(--qn-ink);
  box-shadow:var(--qn-shadow-lift); white-space:nowrap;
}
.qn-stage__tag em{font-style:normal; color:var(--qn-calm)}
.qn-stage__tag--a{top:8%; left:0; animation:qn-drift 6.5s ease-in-out infinite .5s}
.qn-stage__tag--b{bottom:12%; right:0; animation:qn-drift 6.5s ease-in-out infinite 1.1s}
@media (max-width:575px){
  .qn-stage__tag{font-size:.7rem; padding:.32rem .68rem}
  .qn-stage__tag--a{top:2%}
  .qn-stage__tag--b{bottom:4%}
}

@keyframes qn-drift{0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)}}
@keyframes qn-breathe{0%,100%{transform:scale(1); opacity:.85} 50%{transform:scale(1.07); opacity:1}}
@keyframes qn-turn{to{transform:rotate(360deg)}}

/* Load reveal */
.qn-rise{opacity:0; transform:translateY(16px); animation:qn-rise .72s cubic-bezier(.22,.8,.3,1) forwards}
@keyframes qn-rise{to{opacity:1; transform:none}}

/* Settling signal: noisy trace fades out, calm trace fades in */
.qn-trace--noise{animation:qn-hush 3.4s ease-in-out forwards}
.qn-trace--calm{opacity:0; animation:qn-settle 3.4s ease-in-out forwards}
@keyframes qn-hush{0%,22%{opacity:.9} 100%{opacity:0}}
@keyframes qn-settle{0%,30%{opacity:0} 100%{opacity:.85}}
.qn-trace--drift{animation:qn-slide 22s linear infinite}
.qn-trace--drift2{animation:qn-slide 31s linear infinite reverse}
@keyframes qn-slide{to{transform:translateX(-1440px)}}

/* ---------- 4. Trust seals ---------- */
.qn-seal{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  border-radius:var(--qn-radius-lg); padding:1.75rem 1.25rem;
  text-align:center; height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qn-seal:hover{transform:translateY(-5px); box-shadow:var(--qn-shadow-lift); border-color:var(--qn-brand-tint)}
.qn-seal img{width:84px; margin:0 auto 1rem}
.qn-seal h3{
  font-family:var(--qn-text); font-size:.84rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--qn-brand); margin-bottom:.5rem;
}
.qn-seal p{font-size:.92rem; margin:0; color:var(--qn-ink-2); line-height:1.6}

/* ---------- 5/13. Split blocks ---------- */
.qn-split__art{position:relative}
.qn-split__art img{
  border-radius:var(--qn-radius-lg); margin-inline:auto;
  background:linear-gradient(170deg,var(--qn-paper),var(--qn-brand-tint));
  padding:1.5rem; border:1px solid var(--qn-line);
}
.qn-split__art--bare img{background:none; padding:0; border:none}

/* ---------- 6. Educational prose ---------- */
.qn-lede{
  font-size:1.14rem; line-height:1.7; color:var(--qn-ink); font-weight:500;
  border-left:3px solid var(--qn-brand); padding:.2rem 0 .2rem 1.25rem; margin-bottom:1.5rem;
}
.qn-prose h3{
  font-size:1.22rem; margin:2rem 0 .7rem; color:var(--qn-ink);
}
.qn-prose h3:first-child{margin-top:0}
.qn-prose p{margin-bottom:1.05rem}
.qn-prose ul{padding-left:1.3rem; margin-bottom:1.2rem}
.qn-prose li{margin-bottom:.5rem}

.qn-aside{
  background:var(--qn-brand-tint); border:1px solid #CFE0F5;
  border-radius:var(--qn-radius); padding:1.15rem 1.35rem; margin:1.6rem 0;
  font-size:.95rem; color:#2A4772;
}
.qn-aside strong{color:var(--qn-brand-deep)}

/* ---------- 7/12. Pricing ---------- */
.qn-plan{
  position:relative; background:var(--qn-paper);
  border:1px solid var(--qn-line); border-radius:var(--qn-radius-lg);
  padding:1.9rem 1.5rem 1.6rem; text-align:center; height:100%;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qn-plan:hover{transform:translateY(-5px); box-shadow:var(--qn-shadow-lift)}
.qn-plan--pick{
  border:2px solid var(--qn-gold);
  box-shadow:0 2px 8px rgba(190,139,20,.1), 0 22px 50px rgba(13,37,68,.13);
}
.qn-plan__flag{
  position:absolute; top:-.85rem; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--qn-gold-bright),var(--qn-gold));
  color:var(--qn-ink); font-size:.7rem; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.36rem 1rem; border-radius:999px; white-space:nowrap;
  box-shadow:0 6px 16px rgba(190,139,20,.3);
}
.qn-plan__kind{
  font-size:.72rem; font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--qn-ink-3); margin-bottom:.5rem;
}
.qn-plan h3{font-size:1.4rem; margin-bottom:.15rem}
.qn-plan__span{font-size:.88rem; color:var(--qn-ink-3); margin-bottom:1rem}
.qn-plan__shot{height:150px; display:grid; place-items:center; margin-bottom:1rem}
.qn-plan__shot img{max-height:150px; width:auto}
.qn-plan__was{font-size:.88rem; color:var(--qn-ink-3); text-decoration:line-through}
.qn-plan__now{
  font-family:var(--qn-display); font-size:2.9rem; font-weight:700;
  color:var(--qn-ink); line-height:1; margin:.2rem 0;
  font-variant-numeric:tabular-nums;
}
.qn-plan__now sup{font-size:.42em; top:-.75em; font-weight:600}
.qn-plan__unit{font-size:.8rem; color:var(--qn-ink-3); margin-bottom:.5rem}
.qn-plan__total{
  font-size:.95rem; font-weight:700; color:var(--qn-ink); margin-bottom:.3rem;
  font-variant-numeric:tabular-nums;
}
.qn-plan__save{
  display:inline-block; background:var(--qn-calm-tint); color:var(--qn-calm);
  font-size:.8rem; font-weight:700; padding:.25rem .75rem;
  border-radius:999px; margin-bottom:1.1rem;
}
.qn-plan .qn-btn{margin-top:auto}
.qn-plan__ship{font-size:.78rem; color:var(--qn-ink-3); margin:.75rem 0 0}

.qn-paybar{
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  margin-top:2.25rem; text-align:center;
}
.qn-paybar img{max-width:300px; opacity:.85}
.qn-paybar p{font-size:.85rem; color:var(--qn-ink-3); margin:0}

/* ---------- 8. Reasons ---------- */
.qn-reason{
  display:flex; gap:1.1rem; align-items:flex-start;
  padding:1.15rem 0; border-bottom:1px solid var(--qn-line-soft);
}
.qn-reason:last-child{border-bottom:none}
.qn-reason__no{
  flex:none; width:2.6rem; height:2.6rem; border-radius:12px;
  background:var(--qn-brand-tint); color:var(--qn-brand);
  display:grid; place-items:center;
  font-family:var(--qn-display); font-size:1.05rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.qn-reason h3{font-size:1.08rem; margin-bottom:.35rem}
.qn-reason p{margin:0; font-size:.98rem}

/* ---------- 9. How it works ---------- */
.qn-phase{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  border-radius:var(--qn-radius); padding:1.5rem 1.35rem; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.qn-phase:hover{transform:translateY(-4px); box-shadow:var(--qn-shadow-lift)}
.qn-phase__no{
  display:inline-block; font-family:var(--qn-text); font-size:.68rem;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--qn-gold); margin-bottom:.6rem;
}
.qn-phase h3{font-size:1.1rem; margin-bottom:.45rem}
.qn-phase p{margin:0; font-size:.95rem}

/* ---------- 10. Reviews ---------- */
.qn-voice{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  border-radius:var(--qn-radius-lg); padding:1.75rem 1.5rem; height:100%;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.qn-voice:hover{transform:translateY(-5px); box-shadow:var(--qn-shadow-lift)}
.qn-voice__stars{color:var(--qn-gold-bright); letter-spacing:.14em; margin-bottom:.85rem; font-size:1.05rem}
.qn-voice blockquote{
  margin:0 0 1.3rem; font-size:1rem; line-height:1.72; color:var(--qn-ink-2);
}
.qn-voice blockquote::before{content:"\201C"}
.qn-voice blockquote::after{content:"\201D"}
.qn-voice__who{display:flex; align-items:center; gap:.85rem; margin-top:auto}
.qn-voice__who img{
  width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none;
  border:2px solid var(--qn-line);
}
.qn-voice__who b{display:block; color:var(--qn-ink); font-size:.98rem; font-weight:700}
.qn-voice__who span{display:block; font-size:.83rem; color:var(--qn-ink-3)}
.qn-voice__flag{
  display:inline-block; margin-top:.2rem; background:var(--qn-calm-tint);
  color:var(--qn-calm); font-size:.68rem; font-weight:800;
  letter-spacing:.05em; padding:.14rem .55rem; border-radius:999px;
}

.qn-board{
  background:linear-gradient(140deg,var(--qn-brand-deep) 0%,var(--qn-brand) 100%);
  border-radius:var(--qn-radius-lg); padding:2.25rem 1.75rem;
  margin-top:2.5rem; color:#fff; position:relative; overflow:hidden;
}
.qn-board::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,185,60,.22), transparent 68%);
}
.qn-board__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr));
  gap:1.5rem; position:relative; z-index:1;
}
.qn-board__cell{text-align:center}
.qn-board__cell b{
  display:block; font-family:var(--qn-display); font-size:2.3rem; font-weight:700;
  line-height:1; color:#fff; font-variant-numeric:tabular-nums;
}
.qn-board__cell small{
  display:block; margin-top:.45rem; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#AFC8E8;
}

/* ---------- 11. Ingredients ---------- */
.qn-element{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  border-radius:var(--qn-radius-lg); padding:1.6rem 1.4rem; height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qn-element:hover{transform:translateY(-5px); box-shadow:var(--qn-shadow-lift); border-color:#C9DCF3}
.qn-element__top{display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem}
.qn-element__sym{
  flex:none; width:3rem; height:3rem; border-radius:14px;
  background:linear-gradient(140deg,var(--qn-brand-tint),#D8E7F9);
  color:var(--qn-brand); display:grid; place-items:center;
  font-family:var(--qn-display); font-weight:700; font-size:.95rem;
  letter-spacing:-.02em;
}
.qn-element h3{font-size:1.06rem; margin:0 0 .15rem}
.qn-element__role{font-size:.76rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--qn-gold)}
.qn-element p{margin:0 0 .9rem; font-size:.95rem}
.qn-element p:last-child{margin-bottom:0}
.qn-element__note{
  font-size:.85rem; color:var(--qn-ink-3); padding-top:.8rem;
  border-top:1px dashed var(--qn-line);
}

/* ---------- 13. Benefits ---------- */
.qn-gain{
  background:var(--qn-paper); border:1px solid var(--qn-line);
  border-radius:var(--qn-radius); padding:1.45rem 1.3rem; height:100%;
  transition:transform .25s ease, box-shadow .25s ease;
}
.qn-gain:hover{transform:translateY(-4px); box-shadow:var(--qn-shadow-lift)}
.qn-gain__icon{
  width:2.7rem; height:2.7rem; border-radius:12px; margin-bottom:.9rem;
  background:var(--qn-calm-tint); color:var(--qn-calm);
  display:grid; place-items:center; font-size:1.15rem;
}
.qn-gain h3{font-size:1.04rem; margin-bottom:.4rem}
.qn-gain p{margin:0; font-size:.94rem}

/* ---------- 14. Guarantee ---------- */
.qn-promise{
  background:linear-gradient(160deg,var(--qn-paper) 0%,var(--qn-brand-tint) 100%);
  border-top:1px solid var(--qn-line); border-bottom:1px solid var(--qn-line);
}
.qn-promise__badge{max-width:240px; margin-inline:auto; animation:qn-drift 7s ease-in-out infinite}
.qn-promise h2{font-size:clamp(1.5rem,3vw,2.15rem)}
.qn-promise__terms{list-style:none; padding:0; margin:1.25rem 0; display:grid; gap:.5rem}
.qn-promise__terms li{position:relative; padding-left:1.8rem; font-size:.97rem}
.qn-promise__terms li::before{
  content:"✓"; position:absolute; left:0; top:.05rem; color:var(--qn-calm); font-weight:800;
}

/* ---------- 15. How to take ---------- */
.qn-routine{counter-reset:qn-step; display:grid; gap:0}
.qn-step{
  display:flex; gap:1.25rem; align-items:flex-start;
  padding:1.4rem 0; border-bottom:1px solid var(--qn-line-soft);
}
.qn-step:last-child{border-bottom:none}
.qn-step__no{
  flex:none; width:3rem; height:3rem; border-radius:50%;
  background:linear-gradient(140deg,var(--qn-brand) 0%,#2A66BE 100%);
  color:#fff; display:grid; place-items:center;
  font-family:var(--qn-display); font-weight:700; font-size:1.15rem;
  box-shadow:0 8px 18px rgba(27,78,155,.28);
}
.qn-step h3{font-size:1.1rem; margin-bottom:.4rem}
.qn-step p{margin:0; font-size:.98rem}

/* ---------- 16. FAQ ---------- */
.qn-ask .accordion-item{
  background:var(--qn-paper); border:1px solid var(--qn-line) !important;
  border-radius:var(--qn-radius) !important; margin-bottom:.8rem; overflow:hidden;
}
.qn-ask .accordion-button{
  background:var(--qn-paper); color:var(--qn-ink);
  font-family:var(--qn-text); font-weight:700; font-size:1.02rem;
  padding:1.15rem 1.3rem; box-shadow:none !important; line-height:1.5;
}
.qn-ask .accordion-button:not(.collapsed){
  background:var(--qn-brand); color:#fff;
}
.qn-ask .accordion-button:not(.collapsed)::after{filter:brightness(0) invert(1)}
.qn-ask .accordion-button:focus{box-shadow:none}
.qn-ask .accordion-body{
  padding:1.2rem 1.3rem; font-size:.98rem; line-height:1.72;
  color:var(--qn-ink-2); background:#FBFDFF;
}
.qn-ask .accordion-body p:last-child{margin-bottom:0}

/* ---------- 17. References ---------- */
.qn-cite{counter-reset:qn-ref; list-style:none; padding:0; margin:0; display:grid; gap:.85rem}
.qn-cite li{
  counter-increment:qn-ref; position:relative; padding-left:2.5rem;
  font-size:.92rem; line-height:1.65; color:var(--qn-ink-2);
}
.qn-cite li::before{
  content:counter(qn-ref); position:absolute; left:0; top:.05rem;
  width:1.75rem; height:1.75rem; border-radius:8px;
  background:var(--qn-paper); border:1px solid var(--qn-line);
  color:var(--qn-brand); display:grid; place-items:center;
  font-size:.78rem; font-weight:800; font-variant-numeric:tabular-nums;
}
.qn-cite cite{font-style:italic; color:var(--qn-ink-3)}

/* ---------- 18. Final CTA ---------- */
.qn-close{
  background:linear-gradient(150deg,var(--qn-brand-deep) 0%,var(--qn-ink) 58%,#0A1E38 100%);
  color:#D5E3F5; text-align:center; position:relative; overflow:hidden;
}
.qn-close::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 320px at 50% 0%, rgba(232,185,60,.13), transparent 66%),
    radial-gradient(520px 280px at 12% 100%, rgba(27,78,155,.34), transparent 70%);
}
.qn-close .container{position:relative; z-index:1}
.qn-close img{max-width:200px; margin:0 auto 1.5rem; filter:drop-shadow(0 18px 36px rgba(0,0,0,.4))}
.qn-close h2{color:#fff; font-size:clamp(1.6rem,3.4vw,2.5rem); margin-bottom:.75rem}
.qn-close__was{font-size:1rem; color:#9FB8D8}
.qn-close__was s{opacity:.75}
.qn-close__now{
  font-family:var(--qn-display); font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700; color:var(--qn-gold-bright); margin:.3rem 0 1.5rem;
}
.qn-close__foot{font-size:.9rem; color:#9FB8D8; margin:1.25rem 0 0}

/* ---------- 19. Footer ---------- */
.qn-foot{background:#081B33; color:#9FB8D8; padding:3rem 0 1.75rem; font-size:.93rem}
.qn-foot__brand{font-family:var(--qn-display); font-size:1.35rem; color:#fff; font-weight:700; margin-bottom:.6rem}
.qn-foot h3{
  font-family:var(--qn-text); font-size:.74rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--qn-gold-bright); margin-bottom:.9rem;
}
.qn-foot ul{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.qn-foot a{color:#BDD2EC; text-decoration:none}
.qn-foot a:hover{color:#fff; text-decoration:underline}
.qn-foot__legal{
  margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:.81rem; line-height:1.7; color:#7E99BC;
}
.qn-foot__legal p{margin-bottom:.9rem}
.qn-foot__legal strong{color:#BDD2EC}
.qn-foot__copy{
  margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.1);
  text-align:center; font-size:.85rem; color:#7E99BC;
}

/* ---------- 20. Sticky mobile bar ---------- */
.qn-dock{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  background:rgba(8,27,51,.97);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(232,185,60,.28);
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:.75rem;
}
.qn-dock__price{flex:none; line-height:1.15}
.qn-dock__price b{display:block; color:#fff; font-size:1.05rem; font-weight:800}
.qn-dock__price small{display:block; color:#9FB8D8; font-size:.68rem}
.qn-dock .qn-btn{flex:1; padding:.78rem 1rem; font-size:.92rem}
@media (min-width:992px){ .qn-dock{display:none} }

/* ---------- Scroll to top ---------- */
.qn-top{
  position:fixed; right:16px; bottom:86px; z-index:1035;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--qn-line);
  background:var(--qn-paper); color:var(--qn-brand);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--qn-shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, visibility .25s ease, transform .25s ease, background .2s ease;
}
.qn-top.is-on{opacity:1; visibility:visible; transform:none}
.qn-top:hover{background:var(--qn-brand); color:#fff; border-color:var(--qn-brand)}
.qn-top svg{width:17px; height:17px}
@media (min-width:992px){ .qn-top{bottom:24px} }

/* ---------- Scroll reveal ---------- */
.qn-fade{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1)}
.qn-fade.is-in{opacity:1; transform:none}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .qn-rise,.qn-fade{opacity:1 !important; transform:none !important}
  .qn-trace--calm{opacity:.85 !important}
  .qn-trace--noise{opacity:0 !important}
}

/* ---------- Print ---------- */
@media print{
  .qn-nav,.qn-dock,.qn-top,.qn-strip,.qn-hero__field{display:none !important}
  body{padding-bottom:0; background:#fff; color:#000}
}