/* HonestSetup stage 1 styles. Load AFTER assets/site.css:  <link rel="stylesheet" href="assets/hs-stage1.css">
   Sections: 1 tokens/accents  2 hero  3 phone demo  4 full-body Scout  5 how-it-works strip  6 kit cards  7 phone menu  8 result order  9 quiz icons */

/* 1. Lime is only a tiny accent (logo star, demo dot, switches). Kickers use light blue. */
.bg-navy .kicker,.hero .kicker,.page-hero .kicker,.pick-eyebrow{color:#93C5FD}
.bg-navy .preview-pill{color:#93C5FD;border-color:#93C5FD}
.ic{display:inline-block;vertical-align:middle;flex:none}

/* 2. Hero */
.hs-hero-grid{display:grid;gap:26px;align-items:center}
.hs-h1{margin-top:12px}
.hs-copy .sub{margin-top:14px}
.hs-btn{font-weight:700}
.hs-paths{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;color:#c7d6ee;font-size:14px}
.hs-paths a{display:inline-flex;gap:8px;align-items:center;color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.26);border-radius:999px;padding:7px 14px;min-height:44px;box-sizing:border-box;font-weight:600;transition:background .35s,border-color .35s,box-shadow .35s}
.hs-paths a svg{color:#93C5FD;transition:color .35s}
.hs-paths a:hover,.hs-paths a.on{border-color:#93C5FD;background:rgba(147,197,253,.14)}
.hs-paths a.on{box-shadow:0 0 0 3px rgba(37,99,235,.35)}
.hs-paths a.on svg{color:#fff}
.hs-paths a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (min-width:900px){.hs-hero-grid{grid-template-columns:1.05fr 1fr}}

/* 3. Phone demo (all sizes in em, so one font-size scales it) */
.dm-wrap{position:relative;display:flex;justify-content:flex-end;align-items:flex-end;padding-bottom:2.6em}
.dm{position:relative;font-size:16px;--blue:#2563EB;--navy:#0B1F3A;z-index:2}
.dm-phone{position:relative;width:17.5em;height:36em;border-radius:2.7em;padding:.55em;background:linear-gradient(145deg,#2a3d5c,#0d1a2e 40%,#1c2c45);box-shadow:0 2.2em 4em rgba(2,8,23,.55),0 .4em 1em rgba(2,8,23,.35),inset 0 0 0 .09em rgba(255,255,255,.18)}
.dm-phone:before{content:"";position:absolute;right:-.18em;top:7.5em;width:.18em;height:3.4em;border-radius:0 .2em .2em 0;background:#22344f}
.dm-screen{position:relative;width:100%;height:100%;border-radius:2.2em;overflow:hidden;background:#F4F7FC;color:var(--navy)}
.dm-island{position:absolute;top:.55em;left:50%;transform:translateX(-50%);width:5.2em;height:1.35em;border-radius:1em;background:#05080f;z-index:6}
.dm-glare{position:absolute;inset:0;pointer-events:none;z-index:7;background:linear-gradient(115deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 38%);mix-blend-mode:screen}
.dm-status{display:flex;justify-content:space-between;align-items:center;padding:.75em 1.5em 0;font-size:.72em;font-weight:700;height:2.6em}
.dm-status i{display:inline-block;width:1.5em;height:.7em;border:1.5px solid var(--navy);border-radius:.2em;position:relative}
.dm-status i:after{content:"";position:absolute;inset:.1em .35em .1em .1em;background:var(--navy);border-radius:.08em}
.dm-app{position:absolute;top:2.6em;left:0;right:0;bottom:0;padding:.7em 1em 1em}
.dm-top{display:flex;align-items:center;justify-content:space-between;font-size:.78em;font-weight:800}
.dm-brand{display:flex;gap:.4em;align-items:center}
.dm-brand span span{color:var(--blue)}
.dm-ex{font-size:.82em;font-weight:700;color:#475569;background:#E6ECF6;border-radius:999px;padding:.2em .6em}
.dm-prog{margin:.9em 0 .7em}
.dm-ql{display:flex;justify-content:space-between;font-size:.66em;font-weight:700;color:#5b6b82}
.dm-ql em{font-style:normal}
.dm-bar{height:.32em;border-radius:1em;background:#E1E8F3;margin-top:.4em;overflow:hidden}
.dm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3B82F6,#2563EB);border-radius:1em;transition:width .55s cubic-bezier(.4,.1,.2,1)}
.dm-stage{position:absolute;left:1em;right:1em;top:7.7em;bottom:1em}
.dm-card{position:absolute;inset:0;transition:transform .5s cubic-bezier(.3,.1,.2,1),opacity .5s;will-change:transform}
.dm-card.in{transform:translateX(0);opacity:1}
.dm-card.right{transform:translateX(105%);opacity:0}
.dm-card.left{transform:translateX(-105%);opacity:0}
.dm-q{font-size:1.02em;font-weight:800;line-height:1.2;margin:0 0 .25em}
.dm-hint{font-size:.66em;color:#5b6b82;margin:0 0 .7em;line-height:1.35}
.dm-opts{display:grid;gap:.42em}
.dm-opts.two{grid-template-columns:1fr 1fr}
.dm-opt{display:flex;gap:.45em;align-items:center;background:#fff;border:1px solid #DCE4F0;border-radius:.75em;padding:.65em .6em;font-size:.68em;font-weight:600;line-height:1.2;min-height:3.4em;transition:border-color .3s,background .3s,box-shadow .3s,transform .3s}
.dm-opt svg{flex:0 0 1.35em;width:1.35em;height:1.35em;color:var(--blue)}
.dm-opt.sel{border-color:var(--blue);background:#EEF4FF;box-shadow:0 0 0 2px rgba(37,99,235,.2);transform:scale(1.02)}
.dm-find{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;font-weight:800;font-size:.9em;color:var(--navy);opacity:0;transition:opacity .3s;text-align:center}
.dm-find.on{opacity:1}
.dm-spin{width:2.4em;height:2.4em;border-radius:50%;border:.22em solid #DCE4F0;border-top-color:var(--blue);animation:dmspin .8s linear infinite}
.dm-find small{font-weight:600;color:#5b6b82;font-size:.78em}
@keyframes dmspin{to{transform:rotate(360deg)}}
.dm-res{position:absolute;inset:0;transform:translateY(12%);opacity:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.dm-res.on{transform:none;opacity:1}
.dm-pick{background:var(--navy);color:#fff;border-radius:1em;padding:.85em .9em;position:relative;overflow:hidden}
.dm-pick:after{content:"";position:absolute;right:-1.5em;top:-1.5em;width:4.5em;height:4.5em;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.45),transparent 70%)}
.dm-k{font-size:.56em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#93C5FD;display:flex;align-items:center;gap:.4em}
.dm-k b{width:.5em;height:.5em;border-radius:50%;background:#D4FF3A;display:inline-block}
.dm-name{display:flex;gap:.55em;align-items:center;margin-top:.45em}
.dm-logo{width:2.1em;height:2.1em;border-radius:.6em;background:#fff;display:grid;place-items:center;flex:0 0 2.1em}
.dm-logo img{width:1.35em;height:1.35em}
.dm-name div{font-size:1.08em;font-weight:800;line-height:1.1}
.dm-name small{display:block;font-size:.62em;font-weight:600;color:#c7d6ee;margin-top:.15em}
.dm-why{font-size:.7em;line-height:1.4;color:#334155;margin:.8em .1em .7em}
.dm-why b{color:var(--navy)}
.dm-sh{font-size:.66em;font-weight:800;margin:.1em .1em .45em;display:flex;gap:.35em;align-items:center}
.dm-sh svg{width:1.25em;height:1.25em;color:var(--blue)}
.dm-sw{display:flex;gap:.55em;align-items:center;background:#fff;border:1px solid #E1E8F3;border-radius:.7em;padding:.6em;margin-bottom:.4em;font-size:.64em;font-weight:600;line-height:1.25}
.dm-tg{flex:0 0 2.3em;height:1.3em;border-radius:1em;background:#CBD5E1;position:relative;transition:background .3s}
.dm-tg:after{content:"";position:absolute;left:.15em;top:.15em;width:1em;height:1em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,.1,.2,1.3)}
.dm-sw.on .dm-tg{background:var(--blue)}
.dm-sw.on .dm-tg:after{transform:translateX(1em)}
.dm-price{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #DCE4F0;margin-top:.7em;padding-top:.7em;font-size:.76em;color:#5b6b82;opacity:0;transition:opacity .4s}
.dm-price.on{opacity:1}
.dm-price b{color:var(--navy);font-size:1.15em}
.dm-also{display:flex;gap:.45em;align-items:flex-start;font-size:.64em;line-height:1.35;color:#334155;background:#EEF4FF;border-radius:.7em;padding:.5em .6em;margin-top:.6em;opacity:0;transition:opacity .4s}
.dm-also.on{opacity:1}
.dm-also svg{flex:0 0 1.2em;width:1.2em;height:1.2em;color:var(--blue)}
.dm-also b{color:var(--navy)}
.dm-ctl{position:absolute;right:0;bottom:0;display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#dbe7fb;font:600 12px/1 inherit;font-family:inherit;padding:0 14px;min-height:44px;box-sizing:border-box;border-radius:999px;cursor:pointer;z-index:4}  /* 44px tap target */
.dm-ctl:hover{background:rgba(255,255,255,.16)}
.dm-ctl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.dm-ctl svg{width:13px;height:13px}

/* 4. Full-body Scout, standing on the same floor as the phone, waving toward it.
      Layers (assets/scout-full): arm behind, body, eyes on top. Arm pivot 72.4% 67%, eye line 40%. */
.dm-scout{position:absolute;z-index:3;bottom:2.6em;right:calc(17.5em - .9em);width:12.5em;aspect-ratio:396/457;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,.1,.2,1.2)}
.dm-scout img{position:absolute;inset:0;width:100%;height:100%;display:block}
.dm-scout .a{transform-origin:72.4% 67%}
.dm-scout .e{transform-origin:50% 40%;animation:dmblink 5.5s infinite}
.dm-scout.think{transform:rotate(-4deg)}
.dm-scout.wave{transform:translateY(-.4em)}
.dm-scout.wave .a{animation:dmwave 1.3s ease-in-out 2}
.dm-scout.is-paused .e,.dm-scout.is-paused .a{animation-play-state:paused}
@keyframes dmwave{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}35%{transform:rotate(6deg)}55%{transform:rotate(-13deg)}75%{transform:rotate(4deg)}}
@keyframes dmblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@media (prefers-reduced-motion:reduce){.dm *,.dm-scout,.dm-scout *{transition:none!important;animation:none!important}.dm-ctl{display:none}}

/* hero layout: desktop = demo beside the headline; phone = demo right under the headline + button */
@media (min-width:900px){.dm-wrap{padding-right:1em}.dm-scout{right:calc(1em + 17.5em - 1.2em)}}
@media (max-width:899px){
  .hs-hero{padding:26px 0 40px}
  .hs-copy{display:contents}
  .hs-hero-grid{grid-template-columns:1fr;gap:0}
  .hs-kicker{order:1}.hs-h1{order:2}.hs-cta{order:3}.dm-wrap{order:4;margin:20px 0 6px}.hs-sub{order:5}.hs-note{order:6}.hs-paths{order:7}
  .hs-h1{font-size:36px;margin-top:8px}
  .hs-cta{margin-top:16px}
  .dm{font-size:12.2px}
  .dm-wrap{padding-bottom:34px}
  /* Scout stands fully left of the phone so he never covers the result card */
  .dm-scout{right:auto;left:0;bottom:34px;width:min(140px,calc(100% - 17.5 * 12.2px - 6px))}
  .dm-ctl{font-size:11.5px}
}

/* 5. How-it-works strip: light blue */
.hs-how{background:#EAF1FF;color:var(--navy);border-top:1px solid #d6e3fb;border-bottom:1px solid #d6e3fb;padding:18px 0}
.hs-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
.hs-steps li{display:flex;gap:10px;align-items:center;font-weight:700;font-size:15.5px}
.hs-steps b{flex:0 0 30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:14px}
@media (min-width:900px){.hs-steps{grid-template-columns:repeat(3,1fr)}}

/* 6. Kit cards: 3 bullets, fine print once */
.hs-pricing .tier .desc{min-height:0}
.hs-pricing .tier ul{min-height:0;margin-bottom:18px}
.hs-fine{max-width:860px;margin:22px auto 0;text-align:center;font-size:13px;line-height:1.55;color:#9fb0cc}
.hs-fine a{color:#c8d3e6}

/* 7. Phone menu (hamburger). Desktop keeps the normal links. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-left:6px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);cursor:pointer}
.nav-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mnav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(11,31,58,.12)}
header.site .mnav .wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;padding-top:6px;padding-bottom:16px}
.mnav a:not(.btn){display:block!important;text-align:left;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--navy);text-decoration:none;font-weight:600;font-size:17px}
.mnav a[aria-current="page"]{color:var(--accent)}
.mnav .btn{margin-top:14px}
@media (max-width:760px){.nav-toggle{display:inline-flex}.nav .btn{padding:9px 12px;font-size:14px;white-space:nowrap}}
@media (max-width:420px){.nav{gap:8px}.nav .btn{padding:8px 10px;font-size:13px}.nav-toggle{margin-left:0}}   /* keep a gap between the logo and the header button on phones */
@media (max-width:369px){.nav .btn{display:none}}   /* very narrow phones: the menu and the hero button both carry 'Take the quiz' */
@media (min-width:761px){.mnav{display:none!important}}
header.site{position:sticky}
body.on-result .mnav a.btn[href$="#quiz"]{display:none}

/* 8. Result order: pick -> why -> 3 safety switches -> price -> also-consider -> 2-step start -> More details (collapsed) */
.res-safe .switches{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.res-safe .switches li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:15.5px;line-height:1.45}
.res-safe .switches li:before{content:"";flex:0 0 20px;height:20px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 9.5-4-1.2-7-5-7-9.5V6l7-3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center/20px no-repeat}
.res-price{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 2px;margin:16px 0 0}
.res-price span{color:var(--muted);font-weight:600}
.res-price b{font-size:20px;color:var(--navy)}
.res-price .pick-meta{flex-basis:100%;margin:0;font-size:14px;color:var(--muted)}
.res-also{display:flex;gap:10px;align-items:flex-start;background:var(--accent-soft);border-radius:12px;padding:10px 12px;margin:14px 0 0;font-size:15px;line-height:1.45}
.res-also .ic{color:var(--accent);margin-top:2px}
.res-start .steps{margin-bottom:0}
.res-details{margin-top:18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.res-details>summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center}
.res-details>summary::-webkit-details-marker{display:none}
.res-details>summary:after{content:"";width:10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);margin-right:4px;transition:transform .2s}
.res-details[open]>summary:after{transform:rotate(-135deg)}
.res-details>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:14px}
.res-details-body{padding:0 16px 16px}
.res-details-body>.res-more{margin-top:0;border-top:0;padding-top:0}
@media print{.res-details>summary{display:none}.res-details-body{display:block!important}}

/* 9. Quiz option icons (emoji replaced by line icons) */
.opt .ico .ic{color:var(--accent);width:22px;height:22px}
.btn .ic{width:18px;height:18px}
.perks li::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6b49' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat}
/* 10. Safety page: Study and learning modes card (spans both columns) */
.hs-study{grid-column:1/-1;background:#F5F9FF;border-color:#d6e3fb}
.hs-study-lead{margin:0 0 4px;font-size:15.5px;color:var(--ink)}
.hs-study h4{font-size:14px;margin:14px 0 2px;color:var(--navy)}
.hs-study-try{margin:14px 0 0;background:#fff;border:1px solid #d6e3fb;border-radius:12px;padding:10px 12px;font-size:14.5px}