:root{
    --paper:#fdfaf4;        /* the cover's parchment */
    --paper-2:#f7f0e3;
    --paper-3:#f1e7d4;
    --brown:#3f2817;        /* the title brown */
    --brown-2:#5c3d24;
    --body:#5a4a3c;
    --muted:#9a8873;
    --rule:#e7dac2;
    --gold:#b7822a;
    --gold-lt:#d7a442;
    --gold-bg:#fbf3e0;
    --display:"Lora",Georgia,"Times New Roman",serif;
    --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --shadow:0 1px 2px rgba(63,40,23,.05),0 8px 26px rgba(63,40,23,.08);
    --lift:0 8px 20px rgba(63,40,23,.10),0 30px 70px rgba(63,40,23,.16);
    --wrap:1140px;
  }
  *{box-sizing:border-box}
  img{max-width:100%; height:auto; display:block}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--paper); color:var(--body);
    font-family:var(--text); font-size:17px; line-height:1.72;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
  a{color:inherit}
  h1,h2,h3,h4{font-family:var(--display); color:var(--brown); line-height:1.24; margin:0; font-weight:600}
  .eyebrow{
    font-family:var(--text); font-size:11.5px; font-weight:600; letter-spacing:.4px;
    text-transform:none; color:var(--muted); margin:0 0 10px;
  }
  hr.rule{width:52px; height:2px; background:var(--gold); margin:0 0 24px; border:0}

  /* ---------- top ---------- */
  header.top{
    position:sticky; top:0; z-index:40; background:rgba(253,250,244,.9);
    backdrop-filter:saturate(170%) blur(10px); border-bottom:1px solid var(--rule);
  }
  .top .wrap{display:flex; align-items:center; justify-content:space-between; height:74px}
  .brand{
    font-family:var(--display); font-size:21px; font-weight:600; color:var(--brown);
    text-decoration:none; letter-spacing:.4px;
  }
  .brand i{font-style:italic; color:var(--gold)}
  nav.main{display:flex; gap:34px; align-items:center}
  nav.main a{
    color:var(--body); text-decoration:none; font-size:13.5px; font-weight:600;
    letter-spacing:.9px; text-transform:uppercase; transition:color .15s ease;
  }
  nav.main a:hover{color:var(--gold)}
  @media (max-width:880px){ nav.main{display:none} }

  /* ---------- hero ---------- */
  .hero{background:var(--paper-2); padding:80px 0 86px; position:relative; border-bottom:1px solid var(--rule)}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center}
  .hero h1{
    font-size:clamp(32px,4.1vw,50px); letter-spacing:-.018em; margin:0 0 24px; font-weight:600;
  }
  .hero h1 i{font-style:italic; color:var(--gold)}
  .hero .lede{font-size:18.5px; line-height:1.78; color:var(--body); max-width:33em; margin:0 0 34px}
  .btns{display:flex; flex-wrap:wrap; gap:14px}
  .btn{
    display:inline-block; font-family:var(--text); font-size:14px; font-weight:700;
    letter-spacing:1.2px; text-transform:uppercase; padding:16px 32px; border-radius:2px;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    transition:background .16s ease,color .16s ease,border-color .16s ease,transform .14s ease;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn-gold{background:var(--gold); color:#fff}
  .btn-gold:hover{background:var(--brown)}
  .btn-line{border-color:var(--brown); color:var(--brown)}
  .btn-line:hover{background:var(--brown); color:var(--paper)}

  .hero-book{justify-self:start; position:relative; width:fit-content; margin:0}
  .hero-book img{width:100%; max-width:360px; display:block; filter:drop-shadow(0 14px 26px rgba(63,40,23,.20))}
  @media (max-width:900px){
    .hero{padding:52px 0 64px}
    .hero-grid{grid-template-columns:1fr; gap:42px}
    .hero-book{order:-1}
    .hero-book img{max-width:280px; margin:0 auto}
  }

  /* ---------- marks ---------- */
  .marks{background:var(--brown); color:var(--paper); padding:44px 0}
  .marks .row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
  .marks .n{font-family:var(--display); font-size:34px; color:var(--gold-lt); line-height:1; font-weight:600}
  .marks .l{font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:#bda68a; margin-top:10px}
  @media (max-width:700px){ .marks .row{grid-template-columns:repeat(2,1fr); gap:32px} }

  /* ---------- sections ---------- */
  section{padding:104px 0}
  section.tint{background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  .sec-head{max-width:700px; margin:0 0 52px}
  .sec-head h2{font-size:clamp(26px,3.1vw,36px); margin:0 0 16px; letter-spacing:-.015em}
  .sec-head p{font-size:18px; margin:0}

  /* ---------- the book ---------- */
  .book{display:grid; grid-template-columns:400px 1fr; gap:76px; align-items:start}
  .book-cover img{width:100%; display:block; filter:drop-shadow(0 12px 24px rgba(63,40,23,.18))}
  .book h2{font-size:clamp(27px,3.2vw,38px); margin:0 0 12px; letter-spacing:-.015em}
  .book .sub{
    font-family:var(--display); font-style:italic; font-size:18.5px; color:var(--gold);
    margin:0 0 30px; line-height:1.5; font-weight:500;
  }
  .themes{display:flex; flex-wrap:wrap; gap:9px; margin:0 0 32px; padding:0; list-style:none}
  .themes li{
    font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--muted); border:1px solid var(--rule); border-radius:2px; padding:8px 14px;
  }
  .book p{margin:0 0 20px}
  .pull{
    font-family:var(--display); font-style:italic; font-size:21px; line-height:1.55;
    color:var(--brown); border-left:2px solid var(--gold); padding:4px 0 4px 26px; margin:32px 0;
    font-weight:500;
  }

  .buy{
    border:1px solid var(--rule); border-radius:3px; background:#fff;
    padding:30px 32px; margin:38px 0 0;
  }
  .buy h3{font-size:22px; margin:0 0 8px}
  .buy .note{font-size:15px; color:var(--muted); margin:0 0 22px}
  .price{font-family:var(--display); font-size:33px; color:var(--brown); line-height:1; font-weight:600}
  .price small{font-family:var(--text); font-size:13.5px; font-weight:500; color:var(--muted); letter-spacing:.3px}
  .stores{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:24px 0 0; border-top:1px solid var(--rule)}
  .stores .lbl{
    width:100%; font-size:10.5px; letter-spacing:2px; text-transform:uppercase;
    color:var(--muted); margin:0 0 6px; font-weight:700;
  }
  .store{
    font-size:13.5px; font-weight:600; text-decoration:none; color:var(--body);
    border:1px solid var(--rule); border-radius:2px; padding:11px 18px;
    transition:border-color .15s ease,color .15s ease,background .15s ease;
  }
  .store:hover{border-color:var(--gold); color:var(--brown); background:var(--gold-bg)}
  @media (max-width:940px){ .book{grid-template-columns:1fr; gap:44px} .book-cover{max-width:320px} }

  /* The reader bonus. One self-contained block, so it lifts out in a single edit. */
  .bonus{
    margin:24px 0 0; padding:20px 22px; border-radius:3px;
    background:var(--gold-bg); border:1px solid #ecdcb8; border-left:3px solid var(--gold);
    display:flex; gap:16px; align-items:flex-start;
  }
  .bonus h4{font-family:var(--display); font-size:18px; color:var(--brown); margin:0 0 6px; font-weight:600}
  .bonus p{font-size:15px; color:var(--body); margin:0; line-height:1.62}
  .bonus .free{
    display:inline-block; font-family:var(--text); font-size:9.5px; font-weight:700;
    letter-spacing:1.6px; text-transform:uppercase; color:#fff; background:var(--gold);
    border-radius:2px; padding:4px 9px; margin-left:11px; vertical-align:4px;
  }

  /* ---------- ventures ---------- */
  .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px}
  .card{
    background:#fff; border:1px solid var(--rule); border-radius:14px; padding:0;
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow:0 1px 2px rgba(63,40,23,.04), 0 10px 30px rgba(63,40,23,.055);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .card:hover{
    transform:translateY(-4px); border-color:#e8d5ab;
    box-shadow:0 4px 10px rgba(63,40,23,.07), 0 22px 54px rgba(63,40,23,.13);
  }
  .vbody{padding:28px 30px 30px; display:flex; flex-direction:column; flex:1}
  .card .kind{font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin:0 0 16px}
  .card h3{font-size:24px; margin:0 0 12px}
  .card p{font-size:15.5px; margin:0 0 26px; flex:1}
  .card a.go{
    display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
    font-size:12.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--brown); text-decoration:none; background:#fff;
    border:1px solid var(--rule); border-radius:999px; padding:11px 20px;
    transition:background .17s ease, color .17s ease, border-color .17s ease;
  }
  .card a.go:hover{background:var(--brown); color:var(--paper); border-color:var(--brown)}
  .card a.go .ext{font-size:13px; transition:transform .17s ease}
  .card a.go:hover .ext{transform:translate(2px,-2px)}

  /* ---------- about ---------- */
  .about{display:grid; grid-template-columns:.8fr 1.2fr; gap:68px; align-items:center}
  .portrait{position:relative}
  .portrait img{width:100%; display:block; border-radius:3px; border:1px solid var(--rule)}
  .about h2{font-size:clamp(26px,3.1vw,36px); margin:0 0 22px; letter-spacing:-.015em}
  .about p{margin:0 0 18px}
  @media (max-width:900px){ .about{grid-template-columns:1fr; gap:44px} .portrait{max-width:330px} }

  /* ---------- contact ---------- */
  .contact-box{
    background:var(--brown); color:var(--paper); border-radius:3px;
    padding:66px 52px; text-align:center;
  }
  .contact-box h2{font-size:clamp(25px,3vw,34px); color:var(--paper); margin:0 0 16px; letter-spacing:-.015em}
  .contact-box p{color:#c4ae93; max-width:42em; margin:0 auto 32px}
  .contact-box .eyebrow{color:var(--gold-lt)}
  .contact-box .btn-line{border-color:rgba(253,250,244,.45); color:var(--paper)}
  .contact-box .btn-line:hover{background:var(--paper); color:var(--brown)}

  /* ---------- footer ---------- */
  footer{background:#2e1c0f; color:#a08c74; padding:64px 0 44px; font-size:14px; line-height:1.8}
  footer .cols{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; margin:0 0 40px}
  footer h4{
    font-family:var(--text); font-size:10.5px; letter-spacing:2.2px; text-transform:uppercase;
    color:var(--paper); margin:0 0 15px; font-weight:700;
  }
  footer a{color:#bba991; text-decoration:none}
  footer a:hover{color:var(--gold-lt)}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin:0 0 8px}
  .legal{border-top:1px solid rgba(253,250,244,.13); padding-top:30px; font-size:12.5px; color:#8b795f}
  .legal p{margin:0 0 12px}
  .legal strong{color:#bba991; font-weight:600}
  .warn{border-left:2px solid var(--gold); padding-left:16px; margin:0 0 18px}
  @media (max-width:780px){ footer .cols{grid-template-columns:1fr; gap:28px} }

  .todo{
    background:var(--gold-bg); border:1px dashed #d8b668; border-radius:3px;
    padding:13px 17px; font-size:13.5px; color:#7a5a16; margin:18px 0 0; line-height:1.62;
  }

  /* ---------- legal / document pages ---------- */
  .pagehead{background:var(--paper-2); padding:58px 0 48px; border-bottom:1px solid var(--rule)}
  .pagehead h1{font-size:clamp(28px,3.6vw,42px); margin:0 0 14px; letter-spacing:-.018em}
  .pagehead .updated{
    font-size:11px; letter-spacing:2px; text-transform:uppercase;
    color:var(--muted); font-weight:700;
  }
  .doc{max-width:760px; margin:0 auto; padding:72px 26px 96px}
  .doc .lead{
    font-family:var(--display); font-style:italic; font-size:19px; line-height:1.6;
    color:var(--brown); margin:0 0 36px; font-weight:400;
  }
  .doc h2{font-size:23px; margin:48px 0 14px}
  .doc h2:first-of-type{margin-top:0}
  .doc p{margin:0 0 18px}
  .doc ul{margin:0 0 20px; padding-left:22px}
  .doc li{margin:0 0 10px}
  .doc a{
    color:var(--brown); text-decoration:underline;
    text-decoration-color:var(--gold); text-underline-offset:3px;
  }
  .doc a:hover{color:var(--gold)}
  .doc .box{
    background:var(--gold-bg); border:1px solid var(--rule); border-left:3px solid var(--gold);
    padding:22px 26px; margin:0 0 28px; border-radius:3px;
  }
  .doc .box p:last-child{margin:0}
  .doc .sig{
    border-top:1px solid var(--rule); margin:52px 0 0; padding:26px 0 0;
    font-size:14.5px; color:var(--muted);
  }

  /* The About section's way through to the journey page. */
  .more{margin:28px 0 0; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px}
  .more a{
    font-weight:600; color:var(--brown); text-decoration:none;
    border-bottom:2px solid var(--gold); padding-bottom:2px;
  }
  .more a::after{content:" →"; color:var(--gold)}
  .more a:hover{color:var(--gold)}
  .more-note{font-size:14px; color:var(--muted)}

  /* ---------- journey: the year rail and the two schematics ---------- */
  .doc .tl{
    list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
    margin:0 0 46px; padding:0; position:relative;
  }
  .doc .tl::before{
    content:""; position:absolute; left:5px; right:25%; top:9px; height:1px; background:var(--rule);
  }
  .doc .tl li{position:relative; margin:0; padding:28px 14px 0 0}
  .doc .tl li::before{
    content:""; position:absolute; left:0; top:4px; width:11px; height:11px;
    border-radius:50%; background:var(--paper); border:2px solid var(--rule);
  }
  .doc .tl li.now::before{background:var(--gold); border-color:var(--gold)}
  .doc .tl .y{
    display:block; font-family:var(--display); font-size:19px; font-weight:600;
    color:var(--brown); line-height:1.1;
  }
  .doc .tl .w{display:block; font-size:12.5px; color:var(--muted); line-height:1.45; margin-top:4px}

  .doc .fig{margin:34px 0 30px; padding:0}
  .doc .fig svg{width:100%; height:auto; display:block; overflow:visible}
  .doc .fig figcaption{
    font-size:13px; color:var(--muted); line-height:1.6;
    margin-top:12px; border-top:1px solid var(--rule); padding-top:11px;
  }
  .doc .fig .ax{stroke:var(--rule); stroke-width:1}
  .doc .fig .ln{fill:none; stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round}
  .doc .fig .rec{stroke:var(--gold)}
  .doc .fig .bad{stroke:#c9b89c; stroke-dasharray:5 5}
  .doc .fig .dot{fill:var(--brown)}
  .doc .fig .lbl{font-family:var(--text); font-size:12px; fill:var(--muted)}
  .doc .fig .lbl.g{fill:var(--gold); font-weight:600}
  .doc .fig .lbl.r{fill:#a2906f}
  .doc .fig .lbl.ev{fill:var(--brown); font-weight:600}
  .doc .fig .lbl.t{font-size:11px; letter-spacing:.4px}
  .doc .fig .lbl.n{font-size:11px; font-weight:700; letter-spacing:1.5px; fill:var(--muted)}
  .doc .fig .lbl.big{font-size:15px; font-weight:600; letter-spacing:.3px; fill:var(--paper)}
  .doc .fig .lbl.big.dark{fill:var(--brown)}
  .doc .fig .band.mind{fill:var(--brown)}
  .doc .fig .band.anal{fill:var(--gold-bg); stroke:var(--gold); stroke-width:1}

  @media(max-width:700px){
    .doc .tl{grid-template-columns:1fr; margin-bottom:38px}
    .doc .tl::before{left:5px; right:auto; top:6px; bottom:16px; width:1px; height:auto}
    .doc .tl li{padding:0 0 16px 24px}
    .doc .tl li::before{top:5px}
    .doc .tl .y{display:inline; font-size:17px; margin-right:9px}
    .doc .tl .w{display:inline; font-size:14px}
  }

  /* ---------- footer, rebuilt flat and light ---------- */
  footer{background:#f3efe7; color:var(--body); border-top:1px solid var(--rule);
         padding:58px 0 40px; font-size:14.5px; line-height:1.7}
  footer .cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:34px; margin:0 0 38px}
  footer h4{font-family:var(--text); font-size:14.5px; color:var(--brown);
            margin:0 0 16px; font-weight:700; line-height:1.3}
  footer a{color:var(--body); text-decoration:underline; text-decoration-color:#cfc2aa;
           text-underline-offset:3px}
  footer a:hover{color:var(--gold); text-decoration-color:var(--gold)}
  footer ul{list-style:none; margin:0; padding:0}
  footer li{margin:0 0 10px}
  .fbrand .brand{font-size:22px; display:inline-block; margin:0 0 18px; text-decoration:none}
  .flegal{margin:0 0 16px; font-size:14px}
  .fcopy{margin:0; font-size:13.5px; color:var(--muted); line-height:1.65}
  .reach li{display:flex; gap:10px; align-items:flex-start; margin:0 0 12px}
  .reach .ri{color:var(--gold); flex:0 0 16px; line-height:1.6}
  .reach .addr{color:var(--body)}
  .legal{border-top:1px solid var(--rule); padding-top:24px; font-size:12.5px; color:var(--muted)}
  .legal p{margin:0 0 8px}
  .doc .reg{font-size:16px; color:var(--brown); margin:0 0 18px; line-height:1.8}
  @media (max-width:980px){ footer .cols{grid-template-columns:1fr 1fr; gap:30px} }
  @media (max-width:560px){ footer .cols{grid-template-columns:1fr} }

  /* ---------- ordering not open yet ---------- */
  .soon{margin:24px 0 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
  .btn-soon{
    background:var(--paper-3); color:var(--muted); border:1px dashed #d6c7ab;
    cursor:default; letter-spacing:1.2px;
  }
  .btn-soon:hover{transform:none}
  .soon-note{flex:1; min-width:230px; font-size:14px; color:var(--muted); line-height:1.6}
  .soon-note a{color:var(--brown)}

  /* ---------- wordmark ---------- */
  .brand{display:inline-flex; align-items:baseline; gap:9px; text-decoration:none}
  .brand .mk{width:52px; height:36px; flex:0 0 52px; display:block}
  .brand .wm{line-height:1}
  .fbrand .brand .mk{width:47px; height:32px; flex:0 0 47px}

  /* ---------- ventures, logo cards ---------- */
  .sec-head.centred{margin:0 auto 52px; text-align:center}
  .vlogo{
    height:124px; margin:0; padding:0 30px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(140deg,#fdfbf6 0%, #f6eedd 55%, #f1e6d1 100%);
    border-bottom:1px solid var(--rule);
  }
  .vlogo img{max-height:56px; width:auto; max-width:230px; object-fit:contain}
  .card .ext{font-size:12px; vertical-align:1px; margin-left:2px}

  /* ---------- about ---------- */
  .about{align-items:start}
  .portrait img{
    border-radius:14px; border:0;
    box-shadow:0 2px 6px rgba(63,40,23,.07), 0 20px 50px rgba(63,40,23,.16);
  }
  .about-text .lead-p{
    font-family:var(--display); font-size:21px; line-height:1.55; color:var(--brown);
    margin:0 0 22px; font-weight:500;
  }
  .creds{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0}
  .creds li{
    font-size:11.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
    color:var(--brown-2, #5c3d24); background:#fff; border:1px solid var(--rule);
    border-radius:999px; padding:8px 15px;
  }
  .creds li.reg{background:var(--gold-bg); border-color:#e8d5ab; color:#8a6318}

  .vlogo{position:relative}
  .vyear{
    position:absolute; top:16px; right:18px;
    font-size:11.5px; font-weight:700; letter-spacing:1px; color:#8a6318;
    background:#fff; border:1px solid #e8d5ab; border-radius:999px; padding:5px 12px;
  }

  /* the hero buttons pick up the same pill shape as the card links */
  .hero .btn{border-radius:999px; padding:15px 24px; font-size:13px; letter-spacing:1px}
  .hero .btns{gap:11px; flex-wrap:nowrap}
  @media (max-width:980px){ .hero .btns{flex-wrap:wrap} }
  .hero .btn .pr{font-weight:600; opacity:.85; letter-spacing:.6px; margin-left:2px}

  /* free-month starburst, gold, at the book's top right */
  .hero-book{position:relative}
  .bookbadge{
    position:absolute; z-index:3; width:118px; height:118px; top:-12px; right:-108px;
    filter:drop-shadow(0 6px 15px rgba(63,40,23,.28));
    animation:badgefloat 3.6s ease-in-out infinite;
  }
  @keyframes badgefloat{
    0%,100%{transform:translateY(0) rotate(-8deg)}
    50%    {transform:translateY(-9px) rotate(-3deg)}
  }
  @media (prefers-reduced-motion:reduce){ .bookbadge{animation:none; transform:rotate(-7deg)} }
  @media (max-width:1150px){ .bookbadge{right:-94px; top:-10px; width:104px; height:104px} }
  @media (max-width:900px){ .bookbadge{right:auto; left:50%; margin-left:118px; top:0; width:92px; height:92px} }
  @media (max-width:640px){ .bookbadge{left:auto; right:0; margin-left:0; top:-16px; width:82px; height:82px} }

  /* ---------- the order page ---------- */
  .orderpage{padding:64px 0 96px}
  .ocols{display:grid; grid-template-columns:1fr 348px; gap:54px; align-items:start}

  .ostep{margin:0 0 54px; padding:0}      /* the page-wide section padding does not apply here */
  .ostep:last-child{margin-bottom:0}
  .ostep h2{font-size:25px; margin:0 0 10px; letter-spacing:-.012em}
  .snum{
    font-size:10.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
    color:var(--gold); margin:0 0 9px;
  }
  .slead{font-size:15.5px; color:var(--body); margin:0 0 26px; max-width:58ch}

  .fld{display:block; margin:0 0 18px}
  .fld > span{
    display:block; font-size:12.5px; font-weight:600; letter-spacing:.2px;
    color:var(--brown); margin:0 0 7px;
  }
  .fld > span em{font-style:normal; font-weight:400; color:var(--muted)}
  .fld input, .fld select{
    width:100%; font-family:var(--text); font-size:16px; color:var(--brown);
    background:#fff; border:1px solid var(--rule); border-radius:3px;
    padding:13px 15px; transition:border-color .15s ease, box-shadow .15s ease;
  }
  .fld input:focus, .fld select:focus{
    outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(183,130,42,.13);
  }
  .fld input:user-invalid{border-color:#c0603f}
  .fld .hint{display:block; font-style:normal; font-size:13px; color:var(--muted); margin:7px 0 0}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
  .grid3{display:grid; grid-template-columns:1.3fr 1.3fr 1fr; gap:0 18px}

  /* step 3 - paying */
  .pay{
    display:grid; grid-template-columns:auto auto; gap:38px; align-items:center;
    width:fit-content; max-width:100%;
    background:#fff; border:1px solid var(--rule); border-radius:4px; padding:30px 34px;
  }
  .qrcard{
    background:#fff; border:1px solid #ecdcb8; border-radius:4px; padding:16px 16px 10px;
    box-shadow:var(--shadow); text-align:center;
  }
  .qrcard img{width:224px; height:224px; margin:0 auto}
  .qrcap{
    font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--muted); margin:12px 0 0;
  }
  .payname{font-size:14px; color:var(--muted); margin:0 0 16px}
  .upibtn{display:inline-block}

  /* step 4 - confirming */
  .agree{display:flex; gap:12px; align-items:flex-start; margin:10px 0 0; font-size:14.5px}
  .agree input{margin:5px 0 0; width:17px; height:17px; accent-color:var(--gold); flex:0 0 17px}
  .agree a{color:var(--brown); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .err{
    margin:20px 0 0; font-size:14.5px; color:#8c3d20;
    background:#fdf1ec; border:1px solid #f0cfc1; border-left:3px solid #c0603f;
    border-radius:3px; padding:14px 18px;
  }
  .submit{margin:26px 0 0; border-radius:999px; padding:16px 34px; font-size:13px; letter-spacing:1px}
  .submit:disabled{opacity:.55; cursor:default; transform:none}

  /* the summary */
  .osum{position:sticky; top:96px}
  .sumcard{
    background:#fff; border:1px solid var(--rule); border-radius:4px;
    padding:28px 28px 26px; box-shadow:var(--shadow);
  }
  .sumbook{width:116px; height:auto; margin:0 auto 20px; filter:drop-shadow(0 8px 20px rgba(63,40,23,.2))}
  .sumcard h3{font-size:19px; text-align:center; margin:0 0 5px}
  .sumby{
    font-size:10.5px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
    color:var(--gold); text-align:center; margin:0 0 24px;
  }
  .sumlines{list-style:none; margin:0; padding:20px 0 0; border-top:1px solid var(--rule)}
  .sumlines li{display:flex; justify-content:space-between; gap:14px; font-size:14.5px; margin:0 0 11px}
  .sumlines b{color:var(--brown); font-weight:600; white-space:nowrap}
  .sumtot{
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    margin:14px 0 0; padding:16px 0 0; border-top:1px solid var(--rule);
  }
  .sumtot span{font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--muted)}
  .sumtot b{font-family:var(--display); font-size:30px; font-weight:600; color:var(--brown); line-height:1}
  .sumbonus{
    margin:24px 0 0; padding:17px 19px; border-radius:3px;
    background:var(--gold-bg); border:1px solid #ecdcb8; border-left:3px solid var(--gold);
  }
  .sumbonus h4{font-family:var(--display); font-size:16px; margin:0 0 5px; font-weight:600}
  .sumbonus p{font-size:13.5px; margin:0; line-height:1.58}

  /* the thank-you panel */
  .placed{
    max-width:640px; margin:0 auto; background:#fff; border:1px solid var(--rule);
    border-radius:4px; padding:46px 46px 40px; box-shadow:var(--shadow);
    scroll-margin-top:104px;   /* or the sticky header crops the tick */
  }
  .placed .tick{
    width:54px; height:54px; border-radius:50%; background:var(--gold); color:#fff;
    font-size:26px; line-height:54px; text-align:center; margin:0 0 22px;
  }
  .placed h2{font-size:28px; margin:0 0 8px; letter-spacing:-.015em}
  .placed .oid{font-size:14px; color:var(--muted); margin:0 0 26px; letter-spacing:.4px}
  .placed .oid strong{
    font-family:var(--text); font-size:17px; font-weight:700; color:var(--brown);
    letter-spacing:1.4px;
  }
  .placed p{font-size:15.5px; margin:0 0 16px}
  .placed a{color:var(--brown); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}
  .placed .back{margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--rule); font-size:14px}

  @media (max-width:980px){
    .ocols{grid-template-columns:1fr; gap:40px}
    .osum{position:static; max-width:420px}
    .pay{grid-template-columns:1fr; gap:26px; justify-items:center; text-align:center; width:auto}
  }
  @media (max-width:560px){
    .orderpage{padding:46px 0 70px}
    .grid2, .grid3{grid-template-columns:1fr}
    .pay{padding:22px 18px}
    .qrcard img{width:190px; height:190px}
    .placed{padding:34px 26px 30px}
  }

  /* either a reference number or a receipt */
  .orline{
    display:flex; align-items:center; gap:16px; margin:4px 0 20px;
    font-size:11px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
    color:var(--muted);
  }
  .orline::before, .orline::after{content:""; flex:1; height:1px; background:var(--rule)}
  .drop{
    display:flex; align-items:center; gap:16px; cursor:pointer;
    background:#fff; border:1px dashed #d6c7ab; border-radius:3px; padding:18px 20px;
    transition:border-color .15s ease, background .15s ease;
  }
  .drop:hover{border-color:var(--gold); background:var(--gold-bg)}
  .drop.has{border-style:solid; border-color:var(--gold); background:var(--gold-bg)}
  .drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
  .dropic{
    flex:0 0 38px; width:38px; height:38px; border-radius:50%; text-align:center;
    line-height:38px; font-size:17px; color:#fff; background:var(--gold);
  }
  .droptxt{font-size:14.5px; color:var(--body); line-height:1.5}
  .droptxt b{display:block; color:var(--brown); font-weight:600}
  .droptxt em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin:2px 0 0}

  /* the three things a buyer has to know before the button */
  .notice{
    list-style:none; margin:28px 0 22px; padding:18px 22px;
    background:var(--paper-2); border:1px solid var(--rule); border-left:3px solid var(--gold);
    border-radius:3px; font-size:14.5px; line-height:1.6;
  }
  .notice li{position:relative; padding-left:18px; margin:0 0 6px}
  .notice li:last-child{margin:0}
  .notice li::before{content:"\00b7"; position:absolute; left:4px; color:var(--gold); font-weight:700}

  /* how many copies */
  .qty{
    display:inline-flex; align-items:stretch; margin:0 0 14px;
    border:1px solid var(--rule); border-radius:3px; background:#fff; overflow:hidden;
  }
  .qty button{
    font-family:var(--text); font-size:20px; font-weight:500; color:var(--brown);
    width:52px; height:52px; cursor:pointer; background:#fff; border:0; padding:0;
    transition:background .15s ease, color .15s ease;
  }
  .qty button:hover:not(:disabled){background:var(--gold); color:#fff}
  .qty button:disabled{color:#d8cbb4; cursor:default}
  .qty output{
    display:flex; align-items:center; justify-content:center;
    min-width:58px; padding:0 6px; font-size:17px; font-weight:600; color:var(--brown);
    border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  }
  .qtynote{font-size:14px; color:var(--muted); margin:0}

  /* questions people ask */
  .faq{max-width:760px; margin:78px 0 0; padding:52px 0 0; border-top:1px solid var(--rule)}
  .faq h2{font-size:25px; margin:0 0 26px; letter-spacing:-.012em}
  .faq details{border-bottom:1px solid var(--rule)}
  .faq summary{
    list-style:none; cursor:pointer; padding:18px 34px 18px 0; position:relative;
    font-size:16.5px; font-weight:600; color:var(--brown); font-family:var(--display);
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"+"; position:absolute; right:4px; top:16px;
    font-family:var(--text); font-size:20px; font-weight:400; color:var(--gold);
    transition:transform .18s ease;
  }
  .faq details[open] summary::after{content:"\2212"}
  .faq p{font-size:15.5px; margin:0 0 20px; max-width:62ch}
  .faq a{color:var(--brown); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px}