/* Redaxa inner pages (guides, detection reference, language pages, Linux, API docs, legal, 404), after site-kit.css.
   "Redazione dal vivo": very large condensed titles on paper, thick ink rules, section headings in the margin, and the
   copy Redaxa returns shown as a sealed sheet on ink next to the raw one on white. The first section of a page is an
   ink band, the section that carries the page's buttons is a copper band. */
html{scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--body);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--cu);text-underline-offset:5px}
a:hover{text-decoration-color:var(--ink)}
strong,b,dt{color:var(--ink);font-weight:700}
h1,h2,h3{color:var(--ink);font-family:var(--display);font-weight:800;text-wrap:balance}
p,li{text-wrap:pretty}
ul,ol{margin:0 0 1em;padding:0;list-style:none}
li{position:relative;margin:.55em 0;padding-left:28px}
ul>li::before{content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;background:var(--ink)}
ol{counter-reset:n}
ol>li{counter-increment:n;padding-left:40px}
ol>li::before{content:counter(n);position:absolute;left:0;top:.05em;min-width:26px;padding:1px 4px 0;background:var(--ink);color:var(--on-ink);font:800 16px/1.45 var(--display);text-align:center}

/* Brand bar: the page keeps its one line of text, the mark comes from CSS. */
body>header{display:flex;align-items:center;gap:14px;min-height:76px;padding:0 var(--edge);border-bottom:3px solid var(--ink);color:var(--mut);font-size:15px;font-weight:600}
body>header>a{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--ink);font:800 30px/1 var(--display);letter-spacing:-.01em;text-decoration:none}
body>header>a::before{content:"";flex:none;width:36px;height:36px;background:url("/outputs/redaxa-mark.svg") center/cover}
body>header>a:hover{color:var(--cu)}

/* Page opening */
main{padding:40px var(--edge) 0}
.crumbs,.langs{margin:0;color:var(--mut);font-size:14.5px;font-weight:600}
.crumbs a,.langs a{display:inline-block;padding:4px 0}
.langs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 20px}
.langs strong{margin-left:0!important;padding:3px 9px 2px;background:var(--ink);color:var(--on-ink)}
.label{display:flex;align-items:center;gap:12px;margin:34px 0 0;color:var(--ink);font-size:16px;font-weight:650}
.label::before{content:"";flex:none;width:34px;height:13px;background:var(--ink)}
main>h1{margin:10px 0 0;max-width:13em;font-size:clamp(44px,7.4vw,104px);line-height:.9;letter-spacing:-.022em;overflow-wrap:break-word}
.lead,main>h1+p:not(.label){margin:30px 0 0;max-width:34em;color:var(--mut);font-size:22px;line-height:1.45}
main>p{max-width:44rem;margin:1em 0 0}
main>ul,main>ol{max-width:44rem;margin-top:1.2em}
main>p:has(>.button){display:flex;flex-wrap:wrap;gap:14px 20px;max-width:none;margin:34px 0 0}
main>:last-child{margin-bottom:72px}

/* Sections: heading in the margin, content in the reading column, a thick ink rule above. */
main>section{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);column-gap:56px;margin:0;padding:44px 0 34px;border-top:5px solid var(--ink)}
main>section:first-of-type{margin-top:64px}
main>section:last-child{margin-bottom:0}
main>section>*{grid-column:2;min-width:0;max-width:46rem;margin:0 0 1em}
main>section>.wide,main>section>table,main>section>.plans{max-width:none}
main>section>h2{grid-column:1;grid-row:1/span 60;align-self:start;margin:0;font-size:clamp(34px,3.7vw,50px);line-height:.92;letter-spacing:-.012em;overflow-wrap:break-word}
h3{margin:1.6em 0 .5em;font-size:27px;line-height:1.02;letter-spacing:0}
main>section>h2+h3{margin-top:0}
.note,.small{color:var(--mut);font-size:15px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.tag{display:inline-block;margin-left:8px;padding:4px 9px 3px;background:var(--cu-light);color:var(--ink);font:700 12.5px/1.2 var(--sans);letter-spacing:.06em;vertical-align:middle;transform:rotate(-3deg)}
/* The first section is the ink band; the one with the page's buttons is the copper band. Both run edge to edge. */
main>section:first-of-type{margin-inline:calc(var(--edge)*-1);padding:56px var(--edge) 44px;border:0;background:var(--ink);color:var(--on-ink);--bar:var(--on-ink);--over:var(--ink);--under:var(--cu-light);--under-fg:var(--ink);--top:var(--on-ink);--top-fg:var(--ink);--focus-ring:var(--cu-light)}
main>section:first-of-type :is(h2,h3,strong,b,dt,a){color:var(--on-ink)}
main>section:first-of-type :is(p,li,td){color:var(--on-ink)}
main>section:first-of-type :is(.note,.small){color:var(--on-ink-mut)}
main>section:first-of-type a{text-decoration-color:var(--cu-light)}
main>section:first-of-type a:hover{text-decoration-color:var(--on-ink)}
main>section:first-of-type :is(th,td){border-color:var(--on-ink-line)}
main>section:first-of-type th{color:var(--cu-light)}
main>section:first-of-type li::before{background:var(--cu-light);color:var(--ink)}
main>section:first-of-type code{background:#2c2637;color:var(--on-ink)}
main>section:first-of-type td>code:only-child{background:var(--cu-light);color:var(--ink)}
main>section:first-of-type pre{box-shadow:none}
main>section:first-of-type :focus-visible{outline-color:var(--cu-light)}
main>section:first-of-type+section{border-top:0}
main>section:has(.button):not(:has(.plans)):not(:first-of-type),main>section:has(>.cta):not(:first-of-type){margin-inline:calc(var(--edge)*-1);padding:56px var(--edge) 48px;border:0;background:var(--cu);color:#fff;--bar:#fff;--over:var(--ink);--under:#fff;--under-fg:var(--ink);--focus-ring:#fff}
main>section:has(.button):not(:has(.plans)):not(:first-of-type) :is(h2,h3,p,li,strong,a:not(.button)),main>section:has(>.cta):not(:first-of-type) :is(h2,h3,p,li,strong,a:not(.button)){color:#fff}
main>section:has(.button):not(:has(.plans)):not(:first-of-type) p,main>section:has(>.cta):not(:first-of-type) p{font-size:19px}
main>section:has(.button):not(:has(.plans)):not(:first-of-type) a:not(.button),main>section:has(>.cta):not(:first-of-type) a:not(.button){text-decoration-color:#fff}
main>section:has(.button):not(:has(.plans)):not(:first-of-type) :is(.note,.small),main>section:has(>.cta):not(:first-of-type) :is(.note,.small){font-size:15px}
main>section:has(.button):not(:has(.plans)):not(:first-of-type) :focus-visible{outline-color:#fff}
main>section:has(.button):not(:has(.plans)):not(:first-of-type)+section,main>section:has(>.cta):not(:first-of-type)+section{border-top:0}
main>section>.button{justify-self:start;margin:0 0 14px}

/* Reference tables */
.wide{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:17px;line-height:1.5;font-variant-numeric:tabular-nums}
th,td{padding:16px 20px 16px 0;border-bottom:2px solid var(--ink);color:var(--body);text-align:left;vertical-align:top}
tr>:last-child{padding-right:0}
tr:first-child>*{border-top:2px solid var(--ink)}
thead tr:first-child>*{border-top:0;border-bottom-width:5px;color:var(--ink);font:800 19px/1.1 var(--display);letter-spacing:.01em}
thead+tbody tr:first-child>*{border-top:0}
th{color:var(--ink);font-weight:700}
th[scope=row]{width:13rem}
dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px}
dd{margin:0}

/* Code. A placeholder alone in a table cell is drawn as a redaction mark. "You paste" is a white sheet; "Redaxa returns"
   is the sealed copy on ink. */
code{padding:2px 7px;background:var(--sand);color:var(--ink);font:.88em var(--mono);overflow-wrap:anywhere}
td>code:only-child{white-space:nowrap;overflow-wrap:normal;padding:4px 10px;background:var(--ink);color:var(--on-ink);font-weight:700;font-size:.95em}
pre{max-width:44rem;margin:.4em 0 1.4em;padding:24px 28px;background:var(--sheet);box-shadow:0 22px 40px -22px rgba(27,23,36,.45);color:var(--ink);font:500 17px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;transform:rotate(-.5deg)}
pre code{padding:0;background:none;font:inherit}
.k{margin:1.1em 0 .6em!important;color:var(--cu);font-size:14.5px;font-weight:700}
main>section:first-of-type .k{color:var(--cu-light)}
pre+.k{margin-left:64px!important}
pre+.k+pre{margin-left:64px;margin-bottom:2em;background:var(--ink);color:var(--on-ink);box-shadow:inset 7px 0 0 var(--cu-light),0 22px 40px -22px rgba(0,0,0,.7);transform:rotate(.5deg)}
main>section:first-of-type pre+.k+pre{background:#2c2637}

/* Buttons take their look from the kit. */
.button{white-space:normal}
button.button{font-family:var(--display)}

/* Questions */
.faq-item{padding:22px 0;border-top:2px solid var(--ink)}
.faq-item:first-of-type{padding-top:0;border-top:0}
.faq-item h3,.faq h3{margin:0 0 8px;font-size:25px;line-height:1.05}
.faq-item p{margin:0}
.faq h3:not(:first-of-type){margin-top:26px;padding-top:22px;border-top:2px solid var(--ink)}
.faq p{margin:.3em 0 0}

/* Plans on the language pages: the price is the largest thing in the card, the middle plan is on ink and lifted. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start;padding-top:18px}
.plan{padding:26px 24px 28px;border:3px solid var(--ink)!important;background:var(--sheet)}
.plan:nth-child(2){margin-top:-18px;background:var(--ink);color:var(--on-ink);box-shadow:10px 10px 0 var(--cu)}
.plan h3{margin:0;font-size:27px}
.price{margin:.35em 0 .3em;color:var(--ink);font:800 clamp(26px,2.5vw,34px)/1 var(--display);letter-spacing:-.005em;text-wrap:balance}
.plan ul{margin:1em 0 0;font-size:16px}
.plan:nth-child(2) :is(h3,.price,strong,li,p){color:var(--on-ink)}
.plan:nth-child(2) .note{color:var(--on-ink-mut)}
.plan:nth-child(2) li::before{background:var(--cu-light)}

/* Linux waitlist */
.waitlist label{display:block;margin-bottom:8px;color:var(--ink);font-weight:700}
.waitlist .row{display:flex;flex-wrap:wrap;gap:14px}
.waitlist input[type=email]{flex:1 1 260px;min-width:0;min-height:56px;padding:12px 16px;border:2px solid var(--ink);border-radius:0;background:var(--sheet);color:var(--ink);font:inherit;outline:0}
.waitlist input[type=email]::placeholder{color:var(--mut);opacity:1}
.waitlist input[type=email]:focus{border-color:var(--cu);box-shadow:6px 6px 0 var(--cu)}
.waitlist .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#waitlist-status:empty{display:none}
#waitlist-status.error{color:var(--bad);font-weight:650}
main>section:first-of-type #waitlist-status.error{color:var(--cu-light)}
main>section:first-of-type .waitlist label,main>section.waitlist:first-of-type label{color:var(--on-ink)}

/* API docs, privacy and terms: one plain column under a very large title. */
.shell{padding:28px var(--edge) 72px}
.shell>*{max-width:46rem}
.shell>table,.shell>.wide{max-width:60rem}
.shell>h1{margin:18px 0 0;max-width:13em;font-size:clamp(44px,7.4vw,104px);line-height:.9;letter-spacing:-.022em}
.back{display:inline-flex;align-items:center;min-height:44px;font:800 22px/1 var(--display);text-decoration-thickness:4px}
.shell .updated{margin:26px 0 2.2em;color:var(--mut);font-size:19px;line-height:1.45}
.shell h2{margin:2.2em 0 .5em;padding-top:22px;border-top:5px solid var(--ink);font-size:clamp(30px,3.2vw,40px);line-height:.95;letter-spacing:-.012em}
.shell h3{font-size:24px}
.shell p{margin:0 0 1em}

/* Closing band: the page ends on ink. The language pages close with notes instead of a footer. */
main>section~p.note{max-width:none;margin:0 calc(var(--edge)*-1);padding:6px var(--edge);background:var(--ink);color:var(--on-ink-mut);line-height:1.9}
main>section+p.note{padding-top:44px}
main>p.note:last-of-type{padding-bottom:60px}
main>section~p.note a{color:var(--on-ink);text-decoration-thickness:2px;text-decoration-color:var(--cu-light)}
main>section~p.note :focus-visible{outline-color:var(--cu-light)}
body>footer{padding:44px var(--edge) 60px;background:var(--ink);color:var(--on-ink-mut);font-size:15px;line-height:2.1}
body>footer a{display:inline-block;color:var(--on-ink);font-weight:600;text-decoration-thickness:2px;text-decoration-color:var(--cu-light)}
body>footer a:hover{text-decoration-color:var(--on-ink)}
body>footer p{max-width:62rem;margin:0}
body>footer p+p{margin-top:.6em}
body>footer :focus-visible{outline-color:var(--cu-light)}

@media (max-width:900px){
  main>section{grid-template-columns:1fr;padding:30px 0 22px}
  main>section>h2{grid-column:1;grid-row:auto;margin-bottom:22px}
  main>section>*{grid-column:1}
  main>section:first-of-type{padding:40px var(--edge) 30px}
  main>section:has(.button):not(:has(.plans)):not(:first-of-type),main>section:has(>.cta):not(:first-of-type){padding:40px var(--edge) 32px}
  .plans{grid-template-columns:1fr;gap:26px}
  .plan:nth-child(2){margin-top:0}
  th[scope=row]{width:9rem}
  dl{grid-template-columns:1fr}
}
@media (max-width:700px){
  body>header{min-height:64px;white-space:nowrap;overflow:hidden}
  body>header>a{font-size:26px}
  main{padding-top:26px}
  .lead,main>h1+p:not(.label){font-size:19px}
  table{font-size:16px}
  th,td{padding:14px 14px 14px 0}
  thead tr:first-child>*{font-size:17px}
  pre{padding:18px 20px;font-size:15.5px}
  pre+.k,pre+.k+pre{margin-left:20px!important}
  .wide>table{min-width:34rem}
  /* label/value tables fit the phone: long values wrap between words, the mark follows each line */
  .wide>table:has(th[scope=row]){min-width:0}
  .wide>table:has(th[scope=row]) td>code:only-child{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:1.9;padding:4px 6px}
  main>section>.button,main>p:has(>.button)>.button,.cta>.button,.waitlist .row .button{width:100%}
  .shell{padding-top:16px}
}
@media print{body>header,body>footer,main>section:first-of-type{background:none;color:#000}pre{transform:none;box-shadow:none}}