/* Kitab Buaya: type + spacing system (see TYPE-REFINEMENT.md)
   Face   Roboto only, self-hosted variable 400-700 (+ real italic). Roles: brand, hero, display, title, section, quote, lead, body, small, cta.
   Space  4px base: --s-1 4, s-2 8, s-3 12, s-4 16, s-5 24, s-6 32, s-7 48, s-8 64, s-9 96.
   Rhythm tight (heading to its content) < flow (block to block) < group (new idea in a section) < section padding.
   Edges  every section is one centered column; DOM order never changes. Story art gets 600-720px on desktop instead of
          being squeezed beside copy; only the hero pairs copy with the bundle, and only from 1100px. Bonus covers run one per row.
          All copy is centered inside its area, matching the live page. One exception: the pre-selection intro (.pre), which the owner
          wants left-aligned as a reading block. Flat surfaces only: no gradients. V4 pairs black heading bands with white content scenes,
          one blue (--accent) for actions, and full-bezel device previews; hairline neutral rules do the scene separation.
          The token names are legacy: --char is the black band colour and --ivory is the light ink on it.
   Motion motion.js plays one-shot reveals with WAAPI; nothing here hides content. --ease/--dur carry the hover feel. */
@font-face{font-family:Roboto;font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/roboto-latin-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Roboto;font-style:italic;font-weight:400 700;font-display:swap;src:url(assets/fonts/roboto-latin-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--accent:#2563eb;--accent-hover:#3b82f6;--char:#0b0b0c;--deep:#08080a;--char2:#121216;--char3:#17171c;--lift:#0f0f13;--line:#2a2a31;--ivory:#f4f4f5;--mute:#a1a1aa;
--font:Roboto,system-ui,"Helvetica Neue",Arial,sans-serif;
--s-1:.25rem;--s-2:.5rem;--s-3:.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--s-9:6rem;
--tight:var(--s-3);--flow:var(--s-5);--group:var(--s-6);
--section:clamp(3.5rem,2.5rem + 4vw,5.5rem);--pad:clamp(20px,5vw,56px);--read:40rem;--head:36rem;--nav:4rem;
--ease:cubic-bezier(.16,1,.3,1);--dur:.45s;
--fs-body:1.0625rem;--fs-lead:1.125rem;--fs-small:.875rem;
--fs-brand:clamp(1.75rem,1.45rem + 1.2vw,2.25rem);
--fs-hero:clamp(2rem,1.45rem + 2.6vw,3.5rem);
--fs-display:clamp(1.875rem,1.4rem + 2.4vw,3rem);
--fs-title:clamp(1.625rem,1.3rem + 1.5vw,2.25rem);
--fs-section:clamp(1.1875rem,1.05rem + .6vw,1.5rem);
--fs-quote:clamp(1.25rem,1.05rem + .9vw,1.625rem);
--fs-price:clamp(3.5rem,2.4rem + 5vw,5.5rem)}
@media(min-width:700px){:root{--group:var(--s-7)}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--line) var(--char)}
body{margin:0;background:var(--char);color:var(--ivory);font:400 var(--fs-body)/1.65 var(--font);padding-bottom:76px;caret-color:var(--accent);accent-color:var(--accent)}
@media(min-width:1040px){body{padding-bottom:0}}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p{margin:0}
a{color:inherit}
b,strong{font-weight:700}
::selection{background:var(--accent);color:#fff}
img{color-scheme:only light}
:focus-visible{outline:3px solid var(--accent-hover);outline-offset:3px}
.scene{padding:var(--section) 0}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,1fr);text-align:center}
.pre .wrap{text-align:left}
.wrap>*{min-width:0;width:100%}
.w{min-width:0}
/* V4 scenes: black scenes and white scenes, like the live page. Scoped tokens carry ink/mute/rule so text follows its scene. */
.scene,.headline-band{--ink:var(--ivory);--ink-mute:var(--mute);--rule:var(--line);--card:#141419;--card-line:var(--line);--card-shadow:0 22px 50px -38px rgba(0,0,0,.75);color:var(--ink)}
.dark{background:var(--char)}
.light{background:#fff;--ink:#0b0b0c;--ink-mute:#52525b;--rule:#d4d4d8;--card:#fbfbfc;--card-line:#e4e4e7;--card-shadow:0 22px 50px -38px rgba(15,23,42,.28)}
.headline-band{background:var(--char);--ink:#fff;--ink-mute:#d4d4d8;--rule:#3f3f46;padding:var(--s-6) 0}
.headline-band .wrap::before{content:"";display:block;width:32px;height:32px;margin:0 auto var(--s-3);background:url(assets/source-2b64b674b943.png) center/contain no-repeat}
/* one crocodile per band: the source divider icons inside the band are decorative duplicates (kept in HTML, hidden with their wrappers so no ghost gap remains) */
.headline-band :is(.w-9,.w-22,.w-59){display:none}
/* band rhythm: croc 12, then title, then subtitle 8 below; primary title vs quieter subtitle */
.headline-band .wrap>*{margin-top:0}
.headline-band .wrap>:is(.w-23,.w-51,.w-60){margin-top:var(--s-2)}
.headline-band :is(.w-10,.w-30,.w-49,.w-58,.w-75) :is(h2,h4){font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.01em}
.headline-band :is(.w-23,.w-51,.w-60) h4{font-weight:500;font-size:var(--fs-lead);line-height:1.45;letter-spacing:0;color:var(--ink-mute);max-width:30rem}
.scene.banded{padding-top:0}
.headline-band+.wrap{padding-top:var(--s-6)}

/* rhythm: base flow, then heading-hugs-content, then group breaks (later rules win at equal specificity) */
.wrap>*+*{margin-top:var(--flow)}
.w p{text-wrap:pretty}
:is(.w-0,.w-2,.w-7,.w-10,.w-21,.w-23,.w-44,.w-46,.w-49,.w-51,.w-58,.w-60,.w-64,.w-67,.w-75)+*{margin-top:var(--tight)}
:is(.w-4,.w-5,.w-7,.w-19,.w-30,.w-46,.w-67,.w-70,.shots){margin-top:var(--group)}

/* roles: heading faces. Source tags are inconsistent (h4 as titles), so roles are assigned by block. */
h1,h2,h3,h4{font-family:var(--font);font-weight:600;font-size:var(--fs-section);line-height:1.3;letter-spacing:.005em;text-align:center;text-wrap:balance;overflow-wrap:break-word;max-width:var(--head);margin-inline:auto;color:var(--ink,var(--ivory));text-transform:uppercase}
.brand{font-weight:600;font-size:var(--fs-brand);line-height:1.25;letter-spacing:0;text-align:center;color:var(--ivory)}
.kb-mark{text-transform:uppercase}
.intro .w-21 h2{font-size:var(--fs-brand);line-height:1.25;letter-spacing:0}
:is(.w-2,.w-46,.w-60,.w-67) :is(h1,h4){font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.01em}
.w-2 h1{font-size:var(--fs-display);line-height:1.15;max-width:44rem}
.hero .w-2 h1{font-size:clamp(1.6rem,1.25rem + 2.2vw,3.15rem);line-height:1.12;letter-spacing:-.015em;text-transform:uppercase}
.w-49 h2{font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.01em}
.w-7 h4{text-transform:uppercase;letter-spacing:.03em}
.pre .w-7 h4{text-align:inherit;margin-inline:0;max-width:none}
.pre :is(.w-7,.w-8){margin-inline:auto;max-width:var(--read)}
/* owner: make the preselection explanation's main quote a proper quote box */
.pre .w blockquote{position:relative;margin:var(--s-4) 0;padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-7) + var(--s-2));background:var(--card);border:1px solid var(--card-line);border-radius:14px;box-shadow:var(--card-shadow);font-weight:600;text-align:left}
.pre .w blockquote:first-of-type::before{content:"";position:absolute;left:16px;top:var(--s-4);width:30px;height:30px;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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5A2.5 2.5 0 0 1 7.5 2H20v18H7.5A2.5 2.5 0 0 0 5 22.5z'/%3E%3Cpath d='M5 4.5v16'/%3E%3Cpath d='M9 6h7M9 10h5'/%3E%3C/svg%3E") center/contain no-repeat}
.pre .w blockquote:not(:first-of-type)::before{content:"\201C";position:absolute;left:14px;top:2px;font-size:2.5rem;line-height:1;color:var(--accent);font-weight:700}
.pre .w blockquote:not(:first-of-type){font-size:.95em}
/* bonus title: a real H2 on the standard black headline band (size/weight from the band title role); source lowercase shown uppercase, no pill or button */
.w-30 h2{text-transform:uppercase;padding:0;background:transparent;border:0;border-radius:0}
.bonus-sub{margin-top:var(--s-2);font-weight:600;font-size:clamp(.82rem,.78rem + .2vw,.95rem);line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);text-align:center;max-width:30rem;margin-inline:auto}
/* preselection label: a clear label above its explanation, bigger than body */
.pre .w-7 h4{font-weight:700;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.2;letter-spacing:.06em}
/* RULE PERTAMA BUAYA: an editorial rule above the pre-selection artwork, not a hero quote */
.pre .w-5{width:calc(100% + 24px);justify-self:center;margin-top:0;margin-inline:-12px}
.pre .w-5 h3{display:flex;flex-direction:column;align-items:center;gap:var(--s-2);max-width:56rem;margin:0 auto;padding:var(--s-4) 0 0;background:none;border:0;border-top:3px solid var(--ink);border-radius:0;font-weight:700;font-size:clamp(1.05rem,.65rem + 1.65vw,1.55rem);line-height:1.12;letter-spacing:-.02em;text-align:center;color:var(--ink)}
.rule-kicker{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);font-size:.8rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.rule-line{display:block;text-align:center;text-transform:uppercase;color:var(--ink)}
@media(min-width:900px){.pre .w-5 h3{font-size:clamp(2.2rem,1.2rem + 1.8vw,2.7rem)}}
.w-3 h4{font-weight:500;font-size:var(--fs-body);line-height:1.5;letter-spacing:0;color:var(--ink-mute);max-width:30rem}
.w-27 p{font-weight:600;font-size:var(--fs-quote);line-height:1.35;text-align:center;text-wrap:balance;max-width:var(--head);margin-inline:auto;color:var(--ink);text-transform:uppercase}
.w-2 u{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.07em;text-underline-offset:.18em;color:var(--ink)}
@media(max-width:699px){.w-67 br{display:none}}

/* quote panels (hero line, audience line): centered, one panel style */
.w-5 h3,.w-19 h3{max-width:44rem;padding:var(--s-5) 0;background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;font-weight:600;font-size:var(--fs-quote);line-height:1.35;letter-spacing:0;color:var(--ink)}

/* body: everything is centered (see the .wrap rule); long copy keeps one shared measure so the
   centered lines stay readable, and the pre-selection intro opts back out to a left edge */
.w p+p{margin-top:var(--s-4)}
:is(.w-8,.w-18,.w-26,.w-45,.w-47,.w-52,.w-71,.w-72,.w-76){max-width:var(--read);margin-inline:auto}
:is(.w-17,.w-25,.w-29){max-width:34rem;margin-inline:auto;text-align:center;font-size:var(--fs-lead);line-height:1.6}
/* author letter: the live page centers these paragraphs, so the owner sees them centered */
.w-68{max-width:46rem;margin-inline:auto;text-align:center}
.w ul:not(.elementor-icon-list-items){list-style-position:inside}
.w-52{color:var(--ink-mute)}
.w-52 strong{color:var(--ink)}
.w-47 p+ul{margin-top:var(--s-3)}
.w ul:not(.elementor-icon-list-items){margin:0;padding-left:1.25em}
.w ul:not(.elementor-icon-list-items) li::marker{color:var(--accent)}
.w-47 li+li,.e-n-accordion li+li{margin-top:var(--s-2)}
.w blockquote{margin:var(--s-5) 0;padding:var(--s-4) 0;background:transparent;border:0;border-top:1px solid rgba(128,128,128,.4);border-bottom:1px solid rgba(128,128,128,.4);border-radius:0;font-weight:600}
.w blockquote p{margin:0}
.emoji::before{content:attr(data-e)}
.inline-icon{display:inline-block;width:22px;height:22px;margin-right:6px;vertical-align:-4px;background:url(assets/source-2b64b674b943.png) center/contain no-repeat;filter:brightness(0)}
.w img{border-radius:12px}

/* nav: brand (widget 0) + section anchors; no JS. Static on phones (the sticky buy button is already there). */
.nav{background:var(--char);border-bottom:1px solid var(--line)}
.nav-in{max-width:1120px;margin:0 auto;padding:var(--s-2) var(--pad) 0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 var(--s-5)}
.nav .brand{font-size:var(--fs-section)}
.nav-links{display:flex;gap:var(--s-1);width:100%;margin-top:0;overflow:visible;flex-wrap:wrap;justify-content:center}
.nav-links a{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;padding:0 var(--s-2);font-size:var(--fs-small);font-weight:500;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--mute);transition:color .2s}
.nav-links a:hover{color:var(--ivory)}
.nav .nav-cta{display:none}
@media(min-width:900px){
.nav{position:sticky;top:0;z-index:30}
.nav-in{flex-wrap:nowrap;justify-content:space-between;min-height:var(--nav);padding-block:0}
.nav-links{width:auto;overflow:visible}
section[id]{scroll-margin-top:var(--nav)}
.embed{scroll-margin-top:calc(var(--nav) + var(--s-4))}
}
@media(min-width:1040px){.nav .nav-cta{display:inline-flex;min-height:44px;padding:0 var(--s-5)}}

/* hero: headline + action beside the complete seven-book bundle. The original is 1000x1000 on a white ground,
   so it is shown whole and flat (rounded corners only): no mat, no frame, no glow. */
.hero{padding:var(--s-6) 0 var(--s-7);background:var(--char)}
.hero-copy{display:grid;justify-items:center;gap:var(--s-4)}
.hero-copy>.w{margin-top:0;width:100%}
.actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);width:100%;margin-top:var(--s-3)}
.actions>a{flex:0 0 auto;width:100%;max-width:20rem;white-space:nowrap}
/* secondary action: a text link, deliberately not button-shaped so the blue CTA is the one purchase path */
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s-3);border:0;border-radius:4px;background:transparent;color:var(--ink);font-weight:600;font-size:var(--fs-small);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--accent-hover);text-decoration-thickness:2px;text-underline-offset:.3em;transition:color .2s}
.ghost:hover{color:#fff;text-decoration-color:#fff}
.actions>.ghost{width:auto}
.hero .w-4{max-width:min(100%,38rem);margin-inline:auto;margin-top:var(--s-5)}
.hero .w-4 img{width:100%;max-width:100%;height:auto;border-radius:12px}
@media(min-width:1100px){
.hero .wrap{max-width:1360px;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:var(--s-7);align-items:center}
.hero .wrap>*{margin-top:0}
.hero-copy{grid-column:1;grid-row:1}
.hero .w-4{grid-column:2;grid-row:1;max-width:none}
.actions{flex-direction:row;flex-wrap:wrap}
.actions>a{width:auto}
}

/* original images are never cropped: natural ratio, capped so square art does not dominate */
.scene .w>img{max-width:min(100%,45rem);height:auto;margin-inline:auto}
/* 32x32 crocodile / green divider originals (widgets 1,9,22,43,48,57,59,65,77): shown at native size, centered */
.scene :is(.w-1,.w-9,.w-22,.w-43,.w-48,.w-57,.w-59,.w-65,.w-77) img{width:32px;height:auto;max-width:2rem;margin-inline:auto;border-radius:0}

/* pre-selection: art first at full story width, the explanation under it */
.pre .w-6 img{width:100%;max-width:min(100%,45rem);height:auto;margin:auto}
.pre .w-7{margin-top:var(--s-2)}

/* audience: the previews are Kodak-style prints, so they stack down one wide column with their own
   frames doing the work — no rail, no sideways scroll, no border of ours on top of the print */
.aud{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--flow)}
.aud-copy{display:contents}
.aud .w{margin-top:0}
.aud .w-9{order:1}
.aud .w-10{order:2}
.aud .w-17{order:4}
.aud .w-18{order:5}
.strip{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);max-width:45rem;margin-inline:auto;padding:0}
.aud .strip{order:3}
.strip .w{width:100%}
.strip .w img{width:100%;max-width:100%;border:0;border-radius:0}
.elementor-icon-list-items{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:var(--read)}
.elementor-icon-list-item{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--s-3);padding:var(--s-4) 0;border-top:1px solid var(--rule);font-weight:500;line-height:1.5;text-align:left}
.elementor-icon-list-item:last-child{border-bottom:1px solid var(--rule)}
.elementor-icon-list-item::before{content:"";flex:0 0 .5em;height:.5em;margin-top:.5em;border-radius:50%;background:var(--accent)}
.elementor-icon-list-icon{display:none}
.elementor-icon-list-text{min-width:0}
.audience .w-19{position:relative;z-index:2;margin-bottom:0}
.audience .w-19 h3{max-width:44rem;margin-inline:auto;padding:var(--s-6) var(--s-5);background:var(--char);border:0;border-radius:14px;text-align:center;color:#fff;font-size:clamp(1.45rem,1.1rem + 1.4vw,2.25rem);line-height:1.3;font-weight:700;letter-spacing:-.01em}
.quote-lead,.quote-follow{display:block;font:inherit;color:inherit;text-wrap:balance}
.quote-accent{color:var(--accent-hover)}
.quote-warn{color:#ff2d2d}
.w-19 h3{text-transform:uppercase}
.quote-follow{margin-top:var(--s-2)}
.quote-keep{white-space:nowrap}
@media(min-width:768px){.audience .w-19 h3{padding:var(--s-7) var(--s-6)}}
.audience .w-20 img{width:100%;max-width:min(100%,45rem);margin:auto}
/* the cut-out couple is chopped by its own frame edge, so pull the image down onto the scene boundary */
.audience .w-20{margin-bottom:calc(-1 * var(--section))}

/* intro: copy, then the art at full story width */
.intro .w-24{width:min(100%,560px);margin-inline:auto;padding:var(--s-4);background:var(--card);border:1px solid var(--card-line);border-radius:14px;box-shadow:var(--card-shadow)}
.intro .w-24 img{width:100%;max-width:500px;height:auto;margin:auto;border-radius:0}

/* accordions: one title/body style everywhere */
.e-n-accordion{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);border-top:0}
.e-n-accordion-item{background:var(--card);border:1px solid var(--card-line);border-radius:14px;box-shadow:var(--card-shadow);overflow:hidden;color:var(--ink)}
.e-n-accordion-item-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:56px;padding:var(--s-4) var(--s-5);cursor:pointer;list-style:none;font-weight:600;line-height:1.4;text-align:center;text-transform:uppercase;transition:background-color .2s,color .2s}
.e-n-accordion-item-title:hover{background:rgba(37,99,235,.06);color:var(--accent)}
.e-n-accordion-item-title:focus-visible{outline-offset:-3px}
.e-n-accordion-item-title::-webkit-details-marker{display:none}
.e-n-accordion-item-title-header{flex:1;min-width:0;text-align:center}
.e-n-accordion-item-title-icon{flex:0 0 28px;height:28px;border-radius:50%;border:1.5px solid var(--accent);position:relative}
.e-n-accordion-item-title-icon::before,.e-n-accordion-item-title-icon::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:2px;background:var(--accent);transition:transform .2s}
.e-n-accordion-item-title-icon::after{transform:rotate(90deg)}
.e-n-accordion-item[open] .e-n-accordion-item-title-icon::after{transform:rotate(0)}
.e-n-accordion-item[open] .e-n-accordion-item-title{border-bottom:1px solid var(--card-line)}
.e-n-accordion-item>div{padding:var(--s-4) var(--s-5) var(--s-5);overflow-wrap:anywhere;text-align:center}
/* Owner: red alert boxes match the live warning panel (#800101) and the Dark Psychology cover red (#bc0505). */
.e-n-accordion-item.warn{border-color:#f0b4b4;background:#fff7f7}
.e-n-accordion-item.warn .e-n-accordion-item-title,.e-n-accordion-item.danger .e-n-accordion-item-title{background:#800101;color:#fff}
.e-n-accordion-item.danger .e-n-accordion-item-title{background:#bc0505}
.e-n-accordion-item.warn .e-n-accordion-item-title:hover,.e-n-accordion-item.danger .e-n-accordion-item-title:hover{background:#6b0101;color:#fff}
.e-n-accordion-item.warn .e-n-accordion-item-title-icon,.e-n-accordion-item.danger .e-n-accordion-item-title-icon{border-color:#fff}
.e-n-accordion-item.warn .e-n-accordion-item-title-icon::before,.e-n-accordion-item.warn .e-n-accordion-item-title-icon::after,.e-n-accordion-item.danger .e-n-accordion-item-title-icon::before,.e-n-accordion-item.danger .e-n-accordion-item-title-icon::after{background:#fff}
.e-n-accordion-item.warn>div{background:#fff7f7;color:#450a0a;text-align:left}
.e-n-accordion-item.warn>div :is(p,li){text-align:left}
.e-n-accordion-item.warn>div ul{list-style-position:inside;margin-top:var(--s-2);padding-left:0}
.w-72{margin-top:var(--s-3)}

/* bonus intro: the invitation, then the art at full story width */
.bonus .w-28{margin-top:var(--s-3)}
.bonus .w-28 img{width:100%;max-width:min(100%,40rem);margin:auto}
.bonus .w-29{margin-top:var(--s-3)}

/* bonus gallery: six ebooks, one per row. Mobile: cover then description. Desktop: large cover with its description beside it. */
.chapters{padding-top:var(--s-5)}
.chapters .wrap{max-width:1240px}
.scene.bonus{background:#0c4dab;--ink:#fff;--ink-mute:#dbeafe;color:#fff;padding-bottom:var(--s-5)}
.gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-7)}
.chapter{display:flex;flex-direction:column;gap:var(--s-5);min-width:0}
.chapter+.chapter{padding-top:var(--s-7);border-top:1px solid var(--rule)}
.chapter>.w:first-child{display:grid;place-items:center}
.chapter>.w:last-child{flex:1}
@media(min-width:900px){
.gallery{gap:var(--s-8)}
.chapter{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s-7);align-items:center}
.chapter+.chapter{padding-top:var(--s-8)}
}
/* each bonus preview is the complete iPad mockup (616x840: full bezel + cover, only the outer white margin trimmed).
   It is shown whole at natural ratio: ~300px wide on phones (device ~280px), 450px on desktop (device ~420px).
   The white around the device blends into the white chapter scene, so there is no well, mat or clip. */
.chapter .w img{width:min(100%,300px);max-width:100%;height:auto;border-radius:0}
@media(min-width:900px){.chapter .w img{width:min(100%,450px)}}
.chapter .e-n-accordion-item>div{font-size:1rem}
/* owner: all six bonus ebook headers are blue; the AMARAN/PERHATIAN warning panels stay red */
.chapter .e-n-accordion-item .e-n-accordion-item-title,.chapter .e-n-accordion-item.danger .e-n-accordion-item-title{background:var(--accent);color:#fff}
.chapter .e-n-accordion-item .e-n-accordion-item-title:hover{background:#1d4ed8;color:#fff}
.chapter .e-n-accordion-item .e-n-accordion-item-title-icon{border-color:#fff}
.chapter .e-n-accordion-item .e-n-accordion-item-title-icon::before,.chapter .e-n-accordion-item .e-n-accordion-item-title-icon::after{background:#fff}
/* owner: Dark Psychology is the exception; its header stays red */
.chapter .e-n-accordion-item.danger .e-n-accordion-item-title{background:#bc0505;color:#fff}
.chapter .e-n-accordion-item.danger .e-n-accordion-item-title:hover{background:#9f0404;color:#fff}

/* owner: the five BAB explainer boxes follow the same blue-header card as the bonuses */
.inside .e-n-accordion-item{background:#fff;border-color:#e4e4e7;color:#0b0b0c;box-shadow:var(--card-shadow)}
.inside .e-n-accordion-item .e-n-accordion-item-title{background:var(--accent);color:#fff}
.inside .e-n-accordion-item .e-n-accordion-item-title:hover{background:#1d4ed8;color:#fff}
.inside .e-n-accordion-item .e-n-accordion-item-title-icon{border-color:#fff}
.inside .e-n-accordion-item .e-n-accordion-item-title-icon::before,.inside .e-n-accordion-item .e-n-accordion-item-title-icon::after{background:#fff}
.inside .e-n-accordion-item[open] .e-n-accordion-item-title{border-bottom-color:#e4e4e7}
.inside .e-n-accordion-item>div{color:#0b0b0c}

/* outcome: one stacked reading column at every width (owner: no side-by-side desktop split) */
.outcome .wrap{max-width:52rem}
.scene.outcome{background:#0c4dab;--ink:#fff;--ink-mute:#dbeafe;--rule:rgba(255,255,255,.35);--card:#fff;--card-line:#dbeafe;color:#fff}
.outcome :is(.w-43,.w-48) img{filter:brightness(0) invert(1)}
.outcome .w-44 h4{font-weight:700;font-size:var(--fs-title);line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.outcome .w-47{padding:var(--s-5);background:var(--card);color:#0b0b0c;border:1px solid var(--card-line);border-radius:14px;box-shadow:var(--card-shadow)}
.outcome .w-47 :is(p,li,h2,h3,strong){color:#0b0b0c}
.outcome .w-45{text-align:center}
.outcome .w-47{text-align:left}
.outcome .w-47 p,.outcome .w-47 li{text-align:left}
.outcome .w-47 :is(p,ul){max-width:30rem;margin-inline:auto}

/* proof: the four real screenshots stay large enough to read (2 across ~400px each, 1 on phones).
   The originals are 700x700 with the phone in alpha bbox x182..517 (335 wide). The anchor clips ONLY those transparent
   side margins so the phone fills the width; nothing visible is cropped and no pixel is touched. */
.shots{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);width:75%;max-width:22.5rem;margin-inline:auto}
@media(min-width:700px){.shots{width:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6);max-width:52rem}}
.proof-preview{display:block;width:100%;overflow:hidden}
.shots .proof-preview img{width:calc(100% * 700 / 335);max-width:none;height:auto;margin-left:calc(-100% * 182 / 335);border:0;border-radius:0}

/* offer + checkout coupon panel (source wrappers are bare divs, so the panel hangs off the widget) */
/* the seven-ebook graphic below the price badge (owner decision): same flat treatment, no mat */
.offer .w-61{max-width:min(100%,45rem);margin-inline:auto}
.offer .w-61 img{width:100%;max-width:100%;border-radius:12px}
.offer .w-62{display:flex;justify-content:center;margin-top:0}
.offer .price{display:inline-flex;flex-direction:column;align-items:stretch;overflow:hidden;min-width:12rem;margin:0;padding:0;background:#fff;border:2px solid var(--accent);border-radius:18px;box-shadow:0 18px 40px -26px rgba(11,11,12,.45);color:var(--ink);text-align:center;font-variant-numeric:tabular-nums}
.price-label{padding:8px 22px;background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.price-amount{padding:var(--s-2) var(--s-5) 0;font-weight:700;font-size:clamp(3rem,2.4rem + 3.2vw,4.25rem);line-height:1;letter-spacing:-.02em}
.price-brand{padding:6px var(--s-5) var(--s-3);font-weight:600;font-size:.8rem;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
/* coupon: one deliberate solid blue block with white type; its own tokens, so nothing leaks to other scenes */
.coupon-strip{--ink:#fff;--ink-mute:#dbeafe;--rule:rgba(255,255,255,.4);--dash:#fff;padding:0;margin:0;background:#0c4dab;color:#fff;text-align:center}
.coupon-strip .w,.coupon-strip .w>div{width:100%;max-width:none;margin:0;border-radius:0}
.coupon-strip .hurrytimer-campaign{box-sizing:border-box;width:100%;max-width:40rem;margin-inline:auto;padding:28px 20px}
.scene.offer{padding-bottom:0}
.scene.checkout{padding-top:var(--s-7)}
.coupon-strip .hurrytimer-button{background:#fff;color:#0b0b0c;outline-color:#fff}
.coupon-strip .hurrytimer-button:hover{background:#e4e4e7}
.coupon-strip :focus-visible{outline-color:#fff}
.hurrytimer-headline{font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
.hurrytimer-headline .big{display:block;font-weight:700;font-size:clamp(1.25rem,1.1rem + .7vw,1.5rem);line-height:1.25;margin-bottom:var(--s-3);color:var(--ink)}
.hurrytimer-headline .code{display:inline-block;margin:var(--s-2) 0;padding:var(--s-2) var(--s-5);border:1.5px dashed var(--dash,var(--accent));border-radius:4px;font-size:1.5rem;line-height:1.3;color:var(--ink);letter-spacing:.06em}
.hurrytimer-headline .small{display:block;margin-top:var(--s-1);color:var(--ink-mute);font-size:var(--fs-small)}
.hurrytimer-headline+div{margin-top:var(--s-5)}
/* discount countdown: same block/sep/digit structure as the source markup, styled to the palette */
.hurrytimer-timer{display:flex;align-items:flex-start;justify-content:center;gap:var(--s-1)}
.hurrytimer-timer-block{min-width:3.25rem}
.hurrytimer-timer-digit{font-weight:700;font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem);line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:4px;padding:var(--s-2) var(--s-2)}
.hurrytimer-timer-label{display:block;margin-top:var(--s-2);font-size:var(--fs-small);letter-spacing:.04em;color:var(--ink-mute)}
.hurrytimer-timer-sep{align-self:flex-start;margin-top:var(--s-1);font-weight:700;font-size:1.25rem;color:var(--ink-mute)}
/* once the visitor's own 7h window is over the discount panel closes; the CTA stays */
.hurrytimer-campaign.expired :is(.hurrytimer-headline,.hurrytimer-timer){display:none}
.hurrytimer-button,.sticky{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 var(--s-6);border-radius:10px;background:var(--accent);color:#fff;font-weight:700;font-size:1rem;line-height:1.2;letter-spacing:.04em;text-decoration:none}
.hurrytimer-button:hover,.sticky:hover{background:#1d4ed8}
.hurrytimer-button{transition:background-color .2s}
.actions .hurrytimer-button{padding:0 var(--s-5)}

/* author: portrait, letter and notices stack in source order at readable width */
.author .w-66 img{width:100%;max-width:min(100%,40rem);margin:auto}
.author .w-70 img{width:100%;max-width:min(100%,45rem);margin:auto}
.scene.author{padding-bottom:var(--s-4)}
.download-box{display:flex;align-items:center;gap:var(--s-5);max-width:40rem;margin:var(--s-4) auto 0;padding:var(--s-5);background:#0c4dab;border-radius:16px;box-shadow:0 18px 40px -30px rgba(0,0,0,.6);text-align:left}
.download-icon{flex:0 0 88px;width:88px;height:88px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);color:#fff}
.download-icon svg{width:64px;height:44px}
.download-copy h4{max-width:none;margin:0;font-size:var(--fs-title);line-height:1.1;letter-spacing:-.01em;color:#fff;text-align:left}
.download-line{display:flex;align-items:center;gap:.6rem;margin:var(--s-2) 0 0;font-size:var(--fs-body);line-height:1.5;color:#dbeafe;text-align:left}
.download-line::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#fff}
@media(max-width:599px){.download-box{flex-direction:column;text-align:center;padding:var(--s-5) var(--s-4)}.download-copy h4,.download-line{text-align:center}.download-line{justify-content:center}}

/* BAB explainers join the main-book reading flow on one white surface (beats .duo padding by specificity) */
.scene.intro{padding-bottom:var(--s-5)}
.scene.inside{padding-top:0}

/* sections get extra air on desktop */
@media(min-width:900px){.duo{padding:var(--s-8) 0}}

/* checkout */
.embed{background:#fff;border:1px solid var(--rule);border-radius:0;overflow:hidden;max-width:760px;width:100%;margin-inline:auto;scroll-margin-top:16px}
.embed iframe{max-width:100%}
@media(min-width:700px){.embed{max-width:680px;padding:48px;box-sizing:border-box}}

/* sticky */
.sticky{position:fixed;left:0;right:0;margin-inline:auto;bottom:14px;z-index:20;width:min(calc(100% - 28px),420px);box-shadow:0 10px 28px -12px rgba(0,0,0,.75);transition:opacity .25s,transform .25s,visibility .25s}
.bcl-fallback{display:block;padding:24px;text-align:center;color:#0b0b0c;font-weight:700}
.sticky.off{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(20px)}
@media(min-width:1040px){.sticky{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}