/* The E-Book Library — Modernist design system (ported from Claude Design handoff) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-text:#201e1d;
  --color-accent:#ec3013;
  --color-accent-700:#ae1800;
  --color-divider:color-mix(in srgb, #201e1d 40%, transparent);
  --color-neutral-100:#f8f4f4;
  --color-neutral-700:#605d5d;
  --color-neutral-800:#444141;
  --font-heading:'Archivo',system-ui,sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --radius-md:0px;
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);font-weight:800;
  line-height:1.12;letter-spacing:-.015em;margin:0 0 var(--space-2);color:var(--color-text);
}
h6{font-size:13px;letter-spacing:.08em;text-transform:uppercase}
p{margin:0 0 var(--space-3)}
a{color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-accent-700)}
img{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.band{padding:clamp(40px,6vw,80px) 0}
.band-tight{padding:clamp(36px,5vw,64px) 0}
.rule-top{border-top:2px solid var(--color-divider)}

/* — scroll reveal — */
@keyframes el-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
[data-reveal-armed] [data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal-armed] [data-reveal].is-in{animation:el-rise 620ms cubic-bezier(.16,.84,.44,1) both}
[data-reveal-armed] [data-reveal][data-reveal-delay="1"].is-in{animation-delay:90ms}
[data-reveal-armed] [data-reveal][data-reveal-delay="2"].is-in{animation-delay:180ms}
[data-reveal-armed] [data-reveal][data-reveal-delay="3"].is-in{animation-delay:270ms}
@media(prefers-reduced-motion:reduce){
  [data-reveal-armed] [data-reveal]{opacity:1;transform:none;animation:none!important}
  .btn,.input,.el-row{transition:none!important}
}

/* — header / nav — */
.nav{
  display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-3) clamp(16px,4vw,40px);
  border-bottom:2px solid var(--color-divider);
  position:sticky;top:0;z-index:20;background:var(--color-bg);
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--color-text);font-family:var(--font-heading);font-weight:800;font-size:18px;margin-right:auto}
.nav-brand .mark{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--color-accent-700);color:var(--color-bg);font-size:12px;letter-spacing:-.02em;flex-shrink:0}
.navlinks{display:flex;flex-wrap:wrap;gap:clamp(14px,2.2vw,26px);align-items:center}
.navlinks .btn-primary{min-height:44px}
.navlinks a:not(.btn){color:inherit;text-decoration:none;font-size:14px}
.navlinks a:hover,.navlinks a[aria-current='page']{color:var(--color-accent)}

/* — buttons — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;text-decoration:none;
  font-family:var(--font-heading);font-weight:800;font-size:14px;line-height:1.2;color:var(--color-text);
  background:transparent;border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3)*1.2);border-radius:var(--radius-md);
  transition:background-color 140ms ease,color 140ms ease,transform 90ms cubic-bezier(.16,.84,.44,1);
}
.btn svg{display:block;flex-shrink:0}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-accent-700);color:var(--color-bg)}
.btn-primary:hover{background:var(--color-accent);color:var(--color-bg)}
.btn-primary:active{background:var(--color-accent-700)}
.btn-block{width:100%;margin-top:var(--space-2);justify-content:flex-start;text-align:left}
.btn-inverted{background:var(--color-bg);color:var(--color-accent-700)}
.btn-inverted:hover{background:var(--color-neutral-100);color:var(--color-accent-700)}

/* — forms — */
.field{margin-bottom:var(--space-4)}
.field>label{display:block;font-size:12px;margin-bottom:5px;color:color-mix(in srgb, var(--color-text) 70%, transparent)}
.input{
  width:100%;min-height:36px;padding:6px 10px;font:inherit;font-size:14px;color:var(--color-text);
  caret-color:var(--color-accent);background:var(--color-surface);
  border:1px solid var(--color-divider);border-radius:var(--radius-md);
  transition:border-color 140ms ease,background-color 140ms ease;
}
.input:hover{border-color:color-mix(in srgb, var(--color-text) 45%, transparent)}
.input:focus-visible{border-color:var(--color-accent);outline-offset:0}
.seg{display:inline-flex;width:100%;overflow:hidden;border:1px solid var(--color-divider);border-radius:var(--radius-md)}
.seg-opt{display:flex;flex:1;align-items:center;gap:6px;padding:7px 12px;font-size:13px;cursor:pointer;min-height:44px}
.seg-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.seg-opt+.seg-opt{border-left:1px solid var(--color-divider)}
.seg-opt:has(input:checked){background:var(--color-accent-700);color:var(--color-bg)}
.seg-opt:not(:has(input:checked)):hover{background:color-mix(in srgb, var(--color-text) 7%, transparent)}
.seg-opt:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:-2px}

/* — request form card — */
.request-form{background:var(--color-surface);border:2px solid var(--color-text);padding:clamp(20px,2.6vw,32px)}
.request-form h2{font-size:22px;margin:0 0 var(--space-2)}
.request-form>p{font-size:13px;color:var(--color-neutral-700);margin:0 0 var(--space-6)}
.preview-label{font-family:var(--font-heading);font-weight:800;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-700);margin-bottom:var(--space-2)}
.preview-box{
  font-size:13px;line-height:1.5;margin:0;padding:var(--space-3);background:var(--color-bg);
  border-left:2px solid var(--color-accent);color:var(--color-text);overflow-wrap:anywhere;
}
.preview-wrap{border-top:1px solid var(--color-divider);padding-top:var(--space-4);margin-bottom:var(--space-4)}

/* — currency symbol spacer: the ₱ glyph's crossbar visually merges into a
   following digit under negative letter-spacing/bold weight; this restores
   a hair of breathing room without loosening the surrounding tracking — */
.cur{margin-right:2px;letter-spacing:normal;display:inline-block}

/* — price ledger — */
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:2px solid var(--color-divider);border-bottom:2px solid var(--color-divider)}
.ledger>div{padding:var(--space-6) var(--space-4) var(--space-6) 0}
.ledger>div+div{border-left:1px solid var(--color-divider);padding-left:var(--space-4)}
.ledger .lbl{display:flex;align-items:center;gap:7px;margin-bottom:var(--space-2);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--color-neutral-700)}
.ledger .amt{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,3.4vw,42px);letter-spacing:-.03em;line-height:1}

/* — hero — */
.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:clamp(32px,5vw,72px);align-items:start}
.hero-grid h1{font-size:clamp(40px,6.6vw,78px);line-height:.94;letter-spacing:-.03em;margin:0 0 var(--space-6);max-width:14ch}
.hero-grid>div:first-child>p{font-size:clamp(16px,1.5vw,19px);line-height:1.5;max-width:44ch;margin:0 0 var(--space-8);color:var(--color-neutral-800)}

/* — page hero (inner pages) — */
.h1-page{font-size:clamp(34px,5.4vw,64px);line-height:.96;letter-spacing:-.03em;margin-bottom:var(--space-6)}
/* .kicker is a decorative label, not a heading — self-contained so it can be
   applied to a <p> and never disturb the h1→h2→h3 outline screen readers rely on */
.kicker{
  font-family:var(--font-heading);font-weight:800;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.12;
  color:var(--color-accent-700);margin:0 0 var(--space-4);display:block;
}
.footer-label{
  font-family:var(--font-heading);font-weight:800;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.12;
  color:var(--color-neutral-700);margin:0 0 var(--space-3);display:block;
}

/* — numbered steps (home) — */
.steps-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0}
.steps-3>div{border-top:2px solid var(--color-text);padding:var(--space-6) var(--space-6) var(--space-6) 0}
.steps-3 .num{font-family:var(--font-heading);font-weight:800;font-size:44px;line-height:1;color:var(--color-accent);letter-spacing:-.03em;margin-bottom:var(--space-4)}
.steps-3 h2{font-size:20px;margin-bottom:var(--space-2)}
.steps-3 p{font-size:14px;color:var(--color-neutral-800);margin:0}

/* — ruled step list (how-it-works) — */
.step-rows{border-top:2px solid var(--color-text)}
.step-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0;border-bottom:1px solid var(--color-divider);padding:var(--space-6) 0}
.step-row:last-child{border-bottom:2px solid var(--color-text)}
.step-row .step-label{font-family:var(--font-heading);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent-700)}
.step-row .step-body{max-width:52ch}
.step-row .step-body h2{font-size:19px;margin-bottom:var(--space-2)}
.step-row .step-body p{font-size:14px;color:var(--color-neutral-800);margin:0}

/* — cards — */
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-md);background:var(--color-surface)}
.card-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700)}
.card-title{font-family:var(--font-heading);font-weight:800;font-size:17px;line-height:1.2}
.card-body{margin:0;font-size:13px;opacity:.8;flex:1;color:var(--color-text)}
.cards-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:var(--space-6)}

/* — table — */
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;text-transform:none;letter-spacing:0;font-size:14px;font-family:var(--font-body);font-weight:400;color:var(--color-text);padding:0;border-bottom:1px solid var(--color-divider)}
.table td{text-align:right;font-family:var(--font-heading);font-weight:800;padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider)}
.table th{padding:var(--space-3) 0}
.table tr:last-child th,.table tr:last-child td{border-bottom:none}
.table-boxed{border:2px solid var(--color-text);padding:clamp(20px,2.4vw,28px)}
.accent-val{color:var(--color-accent-700)}

/* — proof / reviews block — */
.proof-stat{display:flex;align-items:baseline;gap:var(--space-3);margin-bottom:var(--space-2)}
.proof-stat .big{font-family:var(--font-heading);font-weight:800;font-size:clamp(32px,3.6vw,44px);letter-spacing:-.03em;color:var(--color-accent-700);line-height:1}
.review-quote{border-left:2px solid var(--color-accent);padding:var(--space-3) var(--space-4);background:var(--color-surface);margin-top:var(--space-4)}
.review-quote p{font-size:14px;font-style:italic;margin:0 0 var(--space-2);color:var(--color-text)}
.review-quote .who{font-size:12px;color:var(--color-neutral-700);font-style:normal}

/* — before-you-pay Q&A rows — */
.el-row{transition:background-color 160ms ease}
.el-row:hover{background:var(--color-neutral-100)}
.qa-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--space-4);padding:var(--space-6) 0;border-bottom:1px solid var(--color-divider)}
.qa-row:last-child{border-bottom:2px solid var(--color-text)}
.qa-row h2,.qa-row h3{font-size:19px;margin:0;max-width:26ch}
.qa-row p{font-size:14px;color:var(--color-neutral-800);margin:0;max-width:56ch}

/* — commitment block — */
.commitment{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(24px,3vw,48px);
  align-items:start;margin-top:clamp(32px,4vw,56px);border:2px solid var(--color-text);padding:clamp(24px,3vw,40px);
}
.commitment .head{display:flex;align-items:center;gap:9px;margin-bottom:var(--space-3)}
.commitment .head .kicker{margin:0}
.commitment .promise{font-family:var(--font-heading);font-weight:800;font-size:clamp(20px,2.2vw,28px);line-height:1.12;letter-spacing:-.02em;margin:0;max-width:24ch}
.commitment .mech{font-size:14px;color:var(--color-neutral-800);margin:0 0 var(--space-4)}
.commitment .hr{height:1px;background:var(--color-divider);margin-bottom:var(--space-4);border:0}
.commitment .fine{font-size:13px;color:var(--color-neutral-700);margin:0}

/* — poster CTA band — */
.poster{background:var(--color-accent);color:var(--color-bg)}
.poster p{font-family:var(--font-heading);font-weight:800;font-size:clamp(30px,4.6vw,60px);line-height:1;letter-spacing:-.03em;margin:0 0 var(--space-8);max-width:24ch}
.poster .btn{min-height:48px;font-size:15px;padding:0 var(--space-6)}

/* — genre grid — */
.genre-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border-top:2px solid var(--color-text)}
.genre-grid>div{padding:var(--space-6) var(--space-6) var(--space-6) 0;border-bottom:1px solid var(--color-divider)}
.genre-grid h2{font-size:17px;margin-bottom:var(--space-2)}
.genre-grid p{font-size:13px;color:var(--color-neutral-700);margin:0}

/* — checklist — */
.checklist{display:flex;flex-direction:column;gap:var(--space-3)}
.checklist .item{display:flex;gap:10px;align-items:flex-start}
.checklist svg{flex-shrink:0;margin-top:3px}
.checklist p{font-size:14px;color:var(--color-neutral-800);margin:0}

/* — footer — */
footer.site{border-top:2px solid var(--color-text)}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--space-8)}
footer.site .brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-3)}
footer.site .brand .mark{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--color-accent-700);color:var(--color-bg);font-family:var(--font-heading);font-weight:800;font-size:11px;flex-shrink:0}
footer.site .brand .name{font-family:var(--font-heading);font-weight:800;font-size:16px}
footer.site p{font-size:13px;color:var(--color-neutral-700);margin:0;max-width:34ch}
footer.site .links{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
footer.site .links a{font-size:13px;color:var(--color-text);text-decoration:none}
footer.site .pricing{display:flex;flex-direction:column;gap:var(--space-2);font-size:13px}
footer.site .hr{height:2px;border:0;margin:clamp(28px,3vw,40px) 0 var(--space-4);background:var(--color-divider)}
footer.site .bottom{font-size:12px;color:var(--color-neutral-700)}

/* — utility — */
.center{text-align:center}
.eyebrow-link{color:var(--color-accent-700);font-weight:600}

@media(max-width:600px){
  .nav{padding:var(--space-3) 20px}
  .wrap{padding:0 20px}
}