/* ============================================================
   PRAETAR — template
   Structural system adapted from a Patagon-style build:
   fluid vw-rem root, one container formula, flexbox only (no grid),
   1px rules with a "bump" detail, pill CTAs, tight display tracking.
   Palette: black ground, white ink.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700&display=swap');

:root{
  --paper:#0A0A0A;      /* ground  */
  --ink:#F6F6F6;        /* primary */
  --ink-2:#A2A2A2;      /* secondary */
  --ink-3:#6C6C6C;      /* labels  */
  --rule:#2C2C2C;
  --rule-2:#1B1B1B;

  --sans:'Cabinet Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'Menlo','SF Mono',Monaco,monospace;

  /* easing vocabulary */
  --quart:cubic-bezier(.25,1,.5,1);
  --expo:cubic-bezier(.16,1,.3,1);
  --quint:cubic-bezier(.87,0,.13,1);

  /* the one container formula — used everywhere */
  --pad:max(2.4rem, 50vw - 960px + 2.4rem);
}

/* fluid root: 1rem = 10px at each design width */
html{font-size:2.667vw}
@media (min-width:768px){ html{font-size:1.302vw} }
@media (min-width:1025px){ html{font-size:.694vw} }
@media (min-width:1920px){ html{font-size:13.3333px} }

html{
  box-sizing:border-box;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:#0000;
  text-size-adjust:none;scroll-behavior:smooth;
}
*,:before,:after{box-sizing:inherit}
body{
  margin:0;padding:0;width:100%;
  color:var(--ink);background:var(--paper);
  font:400 1.6rem/1.4 var(--sans);
  letter-spacing:-.015rem;word-break:break-word;text-wrap:pretty;
  overscroll-behavior:none;overflow:hidden scroll;
}
a{color:inherit;text-decoration:none}
ul,ol,dl{margin:0;padding:0;list-style:none}
li,dt,dd,h1,h2,h3,h4,h5,h6,p,blockquote{margin:0;padding:0}
button{appearance:none;background:#0000;border:none;margin:0;padding:0;color:currentColor;
  cursor:pointer;font:inherit;letter-spacing:inherit;text-align:inherit}
svg{fill:currentColor;display:block;overflow:visible}
img{display:block;max-width:100%}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px}
:focus:not(:focus-visible){outline:none}

.wrap{padding:0 var(--pad)}
.wrap-m{padding:0 1.6rem}
@media (min-width:1025px){ .wrap-m{padding:0 var(--pad)} }

/* ---------- type scale ---------- */
.d1{font-size:4rem;line-height:.92;letter-spacing:-.08rem;font-weight:400}
@media (min-width:1025px){ .d1{font-size:9.6rem;line-height:.88;letter-spacing:-.48rem} }

.d2{font-size:3rem;line-height:.96;letter-spacing:-.06rem;font-weight:400}
@media (min-width:1025px){ .d2{font-size:5.8rem;line-height:.88;letter-spacing:-.174rem} }

.d3{font-size:2.6rem;line-height:.98;letter-spacing:-.052rem;font-weight:400}
@media (min-width:1025px){ .d3{font-size:4rem;line-height:.96;letter-spacing:-.08rem} }

.h4{font-size:2rem;line-height:1.2;letter-spacing:-.02rem;font-weight:400}
.body{font-size:1.5rem;line-height:1.45;letter-spacing:-.015rem;color:var(--ink-2)}
@media (min-width:1025px){ .body{font-size:1.7rem;line-height:1.32;letter-spacing:-.017rem} }
.fine{font-size:1.3rem;line-height:1.5;letter-spacing:.013rem;color:var(--ink-3)}

.eyebrow{
  font-size:1.2rem;line-height:1;letter-spacing:.12rem;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;display:block;
}
.eyebrow-ink{color:var(--ink)}

/* ============================================================
   BUMP — the signature detail. Sits on every rule and pill.
   ============================================================ */
.bump{width:5.4rem;height:.3rem;display:block;position:relative;color:var(--ink);flex:none}
.bump svg{width:100%;height:100%}

/* the rule anchors to the bottom of its host, never participates in flex layout */
.rule{
  position:absolute;left:0;bottom:0;width:100%;height:.35rem;
  border-bottom:1px solid var(--rule);
  transition:border-color .3s var(--expo);
  pointer-events:none;
}
.rule-host{position:relative}
.rule .bump{
  position:absolute;bottom:-.5px;left:1.6rem;width:4.6rem;
  transform:translateY(100%);
  transition:transform .3s var(--expo);
}
@media (min-width:1025px){ .rule .bump{left:var(--pad)} }
.rule-host:hover .rule{border-bottom-color:var(--ink)}
.rule-host:hover .rule .bump{transform:translateY(0)}

/* ============================================================
   CTA PILL
   ============================================================ */
.pill{
  display:inline-flex;align-items:center;position:relative;
  height:4rem;padding:0 2.4rem;
  font-size:1.4rem;font-weight:500;line-height:.88;letter-spacing:-.028rem;
}
@media (min-width:1025px){ .pill{height:3.6rem} }
.pill--lg{height:4.4rem;padding:0 1.6rem 0 2.4rem}
@media (min-width:1025px){ .pill--lg{height:4.4rem} }
.pill--sm{height:3.2rem;padding:0 1.6rem;font-size:1.3rem}
@media (min-width:1025px){ .pill--sm{height:2.8rem} }

.pill__bg{
  position:absolute;inset:0;overflow:clip;border-radius:2.4rem;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:inset 0 0 .6rem #f6f6f60a;
  transition:border-color .3s var(--quart),box-shadow .3s var(--quart),background .3s var(--quart);
}
.pill--lg .pill__bg{border-radius:2.2rem}
.pill--sm .pill__bg{border-radius:1.6rem}
.pill:hover .pill__bg,.pill:active .pill__bg{
  border-color:var(--ink);box-shadow:inset 0 0 1.2rem #f6f6f61c;
}
.pill__bump{
  position:absolute;bottom:0;left:50%;width:6rem;max-width:25%;height:.3rem;
  transform:translate(-50%,100%);opacity:.4;color:var(--ink);
  transition:max-width .3s var(--quart),opacity .3s var(--quart),transform .3s var(--quart);
}
/* SVGs in this build inherit overflow:visible — every bump needs explicit dims */
.pill__bump svg{width:100%;height:100%;display:block}
.pill:hover .pill__bump{opacity:1;max-width:50%;transform:translate(-50%,0)}
.pill__content{position:relative;display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%}
.pill__label{white-space:nowrap;margin-top:.1em}
.pill__icon{width:1.8rem;height:1.8rem;flex:none}

.pill--solid .pill__bg{background:var(--ink);border-color:var(--ink)}
.pill--solid{color:var(--paper)}
.pill--solid .pill__bump{color:var(--paper)}

/* text link */
.tlink{
  display:inline-flex;align-items:center;gap:.4rem;height:2.4rem;
  font-size:1.4rem;font-weight:500;line-height:.88;letter-spacing:-.028rem;
  transition:color .3s var(--quart);
}
.tlink:hover{color:var(--ink-3)}
.tlink svg{width:1.6rem;height:1.6rem}

/* ============================================================
   MENU — fixed floating, centered
   ============================================================ */
.menu{
  position:fixed;inset:0 0 auto 0;z-index:40;height:0;
  opacity:0;transform:translateY(-4rem);
  transition:opacity 1.4s var(--expo),transform 1.4s var(--expo);
}
.menu.show{opacity:1;transform:none}
.menu__logo{
  position:absolute;top:1.1rem;left:1.6rem;
  display:flex;align-items:center;
}
/* currentColor-driven: inherits --ink, so it is white on the dark ground */
.menu__mark{width:3.8rem;height:3.8rem;flex:none;color:var(--ink)}
@media (min-width:1025px){ .menu__logo{left:var(--pad)} }
.menu__center{
  position:absolute;top:1.8rem;left:50%;transform:translateX(-50%);
  display:none;gap:.4rem;
}
@media (min-width:1025px){ .menu__center{display:flex} }
.menu__center a{
  height:2.8rem;padding:0 1.4rem;border-radius:1.6rem;
  display:flex;align-items:center;
  font-size:1.3rem;font-weight:500;letter-spacing:-.026rem;
  background:#0a0a0acc;border:1px solid var(--rule);
  backdrop-filter:blur(8px);
  transition:border-color .3s var(--quart),color .3s var(--quart);
}
.menu__center a:hover,.menu__center a[aria-current]{border-color:var(--ink)}
.menu__right{position:absolute;top:1.6rem;right:1.6rem}
@media (min-width:1025px){ .menu__right{top:1.8rem;right:var(--pad)} }

/* ============================================================
   HERO — scroll-pinned
   ============================================================ */
/* Mobile: no pin — the page just scrolls, cards fall below the fold.
   Desktop: 200svh pinned hero. */
.hero{position:relative;height:auto}
.hero__pin{position:relative;height:auto;padding:0 0 6rem;
  display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
/* Mobile: the field gets its own band at the top and the copy reads below it —
   nothing is laid over anything. Desktop: the stage fills the pin and the copy
   sits on top of the plane. */
.hero__stage{position:relative;height:50svh;min-height:28rem;margin-bottom:3.2rem}
@media (min-width:1025px){
  /* No pin on the hero — the page scrolls from the first wheel click and the
     wordmark travels up with it. The only pinned section is the statement. */
  .hero{height:auto}
  .hero__pin{position:relative;height:100svh;padding:0}
  .hero__stage{position:absolute;inset:0;height:auto;min-height:0;margin:0}
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;touch-action:pan-y}
.hero__inner{position:relative;z-index:2;padding-bottom:2.4rem}
@media (min-width:1025px){ .hero__inner{padding-bottom:3.2rem} }
.hero__tagline{
  font-size:1.4rem;line-height:1.8rem;letter-spacing:-.02rem;max-width:34ch;margin-top:1.6rem;
}
@media (min-width:1025px){ .hero__tagline{font-size:2rem;line-height:2.4rem;letter-spacing:-.02rem} }


.hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:2.4rem}
.hero__scroll{
  display:none;flex-direction:column;align-items:center;gap:.8rem;flex:none;
}
@media (min-width:768px){ .hero__scroll{display:flex} }
.hero__mouse{width:1.8rem;height:2.8rem;border:1px solid var(--rule);border-radius:1rem;position:relative}
.hero__mouse i{
  position:absolute;left:50%;top:.6rem;width:2px;height:.5rem;background:var(--ink);
  animation:scrollDot 1.6s var(--expo) infinite;
}
@keyframes scrollDot{
  0%{opacity:0;transform:translate(-50%,-6px)}
  15%{opacity:1}
  85%{opacity:1;transform:translate(-50%,8px)}
  100%{opacity:0;transform:translate(-50%,8px)}
}

/* ============================================================
   STATEMENT — pinned, word-by-word reveal
   ============================================================ */
.statement{position:relative;min-height:200vh}
@media (min-width:1025px){ .statement{min-height:300vh} }
.statement__pin{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.statement__text span{transition:color .35s var(--expo);color:var(--rule)}
.statement__text span.lit{color:var(--ink)}

/* ============================================================
   PRODUCT — numbered steps
   ============================================================ */
.product{padding:8rem 0}
@media (min-width:1025px){ .product{padding:14rem 0} }
.steps{margin-top:4rem;border-top:1px solid var(--rule)}
.step{position:relative;display:block;padding:2.4rem 0}
@media (min-width:1025px){
  .step{display:flex;align-items:center;gap:2.4rem;padding:2.8rem 0 2.4rem}
}
.step__no{font-size:1.2rem;letter-spacing:.12rem;text-transform:uppercase;color:var(--ink-3);width:6rem;flex:none}
.step__title{font-size:2rem;line-height:1.2;letter-spacing:-.02rem;flex:auto;margin:.8rem 0;display:block}
@media (min-width:1025px){ .step__title{margin:0;font-size:2.4rem;letter-spacing:-.024rem} }
.step__meta{display:block;font-size:1.4rem;color:var(--ink-3)}
@media (min-width:1025px){ .step__meta{width:22rem;flex:none;text-align:right} }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{padding:4.8rem 0 5.6rem}
@media (min-width:1025px){ .quotes{padding:8rem 0 8.8rem} }
.quotes__cards{display:flex;flex-direction:column;gap:1.6rem;margin-top:4rem}
@media (min-width:1025px){ .quotes__cards{flex-flow:row wrap;padding:0 8rem} }
.qcard{
  flex:1;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule);border-radius:1.6rem;
  padding:2.4rem 2rem 2rem;
  box-shadow:inset 0 0 2rem #f6f6f608;
  transition:opacity .25s var(--quint),border-color .3s var(--quart);
}
@media (min-width:1025px){ .qcard{flex:0 0 calc(50% - .8rem)} }
.quotes__cards:has(.qcard:hover) .qcard:not(:hover){opacity:.35}
.qcard:hover{border-color:var(--ink)}
.qcard__author{display:inline-flex;align-items:center;gap:1.2rem;margin-bottom:2rem}
.qcard__avatar{
  width:3.2rem;height:3.2rem;border-radius:50%;flex:none;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:700;
}
@media (min-width:1025px){ .qcard__avatar{width:3.6rem;height:3.6rem;font-size:1.2rem} }
.qcard__name{font-size:1.5rem;font-weight:500;line-height:1.4}
.qcard__org{font-size:1.3rem;color:var(--ink-3)}
.qcard__quote{font-size:1.8rem;font-style:italic;line-height:1.5;letter-spacing:-.018rem;flex:1}
@media (min-width:1025px){ .qcard__quote{font-size:2rem;letter-spacing:-.02rem} }

/* ============================================================
   CALL TO ACTION — largest type on the site
   ============================================================ */
.cta{height:66.6rem;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center}
@media (min-width:1025px){ .cta{height:84.8rem} }
.cta h2{max-width:14ch}
.cta .pill{margin-top:3.2rem}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{padding:6.4rem 0 2.4rem}
@media (min-width:1025px){ .foot{padding:8.6rem 0 3.2rem} }
.foot__cols{display:flex;flex-direction:column;gap:4.8rem}
@media (min-width:1025px){ .foot__cols{flex-direction:row;gap:2.4rem} }
.foot__brand{width:100%}
@media (min-width:1025px){ .foot__brand{width:35.1rem;flex:none} }
.foot__wordmark{display:flex;align-items:center;gap:1.4rem;
  font-size:2.4rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.foot__mark{width:4rem;height:4rem;flex:none;color:var(--ink)}
.foot__links{flex:auto;display:flex;gap:4.8rem}
.foot__links ul{display:flex;flex-direction:column;gap:1.2rem}
.foot__links a{font-size:2rem;line-height:1.2;letter-spacing:-.02rem;transition:color .3s var(--quart)}
@media (min-width:1025px){ .foot__links a{font-size:3rem;letter-spacing:-.04rem} }
.foot__links a:hover{color:var(--ink-3)}
.foot__news{width:100%}
@media (min-width:1025px){ .foot__news{width:33.9rem;flex:none} }

.news{position:relative;display:flex;align-items:center;height:4.4rem;margin-top:1.6rem}
@media (min-width:1025px){ .news{height:3.6rem} }
.news__bg{
  position:absolute;inset:0;border-radius:4.4rem;overflow:clip;
  background:var(--paper);border:1px solid var(--rule);
  box-shadow:inset 0 0 .6rem #f6f6f60a;
  transition:border-color .3s var(--quart),box-shadow .3s var(--quart);
}
.news:hover .news__bg,.news:focus-within .news__bg{border-color:var(--ink);box-shadow:inset 0 0 1.2rem #f6f6f61c}
.news input{
  position:relative;flex:auto;height:100%;padding:.1em 0 0 2.4rem;
  background:0 0;border:none;outline:none;color:var(--ink);
  font-family:inherit;font-size:1.4rem;font-weight:500;letter-spacing:-.028rem;
}
.news input::placeholder{color:var(--ink-3)}
.news button{position:relative;width:3.8rem;height:3.8rem;display:flex;align-items:center;justify-content:center;
  margin-right:.3rem;color:var(--ink-3);transition:color .3s var(--quart)}
.news button:hover{color:var(--ink)}
.news button svg{width:2rem;height:2rem}

.foot__legal{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;justify-content:space-between;
  margin-top:6.4rem;padding-top:2.4rem;border-top:1px solid var(--rule)}
.foot__legal a,.foot__legal span{font-size:1.3rem;letter-spacing:.013rem;color:var(--ink-3)}
.foot__legal a{transition:color .3s var(--quart)}
.foot__legal a:hover{color:var(--ink)}

/* ============================================================
   REVEAL — 50ms index stagger
   ============================================================ */
.rv{opacity:0;transform:translateY(1.6rem);
  transition:opacity 1s var(--expo),transform 1s var(--expo);
  transition-delay:calc(var(--i,0)*50ms)}
.rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,:before,:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .hero{height:auto}.hero__pin{position:relative;height:auto;padding:0 0 4rem}
  .hero__stage{position:relative;inset:auto;height:56svh;min-height:30rem;margin-bottom:3.2rem}
  .statement{min-height:0}.statement__pin{position:relative;height:auto;padding:8rem 0}
  .statement__text span{color:var(--ink)}
}

/* ============================================================
   HERO — wordmark behind, field in front
   The word is set edge to edge and centred on the horizon, so when the
   field rises it takes the bottom half and the word falls to background.
   ============================================================ */
/* --wt (offset) and --cut (mask) are both written by the field module from the
   canvas geometry, so the same fraction of the wordmark shows at every size. */
.hero__word{
  position:absolute;left:0;right:0;top:0;transform:translateY(var(--wt,22vh));
  z-index:0;line-height:0;pointer-events:none;
  color:var(--ink);opacity:0;
  transition:opacity 1s var(--expo),color 1.4s var(--expo);
  /* the plane's leading edge, in px up from the bottom of this box. The field
     module writes it every frame as the field rises, so the type is eaten from
     below rather than cut by a drawn rule. */
  /* it is artwork, not copy — a long-press should never select it */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  --cut:0px;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--cut) - 9px),transparent calc(100% - var(--cut)));
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--cut) - 9px),transparent calc(100% - var(--cut)));
}
.hero__word svg{display:block;width:100%;height:auto}
.hero__word text{fill:currentColor;font-family:var(--sans);font-weight:500;font-size:200px}
.lit  .hero__word{opacity:1}
.ready .hero__word{color:#f6f6f61f}     /* settles into the background */
/* the wordmark is only ~20% of the viewport width tall on a phone, so it needs
   more weight there to read at all */
@media (max-width:1024px){ .ready .hero__word{color:#f6f6f636} }

.hero__canvas{cursor:crosshair;z-index:1}

/* hero content enters as the field settles */
.hero__h1,.hero__tagline,.hero__scroll{
  opacity:0;transform:translateY(1.4rem);
  transition:opacity 1.1s var(--expo),transform 1.1s var(--expo);
}
.hero__h1{max-width:20ch}
.ready .hero__h1{opacity:1;transform:none;transition-delay:.55s}
.ready .hero__tagline{opacity:1;transform:none;transition-delay:.67s}
.ready .hero__scroll{opacity:1;transform:none;transition-delay:.79s}


.hero__hint{
  position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);
  z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);opacity:0;transition:opacity .6s var(--quart);
}
.ready .hero__hint{opacity:1}
.hero__hint.off{opacity:0}
@media (max-width:1024px){ .hero__hint{display:none} }

@media (prefers-reduced-motion:reduce){
  .hero__word{opacity:1;color:#f6f6f61f}
  .hero__h1,.hero__tagline,.hero__scroll{opacity:1;transform:none}
}

/* the hero cursor should not change as it crosses the copy laid over it */
@media (hover:hover) and (pointer:fine){
  .hero__pin{cursor:crosshair}
  .hero__pin a,.hero__pin button{cursor:pointer}
}

/* social icons sit on the legal line, after the policy links */
.foot__social{display:flex;align-items:center;gap:1.8rem}
.foot__social span{display:flex;color:var(--ink-3)}
.foot__social svg{width:1.7rem;height:1.7rem}

/* the tracker canvas sits behind the statement — layout of the pin is untouched */
.statement__fall{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.statement__pin > .wrap-m{position:relative;z-index:1}

/* CTA grid: strongest at the foot of the section, gone by the time it
   reaches the border at the top. Position only — no sizing on the flex child. */
.cta{position:relative}
.cta::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(to right, #f6f6f614 0 1px, transparent 1px 6.4rem),
    repeating-linear-gradient(to bottom, #f6f6f614 0 1px, transparent 1px 6.4rem);
  -webkit-mask-image:linear-gradient(to top, #000 0%, #000 18%, transparent 88%);
  mask-image:linear-gradient(to top, #000 0%, #000 18%, transparent 88%);
}
.cta > .wrap-m{position:relative;z-index:1}

/* ---------- mobile hero ----------------------------------------------
   The wordmark is set edge to edge on desktop, which on a phone reads as
   cropped rather than full-bleed — inset it so the whole word shows. And
   drop the field down the page so it is not jammed under the menu.
--------------------------------------------------------------------- */
@media (max-width:1024px){
  .hero__word{left:1.6rem;right:1.6rem}
  .hero__pin{padding-top:9rem}
}