/* ai:ing's reading pages (how it works, pricing, features, comparisons, FAQ, about), on top of site.css: the same
   nine tokens, Albert Sans, the colon before a section's name, rules instead of boxes. No script, no images that
   carry words. Written by site/pages/build.mjs; edit the content there, not in the generated HTML. */

/* top: the wordmark, then a short row of pages that wraps on a phone instead of scrolling */
.site-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:24px;padding-bottom:20px}
.site-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;font-size:.9375rem}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:none}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink)}
.site-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--wash-edge);text-decoration-thickness:2px;text-underline-offset:6px}
.site-nav .lang{padding-left:20px;border-left:1px solid var(--rule)}
@media (max-width:620px){.site-nav{gap:0 16px}.site-nav .lang{padding-left:16px}}

/* where the page sits */
.crumbs{font-size:.875rem;color:var(--muted)}
.doc .crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:2px 0;padding:0;margin:0}
.doc .crumbs li{margin:0}
.crumbs li + li::before{content:"/";margin:0 8px;color:var(--rule-strong)}
.crumbs a{color:inherit;text-decoration-color:var(--rule)}
.crumbs a:hover{color:var(--ink)}

/* the page */
.doc{padding-top:clamp(20px,4vw,40px);padding-bottom:clamp(56px,8vw,96px)}
.doc-head{max-width:52rem;margin-top:clamp(20px,3vw,32px)}
.doc h1{font-size:clamp(2.25rem,5.6vw,4rem);line-height:1.05;letter-spacing:-.03em}
.doc .lede{max-width:44rem}
.doc .stamp{margin-top:14px;font-size:.875rem;color:var(--muted)}
.doc-body{max-width:46rem}
.doc-body > section{margin-top:clamp(48px,7vw,80px)}
.doc-body > section:first-child{margin-top:clamp(40px,6vw,64px)}
.doc h2{font-size:clamp(1.5rem,2.8vw,2rem);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.15}
.doc h3{font-size:1.125rem;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin-top:28px}
.doc p,.doc ul,.doc ol,.doc dl,.doc table,.doc .tw{margin-top:14px}
.doc h2 + p{margin-top:16px}
.doc ul,.doc ol{padding-left:1.15em}
.doc li + li{margin-top:8px}
.doc li::marker{color:var(--rule-strong)}
.doc strong{font-weight:500}
.doc .muted{color:var(--muted)}
.doc .small{font-size:.9375rem}

/* the short answer, first: one ruled block with the wash's edge */
.answer{margin-top:28px;padding:18px 0 18px 20px;border-left:2px solid var(--wash-edge);max-width:44rem}
.answer p{margin-top:0}
.answer p + p{margin-top:10px}

/* numbered steps, the landing page's "never" list in reading size */
.steps{list-style:none;padding-left:0!important;counter-reset:st;margin-top:22px!important}
.steps > li{position:relative;padding:18px 0 18px 3rem;border-top:1px solid var(--rule);counter-increment:st;margin-top:0!important}
.steps > li:last-child{border-bottom:1px solid var(--rule)}
.steps > li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:22px;font:500 .875rem/1 var(--figures);color:var(--wash-edge)}
.steps > li > b:first-child{display:block;font-size:1.1875rem;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin-bottom:4px}
.steps > li p{margin-top:6px;color:var(--muted)}
.steps.plain > li::before{content:none}
.steps.plain > li{padding-left:0}

/* what works today, what waits: words first, a dot for the eye */
.state{display:inline-flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:500;line-height:1.3;color:var(--muted);white-space:nowrap}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.state.on{color:var(--confirm)}
.state.wait{color:var(--caution)}
.state.later{color:var(--muted)}
.caps{list-style:none;padding-left:0!important;margin-top:22px!important}
.caps > li{padding:20px 0;border-top:1px solid var(--rule);margin-top:0!important}
.caps > li:last-child{border-bottom:1px solid var(--rule)}
.caps h3{margin-top:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.caps p{margin-top:8px}
.caps p.more{font-size:.9375rem}

/* the price, as a figure */
.price{display:grid;gap:0;margin-top:28px!important;border-top:1px solid var(--rule-strong)}
.price > div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.price dt{font-weight:500}
.price dd{color:var(--muted)}
.price .fig{font:500 clamp(1.75rem,4vw,2.5rem)/1.1 var(--figures);letter-spacing:-.02em;color:var(--ink);display:block;margin-bottom:4px}
@media (min-width:760px){.price > div{grid-template-columns:15rem minmax(0,1fr)}}

/* tables: three columns at most, words that wrap, never wider than the phone */
.tw{width:100%}
table.cmp{width:100%;border-collapse:collapse;font-size:.9375rem;line-height:1.5;table-layout:fixed}
table.cmp caption{text-align:left;font-size:.875rem;color:var(--muted);padding-bottom:10px}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:12px 12px 12px 0;border-top:1px solid var(--rule);overflow-wrap:anywhere}
table.cmp thead th{border-top:0;border-bottom:1px solid var(--rule-strong);font-weight:500;padding-top:0}
table.cmp tbody th{font-weight:500;width:28%}
table.cmp td{color:var(--muted)}
table.cmp td.us{color:var(--ink)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:1px solid var(--rule)}
@media (max-width:620px){
  table.cmp,table.cmp caption,table.cmp tbody,table.cmp tr,table.cmp th,table.cmp td{display:block;width:auto}
  table.cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.cmp tr{border-top:1px solid var(--rule);padding:12px 0}
  table.cmp tbody th{width:auto;border:0;padding:0 0 6px}
  table.cmp td{border:0;padding:4px 0 4px 0}
  table.cmp td::before{content:attr(data-h) ": ";font-weight:500;color:var(--ink)}
  table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
  table.cmp tbody tr:last-child{border-bottom:1px solid var(--rule)}
}

/* questions and answers */
.qa h3{margin-top:32px}
.qa h3 + p{margin-top:8px}

/* a sample, labelled as one */
.sample{margin-top:20px;padding:16px 20px;background:var(--wash-soft);border-left:2px solid var(--wash-edge)}
.sample .tag{display:block;font-size:.8125rem;font-weight:500;color:var(--muted);margin-bottom:4px}
.sample p{margin-top:6px}
@media (prefers-color-scheme:dark){.sample{background:var(--paper-sunk)}}

/* sources, dated */
.sources{font-size:.875rem;color:var(--muted)}
.sources li{overflow-wrap:anywhere}

/* related pages */
.related{list-style:none;padding-left:0!important;display:grid;gap:0;margin-top:18px!important;border-top:1px solid var(--rule)}
.related li{margin-top:0!important;border-bottom:1px solid var(--rule)}
.related a{display:flex;flex-direction:column;gap:2px;padding:14px 0;text-decoration:none}
.related a b{font-weight:500}
.related a span{font-size:.9375rem;color:var(--muted)}
.related a:hover b{text-decoration:underline;text-decoration-color:var(--ink);text-underline-offset:3px}
@media (min-width:760px){.related{grid-template-columns:1fr 1fr;column-gap:32px;border-top:0}.related li:nth-child(-n+2){border-top:1px solid var(--rule)}}

/* the closing band on these pages: the landing page's, shorter */
.doc-end{padding:clamp(48px,7vw,88px) 0}
.doc-end h2.big{max-width:22ch}
.doc-end .soon{margin-top:24px}

/* footer with the pages, wrapping on a phone */
.foot.site-foot{align-items:flex-start}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 20px;max-width:46rem}
.site-foot nav a{display:inline-flex;align-items:center;min-height:32px}

/* German words are long: on a phone, running text may break them at syllables; headings never do */
@media (max-width:620px){html[lang="de"] .doc :is(p,li,td,dd){hyphens:auto;-webkit-hyphens:auto}}