/* Layout follows the series model page: a deep-navy hero with the cover, then one long reading column on a cool paper ground, the five series colours as the signature bar. */
:root{
  --bg:#F5F8FB; --bg2:#E7EEF5; --card:#FFFFFF; --ink:#0B2239; --muted:#475A70; --rule:#CBD6E2;
  --navy:#06426F; --deep:#021A30; --on-deep:#FFFFFF; --deep-muted:#B9CCDD;
  --cta:#F0A93B; --on-cta:#021A30;
  --a1:#8A5A00; --a2:#C0213B; --a3:#0E7A55; --a4:#6D36C9; --a5:#C21F7E;
  --b1:#F0A93B; --b2:#F05468; --b3:#3FD99A; --b4:#B07CF5; --b5:#F25FAE;
  --head:#06426F; --hl:#FFF1C9;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#04192C; --bg2:#072640; --card:#0A2C4B; --ink:#EAF2F8; --muted:#9FB4C8; --rule:#1B4262; --head:#EAF2F8; --hl:#3a2f10;
  --a1:#F0A93B; --a2:#F05468; --a3:#3FD99A; --a4:#B07CF5; --a5:#F25FAE; color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#04192C; --bg2:#072640; --card:#0A2C4B; --ink:#EAF2F8; --muted:#9FB4C8; --rule:#1B4262; --head:#EAF2F8; --hl:#3a2f10;
  --a1:#F0A93B; --a2:#F05468; --a3:#3FD99A; --a4:#B07CF5; --a5:#F25FAE; color-scheme:dark;}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--size-body);line-height:1.65}
img{max-width:100%}
.in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wrap{max-width:700px;margin-inline:auto}
.wide{max-width:1060px;margin-inline:auto}
section{padding-block:56px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.08;text-wrap:balance;margin:0;color:var(--head)}
h2{font-size:var(--size-h2);margin-bottom:20px;letter-spacing:-.01em}
h3{font-size:var(--size-h3);margin:30px 0 10px}
p{margin:0 0 1.1em}
.label{font-family:var(--label);text-transform:uppercase;letter-spacing:.16em;font-weight:700;font-size:.85rem;color:var(--muted);margin-bottom:14px}
.small{font-size:.9rem;color:var(--muted)}
.bar{display:flex;height:6px}
.bar i{flex:1}.bar i:nth-child(1){background:var(--b1)}.bar i:nth-child(2){background:var(--b2)}.bar i:nth-child(3){background:var(--b3)}.bar i:nth-child(4){background:var(--b4)}.bar i:nth-child(5){background:var(--b5)}
mark{background:#FFF1C9;color:#0B2239;padding:0 .15em}
u{text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--a2)}

.fig{margin:32px 0}.fig img{display:block;width:100%;height:auto;border-radius:6px;border:1px solid var(--rule)}
.fig figcaption{font-size:.85rem;color:var(--muted);text-align:center;margin-top:8px;font-style:italic}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:32px 0}.pair>*{min-width:0}.pair .fig{margin:0}

/* hero */
.hero{background:var(--deep);color:var(--on-deep);padding-block:40px 48px}
.hero2{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:center}.hero2>*{min-width:0}
.hero h1{color:#fff;font-size:var(--size-h1);margin:0 0 20px;letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--b1)}
.hero .deck{color:#fff;font-family:var(--label);font-weight:700;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.3;margin:-6px 0 20px;max-width:30ch}
.hero .sub{font-size:clamp(1.1rem,2.3vw,1.35rem);color:var(--deep-muted);margin:0 0 26px}
.coverwrap{max-width:330px;margin:0 auto;width:100%}
.hero .fine{font-size:1.02rem;line-height:1.4;color:#fff;text-align:center;margin:16px 0 0}
.topline{display:block;width:fit-content;max-width:100%;margin:0 auto 30px;background:var(--b1);color:var(--deep);font-family:var(--display);font-weight:700;font-size:var(--size-topline);line-height:1.25;text-align:center;padding:9px 20px}
.topline span{display:inline}
.oneline{white-space:nowrap}
.cover1{display:block;width:100%;max-width:330px;height:auto;margin:0 auto;box-shadow:0 22px 50px rgba(0,0,0,.5)}
.btn{display:inline-block;background:var(--cta);color:var(--on-cta);font-family:var(--label);text-transform:uppercase;letter-spacing:.09em;font-weight:700;font-size:1.08rem;padding:18px 32px;text-decoration:none;border:2px solid var(--cta);transition:transform .15s;text-align:center}
.btn small{display:block;text-transform:none;letter-spacing:0;font-weight:600;font-size:.8rem;opacity:.85;margin-top:3px}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--b1);outline-offset:3px}
.center{text-align:center}

/* letter devices */
.band{background:var(--bg2)}
.deep{background:var(--deep);color:#E4EDF5}
.deep h2,.deep h3{color:#fff}
.deep .small{color:var(--deep-muted)}
.jbox{border:2px dashed var(--navy);background:var(--card);padding:22px 24px;margin:0 0 30px;font-size:1.02rem}
:root[data-theme="dark"] .jbox{border-color:var(--b1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .jbox{border-color:var(--b1)}}
.jbox p:last-child{margin:0}
.from{font-family:var(--label);font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.salute{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--head);margin:22px 0 16px}
.pull{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,3.4vw,1.8rem);line-height:1.25;margin:30px 0;padding:22px 0;border-block:3px solid var(--navy);color:var(--head)}
.deep .pull{color:#fff;border-color:var(--b1)}
.money{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.15;color:var(--a2);margin:26px 0}
.deep .money{color:var(--b1)}
.beat{font-size:1.22rem;font-weight:600}
.story{background:var(--card);border:1px solid var(--rule);border-left:6px solid var(--a2);padding:24px 26px;margin:28px 0}
.story .tag{font-family:var(--label);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a2);margin-bottom:10px}
.story p:last-child{margin:0}
.story .note{font-size:.85rem;color:var(--muted);font-style:italic}
.quote{font-style:italic;font-size:1.15rem;padding-left:20px;border-left:3px solid var(--b1);margin:22px 0}
ul.ticks{list-style:none;padding:0;margin:0 0 1.2em}
ul.ticks li{padding-left:34px;position:relative;margin-bottom:.8em}
ul.ticks li::before{content:"";position:absolute;left:3px;top:.52em;width:15px;height:8px;border-left:3px solid var(--tick,var(--navy));border-bottom:3px solid var(--tick,var(--navy));transform:rotate(-45deg)}
.deep ul.ticks li::before{border-color:var(--b1)}
:root[data-theme="dark"] ul.ticks li::before{border-color:var(--tick,var(--b1))}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) ul.ticks li::before{border-color:var(--tick,var(--b1))}}
ul.cross li::before{width:14px;height:14px;border:none!important;transform:none;background:linear-gradient(45deg,transparent 44%,var(--a2) 44%,var(--a2) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--a2) 44%,var(--a2) 56%,transparent 56%);top:.45em}
.trick{display:grid;grid-template-columns:52px 1fr;gap:16px;background:var(--card);border:1px solid var(--rule);padding:22px 22px 8px;margin:18px 0}.trick>*{min-width:0}
.trick .n{width:52px;height:52px;border-radius:50%;background:var(--deep);color:var(--b1);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.5rem}
.trick h3{margin:8px 0 10px}
.trick .today{background:var(--bg2);border-left:4px solid var(--b1);padding:12px 16px;font-size:1rem}
.trick .beat{color:var(--a2)}
@media (max-width:780px){.trick{grid-template-columns:1fr;gap:6px}}
@media print{.trick{break-inside:avoid}}
ol.reasons{padding-left:1.4em}ol.reasons li{margin-bottom:.9em}ol.reasons li::marker{font-family:var(--display);font-weight:700;color:var(--a2)}

/* demo: before/after from chapter 1 */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}.demo>*{min-width:0}
.demo div{background:var(--card);border:1px solid var(--rule);padding:18px 20px;font-size:1rem}
.demo b{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;display:block;margin-bottom:8px}
.demo .bad b{color:var(--a2)}.demo .good b{color:var(--a3)}
.demo .good{border:2px solid var(--b3)}
.borrow{background:var(--card);border:1px solid var(--rule);border-top:5px solid var(--b1);padding:18px 22px;font-size:1rem;margin:20px 0}
.borrow b{font-family:var(--label);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--a1);display:block;margin-bottom:6px}

/* chapter rhythm */
.rhythm{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.rhythm>*{min-width:0}
.rhythm div{background:var(--card);border:1px solid var(--rule);padding:14px 16px;font-size:.95rem;line-height:1.45}
.rhythm b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--head);margin-bottom:4px}

/* principles */
.parts{display:grid;gap:16px;margin:22px 0}
.part{background:var(--card);border:1px solid var(--rule);border-left:6px solid var(--cc);padding:18px 22px}
.part>b{font-family:var(--label);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;color:var(--cc);display:block;margin-bottom:10px}
.part ul{list-style:none;margin:0;padding:0}
.part li{margin-bottom:.9em;padding-left:30px;position:relative;font-size:1.02rem}
.part li:last-child{margin-bottom:0}
.part li::before{content:"\25B8";position:absolute;left:4px;top:0;color:var(--cc);font-size:1.1rem}
.part li strong{color:var(--head)}

/* offer */
.offerbox{background:var(--card);border:3px solid var(--navy);padding:32px 26px;margin-block:24px;color:var(--ink)}
:root[data-theme="dark"] .offerbox{border-color:var(--b1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .offerbox{border-color:var(--b1)}}
.yes{font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--head);margin-bottom:16px}
.stack{list-style:none;padding:0;margin:0 0 20px}
.stack li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:14px 0;border-bottom:1px dashed var(--rule)}.stack li>*{min-width:0}
.stack li:last-child{border:0}
.stack i{font-style:normal;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700}
.stack b{font-family:var(--display);font-size:1.2rem;color:var(--head)}
.price{font-family:var(--display);font-weight:700;font-size:3.2rem;line-height:1;color:var(--head);text-align:center;margin:18px 0 6px}
.guar{border:3px double var(--navy);padding:28px 26px;margin-block:12px;background:var(--card);display:grid;grid-template-columns:160px 1fr;gap:24px;align-items:center}.guar>*{min-width:0}
.badge30{display:block;width:160px;height:auto}
:root[data-theme="dark"] .guar{border-color:var(--b1)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .guar{border-color:var(--b1)}}
.seal{width:110px;height:110px;border-radius:50%;background:var(--deep);border:3px double var(--b1);display:grid;place-items:center;text-align:center;font-family:var(--label);font-weight:700;font-size:.7rem;line-height:1.3;letter-spacing:.08em;color:var(--b1);text-transform:uppercase}
.seal b{display:block;font-family:var(--display);font-size:2rem;line-height:1;color:#fff;letter-spacing:0}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:28px}.fit>*{min-width:0}
details{border-top:1px solid var(--rule);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.2rem;list-style:none;display:flex;justify-content:space-between;gap:12px;color:var(--head)}
summary::after{content:"+";font-size:1.6rem;line-height:1;color:var(--a2)}
details[open] summary::after{content:"\2212"}
summary::-webkit-details-marker{display:none}
details p{margin:12px 0 0;color:var(--muted)}
.sig{font-style:italic;color:var(--muted)}
.deep .sig{color:var(--deep-muted)}
.ps p{margin-bottom:1em}
.foot{font-size:.82rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:20px}
.sticky{position:sticky;bottom:0;z-index:5;background:var(--deep);color:#fff;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;gap:14px;align-items:center;justify-content:space-between;font-family:var(--label);font-weight:700;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase}
.sticky a{background:var(--cta);color:var(--on-cta);padding:9px 18px;text-decoration:none;white-space:nowrap}
@media (max-width:780px){
  body{font-size:var(--size-body-phone)}
  .hero h1{font-size:var(--size-h1-phone)}
  .hero2{grid-template-columns:1fr;gap:28px}
  .coverwrap{order:-1}
  .cover1{max-width:220px}
  .topline span{display:block}
  .pair,.demo,.fit{grid-template-columns:1fr}
  .rhythm{grid-template-columns:1fr 1fr}
  .guar{grid-template-columns:1fr;justify-items:center;text-align:center}
  .btn{display:block}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}html{scroll-behavior:auto}}
@media print{
  @page{size:A4;margin:14mm 0}
  body{font-size:15px;background:#fff}
  :root{--bg:#fff}
  section{padding-block:28px}
  .sticky{display:none}
  .fig,.story,.demo,.part,.guar,.offerbox,.borrow,.rhythm div,details,.jbox{break-inside:avoid}
  h2,h3{break-after:avoid}
  .hero,.deep,.band,.btn,.seal,.bar i,mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  details>*{display:block}
  summary::after{content:""}
}