/* Peakscor guides and tools (/sat-score-calculator, /sat-test-dates, /how-sat-is-scored). Stream H, opt3.
   Standalone pages: the app's design tokens (same values as :root in index.html), designed at 390px first. */
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/fraunces-latin-opsz-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:'Hanken Grotesk';font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/fonts/hanken-grotesk-latin-wght-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}
:root{
  --paper:#EAEAE3;--paper-2:#F3F2EC;--surface:#FFFFFF;
  --ink:#20211C;--ink-soft:#4E4F46;--line:#D8D7CB;
  --accent:#2748D6;--accent-deep:#1B34A6;--on-accent:#FFFFFF;
  --good:#28724E;--good-bg:#E4F0E9;--medium:#A9701A;--medium-bg:#F5ECD7;
  --shadow:0 1px 2px rgba(32,33,28,.05),0 10px 30px rgba(32,33,28,.05);
  --display:'Fraunces',Georgia,serif;--ui:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:14px;--gutter:16px;--measure:720px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--ui)}
a{color:var(--accent-deep);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.sx-skip{position:absolute;left:-9999px;top:8px;background:var(--surface);padding:10px 14px;border-radius:8px;z-index:10}
.sx-skip:focus{left:var(--gutter)}
/* top bar */
.sx-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px var(--gutter);background:var(--surface);border-bottom:1px solid var(--line)}
.sx-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink);text-decoration:none;font:600 20px/1 var(--display);letter-spacing:-.01em}
.sx-brand svg{width:30px;height:30px;flex:none}
.sx-nav{display:flex;gap:2px}
.sx-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.sx-nav a:hover{background:var(--paper-2)}
/* page */
.sx-main{max-width:var(--measure);margin:0 auto;padding:16px var(--gutter) 40px}
.sx-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;padding:0;font-size:15px;color:var(--ink-soft)}
.sx-crumbs li+li::before{content:'/';margin-right:4px;color:var(--ink-soft)}
.sx-crumbs a{color:var(--ink-soft);display:inline-block;padding:10px 0}
h1{font:500 32px/1.12 var(--display);letter-spacing:-.02em;margin:4px 0 12px}
h2{font:500 24px/1.2 var(--display);letter-spacing:-.01em;margin:36px 0 10px}
h3{font-size:17px;line-height:1.35;margin:22px 0 6px}
p,li{font-size:16px}
.sx-lede{font-size:18px;line-height:1.5;color:var(--ink-soft);margin:0 0 20px}
.sx-meta{font-size:15px;color:var(--ink-soft);margin:0 0 16px}
.sx-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin:16px 0}
.sx-note{background:var(--paper-2);border-left:4px solid var(--accent);border-radius:8px;padding:12px 14px;margin:16px 0;font-size:15px}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:16px;text-decoration:none;border:0}
.sx-btn:hover{background:var(--accent-deep)}
.sx-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sx-cta h2{margin:0}
.sx-card>h2:first-child{margin-top:0}
.sx-cta p{margin:0}
/* estimator */
.sx-form fieldset{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:14px 14px 6px;margin:0 0 14px;min-width:0}
.sx-form legend{font:600 19px/1.2 var(--display);padding:0 6px}
.sx-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.sx-row label,.sx-row .sx-lab{font-weight:600;font-size:16px}
.sx-row small{display:block;font-weight:400;color:var(--ink-soft);font-size:15px}
.sx-step{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.sx-step button{width:44px;height:44px;border:0;background:transparent;color:var(--ink);font:600 22px/1 var(--ui);cursor:pointer;border-radius:12px}
.sx-step button:hover{background:var(--line)}
.sx-step input{width:52px;height:44px;border:0;background:var(--surface);color:var(--ink);text-align:center;font:600 18px/1 var(--ui);-moz-appearance:textfield}
.sx-step input::-webkit-outer-spin-button,.sx-step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sx-seg{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0}
.sx-seg label{position:relative;display:inline-flex}
.sx-seg input{position:absolute;opacity:0;width:1px;height:1px}
.sx-seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);font-weight:600;font-size:15px;cursor:pointer}
.sx-seg input:checked+span{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.sx-seg input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.sx-route{display:block;width:100%}
.sx-route .sx-lab{display:block;margin-bottom:6px}
.sx-result{background:var(--ink);color:var(--surface);border-radius:var(--radius);padding:18px 16px;margin:4px 0 16px}
.sx-result .sx-k{font-size:15px;opacity:.9;margin:0}
.sx-total{font:500 44px/1.05 var(--display);letter-spacing:-.02em;margin:4px 0 2px}
.sx-range{font-size:17px;margin:0 0 12px}
.sx-secs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0;list-style:none}
.sx-secs li{border-top:1px solid rgba(243,242,236,.25);padding-top:10px;font-size:15px}
.sx-secs b{display:block;font:500 26px/1.1 var(--display)}
.sx-warn{background:var(--medium-bg);color:var(--ink);border-radius:8px;padding:10px 12px;font-size:15px;margin:10px 0 0}
.sx-warn[hidden]{display:none}
/* tables */
.sx-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:16px}
.sx-table caption{text-align:left;font-weight:600;padding:0 0 8px}
.sx-table th,.sx-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.sx-table thead th{background:var(--paper-2);font-size:15px}
.sx-table tr.is-next td{background:var(--good-bg)}
.sx-table tr.is-past td{color:var(--ink-soft)}
.sx-tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:15px;font-weight:600;background:var(--good);color:var(--surface)}
.sx-tag.past{background:var(--line);color:var(--ink)}
@media (max-width:599px){
  .sx-table.sx-stack thead{position:absolute;left:-9999px}
  .sx-table.sx-stack caption{display:block;width:100%;padding:12px 12px 4px}
  .sx-table.sx-stack,.sx-table.sx-stack tbody,.sx-table.sx-stack tr,.sx-table.sx-stack td{display:block;width:100%}
  .sx-table.sx-stack tr{border-bottom:1px solid var(--line);padding:6px 0}
  .sx-table.sx-stack td{border:0;padding:4px 12px}
  .sx-table.sx-stack td::before{content:attr(data-label);display:block;font-size:15px;color:var(--ink-soft);font-weight:600}
  .sx-table.sx-stack td:first-child{font-weight:700;font-size:17px}
  .sx-table.sx-stack td:first-child::before{display:none}
}
/* FAQ and lists */
.sx-faq details{border-top:1px solid var(--line);padding:2px 0}
.sx-faq details:last-child{border-bottom:1px solid var(--line)}
.sx-faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center;padding:8px 0}
.sx-faq details p{margin:0 0 12px}
.sx-steps{padding-left:22px}
.sx-steps li{margin:6px 0}
/* footer */
.sx-foot{border-top:1px solid var(--line);background:var(--surface);padding:20px var(--gutter) 32px}
.sx-foot-in{max-width:var(--measure);margin:0 auto}
.sx-foot nav{display:flex;flex-wrap:wrap;gap:0 16px}
.sx-foot nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.sx-foot p{font-size:15px;color:var(--ink-soft);margin:8px 0 0}
@media (min-width:720px){
  h1{font-size:44px}
  .sx-main{padding-top:24px}
  .sx-route{width:auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}