/* Alltio site template: the home page's look for every other page.
   Loaded last, after each page's own styles, so these rules win.  The home
   page carries the same design in its own stylesheet.  Section counters, the
   a. mark on light sections and the sha256 section footers come from
   /assets/site.js. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin-v20.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin-v24.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin-v24.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jetbrains-mono-400-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jetbrains-mono-500-latin.woff2) format('woff2')}
:root{
  --navy:#1B1B8A; --navy-deep:#14146B; --night:#0F0F52; --abyss:#08082E;
  --ink:#1F2433; --body:#3A4052; --gray:#5A6072; --row:#3E6B6B;
  --ice:#CADCFC; --mint:#8FE3C0; --light:#F5F7FD; --wash:#F5F7FD; --border:#DCE1EE; --rule:#DCE1EE;
  --rule-dark:rgba(202,220,252,.28); --grid-dark:rgba(202,220,252,.22);
  --orange:#C2410C; --orange-dark:#9A3412;
  --mono:'JetBrains Mono',Menlo,ui-monospace,monospace; --head:'Poppins',Arial,sans-serif;
}
body{font-family:'Inter',Arial,sans-serif;color:var(--ink)}
h1,h2,h3{font-family:var(--head)}
.wrap{max-width:1200px;padding-left:32px;padding-right:32px}
@media (max-width:600px){.wrap{padding-left:16px;padding-right:16px}}

/* ---- menu bar: the a. mark on navy ---- */
header.site{position:sticky;top:0;z-index:50;background:var(--night);border-bottom:1px solid var(--grid-dark);backdrop-filter:none}
header.site .wrap{height:76px}
header.site .wordmark img{width:44px;height:44px}
header.site nav a{color:var(--ice);font-size:15px}
header.site nav a:hover{color:#fff}
header.site nav a.login{color:var(--ice);border:0;padding:0;font-weight:400}
header.site nav a.login:hover{background:none;color:#fff}
header.site nav a.cta{background:transparent;border:1px solid rgba(202,220,252,.5);color:#fff;border-radius:8px;padding:11px 18px;font-weight:600}
header.site nav a.cta:hover{background:transparent;border-color:#fff;color:#fff}
.navtoggle{color:#fff}
@media (max-width:1040px){
  header.site{position:relative}
  header.site nav{background:var(--night)!important;border-color:var(--grid-dark)!important;box-shadow:none!important}
  header.site nav a{border-bottom-color:var(--grid-dark)!important;color:var(--ice)!important}
  header.site nav a.cta{border:1px solid rgba(202,220,252,.5)!important;color:#fff!important}
}

/* ---- hero: navy, left-aligned, the corner grid lines ---- */
.hero,.hero-band,.cta-band{background-color:var(--night)!important;color:#fff;position:relative;overflow:hidden;
  background-image:linear-gradient(var(--grid-dark),var(--grid-dark)),linear-gradient(var(--grid-dark),var(--grid-dark)),linear-gradient(var(--grid-dark),var(--grid-dark))!important;
  background-size:1px 220px,1px 220px,30% 1px!important;background-repeat:no-repeat!important;
  background-position:70% 0,88% 0,100% 110px!important}
@media (max-width:900px){.hero,.hero-band,.cta-band{background-image:none!important}}
.hero,.hero-band{text-align:left}
.hero .wrap,.hero-band .wrap{align-items:flex-start}
.hero h1,.hero-band h1{font-weight:700;letter-spacing:-.5px;color:#fff;max-width:20ch}
.hero .kicker,.hero-band .kicker{color:var(--mint)!important;font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:1.4px;text-transform:uppercase}
.hero .sub,.hero-band .sub,.hero .lead,.hero-band .lead,.hero-band .meta,.hero .meta{color:var(--ice)}
.cta-band h2,.cta-band h3{color:#fff}
.cta-band p{color:var(--ice)}

/* ---- sections ---- */
main section{background:#fff}
main section.alt{background:var(--wash)}
.kicker{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
.kicker.s-head{display:flex;align-items:center;gap:16px}
.kicker .s-ctr{font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:0;text-transform:none;color:var(--gray)}
.kicker .s-mark{width:36px;height:36px;margin-left:auto;display:block}
h2{font-weight:700;color:var(--navy)}
.lead{color:var(--body)}
.card,.layer,.post-card{background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:none}
.card h3,.layer .name{color:var(--navy)}
.secft{display:flex;justify-content:flex-end;margin-top:40px;padding:20px 0 0;border-top:1px solid var(--border);font-family:var(--mono);font-size:13px;color:var(--gray);min-height:41px}
.hero .secft,.hero-band .secft,.cta-band .secft{border-top-color:var(--rule-dark);color:var(--ice)}

/* ---- buttons: orange for the action, navy secondary ---- */
.btn{border-radius:8px}
.btn.cta,.btn.btn-record,.btn-record{background:var(--orange);color:#fff;border-radius:8px}
.btn.cta:hover,.btn.btn-record:hover{background:var(--orange-dark);color:#fff}
.btn.primary{background:var(--navy);color:#fff}
.hero .btn.primary,.hero-band .btn.primary,.cta-band .btn.primary{background:var(--orange);color:#fff}
a.more{color:var(--navy);font-weight:600}

/* ---- footer ---- */
footer{background:var(--abyss)!important;color:var(--ice)}
footer .wordmark img{width:44px;height:44px}
footer .navcols h2{font-family:var(--mono)!important;font-size:12px!important;font-weight:400!important;letter-spacing:1px!important;text-transform:uppercase!important;color:#fff!important}
footer .legalbar{border-top-color:var(--grid-dark);opacity:1}
footer .s-end{font-family:var(--mono);font-size:13px;margin-top:10px}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
header.site :focus-visible,.hero :focus-visible,.hero-band :focus-visible,footer :focus-visible{outline-color:var(--mint)}