/* Shared chrome for the standing pages. The scroll film on / is its own thing;
   these pages carry the same brand without the engine. */
@font-face{font-family:'Montserrat';font-weight:300;font-display:swap;
           src:url('/assets/fonts/montserrat-300.woff2?v=v12') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;
           src:url('/assets/fonts/montserrat-400.woff2?v=v12') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:500;font-display:swap;
           src:url('/assets/fonts/montserrat-500.woff2?v=v12') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:600;font-display:swap;
           src:url('/assets/fonts/montserrat-600.woff2?v=v12') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-display:swap;
           src:url('/assets/fonts/jetbrains-mono-500.woff2?v=v12') format('woff2')}

:root{--bg:#f7f9fb;--ink:#0e1a24;--soft:#556877;--accent:#003f61;--line:#dde4ea;
      --panel:#ffffff;--steel:#226691;--navy:#003f61;--gold:#d9a520;
      --font:'Montserrat',ui-sans-serif,system-ui,sans-serif;
      --mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:300;
     line-height:1.65}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.6rem;
     padding:1rem clamp(1.25rem,4vw,5rem);background:rgba(247,249,251,.9);backdrop-filter:blur(14px);
     border-bottom:1px solid var(--line)}
.bar .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.bar .brand img{height:24px}
.bar .brand b{font-weight:600;font-size:.98rem}
.bar nav{display:flex;gap:1.15rem;flex:1;flex-wrap:wrap;align-items:center}
.bar nav a{color:var(--soft);text-decoration:none;font-size:.88rem}
.bar nav a:hover{color:var(--ink)}
.bar nav a[aria-current]{color:var(--ink)}
.bar .cta{background:var(--accent);color:#fff;text-decoration:none;font-weight:500;
          font-size:.85rem;padding:.5rem 1.1rem;border-radius:999px;white-space:nowrap}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.3rem;cursor:pointer}
@media (max-width:860px){
  .bar{gap:.8rem;padding:.85rem 1.1rem}
  /* The open menu is an anchored dropdown, not a wrapped flex row: .bar never
     wraps, so flex-basis:100% only squeezed the links into the last slot at the
     right edge. Same pattern the island state uses on the home page. */
  .bar nav{display:none}
  .bar nav.open{display:flex;position:absolute;top:100%;left:0;right:0;
                flex-direction:column;align-items:stretch;gap:.2rem;
                padding:.7rem 1.1rem .9rem;background:var(--panel);
                border-bottom:1px solid var(--line);
                box-shadow:0 14px 40px rgba(0,63,97,.12)}
  .bar nav.open a{padding:.6rem 0}
  .burger{display:block}
}

.wrap{max-width:none;margin:0 auto;padding:4.5rem clamp(1.25rem,4vw,5rem)}
.wrap.wide{max-width:76rem}
.narrow{max-width:44rem}
h1{font-weight:300;font-size:clamp(2rem,5vw,3.1rem);line-height:1.12;margin:0 0 1rem}
h2{font-weight:300;font-size:1.6rem;margin:0 0 .8rem}
h3{font-weight:500;font-size:1rem;margin:0 0 .4rem}
p{margin:0 0 1rem;max-width:62ch}
.lede{color:var(--soft);font-size:1.12rem;max-width:58ch}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
         color:var(--accent);margin-bottom:.9rem}
.rule{height:1px;background:var(--line);margin:3rem 0}

.tier{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
      color:var(--soft);margin:2.5rem 0 1rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(14.5rem,1fr));gap:1rem}
.cell{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.5rem}
.cell p{font-size:.9rem;color:var(--soft);margin-bottom:.7rem}
.out{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--accent)}
.tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
     text-transform:uppercase;padding:.2rem .5rem;border:1px solid var(--line);
     border-radius:999px;color:var(--soft);margin-left:.5rem}
.tag.live{border-color:rgba(0,63,97,.35);color:var(--accent)}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media (max-width:1000px){ .plans{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .plans{grid-template-columns:1fr} }
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;
      padding:1.6rem 1.4rem;display:flex;flex-direction:column}
.plan.hi{border-color:var(--accent);box-shadow:0 12px 40px rgba(0,63,97,.08)}
.plan .pop{position:absolute;top:-.6rem;left:1.4rem;background:var(--gold);color:#2a1f05;
           font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
           padding:.2rem .55rem;border-radius:999px}
.plan .p{font-size:1.9rem;font-weight:300;margin:.9rem 0 .1rem}
.plan .p small{font-size:.8rem;color:var(--soft)}
.plan .sla{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.08em}
.plan ul{list-style:none;padding:0;margin:1.1rem 0 1.4rem;font-size:.86rem;color:var(--soft);flex:1}
.plan li{padding:.28rem 0 .28rem .9rem;position:relative}
.plan li::before{content:"";position:absolute;left:0;top:.72rem;width:4px;height:4px;
                 border-radius:50%;background:var(--accent)}
.plan a.btn{display:block;text-align:center;text-decoration:none;padding:.75rem;border-radius:999px;
            background:var(--steel);color:#fff;font-weight:500;font-size:.9rem}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin:2rem 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.2rem}
.stat b{display:block;font-size:1.8rem;font-weight:300;line-height:1}
.stat span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}

.form{display:grid;gap:.9rem;max-width:34rem}
.form label{display:block;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
            color:var(--soft);font-weight:500;margin-bottom:.35rem}
.form input,.form textarea{width:100%;padding:.75rem .85rem;background:var(--panel);color:var(--ink);
     border:1px solid var(--line);border-radius:8px;font-family:var(--font);font-size:.95rem;
     font-weight:400}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--steel)}
.form button{justify-self:start;padding:.75rem 1.8rem;border:0;border-radius:999px;
             background:var(--steel);color:#fff;font-family:var(--font);font-weight:500;cursor:pointer}
.legal p,.legal li{color:var(--soft);font-size:.94rem}
.legal h2{margin-top:2.2rem}
.legal ul{padding-left:1.1rem}

/* ---- The footer is the ending ----
   Ported from a React/GSAP/Tailwind reference. None of that stack exists here and the CSP
   blocks both a CDN script and the Google Fonts import it wanted, so the design is rebuilt
   in plain CSS on our own type. The page scrolls away to uncover a footer that fills the
   viewport: a breathing aurora, a masked grid, the name set enormous, a diagonal marquee,
   and glass pills that lean toward the cursor. */
/* The footer is fixed BEHIND the document, so main has to be a layer above it with its own
   background. Without this the footer shows through every section on the page, not just at
   the end: that is not a footer bug, it is the whole site rendering on top of a lightbox. */
main{position:relative;z-index:1;background:var(--bg)}
.foot-curtain{height:100vh;height:100dvh;pointer-events:none;background:transparent}

footer.foot{position:fixed;inset:auto 0 0 0;height:100vh;height:100dvh;z-index:0;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:#08131c;color:#e8f0f6;border-top:0;margin:0;padding:0;
  --f-ink:232,240,246}

/* The aurora: one soft field that slowly breathes, so nothing in the footer is ever still. */
/* No filter:blur here. A blurred surface that also animates has to be re-blurred on every
   frame, and on a throttled phone that was an 83ms frame. A radial gradient with soft stops
   is already soft, so the animation is left with transform and opacity, which the compositor
   can do on its own. */
.foot-aurora{position:absolute;left:50%;top:52%;width:104vw;height:74vh;z-index:0;
  pointer-events:none;border-radius:50%;will-change:transform,opacity;
  background:radial-gradient(closest-side at 50% 50%,
    rgba(0,99,150,.34) 0%, rgba(0,99,150,.26) 22%, rgba(18,152,138,.17) 44%,
    rgba(217,165,32,.07) 62%, rgba(8,19,28,0) 82%);
  animation:foot-breathe 9s ease-in-out infinite alternate}
@keyframes foot-breathe{
  from{transform:translate(-50%,-50%) scale(1);opacity:.55}
  to{transform:translate(-50%,-50%) scale(1.12);opacity:1}}

.foot-grid{position:absolute;inset:0;z-index:0;pointer-events:none;background-size:64px 64px;
  background-image:linear-gradient(to right,rgba(var(--f-ink),.045) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(var(--f-ink),.045) 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 28%,#000 72%,transparent)}

/* Higher, so the name reads as the backdrop the footer sits on rather than something
   sinking out of frame. */
.foot-giant{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);margin:0;z-index:0;
  white-space:nowrap;pointer-events:none;user-select:none;max-width:none;
  /* Sized so the whole word still fits the viewport. Above about 17vw the outer letters
     start being clipped and the rest reads as abstract shapes rather than the name. */
  font-size:min(18.4vw,23rem);line-height:.78;font-weight:600;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1px rgba(var(--f-ink),.07);
  background:linear-gradient(180deg,rgba(var(--f-ink),.10) 0%,transparent 62%);
  -webkit-background-clip:text;background-clip:text}

/* The marquee runs on a duplicated track, so translating it by exactly half its width loops
   seamlessly however long the strip is. */
.foot-marquee{position:absolute;top:11%;left:-9%;right:-9%;z-index:1;overflow:hidden;
  transform:rotate(-2deg) scale(1.04);pointer-events:none;
  border-block:1px solid rgba(var(--f-ink),.10);
  background:rgba(8,19,28,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.foot-marquee-track{display:flex;width:max-content;will-change:transform;
  animation:foot-marquee 42s linear infinite}
.foot-marquee-run{display:flex;align-items:center;gap:3rem;padding:.85rem 1.5rem;
  font:600 .72rem var(--mono);letter-spacing:.3em;text-transform:uppercase;
  color:rgba(var(--f-ink),.5);white-space:nowrap}
.foot-marquee-run i{font-style:normal;color:rgba(0,150,200,.75)}
@keyframes foot-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* One fluid scale for the whole block, so nothing jumps at a breakpoint. */
.foot-mid{position:relative;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(1.4rem,3.2vmin,2.4rem);
  padding:clamp(4rem,11vmin,8rem) clamp(1.25rem,4vw,5rem) 0;text-align:center}
.foot-lead{margin:0;font-weight:600;letter-spacing:-.045em;line-height:1;
  font-size:clamp(2.35rem,9.2vmin,6rem);max-width:11ch;
  background:linear-gradient(180deg,#fff 0%,rgba(var(--f-ink),.42) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(var(--f-ink),.16))}

.foot-pills{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem}

.foot-pill{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;
  padding:.72rem 1.35rem;border-radius:999px;font-size:.86rem;font-weight:500;
  color:rgba(var(--f-ink),.72);
  background:linear-gradient(145deg,rgba(var(--f-ink),.09),rgba(var(--f-ink),.025));
  border:1px solid rgba(var(--f-ink),.11);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.55),inset 0 1px 1px rgba(var(--f-ink),.10);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  transition:color .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease,
             transform .9s cubic-bezier(.22,1.2,.3,1)}
.foot-pill svg{width:1.05rem;height:1.05rem;flex:0 0 auto;opacity:.75}
.foot-pill-lg{padding:1rem 2.1rem;font-size:1rem;font-weight:600;color:#fff}
.foot-pill-lg svg{width:1.2rem;height:1.2rem;opacity:.9}
.foot-pill:hover{color:#fff;border-color:rgba(var(--f-ink),.26);
  background:linear-gradient(145deg,rgba(var(--f-ink),.17),rgba(var(--f-ink),.05));
  box-shadow:0 22px 46px -12px rgba(0,0,0,.6),inset 0 1px 1px rgba(var(--f-ink),.22)}
.foot-pill:focus-visible,.foot-top:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:4px}
/* While the cursor is on it the pill follows quickly; the spring is only for the release. */
.mag.is-drag{transition:color .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease,
             transform .12s ease-out}

.foot-base{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding:0 clamp(1.25rem,4vw,5rem) clamp(1.4rem,3vh,2.2rem)}
/* Set on its side and run up the left edge, so the base row is just the links and the
   button and the wordmark has the full width to itself. */
.foot-legal{position:absolute;left:clamp(1rem,2.2vw,2.4rem);bottom:clamp(1.4rem,3vh,2.2rem);margin:0;max-width:none;
  white-space:nowrap;transform-origin:0 100%;transform:rotate(-90deg);
  font:600 .66rem var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(var(--f-ink),.4)}
/* Stacked, and pushed over to sit beside the back-to-top button. */
.foot-side{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;margin-left:auto}
.foot-side a{text-decoration:none;color:rgba(var(--f-ink),.55);
  font:600 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:.28rem .2rem;transition:color .25s ease}
.foot-side a:hover{color:#fff}
.foot-side a:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:3px;border-radius:3px}
/* The vertical rail needs clear space beside the wordmark. Under about 1100px the wordmark
   grows into it, so the line goes back into the base row. */
@media (max-width:1100px){
  .foot-legal{position:static;transform:none;white-space:normal}
}

.foot-top{width:2.9rem;height:2.9rem;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:rgba(var(--f-ink),.72);background:rgba(var(--f-ink),.07);
  border:1px solid rgba(var(--f-ink),.13);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:color .3s ease,background .3s ease,border-color .3s ease,transform .9s cubic-bezier(.22,1.2,.3,1)}
.foot-top svg{width:1.05rem;height:1.05rem;transition:transform .3s ease}
.foot-top:hover{color:#fff;background:rgba(var(--f-ink),.13);border-color:rgba(var(--f-ink),.26)}
.foot-top:hover svg{transform:translateY(-3px)}

@media (max-width:860px){
  /* No curtain on a phone: a fixed element taller than the screen can never be read in full,
     and the reveal costs a whole viewport of scrolling for no gain. */
  main{background:none}
  .foot-curtain{display:none}
  /* relative, NOT static. The aurora and the wordmark are absolutely positioned; against a
     static footer their containing block is further up the tree, so the footer's own
     overflow:hidden stops clipping them and a 150vw glow pushes the page sideways. */
  footer.foot{position:relative;height:auto;min-height:0;padding-bottom:0}
  .foot-marquee{position:static;transform:none;margin:0 0 clamp(2rem,7vw,3rem);left:0;right:0}
  .foot-marquee-run{gap:2rem;padding:.7rem 1rem;font-size:.62rem;letter-spacing:.22em}
  .foot-mid{padding:clamp(2.5rem,8vw,4rem) 1.25rem 0}
  /* The name has to fit the screen at every width, and it is the backdrop, so it sits behind
     the buttons rather than below them. */
  .foot-giant{font-size:min(26vw,9rem);bottom:auto;top:52%;transform:translate(-50%,-50%)}
  .foot-base{padding:clamp(2.5rem,9vw,3.5rem) 1.25rem 1.6rem;justify-content:center;
    gap:.9rem 1.4rem;text-align:center}
  .foot-side{flex-direction:row;align-items:center;margin-left:0;gap:1.4rem}
  .foot-legal{position:static;transform:none;white-space:normal}
  .foot-aurora{width:150vw;height:52vh}
  /* Twelve stacked backdrop-filters is the most expensive thing on a phone, and over a solid
     background they are doing nothing you can see. */
  .foot-pill,.foot-top,.foot-marquee{-webkit-backdrop-filter:none;backdrop-filter:none}
  .foot-pill{background:rgba(var(--f-ink),.08)}
}
@media (max-width:420px){
  .foot-pills{flex-direction:column;align-items:stretch;width:100%;max-width:19rem}
  .foot-pill-lg{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .foot-aurora,.foot-marquee-track{animation:none}
  .foot-pill,.foot-top{transition:color .2s ease,background .2s ease,border-color .2s ease}
}
/* Without script the curtain would be a blank screen you scroll past, so it collapses and the
   footer goes back into normal flow. */
@media (scripting:none){
  main{background:none}
  .foot-curtain{display:none}
  footer.foot{position:relative;height:auto}
}