:root{
    --navy-950:#081A2C; --navy-900:#0A2138; --navy-800:#0E2A44; --navy-700:#15395A;
    --paper:#FBF7EE; --parchment:#F3EBDA; --card:#FFFDF8;
    --ink:#20313E; --ink-soft:#5A6B77; --ink-faint:#8496A3;
    --brass:#B9822E; --brass-bright:#D6A54A; --beam:#F0D48A; --beam-soft:#F7E7BE;
    --line:#E3D7BE; --line-navy:#24486B;
    --on-navy:#E8F0F7; --on-navy-soft:#AFC4D4;
    --shadow:0 2px 6px rgba(10,33,56,.08), 0 22px 48px -24px rgba(10,33,56,.35);
    --serif:"Fraunces", Georgia, serif;
    --sans:"Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --maxw:1160px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
       font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
  h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0;text-wrap:balance;
           letter-spacing:-.01em}
  p{margin:0}
  a{color:inherit}
  img{max-width:100%;display:block}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.2rem)}
  .eyebrow{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.2em;
           text-transform:uppercase;color:var(--brass)}
  .beam-rule{display:flex;align-items:center;gap:.65rem;margin-top:.65rem}
  .beam-rule::before,.beam-rule::after{content:"";height:2px;flex:0 0 44px;
     background:linear-gradient(90deg,transparent,var(--brass-bright));}
  .beam-rule::after{background:linear-gradient(90deg,var(--brass-bright),transparent)}
  .beam-rule .dot{width:7px;height:7px;border-radius:50%;background:var(--brass-bright);
     box-shadow:0 0 10px 2px rgba(214,165,74,.55)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
       font-family:var(--sans);font-weight:700;font-size:1.02rem;text-decoration:none;
       padding:.9em 1.6em;border-radius:10px;border:2px solid transparent;cursor:pointer;
       transition:transform .16s ease, box-shadow .16s ease}
  .btn:focus-visible{outline:3px solid var(--brass-bright);outline-offset:3px}
  .btn-gold{background:linear-gradient(180deg,var(--brass-bright),var(--brass));color:#241503;
            box-shadow:0 10px 22px -10px rgba(185,130,46,.7)}
  .btn-gold:hover{transform:translateY(-2px);color:#241503}
  .btn-line{border-color:var(--brass);color:var(--brass)}
  .btn-line:hover{background:rgba(185,130,46,.08)}
  .btn-line-light{border-color:#4C6E8E;color:var(--on-navy)}
  .btn-line-light:hover{border-color:var(--beam);color:var(--beam)}
  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ─── header ─── */
  header.site{position:sticky;top:0;z-index:60;background:rgba(251,247,238,.92);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:1.6rem;height:76px}
  .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
  .brand svg{flex:0 0 auto}
  .brand .word{font-family:var(--serif);font-weight:650;font-size:1.5rem;letter-spacing:-.01em}
  .brand .word b{color:var(--brass);font-weight:650}
  .nav nav{display:flex;gap:1.5rem;margin-left:auto;align-items:center}
  .nav nav a:not(.btn){font-weight:600;font-size:1rem;color:var(--ink-soft);text-decoration:none}
  .nav nav a:not(.btn):hover{color:var(--brass)}
  @media (max-width:780px){.nav nav a.hs{display:none}}

  /* ─── hero ─── */
  .hero{position:relative;overflow:hidden;color:var(--on-navy);
    background:
      radial-gradient(90rem 40rem at 72% -18%, rgba(240,212,138,.16), transparent 55%),
      linear-gradient(178deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-950) 100%)}
  .hero .wrap{position:relative;display:grid;grid-template-columns:1.08fr .92fr;
      gap:clamp(1.5rem,4vw,4rem);align-items:center;
      padding-top:clamp(3.4rem,7vw,6.2rem);padding-bottom:clamp(3.8rem,8vw,7rem)}
  @media (max-width:920px){.hero .wrap{grid-template-columns:1fr}}
  .hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);color:#FFFFFF}
  .hero h1 em{font-style:italic;color:var(--beam);font-weight:600}
  .hero .lede{font-size:clamp(1.12rem,1.6vw,1.3rem);color:var(--on-navy-soft);
      max-width:34ch;margin:1.2rem 0 1.9rem}
  .hero .actions{display:flex;flex-wrap:wrap;gap:.9rem}
  .ticks{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.9rem;font-size:.95rem;color:var(--on-navy-soft)}
  .ticks span{display:flex;align-items:center;gap:.45rem}
  .ticks svg{flex:0 0 auto}
  .rise{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
  .rise.d2{animation-delay:.12s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.38s}
  @keyframes rise{to{opacity:1;transform:none}}
  .scene{width:min(100%,470px);margin:0 auto}
  .lamp-glow{animation:pulse 6.5s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.75}50%{opacity:1}}

  /* ─── craft strip ─── */
  .craft{background:var(--parchment);border-bottom:1px solid var(--line)}
  .craft .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1rem,3vw,2.6rem);
      padding-top:1.05rem;padding-bottom:1.05rem}
  .craft span{display:flex;align-items:center;gap:.55rem;font-weight:600;font-size:.98rem;color:#6d5a33}

  /* ─── sections ─── */
  section{padding:clamp(3.6rem,7vw,6.4rem) 0}
  .sec-head{max-width:62ch}
  .sec-head h2{font-size:clamp(2rem,3.6vw,2.9rem);margin:.55rem 0 .6rem}
  .sec-head p{color:var(--ink-soft);font-size:1.13rem}

  /* ─── learn ─── */
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.35rem;margin-top:2.4rem}
  @media (max-width:940px){.cards{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:620px){.cards{grid-template-columns:1fr}}
  .card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
        padding:1.5rem 1.45rem 1.4rem;display:flex;flex-direction:column;gap:.65rem;
        box-shadow:var(--shadow);text-decoration:none;
        transition:transform .18s ease, border-color .18s ease}
  .card::before{content:"";position:absolute;inset:0 auto auto 0;height:4px;width:100%;
        border-radius:14px 14px 0 0;
        background:linear-gradient(90deg,var(--brass-bright),rgba(214,165,74,.15))}
  .card:hover{transform:translateY(-5px);border-color:var(--brass-bright)}
  .chip{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;
        text-transform:uppercase;color:#7c5a1d;background:var(--beam-soft);
        padding:.32em .75em;border-radius:999px}
  .card h3{font-size:1.32rem;line-height:1.22;font-weight:600;color:var(--ink)}
  .card p{color:var(--ink-soft);font-size:1rem}
  .card .meta{margin-top:auto;padding-top:.5rem;font-size:.9rem;font-weight:600;color:var(--ink-faint)}
  .card .meta b{color:var(--brass)}
  .more{margin-top:2.4rem;text-align:center}

  /* ─── brief band ─── */
  .brief{position:relative;overflow:hidden;color:var(--on-navy);
    background:
      radial-gradient(60rem 26rem at 15% 120%, rgba(240,212,138,.14), transparent 60%),
      linear-gradient(120deg,var(--navy-900),var(--navy-700))}
  .brief .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:2.4rem;align-items:center}
  @media (max-width:860px){.brief .wrap{grid-template-columns:1fr}}
  .brief h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem)}
  .brief p{color:var(--on-navy-soft);margin-top:.7rem;max-width:44ch}
  .signup{display:flex;gap:.7rem;flex-wrap:wrap}
  .signup input{flex:1 1 240px;padding:.95em 1.1em;border-radius:10px;border:2px solid #38607f;
      background:#0A1C2E;color:#fff;font-size:1.02rem;font-family:var(--sans)}
  .signup input::placeholder{color:#7E98AC}
  .signup input:focus-visible{outline:3px solid var(--beam);outline-offset:2px;border-color:var(--beam)}
  .fine{font-size:.86rem;color:#87A0B3;margin-top:.75rem}

  /* ─── books ─── */
  .books{background:var(--parchment)}
  .books-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.4rem);
      align-items:center;margin-top:2.2rem}
  @media (max-width:860px){.books-grid{grid-template-columns:1fr}}
  .shelf{display:flex;justify-content:center;align-items:flex-end;gap:1.6rem;padding:1rem 0 1.4rem}
  .shelf img{width:min(46%,225px);height:auto;border-radius:6px;
      box-shadow:0 10px 20px rgba(10,33,56,.18), 0 34px 60px -22px rgba(10,33,56,.55);
      border:1px solid rgba(10,33,56,.12);transition:transform .25s ease}
  .shelf img:first-child{transform:rotate(-3.5deg) translateY(6px)}
  .shelf img:last-child{transform:rotate(2.5deg)}
  .shelf img:hover{transform:rotate(0) translateY(-6px)}
  .books h2{font-size:clamp(1.9rem,3.2vw,2.7rem)}
  .books .body{color:var(--ink-soft);margin-top:.8rem;font-size:1.1rem}
  .books .actions{margin-top:1.6rem;display:flex;gap:.9rem;flex-wrap:wrap}

  /* ─── app ─── */
  .app .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.6rem);align-items:center}
  @media (max-width:880px){.app .wrap{grid-template-columns:1fr}}
  .feat{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.7rem}
  @media (max-width:540px){.feat{grid-template-columns:1fr}}
  .fchip{display:flex;gap:.7rem;align-items:flex-start;background:var(--card);
      border:1px solid var(--line);border-radius:12px;padding:.95rem 1.05rem}
  .fchip svg{flex:0 0 auto;margin-top:3px}
  .fchip b{display:block;font-size:1rem}
  .fchip span{font-size:.92rem;color:var(--ink-soft)}
  .price{margin-top:1.7rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
  .price .big{font-family:var(--serif);font-size:1.9rem;font-weight:650;color:var(--navy-800)}
  .price .sm{color:var(--ink-soft)}
  .phone{max-width:390px;margin:0 auto;background:linear-gradient(165deg,var(--navy-800),var(--navy-950));
      border-radius:26px;padding:1.5rem;color:var(--on-navy);box-shadow:var(--shadow);
      border:1px solid var(--line-navy)}
  .phone .bar{display:flex;align-items:center;gap:.5rem;font-family:var(--serif);font-weight:650;
      font-size:1.1rem;color:#fff;padding-bottom:.9rem;border-bottom:1px solid var(--line-navy)}
  .phone .msg{margin:1rem 0;color:var(--on-navy-soft);font-style:italic;font-size:.98rem}
  .verdict{background:#0A1C2E;border:1px solid #3a2b2b;border-radius:14px;padding:1.05rem 1.1rem}
  .verdict .flag{display:flex;align-items:center;gap:.55rem;font-weight:700;color:#F1A79C}
  .verdict .flag i{width:12px;height:12px;border-radius:50%;background:#E4695B;
      box-shadow:0 0 9px 1px rgba(228,105,91,.8)}
  .verdict p{color:#AFC4D4;font-size:.95rem;margin-top:.6rem}

  /* ─── mission ─── */
  .mission{background:
      radial-gradient(70rem 30rem at 50% -30%, rgba(240,212,138,.15), transparent 60%),
      linear-gradient(180deg,var(--navy-900),var(--navy-950));color:var(--on-navy)}
  .mission .wrap{max-width:860px;text-align:center}
  .mission h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.8rem)}
  .mission .body{color:var(--on-navy-soft);font-size:1.16rem;margin-top:1.1rem}
  .quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.7rem);
      color:var(--beam);margin-top:2rem;line-height:1.4}
  .quote small{display:block;font-family:var(--sans);font-style:normal;font-size:.82rem;
      font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-soft);margin-top:.9rem}
  .mission .beam-rule{justify-content:center;margin:1.4rem auto 0}

  /* ─── footer ─── */
  footer.site{background:var(--navy-950);color:#9FB4C4;padding:3.4rem 0 2.2rem;
      border-top:2px solid var(--brass)}
  .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
  @media (max-width:780px){.foot{grid-template-columns:1fr 1fr}}
  footer.site h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
      color:#6B849A;margin:0 0 1rem;font-weight:700}
  footer.site a{display:block;color:#B9CBDA;padding:.28rem 0;font-size:.98rem;text-decoration:none}
  footer.site a:hover{color:var(--beam)}
  .foot .word{font-family:var(--serif);font-weight:650;font-size:1.45rem;color:#fff}
  .foot .word b{color:var(--brass-bright)}
  .foot .tag{color:#7E96AA;font-size:.98rem;max-width:26ch;margin-top:.5rem}
  .legal{border-top:1px solid #16334E;margin-top:2.4rem;padding-top:1.4rem;display:flex;
      justify-content:space-between;gap:1rem;flex-wrap:wrap;color:#6B849A;font-size:.86rem}

/* ══════════════ Guides (article pages + index) ══════════════ */
.guide-hero{background:
    radial-gradient(70rem 30rem at 50% -40%, rgba(240,212,138,.14), transparent 60%),
    linear-gradient(178deg,var(--navy-900),var(--navy-800));color:var(--on-navy)}
.guide-hero .wrap{padding-top:clamp(2.6rem,5vw,4rem);padding-bottom:clamp(2.4rem,4.5vw,3.4rem);max-width:820px}
.guide-hero h1{color:#fff;font-size:clamp(2rem,4.2vw,3.1rem);margin:.7rem 0 0}
.guide-meta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1.1rem;
    color:var(--on-navy-soft);font-size:.98rem}
.guide-meta .chip{background:rgba(240,212,138,.16);color:var(--beam)}
.crumb{font-size:.95rem;color:var(--on-navy-soft);text-decoration:none;font-weight:600}
.crumb:hover{color:var(--beam)}

.prose{max-width:720px;margin:0 auto;padding:clamp(2.2rem,5vw,3.4rem) 0 1rem;font-size:1.14rem;line-height:1.75}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:2.4rem 0 .8rem;color:var(--navy-800)}
.prose h3{font-size:1.28rem;margin:1.9rem 0 .6rem;color:var(--navy-800)}
.prose p{margin:0 0 1.15rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.5rem}
.prose li{margin:0 0 .6rem}
.prose li::marker{color:var(--brass)}
.prose strong{color:var(--navy-800)}
.prose a{color:var(--brass);text-underline-offset:3px}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.prose h2+p,.prose h3+p{margin-top:0}

.guide-cta{max-width:720px;margin:2.6rem auto 0;background:
    linear-gradient(140deg,var(--navy-800),var(--navy-700));color:var(--on-navy);
    border-radius:18px;padding:clamp(1.5rem,3vw,2.1rem);box-shadow:var(--shadow)}
.guide-cta h3{font-family:var(--serif);color:#fff;font-size:1.45rem;margin:0 0 .5rem}
.guide-cta p{color:var(--on-navy-soft);margin:0 0 1.2rem}

.guide-foot{max-width:720px;margin:2.6rem auto 0;padding-top:1.6rem;border-top:1px solid var(--line);
    display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.guide-disclaimer{max-width:720px;margin:1.6rem auto 0;color:var(--ink-faint);font-size:.92rem}

.index-hero{background:var(--parchment);border-bottom:1px solid var(--line)}
.index-hero .wrap{padding-top:clamp(2.6rem,5vw,3.8rem);padding-bottom:clamp(2rem,4vw,2.8rem)}
.index-hero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin:.6rem 0 .6rem}
.index-hero p{color:var(--ink-soft);font-size:1.14rem;max-width:60ch}
.card.soon{opacity:.62;pointer-events:none}
.card .soon-tag{align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-faint);background:var(--parchment);
    padding:.32em .75em;border-radius:999px}