/* Journal theme. Loaded after each page's own styles and overrides them. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Tokens. The id selector outranks every light and dark block in the pages, so the paper look holds in dark mode too. */
html:root:not(#_j){
  --bg:#f5f2ea; --surface:#fbf9f4; --fg:#1a1916; --muted:#655f55; --line:#d5cdbd;
  --accent:#1a1916; --accent-fg:#f5f2ea; --red:#9b2216;
  --ok:#2c6a3d; --mild:#866400; --warn:#a4500e; --bad:#9b2216;
  --f-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --f-display:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
body{font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:3px}
::selection{background:#e9dcc0}

/* Square everything. */
.btn,.tabs,.tabs button,.panel,.card,.chip,.pill,.seg,.demo,.feature,.price,.faq details,.who li,.tablewrap,.formula,
.gloss>div,.notice,.qstem,.acq-feedback,.cta-box,.ap-grid img,.demo-dots button,.wv,.screen,form,input,button,select,textarea{border-radius:0!important}

/* Masthead: wordmark in serif, heavy rule under the nav. */
.nav,.gnav,.top{border-bottom:2px solid var(--fg)!important}
.logo,.glogo{font:500 1.4rem/1.1 var(--f-serif)!important;letter-spacing:-.01em;color:var(--fg)}
.logo span,.glogo span,.top h1 span{color:inherit!important}
.top h1{font:500 2rem/1.05 var(--f-serif)!important;letter-spacing:-.015em}

/* Headlines in serif, sentence case. */
.hero h1,.ghero h1{font:500 clamp(2.4rem,6vw,4rem)/1.03 var(--f-serif)!important;letter-spacing:-.025em}
.hero h1 span,.ghero h1 span{color:inherit!important;font-style:italic}
.hero p,.ghero p{font:400 italic clamp(1.15rem,2.2vw,1.35rem)/1.45 var(--f-serif)!important;color:#3a3731!important}
h2,#criteria h2{font:500 clamp(1.6rem,3.4vw,2rem)/1.12 var(--f-serif)!important;letter-spacing:-.015em;text-transform:none!important}
.qhead h3{font:500 1.45rem/1.15 var(--f-serif)!important}
.amount,.grade-num{font-family:var(--f-serif)!important;font-weight:500!important;letter-spacing:-.02em}
.faq summary{font:500 1.15rem/1.3 var(--f-serif)!important}

/* Small labels: tracked caps, journal red for eyebrows. */
.eyebrow,.demo-top .lbl,.panel h2,.feature h3,#criteria h3,th,.trace-lbl,caption{
  font-family:var(--f-display)!important;font-weight:600!important;font-size:.74rem!important;letter-spacing:.13em!important;text-transform:uppercase!important}
.eyebrow{color:var(--red)!important}
#criteria h4{color:var(--fg)!important;font-family:var(--f-serif)!important;font-weight:600!important;font-size:1.08rem!important}

/* Buttons: ink block, quiet secondary. */
.btn{font:500 .95rem/1 var(--f-display)!important;letter-spacing:.01em!important;padding:13px 18px!important;background:transparent;border:1px solid var(--fg)}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.primary{background:var(--fg)!important;color:var(--bg)!important;border-color:var(--fg)!important}
.btn.primary:hover{background:#000!important}
.tabs{background:transparent!important;border:0!important;padding:0!important;gap:0!important;border-bottom:1px solid var(--line)!important}
.tabs button{border-bottom:2px solid transparent!important;padding:9px 14px!important;letter-spacing:.1em!important;font-size:.8rem!important}
.tabs button[aria-selected="true"]{background:transparent!important;color:var(--fg)!important;border-bottom-color:var(--fg)!important}
.seg{border-color:var(--fg)!important}
.seg label{border-left-color:var(--fg)!important}
.demo-dots button{border-color:var(--fg)!important;background:transparent!important;color:var(--fg)!important}
.demo-dots button[aria-pressed="true"]{background:var(--fg)!important;color:var(--bg)!important}

/* Cards become ruled sections. */
.feature,.card,.panel,.faq details,.gloss>div{background:transparent!important;border:0!important;border-top:1px solid var(--fg)!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
.features{gap:28px!important}
.feature h3{padding-top:4px}
.panel .screen,.demo .screen{border-radius:0!important}

/* Live example and screenshots read as numbered figures. */
.demo{background:transparent!important;border:0!important;border-top:2px solid var(--fg)!important;padding:14px 0 0!important}
.demo-grade{font:500 1.35rem/1.2 var(--f-serif)!important}
.demo-note,.ap-note{font-size:.93rem!important;color:#3a3731!important;line-height:1.55}
.demo-note::before{content:"Figure 1. ";font-weight:600;color:var(--fg)}
.ap-note::before{content:"Figure 2. ";font-weight:600;color:var(--fg)}
.ap-grid img{border:0!important;background:#000}
.chip{border-radius:0!important;padding:1px 6px!important;font-family:var(--f-mono)!important;letter-spacing:.04em!important}

/* Price block between two heavy rules. */
.price,.cta-box{background:transparent!important;border:0!important;border-top:2px solid var(--fg)!important;border-bottom:2px solid var(--fg)!important;padding:22px 0!important}

/* Audience list as a running line, not pills. */
.who{gap:0!important}
.who li{border:0!important;background:transparent!important;padding:0!important}
.who li+li::before{content:"\00B7";margin:0 10px;color:var(--muted)}

/* Tables in journal style. */
.tablewrap{border:0!important;background:transparent!important}
table{font-size:.95rem}
thead th,table tr:first-child th{border-top:2px solid var(--fg)!important;border-bottom:1px solid var(--fg)!important;color:var(--fg)!important}
th,td{border-bottom-color:var(--line)!important;padding-left:0!important}
tbody tr:last-child td,table tr:last-child td{border-bottom:2px solid var(--fg)!important}
.formula{background:transparent!important;border:0!important;border-left:2px solid var(--fg)!important;padding:4px 0 4px 14px!important}
.wv{background:transparent!important;border-color:var(--fg)!important}
.qstem{background:transparent!important;border:0!important;border-left:2px solid var(--fg)!important;padding:4px 0 4px 14px!important;font:400 italic 1.08rem/1.5 var(--f-serif)!important}
.qstem b{font-family:var(--f-display)!important;font-style:normal;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;margin-right:6px}
.notice,.acq-feedback{background:transparent!important}
.pill{font-family:var(--f-display)!important}
.fb-row .pill.tp{color:var(--fg)!important;border-color:var(--fg)!important}
sup a{color:var(--red)!important;font-family:var(--f-display)!important;font-weight:600}

/* Footnotes and footer. */
footer{border-top:2px solid var(--fg)!important;font-size:.85rem!important}
ol li,.refs li{font-size:.92rem}
input{background:#fffdf8!important;border-color:var(--fg)!important}
input:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--red)!important;outline-offset:2px}

/* Every page title in serif. */
h1{font-family:var(--f-serif)!important;font-weight:500!important;letter-spacing:-.02em}
form{background:transparent!important;border:0!important;border-top:1px solid var(--fg)!important;padding:16px 0 0!important}
label{font-family:var(--f-display)!important}

/* Phone nav: wordmark on one line, links as a single row. */
.logo,.glogo{white-space:nowrap}
@media (max-width:560px){
  .nav,.gnav{flex-wrap:wrap;row-gap:10px}
  .nav-links{gap:16px!important;flex-wrap:nowrap}
  .nav-links .btn:not(.primary){border:0!important;padding:0!important;background:none!important;color:var(--fg)!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);font-size:.9rem!important}
  .nav-links .btn.primary{padding:9px 12px!important;font-size:.9rem!important}
}

/* Terms and privacy boxes, and no underlines on buttons. */
.box{background:transparent!important;border:0!important;border-left:2px solid var(--red)!important;border-radius:0!important;padding:4px 0 4px 16px!important}
.toc{background:transparent!important;border:0!important;border-top:1px solid var(--fg)!important;border-bottom:1px solid var(--fg)!important;border-radius:0!important;padding:12px 0!important}
a.btn{text-decoration:none!important}