:root{--paper:#f8f5ed;--ink:#1d1b1a;--charcoal:#2b2825;--muted:#716b64;--amber:#b95713;--amber-text:#963b08;--amber-light:#ecaa5b;--rule:#d9cdbd;--serif:"Newsreader",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--mono:"DM Mono",monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans)}body::selection{background:var(--amber);color:#fff}a{color:inherit;text-decoration:none}main{position:relative;overflow:clip}.site-header,.hero,.how-it-works,.progress,.sources,.pricing,.faq,footer{width:min(100% - 64px,1240px);margin:auto}main>section{position:relative;z-index:1}.site-header{min-height:90px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}.brand{display:inline-flex;align-items:center;gap:9px;font:700 1.3rem/1 var(--sans);letter-spacing:-.04em}.brand-mark{display:block;width:28px;height:28px;flex:0 0 28px}nav{display:flex;align-items:center;gap:26px;font-size:.88rem;font-weight:500}nav a:not(.nav-cta){color:var(--muted)}nav a:hover,.quiet-link:hover{color:var(--amber)}.nav-cta{padding:11px 14px;border-radius:5px;background:var(--ink);color:var(--paper)}.hero{position:relative;isolation:isolate;min-height:610px;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:54px;overflow:visible}.hero-copy{position:relative;z-index:1;max-width:530px;padding:76px 0}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 17px;color:var(--amber-text);font:500 .7rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase}.eyebrow span{width:22px;height:1px;background:currentColor}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--sans);font-weight:700;letter-spacing:-.065em;text-wrap:balance}h1{max-width:680px;margin-bottom:25px;font-size:clamp(3.4rem,5.2vw,4.4rem);line-height:.93}h1 em{color:var(--amber);font-style:normal}.hero-summary{max-width:42ch;margin-bottom:32px;color:var(--muted);font-size:1.1rem}.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}.button{display:inline-flex;min-height:53px;align-items:center;justify-content:center;gap:12px;padding:0 21px;border:1px solid transparent;border-radius:5px;font-size:.9rem;font-weight:700;transition:transform .18s ease,background .18s ease}.button:hover{transform:translateY(-2px)}.button-dark{background:var(--ink);color:var(--paper)}.button-dark:hover{background:var(--amber)}.quiet-link{border-bottom:1px solid var(--ink);padding-bottom:3px;font-size:.88rem;font-weight:600}.hero-note{margin:23px 0 0;color:var(--muted);font-size:.8rem}.hero-stage{position:relative;z-index:1;align-self:center;transform:none}.section-intro h2,.progress h2,.sources h2,.pricing h2,.download h2{margin-bottom:20px;font-size:clamp(2.5rem,4vw,3.9rem);line-height:.98}.sources>div>p:last-child,.progress-copy>p:not(.eyebrow),.download-copy>p:not(.eyebrow){color:var(--muted)}.product-stage{overflow:hidden;border:7px solid var(--charcoal);border-radius:4px;background:var(--charcoal);box-shadow:18px 18px 0 var(--amber)}.stage-bar{height:29px;display:flex;align-items:center;gap:5px;padding:0 10px;color:#c9beb0;font:.58rem var(--mono)}.stage-bar span{width:7px;height:7px;border-radius:50%;background:#d77855}.stage-bar span:nth-child(2){background:#d6a75d}.stage-bar span:nth-child(3){background:#82a276}.stage-bar b{margin-left:6px;font-weight:400}.product-stage img{display:block;width:100%;aspect-ratio:1.57/1;object-fit:cover;object-position:top}.how-it-works{padding:96px 0;border-top:1px solid var(--rule)}.how-it-works .section-intro{max-width:620px;margin:0 auto 48px;text-align:center}.how-it-works .eyebrow{justify-content:center}.section-intro h2{margin-bottom:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:0;padding:0;list-style:none}.steps li{padding-top:17px;border-top:2px solid var(--amber)}.steps span{color:var(--amber);font:.68rem var(--mono)}.steps h3{margin:23px 0 10px;font-size:1.03rem}.steps p{margin:0;color:var(--muted);font-size:.92rem}.progress{display:grid;grid-template-columns:1fr .8fr;min-height:470px;overflow:hidden;background:#f1ebe1;color:var(--ink)}.progress-copy{padding:70px 12%}.progress-copy>p:not(.eyebrow){max-width:47ch}.progress ul{display:grid;gap:12px;margin:29px 0 0;padding:0;list-style:none;color:var(--muted);font-size:.92rem}.progress li::before{content:"✓";margin-right:10px;color:var(--amber-light)}.progress-art{overflow:hidden;background:#f1ebe1}.progress-art img{width:100%;height:100%;object-fit:cover;object-position:right bottom;filter:grayscale(1) contrast(1.18);mix-blend-mode:multiply;opacity:.88}.sources{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;padding:118px 0}.sources>div{max-width:450px}.sources ul{display:grid;grid-template-columns:repeat(2,1fr);align-content:start;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}.sources li{padding:14px 0;border-bottom:1px solid var(--rule);color:var(--muted);font-size:.92rem}.sources li:nth-child(odd){padding-right:24px}.pricing{padding:118px 0;border-top:1px solid var(--rule)}.pricing-heading{max-width:590px;margin-bottom:50px}.plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}.plan{min-height:355px;padding:32px;border:1px solid var(--rule);background:#fbf7f0}.plan-featured{border-color:var(--amber);background:#f1dfc9}.plan-label{margin-bottom:16px;font-weight:700}.plan-label span{margin-left:8px;color:var(--amber);font:.64rem var(--mono);letter-spacing:.06em;text-transform:uppercase}.price{margin-bottom:6px;font:500 clamp(2.8rem,4vw,4rem)/1 var(--serif);letter-spacing:-.04em}.price small{color:var(--muted);font:.78rem var(--sans);letter-spacing:0}.annual{margin-bottom:22px;color:var(--muted);font-size:.82rem}.annual b{margin-left:8px;color:var(--amber);font-weight:700}.plan-summary{color:var(--muted)}.plan ul{display:grid;gap:9px;margin:25px 0 0;padding:0;list-style:none;font-size:.9rem}.plan li::before{content:"·";margin-right:8px;color:var(--amber);font-weight:700}.availability{margin:24px 0 0;color:var(--muted);font-size:.8rem}.library-note{max-width:62ch;margin:27px 0 0;color:var(--muted);font-size:.86rem}.library-note strong{color:var(--ink)}.download{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden;background:#f0d1a5}.download-copy{position:relative;z-index:1;width:min(100% - 64px,680px);padding:88px 0;text-align:center;transform:translateX(-120px)}.download-copy>p:not(.eyebrow){color:#4f3722}.button-paper{border-color:var(--ink);background:var(--paper)}.button-paper:hover{background:var(--ink);color:var(--paper)}.faq{display:grid;grid-template-columns:.78fr 1.22fr;gap:65px;padding:118px 0}.faq-list{border-top:1px solid var(--rule)}.faq details{border-bottom:1px solid var(--rule)}.faq summary{padding:20px 29px 20px 0;cursor:pointer;font-weight:700}.faq p{max-width:55ch;margin:-2px 0 21px;color:var(--muted);font-size:.92rem}footer{min-height:130px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--rule);color:var(--muted);font-size:.85rem}footer p{margin:0}.button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:4px}@media(max-width:900px){.site-header,.hero,.how-it-works,.progress,.sources,.pricing,.faq,footer{width:min(100% - 40px,690px)}.site-header{min-height:76px}.hero{position:relative;isolation:isolate;min-height:610px;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:54px;overflow:visible}.hero-copy{position:relative;z-index:1;max-width:530px;padding:76px 0}.hero-stage{position:relative;z-index:1;align-self:center;transform:none}.proof,.how-it-works,.sources,.faq{grid-template-columns:1fr;gap:42px}.proof,.how-it-works,.sources,.pricing,.faq{padding:85px 0}.proof-heading{max-width:500px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:0;padding:0;list-style:none}.progress{grid-template-columns:1fr}.progress-art{height:310px}.progress-copy{padding:72px 10%}.download{position:relative;min-height:420px;display:grid;place-items:center;overflow:hidden;background:#f0d1a5}.download-copy{position:relative;z-index:1;width:min(100% - 64px,680px);padding:88px 0;text-align:center;transform:translateX(-120px)}}@media(max-width:620px){.site-header,.hero,.how-it-works,.progress,.sources,.pricing,.faq,footer{width:min(100% - 32px,690px)}nav a:not(.nav-cta){display:none}.brand{font-size:1.3rem}.nav-cta{padding:9px 11px;font-size:.76rem}h1{font-size:clamp(2.5rem,12vw,2.85rem);line-height:.98;letter-spacing:-.055em}.hero{position:relative;isolation:isolate;min-height:610px;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:54px;overflow:visible}.hero-copy{position:relative;z-index:1;max-width:530px;padding:76px 0}.hero-stage{position:relative;z-index:1;align-self:center;transform:none}.product-stage{border-width:5px;box-shadow:10px 10px 0 var(--amber)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:0;padding:0;list-style:none}.steps h3{margin-top:13px}.sources ul,.plans{grid-template-columns:1fr}.sources li:nth-child(odd){padding-right:0}.plan{min-height:auto}.proof,.how-it-works,.sources,.pricing,.faq{padding:70px 0}.progress-copy{padding:68px 9%}.download-copy{position:relative;z-index:1;width:min(100% - 64px,680px);padding:88px 0;text-align:center;transform:translateX(-120px)}footer{min-height:112px;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}}@media(prefers-reduced-motion:no-preference){.hero-copy,.hero-stage{position:relative;z-index:1;align-self:center;transform:none}.hero-stage{position:relative;z-index:1;align-self:center;transform:none}@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}}

@media(max-width:900px){.hero{position:relative;isolation:isolate;min-height:610px;display:grid;grid-template-columns:.72fr 1.28fr;align-items:center;gap:54px;overflow:visible}.margin-art-reader{left:-12px;top:500px;width:300px;height:350px;background-size:auto 380px;opacity:.56}.margin-art-skyline{right:-20px;top:400px;width:250px;height:360px;background-size:auto 390px;opacity:.48}.illustrated-pricing{padding-right:0}.illustrated-pricing::after{right:-18px;bottom:-40px;width:300px;height:330px;background-size:auto 365px;opacity:.52}}@media(max-width:620px){.margin-art{display:block}.margin-art-reader{left:-18px;top:690px;width:205px;height:265px;background-size:auto 285px;opacity:.38}.margin-art-skyline{right:-40px;top:795px;width:170px;height:230px;background-size:auto 250px;opacity:.3}.illustrated-pricing::after{right:-32px;bottom:-24px;width:215px;height:235px;background-size:auto 260px;opacity:.4}.download-copy{position:relative;z-index:1;width:min(100% - 64px,680px);padding:88px 0;text-align:center;transform:translateX(-120px)}}




.hero::before{position:absolute;z-index:-1;left:-48px;bottom:-38px;width:430px;height:355px;content:"";background:url("assets/manga-margin-art.png?v=20260911-art3") left bottom/auto 390px no-repeat;mix-blend-mode:multiply;opacity:.82;pointer-events:none}.download-art{position:absolute;right:-20px;bottom:0;width:min(54%,620px);height:100%;object-fit:contain;object-position:right bottom;pointer-events:none}@media(max-width:900px){.hero::before{display:none}.download-copy{transform:none}}@media(max-width:620px){.download-art{width:78%;opacity:.24}.download-copy{width:min(100% - 40px,680px)}}
/* Responsive corrections for the storefront proof layout. */
@media (max-width: 900px) {
  .hero { min-height: auto; grid-template-columns: 1fr; gap: 0; }
  .hero-copy { order: 1; max-width: none; padding: 71px 0 28px; }
  .hero-stage { order: 3; width: 100%; margin: 10px 0 76px; transform: none; }
  .hero::before { display: none; }
  .download-copy { transform: none; }
}
@media (max-width: 620px) {
  .hero { min-height: auto; }
  .hero-copy { padding-top: 58px; }
  .hero-stage { margin-bottom: 62px; }
  .steps { grid-template-columns: 1fr; gap: 25px; }
  .download-copy { width: min(100% - 40px, 680px); padding: 60px 0; transform: none; }
  .download-art { width: 78%; opacity: .24; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .hero-stage { animation: arrive .65s ease-out both; }
  .hero-stage { animation-delay: .1s; }
}
@media (min-width: 901px) {
  .hero { background: var(--paper); }
  .hero-copy { align-self: start; padding-top: 55px; padding-bottom: 230px; }
  .hero::before {
    left: -8px;
    bottom: 0;
    width: 260px;
    height: 210px;
    background-color: var(--paper);
    background-size: auto 270px;
    background-blend-mode: multiply;
  }
}
@media (min-width: 901px) {
  .hero::before { mix-blend-mode: normal; }
  .progress-art { position: relative; min-width: 0; }
  .progress-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 901px) {
  .hero {
    min-height: 540px;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    align-items: end;
    gap: 36px;
  }
  .hero-copy {
    align-self: center;
    padding: 55px 0 45px;
  }
  .hero-stage { align-self: end; }
  .hero::before {
    left: -100px;
    bottom: 16px;
    width: 250px;
    height: 180px;
    background-size: auto 245px;
  }

  .download {
    display: block;
    min-height: 420px;
  }
  .download-copy {
    width: 42%;
    margin-left: 8%;
    padding: 72px 0;
    text-align: left;
    transform: none;
  }
  .download-art {
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: right bottom;
  }
}
/* Approved mockup-aligned storefront composition. */
body.mockup-aligned .site-header,body.mockup-aligned .hero,body.mockup-aligned .how-it-works,body.mockup-aligned .progress,body.mockup-aligned .pricing,body.mockup-aligned .faq,body.mockup-aligned .download,body.mockup-aligned footer{width:min(100% - 64px,1180px)}body.mockup-aligned .brand>span>span{color:var(--amber)}body.mockup-aligned nav{gap:23px}body.mockup-aligned .nav-cta{background:var(--ink);color:var(--paper)}body.mockup-aligned .nav-cta small{color:#f2b275;font-size:.68rem}body.mockup-aligned .hero{isolation:isolate;min-height:540px;grid-template-columns:minmax(290px,.78fr) minmax(0,1.22fr);align-items:end;gap:36px;padding:54px 0 34px;overflow:hidden;background:var(--paper)}body.mockup-aligned .hero::before,body.mockup-aligned .hero::after{position:absolute;z-index:-1;display:block;content:"";background-image:url("assets/manga-margin-art.png");background-repeat:no-repeat;pointer-events:none}body.mockup-aligned .hero::before{left:-108px;bottom:16px;width:258px;height:185px;background-color:var(--paper);background-position:left bottom;background-size:auto 252px;background-blend-mode:multiply;opacity:.88}body.mockup-aligned .hero::after{right:-130px;top:34px;width:300px;height:340px;background-color:var(--paper);background-position:right center;background-size:auto 390px;background-blend-mode:multiply;opacity:.48}body.mockup-aligned .hero-copy{align-self:center;max-width:none;padding:28px 0 44px}body.mockup-aligned .eyebrow{margin:0 0 14px}body.mockup-aligned .eyebrow span{display:none}body.mockup-aligned h1{max-width:540px;color:var(--ink);font-size:clamp(3.15rem,5.2vw,4.7rem);line-height:.96}body.mockup-aligned h1 em{color:inherit}body.mockup-aligned .hero-summary{max-width:36ch;margin:23px 0 27px}body.mockup-aligned .button-dark{background:var(--amber);color:#fff}body.mockup-aligned .product-stage{overflow:hidden;border:1px solid #c9c1b5;border-radius:12px;background:#fff;box-shadow:0 18px 38px rgba(34,29,24,.14)}body.mockup-aligned .stage-bar{display:none}body.mockup-aligned .product-stage img{aspect-ratio:auto;object-fit:contain}body.mockup-aligned .how-it-works{display:block;padding:88px 0 92px}.mockup-aligned .section-intro,.mockup-aligned .pricing-heading{max-width:660px;margin:0 auto;text-align:center}.mockup-aligned .section-intro h2,.mockup-aligned .pricing h2{font-size:clamp(2.35rem,4vw,3.55rem)}.mockup-aligned .section-intro>p:last-child,.mockup-aligned .pricing-heading>p:last-child{max-width:52ch;margin:17px auto 0;color:var(--muted)}.mockup-aligned .steps{grid-template-columns:repeat(3,1fr);gap:42px;margin-top:51px}.mockup-aligned .steps li{padding-top:15px;border-top:1px solid var(--rule)}.mockup-aligned .steps li>span:first-child{color:var(--amber);font:.72rem var(--mono)}.mockup-aligned .icon-circle{display:grid;width:40px;height:40px;place-items:center;margin:20px 0 17px;border:1px solid #dfc7ad;border-radius:50%;color:var(--amber)}.mockup-aligned .icon-circle svg{width:20px;height:20px}.mockup-aligned .steps h3{margin:0 0 8px}.mockup-aligned .progress{grid-template-columns:.74fr 1.15fr .6fr;min-height:350px;overflow:hidden;background:#f1ebe1}.mockup-aligned .progress-dashboard{position:relative;min-width:0;overflow:hidden;border-right:1px solid #e1d7ca}.mockup-aligned .progress-dashboard img{position:absolute;top:-48px;left:-16px;width:395px;max-width:none;height:auto;mix-blend-mode:normal}.mockup-aligned .progress-copy{padding:49px 9%}.mockup-aligned .progress h2{font-size:clamp(2rem,3.1vw,3rem)}.mockup-aligned .progress-copy>p:not(.eyebrow){margin:16px 0 20px}.mockup-aligned .progress ul{gap:10px;font-size:.84rem}.mockup-aligned .progress li{display:flex;gap:9px}.mockup-aligned .progress li::before{display:none}.mockup-aligned .progress-art{height:auto;background:transparent}.mockup-aligned .progress-art img{position:static;width:100%;height:100%;object-fit:cover;object-position:right bottom;mix-blend-mode:multiply}.mockup-aligned .pricing{position:relative;padding:92px 0 84px}.mockup-aligned .pricing-art{position:absolute;left:-112px;bottom:48px;width:190px;height:250px;object-fit:contain;object-position:left bottom;pointer-events:none}.mockup-aligned .plans{max-width:880px;margin:45px auto 0}.mockup-aligned .plan{min-height:292px;padding:28px 31px}.mockup-aligned .annual{margin-bottom:16px}.mockup-aligned .library-note{max-width:680px;margin:22px auto 0;text-align:center;font-size:.81rem}.mockup-aligned .faq{display:block;padding:82px 0}.mockup-aligned .faq-list{max-width:840px;margin:43px auto 0}.mockup-aligned .download{display:grid;grid-template-columns:1fr .75fr;min-height:278px;overflow:hidden;background:#f0d1a5}.mockup-aligned .download-copy{z-index:1;width:auto;padding:42px 0 42px 12%;text-align:left;transform:none}.mockup-aligned .download h2{font-size:clamp(2.25rem,3.8vw,3.45rem)}.mockup-aligned .download-copy>p:not(.eyebrow){max-width:37ch;color:#4f3722}.mockup-aligned .closing-art{position:relative;overflow:hidden}.mockup-aligned .closing-art img{position:absolute;right:0;bottom:0;width:auto;max-width:none;height:100%;object-fit:cover;object-position:right bottom}
@media(max-width:1024px){body.mockup-aligned .site-header,body.mockup-aligned .hero,body.mockup-aligned .how-it-works,body.mockup-aligned .progress,body.mockup-aligned .pricing,body.mockup-aligned .faq,body.mockup-aligned .download,body.mockup-aligned footer{width:min(100% - 48px,940px)}body.mockup-aligned .hero{grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr);gap:28px}body.mockup-aligned h1{font-size:clamp(2.85rem,5.1vw,3.75rem)}body.mockup-aligned .hero::before{left:-138px;width:238px;height:170px;background-size:auto 232px}body.mockup-aligned .hero::after{right:-182px;opacity:.34}body.mockup-aligned .pricing-art{left:-145px;width:175px}}@media(max-width:768px){body.mockup-aligned .site-header,body.mockup-aligned .hero,body.mockup-aligned .how-it-works,body.mockup-aligned .progress,body.mockup-aligned .pricing,body.mockup-aligned .faq,body.mockup-aligned .download,body.mockup-aligned footer{width:min(100% - 40px,690px)}body.mockup-aligned nav a:not(.nav-cta){display:none}body.mockup-aligned .hero{grid-template-columns:1fr;min-height:0;padding:54px 0 62px;gap:20px}body.mockup-aligned .hero::before,body.mockup-aligned .hero::after{display:none}body.mockup-aligned .hero-copy{padding:0}body.mockup-aligned h1{font-size:clamp(2.8rem,10vw,4rem)}body.mockup-aligned .hero-stage{max-width:620px;margin:0}.mockup-aligned .steps{gap:22px;margin-top:41px}.mockup-aligned .progress{grid-template-columns:1fr 1.1fr;min-height:0}.mockup-aligned .progress-dashboard{height:290px}.mockup-aligned .progress-art{display:none}.mockup-aligned .progress-copy{padding:43px 10%}.mockup-aligned .pricing-art{display:none}.mockup-aligned .download{grid-template-columns:1fr;min-height:330px}.mockup-aligned .download-copy{padding:55px 11%;text-align:center}.mockup-aligned .download-copy>p:not(.eyebrow){margin-inline:auto}.mockup-aligned .closing-art{position:absolute;inset:0;opacity:.22;pointer-events:none}.mockup-aligned .closing-art img{height:100%;right:-95px}}@media(max-width:480px){body.mockup-aligned .site-header,body.mockup-aligned .hero,body.mockup-aligned .how-it-works,body.mockup-aligned .progress,body.mockup-aligned .pricing,body.mockup-aligned .faq,body.mockup-aligned .download,body.mockup-aligned footer{width:min(100% - 32px,690px)}body.mockup-aligned h1{font-size:clamp(2.5rem,12vw,2.82rem);line-height:.98}.mockup-aligned .button{width:100%}.mockup-aligned .steps,.mockup-aligned .plans{grid-template-columns:1fr}.mockup-aligned .progress{grid-template-columns:1fr}.mockup-aligned .progress-dashboard{height:245px;border-right:0;border-bottom:1px solid #e1d7ca}.mockup-aligned .progress-copy{padding:42px 10%}.mockup-aligned .plan{min-height:0}.mockup-aligned .download-copy{padding:50px 9%}}
/* Final reference-scale corrections. */
body.mockup-aligned [hidden]{display:none!important}body.mockup-aligned .windows-icon{width:16px;height:16px;flex:0 0 auto}body.mockup-aligned .hero{min-height:570px;align-items:end}body.mockup-aligned .hero-copy{align-self:start;padding:38px 0 185px}body.mockup-aligned .hero-stage{align-self:end}body.mockup-aligned .hero::before{left:0;bottom:14px;width:300px;height:230px;background-size:auto 300px}body.mockup-aligned .hero::after{right:-92px;top:42px;opacity:.56}body.mockup-aligned .how-it-works{padding:42px 0 52px}.mockup-aligned .section-intro,.mockup-aligned .pricing-heading{max-width:1000px}.mockup-aligned .section-intro h2,.mockup-aligned .pricing h2{font-size:clamp(2.25rem,3vw,2.55rem)}.mockup-aligned .section-intro>p:last-child{margin-top:11px}.mockup-aligned .steps{margin-top:34px;gap:28px;text-align:center}.mockup-aligned .steps li{padding-top:16px}.mockup-aligned .steps li>span:first-child{display:block;margin:0 auto 12px;color:var(--amber);font-size:1.25rem}.mockup-aligned .icon-circle{width:72px;height:72px;margin:0 auto 16px;background:var(--ink);border:0;color:var(--paper)}.mockup-aligned .icon-circle svg{width:32px;height:32px}.mockup-aligned .steps h3{font-size:1.08rem}.mockup-aligned .progress{min-height:320px;grid-template-columns:280px minmax(0,1fr) 230px}.mockup-aligned .progress-dashboard{height:320px}.mockup-aligned .progress-dashboard img{top:-390px;left:-26px;width:2000px;height:auto;max-width:none}.mockup-aligned .progress-copy{padding:42px 8%}.mockup-aligned .progress ul{gap:11px}.mockup-aligned .progress li{align-items:center}.mockup-aligned .progress li svg{width:18px;height:18px;flex:0 0 auto;color:var(--amber)}.mockup-aligned .pricing{padding:48px 0 58px}.mockup-aligned .faq{padding:38px 0 48px}.mockup-aligned .faq .section-intro h2{font-size:clamp(2rem,2.7vw,2.2rem)}.mockup-aligned .download{width:100%!important;margin:0;display:grid;place-items:stretch;align-items:stretch;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);min-height:252px}.mockup-aligned .download-copy{align-self:center;padding-left:max(32px,calc((100vw - 1180px)/2 + 132px));padding-right:28px}.mockup-aligned .closing-art{position:relative;min-width:0;min-height:220px;overflow:hidden;opacity:1;pointer-events:none}.mockup-aligned .closing-art img{position:absolute;right:0;bottom:0;width:auto;max-width:none;height:100%;opacity:1}
@media(max-width:1024px){body.mockup-aligned .hero-copy{padding-bottom:160px}body.mockup-aligned .hero::before{left:-38px;width:268px;height:210px;background-size:auto 272px}.mockup-aligned .progress{grid-template-columns:240px minmax(0,1fr) 190px}.mockup-aligned .progress-dashboard{height:300px}.mockup-aligned .progress-dashboard img{top:-360px;left:-26px;width:1840px}.mockup-aligned .download-copy{padding-left:12%}}@media(max-width:768px){body.mockup-aligned .hero{min-height:0}body.mockup-aligned .hero-copy{padding:0}body.mockup-aligned .hero::before,body.mockup-aligned .hero::after{display:none}.mockup-aligned .how-it-works{padding:56px 0}.mockup-aligned .steps{gap:22px}.mockup-aligned .icon-circle{width:60px;height:60px}.mockup-aligned .progress{grid-template-columns:1fr 1.1fr}.mockup-aligned .progress-dashboard{height:290px}.mockup-aligned .progress-dashboard img{top:-338px;left:-26px;width:1640px}.mockup-aligned .download{width:100%!important;margin:0;grid-template-columns:1fr;min-height:320px}.mockup-aligned .download-copy{padding:50px 10%;text-align:center}.mockup-aligned .closing-art{position:absolute;inset:0;min-height:0;opacity:.22}.mockup-aligned .closing-art img{right:-95px}}@media(max-width:480px){.mockup-aligned .steps{grid-template-columns:1fr}.mockup-aligned .progress{grid-template-columns:1fr}.mockup-aligned .progress-dashboard{height:245px}.mockup-aligned .progress-dashboard img{top:-286px;left:-22px;width:1380px}.mockup-aligned .download-copy{padding:48px 9%}}
/* Final hero-art and step-icon refinement. */
body.mockup-aligned .hero::before{height:200px}.mockup-aligned .icon-circle{background:#eee5d9;color:var(--ink)}@media(max-width:1024px){body.mockup-aligned .hero::before{height:180px}}
/* Integrated hero artwork and framed dashboard-card crop. */
@media (min-width: 769px) {
  body.mockup-aligned .hero { min-height: 510px; align-items: start; padding: 44px 0 32px; }
  body.mockup-aligned .hero::before { inset: 0; width: auto; height: auto; left: auto; right: auto; bottom: auto; background-color: var(--paper); background-position: center; background-size: cover; background-blend-mode: multiply; opacity: .58; z-index: -2; }
  body.mockup-aligned .hero::after { inset: 0; width: auto; height: auto; right: auto; top: auto; background: linear-gradient(90deg, var(--paper) 0%, rgba(248,245,237,.95) 31%, rgba(248,245,237,.7) 51%, rgba(248,245,237,.12) 76%); opacity: 1; z-index: -1; }
  body.mockup-aligned .hero-copy { align-self: start; padding: 38px 0 0; }
  body.mockup-aligned .hero-stage { align-self: start; margin-top: 24px; }
  body.mockup-aligned .progress { grid-template-columns: 296px minmax(0,1fr) 230px; overflow: visible; }
  body.mockup-aligned .progress-dashboard { width: 248px; height: 300px; margin: 16px 24px; overflow: hidden; border: 1px solid #c9c1b5; border-radius: 10px; background: var(--paper); box-shadow: 0 10px 22px rgba(34,29,24,.13); transform: rotate(-5deg); }
  body.mockup-aligned .progress-dashboard img { top: -370px; left: -27px; width: 1891px; height: auto; max-width: none; transform: none; }
}
@media (max-width: 768px) {
  body.mockup-aligned .progress { grid-template-columns: 1fr; }
  body.mockup-aligned .progress-dashboard { width: 248px; height: 300px; margin: 20px auto; overflow: hidden; border: 1px solid #c9c1b5; border-radius: 10px; background: var(--paper); box-shadow: 0 10px 22px rgba(34,29,24,.13); transform: rotate(-3deg); }
  body.mockup-aligned .progress-dashboard img { top: -370px; left: -27px; width: 1891px; height: auto; max-width: none; transform: none; }
}
/* Full-bleed hero-art box correction. */
@media (min-width: 769px) {
  body.mockup-aligned .hero::before { inset: 0; width: 100%; height: 100%; left: 0; right: auto; top: 0; bottom: auto; background-position: left bottom; background-size: cover; opacity: .8; }
  body.mockup-aligned .hero::after { inset: 0; width: 100%; height: 100%; left: 0; right: auto; top: 0; bottom: auto; background: linear-gradient(180deg, rgba(248,245,237,.98) 0%, rgba(248,245,237,.94) 50%, rgba(248,245,237,.25) 100%); }
}
/* Keep hero secondary text readable over the integrated illustration. */
@media (min-width: 769px) {
  body.mockup-aligned .hero-note, body.mockup-aligned .hero .quiet-link { width: fit-content; padding: 4px; background: rgba(248,245,237,.92); color: var(--ink); }
}
/* Full-bleed hero and progress surfaces with retained inner alignment. */
body.mockup-aligned .hero, body.mockup-aligned .progress {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
}
@media (min-width: 769px) {
  body.mockup-aligned .hero {
    padding-left: max(32px, calc((100vw - 1180px) / 2));
    padding-right: max(32px, calc((100vw - 1180px) / 2));
  }
  body.mockup-aligned .progress {
    padding-left: max(32px, calc((100vw - 1180px) / 2));
    padding-right: 0;
  }
}
@media (max-width: 768px) {
  body.mockup-aligned .hero { padding-left: 20px; padding-right: 20px; }
  body.mockup-aligned .progress { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
  body.mockup-aligned .hero { padding-left: 16px; padding-right: 16px; }
  body.mockup-aligned .progress { padding-left: 16px; padding-right: 16px; }
}
/* Scrollbar-safe full-bleed geometry. */
body.mockup-aligned .hero, body.mockup-aligned .progress {
  width: 100% !important;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 1025px) {
  body.mockup-aligned .hero { --section-gutter: max(32px, calc((100% - 1180px) / 2)); padding-left: var(--section-gutter); padding-right: var(--section-gutter); }
  body.mockup-aligned .progress { --section-gutter: max(32px, calc((100% - 1180px) / 2)); padding-left: var(--section-gutter); padding-right: 0; grid-template-columns: 296px minmax(0,1fr) calc(230px + var(--section-gutter)); }
}
@media (min-width: 769px) and (max-width: 1024px) {
  body.mockup-aligned .hero { padding-left: 24px; padding-right: 24px; }
  body.mockup-aligned .progress { padding-left: 24px; padding-right: 0; grid-template-columns: 240px minmax(0,1fr) 214px; }
}
@media (max-width: 768px) {
  body.mockup-aligned .hero, body.mockup-aligned .progress { margin-left: 0; }
  body.mockup-aligned .progress { padding-left: max(20px, calc((100% - 690px) / 2)); padding-right: max(20px, calc((100% - 690px) / 2)); }
}
@media (max-width: 480px) {
  body.mockup-aligned .hero, body.mockup-aligned .progress { padding-left: 16px; padding-right: 16px; }
}
/* Keep the pricing-book illustration visible without crossing the Free plan. */
@media (min-width: 1025px) {
  body.mockup-aligned .pricing-art {
    left: max(0px, calc((100% - 880px) / 2 - 150px));
    width: 150px;
    height: 230px;
    bottom: 42px;
  }
}
@media (max-width: 1024px) {
  body.mockup-aligned .pricing-art { display: none; }
}
/* Restore a calm, consistent section rhythm. */
@media (min-width: 769px) {
  body.mockup-aligned .how-it-works { padding: 78px 0 82px; }
  body.mockup-aligned .progress { margin-top: 72px; margin-bottom: 72px; }
  body.mockup-aligned .pricing { padding: 78px 0 82px; }
  body.mockup-aligned .faq { padding: 72px 0 78px; }
}
@media (max-width: 768px) {
  body.mockup-aligned .how-it-works { padding: 60px 0 64px; }
  body.mockup-aligned .progress { margin-top: 48px; margin-bottom: 48px; }
  body.mockup-aligned .pricing { padding: 60px 0 64px; }
  body.mockup-aligned .faq { padding: 56px 0 60px; }
}
/* Let the hero artwork read a little more clearly without weakening copy. */
@media (min-width: 769px) {
  body.mockup-aligned .hero::after {
    background: linear-gradient(180deg, rgba(248,245,237,.92) 0%, rgba(248,245,237,.84) 50%, rgba(248,245,237,.18) 100%);
  }
}
/* Feather the books scene into the progress paper surface. */
@media (min-width: 769px) {
  body.mockup-aligned .progress-art {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%);
    mask-image: linear-gradient(to right, transparent 0%, #000 38%);
  }
}
/* Natural transparent still-life for the progress band. */
@media (min-width: 769px) {
  body.mockup-aligned .progress-art {
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 1;
  }
  body.mockup-aligned .progress-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    mix-blend-mode: normal;
  }
}
/* Real 3x app-card capture: override every legacy dashboard crop. */
body.mockup-aligned .progress-dashboard img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
/* Real-text dashboard annotation and enlarged natural still-life. */
body.mockup-aligned .hero-proof { position: relative; align-self: start; padding-top: 38px; }
body.mockup-aligned .hero-proof .hero-stage { margin-top: 0; }
body.mockup-aligned .dashboard-annotation { position: absolute; top: 0; left: 4%; z-index: 2; margin: 0; color: var(--amber-dark); font: 600 1rem/1.1 var(--sans); font-style: italic; letter-spacing: -.02em; }
body.mockup-aligned .dashboard-annotation em { font: inherit; letter-spacing: inherit; }
body.mockup-aligned .dashboard-annotation svg { position: absolute; top: 13px; left: 100%; width: 72px; height: 36px; overflow: visible; }
@media (min-width: 769px) {
  body.mockup-aligned .progress-art img { width: 150%; height: 150%; max-width: none; object-fit: contain; object-position: right bottom; }
}
@media (max-width: 768px) {
  body.mockup-aligned .hero-proof { padding-top: 33px; }
  body.mockup-aligned .dashboard-annotation { left: 50%; width: max-content; transform: translateX(-50%); text-align: center; font-size: .88rem; }
  body.mockup-aligned .dashboard-annotation svg { left: calc(100% - 12px); width: 54px; height: 28px; }
}

/* Top-level artwork consolidation: one hero composition, full-height supporting art. */
html { background: var(--paper); }
body.mockup-aligned { position: relative; isolation: isolate; background: transparent; }
body.mockup-aligned .hero::before {
  position: absolute;
  z-index: 0;
  inset: -90px 0 auto;
  height: calc(100% + 90px);
  content: "";
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(248,245,237,.90) 0, rgba(248,245,237,.80) 42%, rgba(248,245,237,.28) 76%, var(--paper) 100%), url("assets/manga-margin-art.png");
  background-position: center top, left bottom;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-blend-mode: normal, multiply;
  opacity: .86;
}
body.mockup-aligned > header,
body.mockup-aligned > main,
body.mockup-aligned > footer { position: relative; z-index: 1; }
body.mockup-aligned .site-header { border-bottom: 0; background: transparent; }
body.mockup-aligned .hero { background: transparent; }
body.mockup-aligned .hero::before,
body.mockup-aligned .hero::after { display: none; }
body.mockup-aligned .dashboard-annotation { color: var(--amber-text); }
body.mockup-aligned .dashboard-annotation svg { top: -2px; left: calc(100% - 8px); width: 72px; height: 64px; }
body.mockup-aligned .progress-dashboard { position: relative; }
body.mockup-aligned .progress-art { position: relative; overflow: hidden; background: transparent; }
body.mockup-aligned .progress-art img { position: absolute; right: 0; bottom: 0; width: 145%; height: 145%; max-width: none; object-fit: contain; object-position: right bottom; mix-blend-mode: normal; opacity: 1; }
@media (min-width: 1025px) {
  body.mockup-aligned .progress { grid-template-columns: 280px minmax(0,1fr) calc(320px + var(--section-gutter)); }
  body.mockup-aligned .pricing { width: 100%; max-width: none; margin: 0; min-height: 470px; padding: 78px max(32px, calc((100% - 1180px) / 2)) 82px; isolation: isolate; overflow: hidden; }
  body.mockup-aligned .pricing-art { display: block; position: absolute; z-index: 0; inset: 0 auto 0 0; width: 280px; height: 100%; object-fit: cover; object-position: left bottom; opacity: .86; pointer-events: none; }
  body.mockup-aligned .pricing-heading,
  body.mockup-aligned .plans,
  body.mockup-aligned .library-note { position: relative; z-index: 1; }
  body.mockup-aligned .plans { max-width: 760px; margin: 45px auto 0; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  body.mockup-aligned .progress { grid-template-columns: 240px minmax(0,1fr) 260px; }
  body.mockup-aligned .pricing { width: 100%; max-width: none; margin: 0; min-height: 440px; padding: 70px 24px 74px; isolation: isolate; overflow: hidden; }
  body.mockup-aligned .pricing-art { display: block; position: absolute; z-index: 0; inset: 0 auto 0 0; width: 220px; height: 100%; object-fit: cover; object-position: left bottom; opacity: .82; pointer-events: none; }
  body.mockup-aligned .pricing-heading,
  body.mockup-aligned .plans,
  body.mockup-aligned .library-note { position: relative; z-index: 1; }
  body.mockup-aligned .plans { max-width: 720px; margin: 42px auto 0; }
}
@media (max-width: 768px) {
  body.mockup-aligned .hero::before { height: calc(100% + 76px); top: -76px; background-image: linear-gradient(180deg, rgba(248,245,237,.93) 0, rgba(248,245,237,.82) 60%, var(--paper) 100%), url("assets/manga-margin-art.png"); background-position: center top, left top; background-size: 100% 100%, cover; opacity: .78; }
  body.mockup-aligned .hero-copy { order: 0; }
  body.mockup-aligned .hero-proof { order: 1; }
  body.mockup-aligned .dashboard-annotation svg { left: calc(100% - 8px); width: 56px; height: 54px; }
}
/* Preserve full illustration bounds and pricing copy clearance. */
body.mockup-aligned .progress-art img {
  position: absolute;
  left: auto;
  top: auto;
  right: 0;
  bottom: 0;
  width: 145%;
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: right bottom;
}
@media (min-width: 1025px) {
  body.mockup-aligned .library-note { max-width: 760px; margin: 22px auto 0; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  body.mockup-aligned .library-note { max-width: 720px; margin: 22px auto 0; }
}
/* Compact CTA alignment and a deliberate hero action stack. */
body.mockup-aligned .hero-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
body.mockup-aligned .nav-cta,
body.mockup-aligned .button:has(.windows-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  line-height: 1.1;
}
body.mockup-aligned .windows-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
@media (max-width: 480px) {
  body.mockup-aligned .hero-actions { align-items: stretch; }
  body.mockup-aligned .hero-actions .quiet-link { align-self: flex-start; }
}
/* Preserve the pricing illustration's native outline and clear workflow spacing. */
@media (min-width: 1025px) {
  body.mockup-aligned .pricing-art {
    width: calc((100% - 760px) / 2 - 24px);
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
  }
  body.mockup-aligned .plans,
  body.mockup-aligned .library-note {
    max-width: 760px;
  }
  body.mockup-aligned .how-it-works { padding-top: 118px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  body.mockup-aligned .pricing-art {
    width: 220px;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
  }
  body.mockup-aligned .plans,
  body.mockup-aligned .library-note {
    max-width: 720px;
  }
  body.mockup-aligned .how-it-works { padding-top: 110px; }
}
@media (max-width: 768px) {
  body.mockup-aligned .how-it-works { padding-top: 84px; }
}
/* Shared brand scale and requested section breathing room. */
body.mockup-aligned .how-it-works,
body.mockup-aligned .pricing { border-top: 0; }
body.mockup-aligned .hero { padding-bottom: 72px; }
body.mockup-aligned .progress { padding-top: 40px; padding-bottom: 40px; }
body.mockup-aligned .download-copy { padding-top: 68px; padding-bottom: 68px; }
@media (min-width: 769px) and (max-width: 1024px) {
  body.mockup-aligned .progress { grid-template-columns: 280px minmax(0, 1fr); padding-right: 24px; }
  body.mockup-aligned .progress-art,
  body.mockup-aligned .pricing-art { display: none; }
}
@media (max-width: 768px) {
  body.mockup-aligned .hero { padding-bottom: 64px; }
  body.mockup-aligned .progress { padding-top: 32px; padding-bottom: 32px; }
  body.mockup-aligned .download-copy { padding-top: 64px; padding-bottom: 64px; margin-left: 0; }
  body.mockup-aligned .progress-copy { padding: 32px 5%; }
  body.mockup-aligned .site-header { gap: 16px; }
  body.mockup-aligned .nav-cta { max-width: 160px; min-height: 44px; text-align: center; }
}
@media (max-width: 480px) {
  body.mockup-aligned .brand { font-size: 1.1rem; }
  body.mockup-aligned .nav-cta { max-width: 144px; padding: 9px; }
  body.mockup-aligned .icon-circle svg { width: 28px; height: 28px; }
}

/* Artwork follows section height, including the surrounding breathing room. */
body.mockup-aligned .hero::before {
  display: block;
  z-index: -1;
  width: 100%;
  background-color: transparent;
}
@media (min-width: 1025px) {
  body.mockup-aligned .progress-art { margin-top: -40px; margin-bottom: -40px; }
  body.mockup-aligned .progress-art img {
    width: 100%;
    height: 105.57%;
    top: -3.5%;
    bottom: auto;
    object-fit: cover;
    object-position: right center;
  }
  body.mockup-aligned .pricing-art { display: none; }
  body.mockup-aligned .pricing::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("assets/manga-pricing-art.png") left bottom / calc((100% - 760px) / 2 - 24px) auto no-repeat;
    opacity: .86;
  }
}
@media (min-width: 1600px) {
  /* The PNG includes transparent margins above and below the books. */
  body.mockup-aligned .pricing::before { background-size: auto 130.28%; background-position: left 90.49%; }
}

/* Allow the hero backdrop to extend upward behind the transparent header. */
body.mockup-aligned > main,
body.mockup-aligned .hero { overflow: visible; }
@media (min-width: 769px) and (max-width: 900px) {
  body.mockup-aligned .hero::before { top: -76px; height: calc(100% + 76px); }
}
body.mockup-aligned > .site-header { z-index: 2; }