/* Become the Character. Fonts, colour tokens, the type scale (--fs-*), the spacing scale (--s*, --section, --col-gap), the ad line,
   the header and the bands come from ../shared/base.css (loaded first). This file sets the product accent and everything specific to this page.
   One page grid (three columns, --col-gap), one section-header pattern, six text sizes; sections are separated by bands, not by lines. */
:root{--accent:#2446FF}
/* Hero: the title spans the page grid; the video takes two columns, the deck and the buy box the third. */
.hero{background:var(--paper);color:var(--ink)}.hero-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);grid-template-areas:'title title title' 'media media deck' 'media media purchase' 'media media .';grid-template-rows:auto auto auto 1fr;align-items:start;padding-block:var(--s4) var(--section)}.hero-message{display:contents}.hero-title{grid-area:title;margin-bottom:var(--s4);font-family:var(--display);font-weight:800;font-stretch:condensed;font-size:clamp(72px,9.4vw,130px);text-transform:uppercase;letter-spacing:-.025em;line-height:.95;text-wrap:initial}.hero-title>span{display:inline;white-space:nowrap}.hero-title .headline-accent{color:var(--accent)}.hero-deck{grid-area:deck;margin:0;max-width:48ch;font-size:var(--fs-lead);line-height:var(--lh-lead)}
.hero-purchase{grid-area:purchase;align-self:start;min-width:0;margin-top:var(--s3)}.product-line{font-size:var(--fs-body);font-weight:700;line-height:var(--lh-ui);margin-bottom:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:56px;padding:15px 22px;text-decoration:none;font-weight:700;font-size:var(--fs-body);line-height:var(--lh-ui);border:0;border-radius:0}.button>span:last-child:not([data-price]){margin-left:auto;padding-left:18px}.primary{background:var(--ink);color:var(--paper)}.primary:hover{background:#343441}.hero-purchase .button{width:100%;max-width:none;background:var(--ink);color:var(--paper)}.hero-purchase .button:hover{background:#343441}.hero :focus-visible{outline-color:var(--accent)}.purchase-meta{font-size:var(--fs-small);color:var(--muted);line-height:1.5;margin-top:10px}.free-link{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-body);font-weight:700;line-height:var(--lh-ui);margin-top:4px;min-height:44px}.preview-status{font-size:var(--fs-small);line-height:1.5;margin-top:2px;color:var(--muted)}
.hero-media{grid-area:media;min-width:0;align-self:start}.hero-proof{width:100%}.proof-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px}.moving-panel{position:relative;aspect-ratio:900/860;overflow:hidden;background:#DDD9D1}.moving-panel img,.moving-panel canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.moving-panel canvas{opacity:0}.moving-panel canvas.is-live{opacity:1}.proof-controls{display:flex;align-items:center;gap:12px;margin-top:8px}.proof-controls button{min-height:44px;color:var(--ink);background:transparent;border:0;padding:8px 10px;font-size:var(--fs-small);font-weight:700;white-space:nowrap}.proof-controls button:hover{background:var(--tint)}.proof-controls #motion-toggle{min-width:44px;font-size:17px}.proof-controls .reel-link{margin-left:auto;padding-right:0}
/* One label treatment on every piece of media: a white chip on the bottom edge. */
.take-label{position:absolute;bottom:0;left:0;z-index:1}.take-label,.example-pair figcaption>span{justify-self:start;background:#FFFFFFF2;color:var(--ink);font-size:var(--fs-small);font-weight:700;line-height:var(--lh-ui);padding:6px 8px}
/* The one section header: display headline, its intro directly under it, both on the content edge. */
.section-heading{margin-bottom:var(--s4)}.section-heading h2{font-family:var(--display);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-display);text-transform:uppercase}.section-heading>p{margin-top:var(--s2);max-width:56ch;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink)}.section-heading>.pack-format{margin-top:var(--s1);font-size:var(--fs-small);font-weight:700;color:var(--muted)}
/* Same take, any world: one moment in three places, three muted loops that start, restart and pause together while on screen. */
.world-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6988fr);gap:6px}.world-panel{position:relative;overflow:hidden;aspect-ratio:900/860;background:#DDD9D1}.world-panel.world-wide{aspect-ratio:16/9;background:#C9B48F}.world-panel img,.world-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.world-toggle{position:absolute;right:0;bottom:0;z-index:1;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:0;background:#FFFFFFF2;color:var(--ink);font-size:16px;font-weight:700;line-height:1}.world-toggle:hover{background:var(--paper)}.world-tips{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--s2)}.world-tips li{font-size:var(--fs-body);line-height:var(--lh-text);color:var(--muted)}.world-tips strong{color:var(--ink)}
/* Real examples: three cards on the page grid, the labels sit on the video. */
.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}.example-card{min-width:0}.example-card h3{font-size:var(--fs-title);line-height:1.2;letter-spacing:-.025em;margin-bottom:var(--s2)}.example-pair{position:relative;margin:0}.pair-media{position:relative;height:0;padding-top:calc(50% - 3px);overflow:hidden;background:#EEECE7}.pair-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.pair-media::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 3px);width:6px;background:var(--paper);pointer-events:none}.example-pair figcaption{position:absolute;inset:auto 0 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0;pointer-events:none}.example-card>p{font-size:var(--fs-body);line-height:var(--lh-text);margin-top:var(--s2);color:var(--muted)}
/* Inside the guide: the cover in the first column, what it covers in the other two, then real pages. */
.inside-pack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}.pack-cover{display:block;width:100%;border:0;padding:0;background:transparent}.pack-cover img{width:100%;height:auto}.contents-list{grid-column:2/4;list-style:none;margin:0;padding:0;display:grid;row-gap:var(--s3);max-width:64ch}.contents-list li{font-size:var(--fs-body);line-height:var(--lh-text);color:var(--muted)}.contents-list strong{color:var(--ink)}
.preview-intro{margin:var(--s6) 0 var(--s3);color:var(--muted)}.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}.page-preview{display:block;min-width:0;background:transparent;border:0;padding:0;text-align:left;color:var(--ink)}.preview-top{display:block;font-size:var(--fs-body);font-weight:700;line-height:var(--lh-ui);margin-bottom:12px}.page-preview>img{width:100%;aspect-ratio:4/5;object-fit:contain;object-position:top;background:var(--paper)}.preview-caption{display:flex;align-items:start;justify-content:space-between;gap:16px;font-size:var(--fs-body);line-height:var(--lh-text);margin-top:12px;color:var(--muted);text-wrap:balance}.preview-caption>span{flex:none;font-size:18px;line-height:1;color:var(--ink)}.page-preview:hover>img{outline:2px solid var(--ink);outline-offset:3px}
/* The offer: a white card on the ink band; nothing else sits on the ink. The checkout column starts on the third column line of the page grid,
   like the hero buy box, and its top is level with the product name. */
.purchase-card{display:grid;grid-template-columns:minmax(0,1fr) calc((100% + 2 * var(--s5) - 2 * var(--col-gap)) / 3 - var(--s5));gap:64px;align-items:start;padding:var(--s5);background:var(--paper);color:var(--ink)}.purchase-content .product-name{font-family:var(--display);font-weight:800;font-size:var(--fs-display);line-height:var(--lh-display);text-transform:uppercase}.package-intro{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:44ch;margin-top:var(--s2)}.package-list{list-style:none;padding:0;margin:20px 0 0}.package-list li{position:relative;padding-left:22px;margin:var(--s1) 0;font-size:var(--fs-body);line-height:var(--lh-text)}.package-list li::before{content:'+';position:absolute;left:0;font-weight:700;font-size:17px;line-height:1.5}.offer-price{display:flex;gap:16px;align-items:baseline;margin-bottom:var(--s3)}.offer-price>span:first-child{font-family:var(--display);font-weight:800;font-size:var(--fs-display);line-height:1;letter-spacing:-.05em;color:var(--accent)}.offer-price>span:last-child{font-size:var(--fs-small)}.purchase-button{width:100%;background:var(--ink);color:var(--paper)}.purchase-button:hover{background:#343441}.delivery-note{text-align:left;font-size:var(--fs-small);line-height:1.5;margin-top:10px}
/* The delivery line is wider than the checkout column: it breaks before "Delivery after checkout" and drops the "·" there, so no line ends on a "·". */
.delivery-note .sep{display:none}.delivery-note .sep+.nowrap{display:block}.purchase-caveat{font-size:var(--fs-body);line-height:var(--lh-text);margin-top:20px;max-width:56ch}.card-free-link{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-body);font-weight:700;line-height:var(--lh-ui);margin-top:6px;min-height:44px}
/* The creator and the tool on a tint band: the bio in the first column of the page grid, the tool from the second column line. */
.setup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}.tool-compact{grid-column:2/4;max-width:60ch}.creator-compact{display:grid;grid-template-columns:110px 1fr;gap:24px;align-items:start}.creator-compact>img{width:110px;height:140px;object-fit:cover;object-position:50% 44%}.setup h2{font-size:var(--fs-title);line-height:1.2;margin-bottom:12px}.setup p{font-size:var(--fs-body);line-height:var(--lh-text);color:var(--muted)}
/* One affiliate link, always labelled. Empty config shows the [AD-LINK] placeholder. */
.ad-block{margin-top:22px}.ad-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}.ad-link,.ad-placeholder{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:11px 18px;font-size:var(--fs-body);font-weight:700;line-height:var(--lh-ui);text-decoration:none}.ad-link{border:2px solid var(--ink);color:var(--ink)}.ad-link:hover{background:var(--paper)}.ad-placeholder{border:2px dashed #9A9AA6;color:var(--muted)}.ad-tag{font-size:var(--fs-small);font-weight:700;line-height:1.4;color:var(--ink);white-space:nowrap}.setup .ad-note{margin-top:12px}.setup .official-link{margin-top:14px}.official-link a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;font-weight:700;color:var(--ink)}
/* FAQ: the only rules on the page mark the accordion rows. It ends on the second column line of the page grid. */
.faq-grid{max-width:calc((100% - 2 * var(--col-gap)) / 3 * 2 + var(--col-gap))}.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 0;cursor:pointer;list-style:none;font-weight:700;font-size:var(--fs-lead);line-height:var(--lh-lead)}.faq summary::-webkit-details-marker{display:none}.faq summary>span{font-size:26px;font-weight:400}.faq details[open] summary>span{transform:rotate(45deg)}.faq details>p{font-size:var(--fs-body);line-height:var(--lh-text);max-width:66ch;color:var(--muted)}.faq details>p:last-child{padding-bottom:24px}.faq details>p a{color:var(--ink);font-weight:700;white-space:nowrap}
/* Footer: a tint band that bookends the ad line; both hold disclosures. The dock hides once the footer is in view. */
.footer{display:flex;justify-content:space-between;align-items:start;gap:32px;padding-block:var(--s5) calc(var(--s5) + env(safe-area-inset-bottom))}.footer>p{font-size:var(--fs-small);line-height:1.6;color:var(--muted)}.footer-links{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;font-size:var(--fs-small);font-weight:700}.footer-links a,.footer-support{display:inline-flex;align-items:center;min-height:44px}.footer-support{font-weight:400;color:var(--muted);gap:.35em}.footer-support a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700}
.dock{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--paper);color:var(--ink);border-top:2px solid var(--accent);padding:12px 20px calc(12px + env(safe-area-inset-bottom))}.dock>div{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.dock strong{font-family:var(--display);font-weight:800;font-size:21px;line-height:1.05;letter-spacing:-.025em;text-transform:uppercase}.dock>div>span{font-size:13px;color:var(--muted)}.dock .button{font-size:14px;min-height:48px;padding:12px 16px;flex:none}.decode-video{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}.noscript-message{padding-block:20px;font-size:16px}
dialog{width:calc(100% - 36px);max-width:560px;max-height:calc(100svh - 36px);overflow:auto;background:var(--paper);color:var(--ink);border:0;padding:24px;border-radius:0;box-shadow:0 20px 80px #11111740}dialog::backdrop{background:#111117B8}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.dialog-heading h2{font-size:16px;letter-spacing:0;line-height:1.4}.close-button{flex:none;min-width:44px;min-height:44px;background:var(--ink);border:0;font-size:28px;line-height:1;color:var(--paper)}.reel-dialog{max-width:430px}.reel-dialog video{width:100%;max-height:70svh;object-fit:contain;background:var(--tint)}.reel-dialog>p{font-size:15px;line-height:1.6;margin-top:14px}.preview-dialog{max-width:720px}.preview-dialog>img{width:100%;height:auto}.preview-full{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:700;margin-top:8px}.checkout-dialog .dialog-heading{align-items:start}.checkout-dialog .dialog-heading h2{font-size:40px;letter-spacing:-.025em;line-height:1.1}.checkout-dialog>p{font-size:16px;line-height:1.6}.checkout-dialog .button{width:100%;margin-top:24px}

@media(min-width:1000px){.dock{display:none!important}}
/* 800–1099: the hero keeps the video beside the deck; every other section stays on the three-column grid.
   The checkout column and the tool start on the hero's buy-column line. */
@media(max-width:1099px){
.hero-inner{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:'title title' 'media deck' 'media purchase' 'media .'}
.purchase-card{grid-template-columns:minmax(0,1fr) calc((100% + 2 * var(--s4) - var(--col-gap)) * .4 - var(--s4));padding:var(--s4);gap:40px}
.setup{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}.tool-compact{grid-column:2;max-width:none}.creator-compact{grid-template-columns:88px 1fr;gap:20px}.creator-compact>img{width:88px;height:120px}
}
/* Up to 799: one column; the page previews become a swipe row, and the cover takes the same width as a page in that row. */
@media(max-width:799px){
.hero-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:'title' 'deck' 'media' 'purchase';grid-template-rows:none;max-width:680px;margin-inline:0;padding-top:var(--s3)}.hero-title{margin-bottom:var(--s2);font-size:clamp(64px,17.5vw,112px)}.hero-title>span{display:block}.hero-deck{margin-bottom:var(--s3)}
.world-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px}.world-panel.world-wide{grid-column:1/-1}.world-tips{grid-template-columns:1fr}
.example-grid{grid-template-columns:1fr;gap:var(--s5);max-width:550px}
.inside-pack{display:block}.pack-cover{width:240px;margin-bottom:var(--s4)}
.preview-grid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(240px,44%);gap:var(--col-gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:0 0 12px;margin:0}.page-preview{scroll-snap-align:start}.page-preview:focus-visible{outline-offset:-3px}
.purchase-card{display:block}.purchase-checkout{margin-top:var(--s5)}.delivery-note .sep,.delivery-note .sep+.nowrap{display:inline}
.setup{display:block}.creator-compact{grid-template-columns:100px 1fr;gap:24px}.creator-compact>img{width:100px;height:135px}.tool-compact{margin-top:var(--s5)}
.faq-grid{max-width:none}
.footer{display:block}.footer-links{margin-top:14px}
}
/* Up to 599: three header links no longer fit on one line each; the delivery line no longer fits the card on one line. */
@media(max-width:599px){.header nav a[href="#inside"]{display:none}.delivery-note .sep{display:none}.delivery-note .sep+.nowrap{display:block}}
@media(max-width:499px){
.hero-title{font-size:19.2vw;line-height:.94}
.proof-controls{margin-top:4px;gap:10px}.proof-controls button{padding:8px}.proof-controls #motion-toggle{font-size:16px}
.section-heading{margin-bottom:var(--s3)}
.world-strip{gap:3px}
.pack-cover{width:82%}.preview-grid{grid-auto-columns:82%}
.purchase-card{padding:28px 24px}
.creator-compact{grid-template-columns:80px 1fr;gap:20px}.creator-compact>img{width:80px;height:130px}
.ad-link,.ad-placeholder{padding-inline:16px}
.faq summary{min-height:60px}.faq details>p:last-child{padding-bottom:22px}
.footer-links{column-gap:20px;margin-top:12px}
.dock{padding-inline:18px;gap:12px}.dock strong{font-size:20px}.dock .button{padding-inline:15px}
.preview-dialog{width:calc(100% - 12px);padding:12px}.checkout-dialog .dialog-heading h2{font-size:32px}.checkout-dialog .button{font-size:15px}
}
@media(max-width:359px){.purchase-card{padding-inline:20px}.offer-price{gap:12px}.dock strong{font-size:18px}.dock .button{font-size:13px;padding-inline:13px}}