/* The Rextail theme, shared by the homepage and the utility pages: monochrome
   ink over a pale studio backdrop, Geist for the type and Geist Mono for the
   labels, the bar, buttons and footer. Each page's layout lives in its own
   stylesheet (landing.css, site.css), loaded after this one. */
@font-face{font-family:"Geist";src:url("/assets/fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#ebebea;
  --paper:#fcfcfa;
  --ink:#0a0a0a;
  --text-2:#47474b;
  --text-3:#5f5f64;
  --line:rgb(10 10 10 / .11);
  --line-strong:rgb(10 10 10 / .24);
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(0,0,.3,1);
  --ease-std:cubic-bezier(.4,.14,.3,1);
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  --nav:64px;
  --radius:8px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 24px)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,p,ul,ol,dl,dd,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
::selection{background:var(--ink);color:#fff}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 16px;border-radius:var(--radius);background:var(--ink);color:#fff;font-weight:500}
.skip:focus{top:12px}
.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}

/* Type */
h2{font-size:clamp(36px,4.6vw,66px);line-height:1.02;font-weight:600;letter-spacing:-.036em;text-wrap:balance}
.eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:14px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink);flex-shrink:0}
/* Backgrounds drop out in forced colours and plain print; a border stays. */
@media print,(forced-colors:active){.eyebrow::before{box-sizing:border-box;background:none;border:4px solid CanvasText}}
.eyebrow span{color:var(--text-3)}
.section-lead{font-size:clamp(18px,1.45vw,20px);line-height:1.55;color:var(--text-2);max-width:40ch}

/* Navigation: each page places the bar; the theme draws it. */
.nav{height:var(--nav);background:rgb(255 255 255 / .74);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .24s var(--ease-std),background .24s var(--ease-std)}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgb(255 255 255 / .84)}
.nav-inner{height:100%;display:flex;align-items:center;gap:40px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.02em}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14px;font-weight:500}
.nav-links a{color:var(--text-2);padding-block:10px;transition:color .11s var(--ease-std)}
.nav-links a:hover{color:var(--ink)}
/* Rextail's pages hold the bar at the top of the view and show the logo
   beside the wordmark. */
.nav--sticky{position:sticky;top:0;z-index:20}
.brand-logo{display:block;flex-shrink:0;width:24px;height:24px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border-radius:var(--radius);font-size:15px;font-weight:500;white-space:nowrap;transition:background .11s var(--ease-std),box-shadow .11s var(--ease-std),transform .24s var(--ease-std)}
.button--small{min-height:38px;padding:0 14px;font-size:14px}
.button--primary{background:var(--ink);color:#fff;box-shadow:0 1px 2px rgb(10 10 10 / .2),inset 0 1px 0 rgb(255 255 255 / .12)}
.button--primary:hover{background:#262626}
.button--secondary{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgb(10 10 10 / .1),0 1px 2px rgb(10 10 10 / .06)}
.button--secondary:hover{box-shadow:0 0 0 1px rgb(10 10 10 / .24),0 1px 2px rgb(10 10 10 / .06)}
.button--light{background:#fff;color:var(--ink)}
.button--light:hover{background:#e6e6e6}
.button:active{transform:translateY(1px)}
.arrow{width:16px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--ease-std)}
.button:hover .arrow{transform:translateX(3px)}
@media (forced-colors:active){.button{border:1px solid CanvasText}}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.actions--center{justify-content:center}

/* Footer */
.footer{background:#f4f4f1;border-top:1px solid var(--line)}
/* Rextail's pages close on a sitemap: the company and the rest. */
.site-footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px;padding-block:48px 40px}
.site-footer-brand p{margin-top:12px;max-width:30ch;font-size:14px;color:var(--text-2)}
.site-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:14px}
.site-footer-col a{color:var(--text-2)}
.site-footer-col a:hover{color:var(--ink)}
.site-footer-title{margin-bottom:4px;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.site-footer-base{padding-block:20px 28px;border-top:1px solid var(--line);font-size:13px;color:var(--text-3)}

@media (max-width:760px){
  .nav-links{display:none}
  .nav-inner{justify-content:space-between}
  /* A bar whose links matter on phones keeps them, less the wide-only ones. */
  .nav--sticky .nav-inner{gap:16px}
  .nav-links--keep{display:flex;gap:16px}
  .nav-links--keep .nav-wide{display:none}
}
@media (max-width:360px){
  .nav-links--keep ~ .button .arrow{display:none}
}
@media (max-width:720px){
  :root{--nav:58px}
  body{font-size:16.5px}
  h2{font-size:clamp(32px,9.4vw,44px)}
  .actions .button{flex:1 1 auto}
  .site-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding-block:40px 32px}
  .site-footer-brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .nav,.skip{display:none!important}
  html,body{background:#fff}
  .button--primary{color:#000;background:none;box-shadow:inset 0 0 0 1px currentColor}
}
