/* Automated Publishers site v2: direction C "Marked-up proof" (RULINGS 2026-10-04). Palette E "Electric Cobalt" (RULINGS 2026-10-18), light. */
:root{--g:#EEF2FF;--g2:#FFFFFF;--g3:#E3E9FB;--line:#CDD6F2;--ink:#10204A;--ink2:#2A3760;--gray:#47557A;
--acc:#2F5BFF;--acc-ink:#1E44D8;--acc-soft:#DCE5FF;--mark:#FF7A45;--mark-soft:rgba(255,122,69,.38);--paper:#FFFDF8;
--sans:"Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace;--serif:"Literata",Georgia,serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}
html,body{margin:0;background:var(--g);color:var(--ink2);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,5vw,56px)}
.eyebrow{font:500 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gray);margin:0}
h1,h2,h3{color:var(--ink);letter-spacing:-.03em;margin:0}
h2{font:900 clamp(32px,4.4vw,52px)/1.02 var(--sans);margin:14px 0 18px;text-wrap:balance}
h3{font:900 22px/1.2 var(--sans);letter-spacing:-.015em}
.lede{font-size:19px;max-width:38em}
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 22px;border-radius:10px;background:var(--acc);color:#FFFFFF;font:900 16px var(--sans);text-decoration:none;border:0;cursor:pointer}
.btn:hover{box-shadow:0 0 32px 0 rgba(47,91,255,.30)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:#9AA8D6;box-shadow:none}
section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--line)}
section.first{border-top:0}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(238,242,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.nav img{height:40px;width:auto;display:block}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--ink2);font-weight:500;font-size:15px}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--ink)}
.nav ul a[aria-current]{box-shadow:inset 0 -2px 0 var(--acc)}
.nav .btn{height:42px;font-size:15px}
.menu{display:none}

/* hero */
.hero{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(36px,6vw,80px);align-items:center;padding:clamp(48px,7vw,88px) 0 clamp(56px,7vw,96px)}
.hero h1{font:900 clamp(42px,5.6vw,70px)/1 var(--sans);letter-spacing:-.04em;margin:18px 0 20px}
.hero h1 u{text-decoration:none;background:linear-gradient(transparent 80%,var(--mark) 80%,var(--mark) 93%,transparent 93%)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.sheet{position:relative;transform:rotate(-2deg);margin:20px 40px 30px}
.page{background:var(--paper);color:#2a2620;border-radius:4px;padding:52px 56px 60px;font:400 17px/1.8 var(--serif);box-shadow:0 40px 90px -30px rgba(16,32,74,.30)}
.page .ch{font:400 12px var(--serif);letter-spacing:.28em;text-transform:uppercase;text-align:center;margin:0 0 6px;color:#6b6356}
.page .tt{font:400 30px var(--serif);text-align:center;margin:0 0 24px;color:#2a2620;letter-spacing:0}
.page p{margin:0 0 14px}
.hl{background:var(--mark-soft);padding:0 3px;border-radius:2px}
.note{position:absolute;background:var(--mark);color:#10204A;font:700 12.5px/1.4 var(--mono);padding:9px 12px;border-radius:7px;max-width:215px;transform:rotate(2deg);box-shadow:0 12px 26px -10px rgba(16,32,74,.35)}
.note b{display:block;font-size:10.5px;letter-spacing:.08em;opacity:.7}
.n1{right:-44px;top:-44px}.n2{left:-70px;bottom:-26px}.n3{right:-38px;bottom:-32px}
@media (prefers-reduced-motion:no-preference){.note{animation:pin .5s cubic-bezier(.2,.9,.3,1.3) both}.n1{animation-delay:.5s}.n2{animation-delay:.8s}.n3{animation-delay:1.1s}
@keyframes pin{from{opacity:0;transform:rotate(2deg) translateY(-10px) scale(.92)}to{opacity:1;transform:rotate(2deg)}}}

/* stats */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip>div{padding:26px 24px;border-right:1px solid var(--line)}.strip>div:last-child{border-right:0}
.strip .k{font:900 32px var(--sans);color:var(--ink);letter-spacing:-.02em}.strip .l{font-size:14px;color:var(--gray);margin-top:2px}

/* five checks: a hanging-number list (the checks are a fixed, numbered set) */
.checks{list-style:none;margin:36px 0 0;padding:0;counter-reset:c}
.checks li{display:grid;grid-template-columns:80px 1fr 1.1fr;gap:28px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline}
.checks li::before{counter-increment:c;content:counter(c,decimal-leading-zero);font:700 15px var(--mono);color:var(--acc-ink)}
.checks .why{color:var(--gray);font-size:15.5px}
.checks .why b{color:var(--ink2);font-weight:600}

/* signup */
.get{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.card{background:var(--g2);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px)}
.signup{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.field input{height:52px;padding:0 14px;border-radius:10px;background:#FFFFFF;border:1px solid var(--line);color:var(--ink);font:500 17px var(--sans)}
.field input[aria-invalid="true"]{border-color:#C8102E}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ts:empty{display:none}.ts{grid-column:1/-1}
.signup button{grid-column:1/-1;height:56px;font-size:18px}
.signup button[disabled]{opacity:.6;cursor:progress}
.msg{grid-column:1/-1;margin:2px 0 0;min-height:1.4em;font-weight:500;color:var(--ink)}
.msg.ok{border-left:3px solid var(--acc);padding-left:12px}.msg.err{color:#B3122B}
.fine{grid-column:1/-1;margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--gray)}
.needs{font:400 13px/1.5 var(--mono);color:var(--gray);margin:16px 0 0}

/* ladder */
.rungs{margin-top:40px}
.rung{display:grid;grid-template-columns:190px 1fr 200px;gap:36px;align-items:center;padding:30px 0;border-top:1px solid var(--line);position:relative}
.rung .price{font:900 50px/1 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.rung .price small{font:500 13px var(--mono);color:var(--gray);display:block;letter-spacing:0;margin-top:8px}
.rung p{margin:6px 0 0;color:var(--ink2)}
.rung .st{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-align:right;color:var(--gray)}
.rung.on{padding-left:20px;background:linear-gradient(90deg,var(--acc-soft),transparent 70%);border-top-color:var(--acc-ink)}
.rung.on .price,.rung.on .st{color:var(--acc-ink)}
.you{position:absolute;left:0;top:-12px;font:700 11px var(--mono);letter-spacing:.06em;color:#FFFFFF;background:var(--acc);padding:4px 9px;border-radius:5px}

/* rulebook (about) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.rules{list-style:none;margin:0;padding:0;background:var(--paper);color:#2a2620;border-radius:4px;padding:30px 34px;font:400 16px/1.6 var(--serif);transform:rotate(1deg);box-shadow:0 30px 70px -30px rgba(16,32,74,.28)}
.rules li{padding:12px 0;border-bottom:1px dashed #cfc6b3;display:grid;grid-template-columns:62px 1fr;gap:10px}
.rules li:last-child{border-bottom:0}
.rules .rn{font:700 12px var(--mono);color:#6b6356;padding-top:3px}
.rules .rh{font:400 13px var(--serif);letter-spacing:.24em;text-transform:uppercase;color:#6b6356;margin:0 0 6px;border:0;display:block}

/* videos */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:30px}
.vid{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--g2)}
.vid .when{font:700 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.vid.next{border-color:var(--acc-ink);background:linear-gradient(180deg,var(--acc-soft),var(--g2) 70%)}
.vid.next .when{color:var(--acc-ink)}
.vid h3{font-size:19px;margin-top:10px}
.vid p{font-size:15px;color:var(--gray);margin:8px 0 0}

/* faq */
.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:700 19px/1.35 var(--sans);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:18px;font:400 28px var(--mono);color:var(--acc-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0 0 22px;max-width:46em}

/* closing */
.close{text-align:center}
.close h2{margin:14px auto 22px;max-width:16ch}
.foot{border-top:1px solid var(--line);padding:40px 0 48px;font-size:14px;color:var(--gray)}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.foot img{height:36px;display:block;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:0 0 8px}.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .h{font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;color:var(--gray)}
.small{font-size:12px}
.pagehead{padding:clamp(48px,7vw,90px) 0 clamp(34px,5vw,60px)}
.pagehead h1{font:900 clamp(40px,5.4vw,66px)/1 var(--sans);letter-spacing:-.04em;margin:16px 0 18px;max-width:18ch}
.soon{display:inline-block;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gray);border:1px solid var(--line);border-radius:5px;padding:3px 8px}
.tool{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,60px);padding:34px 0;border-top:1px solid var(--line)}

@media (max-width:900px){
 .nav ul{display:none}.nav .btn{display:none}.menu{display:block}
 .menu summary{list-style:none;cursor:pointer;font:700 14px var(--mono);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 12px}
 .menu summary::-webkit-details-marker{display:none}
 .menu[open] ul{display:flex;flex-direction:column;position:absolute;right:16px;top:70px;background:var(--g2);border:1px solid var(--line);border-radius:12px;padding:16px 20px;gap:14px}
 .hero,.get,.split,.tool{grid-template-columns:1fr}
 .sheet{margin:46px 18px 40px}.n1{right:-10px;top:-52px}.n2{left:-10px}.n3{right:-6px}
 .page{padding:34px 26px 42px;font-size:15.5px}
 .strip{grid-template-columns:1fr 1fr}.strip>div:nth-child(2){border-right:0}.strip>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .checks li{grid-template-columns:52px 1fr;gap:10px 16px}.checks .why{grid-column:2}
 .signup{grid-template-columns:1fr}
 .rung{grid-template-columns:1fr;gap:10px;padding-top:34px}.rung .st{text-align:left}
 .foot .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){.n3{bottom:-92px;right:-4px}.sheet{margin-bottom:104px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Scroll reveal (RULINGS 2026-10-05 "motion"; animate skill recipe). Marketing pages only, fires once.
   Hidden state applies only when JS has run (html.js), so content is never lost without scripts. */
:root{--ease-out:cubic-bezier(0.23,1,0.32,1)}
html.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out);transition-delay:var(--d,0ms)}
html.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js [data-reveal]{transform:none;transition:opacity 300ms ease}
}