/* Landing-page layout and motion. Loaded by index.html. */


/* hero */
.infra-hero{padding:clamp(90px,11vw,150px) var(--pad) clamp(70px,8vw,110px);min-height:78vh;
  display:flex;flex-direction:column;justify-content:center}
.infra-hero h1{font:500 clamp(44px,7.4vw,132px)/.96 Manrope,Arial,sans-serif;letter-spacing:-.04em;margin:44px 0 0;
  overflow-wrap:break-word}
.infra-hero h1 em{color:var(--green);font-style:normal}
.infra-hero-bottom{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-top:clamp(50px,6vw,90px)}
.infra-hero-bottom p{font-size:clamp(16px,1.5vw,20px);line-height:1.6;color:#b4b4ae;max-width:620px}
.infra-hero-bottom .button{justify-self:end}

/* claim band */
.infra-claim{background:var(--ink);color:#fff;padding:0 var(--pad) clamp(80px,9vw,130px)}
.infra-claim p{border-top:1px solid #33332f;padding-top:clamp(40px,4.5vw,66px);margin:0;
  font:500 clamp(22px,3vw,50px)/1.28 Manrope,Arial,sans-serif;letter-spacing:-.025em;max-width:1180px}
.infra-claim em{font-style:normal;color:var(--green)}

/* two layers */
.infra-layers{padding:clamp(100px,12vw,180px) var(--pad)}
.infra-layers>h2{font-size:clamp(40px,5.6vw,96px);margin:46px 0 70px;line-height:1.02;letter-spacing:-.03em}
.layer-pair{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid var(--line);padding-top:54px}
.layer-pair article{min-width:0}
.layer-pair b{font:500 10px "DM Mono",ui-monospace,monospace;letter-spacing:.09em;color:#77776f}
.layer-pair h3{font:500 clamp(26px,2.9vw,44px)/1.05 Manrope,Arial,sans-serif;letter-spacing:-.028em;margin:20px 0 26px}
.layer-pair p{font-size:16px;line-height:1.72;color:var(--muted);max-width:560px}
.layer-pair .mono-list{font:10px/2 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;color:#8a8a83;margin-top:26px}
.layer-close{max-width:900px;margin-top:70px;font-size:clamp(17px,1.7vw,22px);line-height:1.6}
.layer-close em{font-style:normal;font-weight:500;color:var(--ink)}

/* stack */
.infra-stack{padding:clamp(100px,12vw,180px) var(--pad)}
.infra-stack>h2{font-size:clamp(52px,8vw,140px);margin:44px 0 30px;letter-spacing:-.04em}
.stack-lede{max-width:820px;font-size:clamp(16px,1.5vw,20px);line-height:1.65;color:#a5a5a0;margin-bottom:60px}
.stack-rows{border-top:1px solid #33332f}
.stack-rows article{display:grid;grid-template-columns:90px 1fr 1.5fr;gap:34px;align-items:baseline;
  padding:34px 0;border-bottom:1px solid #33332f}
.stack-rows b{font:500 11px "DM Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--green)}
.stack-rows h3{font:500 clamp(24px,3.1vw,50px)/1 Manrope,Arial,sans-serif;letter-spacing:-.03em;color:#fff}
.stack-rows p{font-size:15px;line-height:1.7;color:#a5a5a0;max-width:620px}

/* systems grid */
.infra-systems{padding:clamp(100px,12vw,180px) var(--pad)}
.infra-systems>h2{font-size:clamp(40px,5.6vw,96px);margin:46px 0 66px;line-height:1.02;letter-spacing:-.03em}
.sys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sys-grid a{display:block;padding:30px 26px 34px;text-decoration:none;color:inherit;min-width:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s ease,color .25s ease}
.sys-grid a:hover,.sys-grid a:focus-visible{background:var(--ink);color:#fff}
.sys-grid b{font:500 10px "DM Mono",ui-monospace,monospace;letter-spacing:.08em;color:#77776f}
.sys-grid a:hover b{color:var(--green)}
.sys-grid h3{font:500 clamp(19px,1.7vw,25px)/1.15 Manrope,Arial,sans-serif;letter-spacing:-.02em;margin:18px 0 12px;color:inherit}
.sys-grid span{display:block;font-size:14px;line-height:1.55;color:var(--muted)}
.sys-grid a:hover span{color:#b4b4ae}

/* deployment */
.infra-deploy{padding:clamp(100px,12vw,180px) var(--pad)}
.infra-deploy>h2{font-size:clamp(52px,8vw,140px);margin:44px 0 60px;letter-spacing:-.04em}
.deploy-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.deploy-rows li{display:grid;grid-template-columns:80px 1fr 1.6fr;gap:34px;align-items:baseline;
  padding:34px 0;border-bottom:1px solid var(--line)}
.deploy-rows b{font:500 11px "DM Mono",ui-monospace,monospace;letter-spacing:.08em;color:#77776f}
.deploy-rows h3{font:500 clamp(22px,2.6vw,40px)/1 Manrope,Arial,sans-serif;letter-spacing:-.03em}
.deploy-rows p{font-size:15px;line-height:1.7;color:var(--muted);max-width:620px}

@media(max-width:1000px){
  .layer-pair{grid-template-columns:1fr;gap:50px}
}
@media(max-width:800px){
  .infra-hero{min-height:auto;padding-top:60px}
  /* the base clamp bottoms out at 44px, which is wider than a phone can fit
     for a word like INFRASTRUCTURE, so it was breaking mid-word */
  .infra-hero h1{font-size:clamp(28px,8.2vw,54px)}
  .infra-hero-bottom{grid-template-columns:1fr;gap:28px;align-items:start}
  .infra-hero-bottom .button{justify-self:start}
  .infra-layers>h2,.infra-systems>h2{font-size:clamp(34px,8.4vw,54px);margin:34px 0 46px}
  .infra-stack>h2,.infra-deploy>h2{font-size:clamp(44px,12vw,78px)}
  .stack-rows article,.deploy-rows li{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .stack-rows p,.deploy-rows p{max-width:none}
  .layer-close{margin-top:50px}
}

/* ===== MOTION =====================================================
   Every rule is scoped to .motion, which motion.js adds to <html>
   only when JS runs and the visitor has not asked for reduced motion.
   Without it the page is fully visible and static. */

:root{--ease:cubic-bezier(.16,1,.3,1);--dur:.85s}

/* masked line reveal for display headlines */
.motion .ln{display:block;overflow:hidden}
.motion .ln-i{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.motion [data-lines].in .ln-i{transform:none}

/* generic rise-and-fade */
.motion .rv{opacity:0;transform:translateY(26px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.motion .rv.in{opacity:1;transform:none}
.motion [data-lines].rv{opacity:1;transform:none}

/* hairline rules draw in with the row they belong to */
.motion .stack-rows article,.motion .deploy-rows li{position:relative}
.motion .stack-rows article::after,.motion .deploy-rows li::after{content:"";position:absolute;
  left:0;right:0;bottom:-1px;height:1px;background:currentColor;opacity:.28;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .1s}
.motion .stack-rows article.in::after,.motion .deploy-rows li.in::after{transform:scaleX(1)}

/* scroll progress rail */
.scroll-rail{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;pointer-events:none}
.scroll-rail i{display:block;height:100%;background:var(--green);
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* stack: the layer nearest the middle of the viewport lights up.
   Dimming is done with colour, not opacity, so it does not collide with
   the reveal transition (.rv.in sets opacity:1 at higher specificity). */
@media(min-width:900px){
  .motion .stack-rows article h3,
  .motion .stack-rows article b,
  .motion .stack-rows article p{transition:color .55s var(--ease)}
  .motion .stack-rows article h3{color:#46463f}
  .motion .stack-rows article b{color:#46463f}
  .motion .stack-rows article p{color:#55554e}
  .motion .stack-rows article.active h3{color:#fff}
  .motion .stack-rows article.active b{color:var(--green)}
  .motion .stack-rows article.active p{color:#a5a5a0}
}

/* industry marquee */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:26px 0;
  border-top:1px solid #33332f;border-bottom:1px solid #33332f;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content}
.marquee-track > div{display:flex;flex:0 0 auto;gap:52px;padding-right:52px;
  font:500 12px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.14em;color:#6f6f68;white-space:nowrap}
.marquee-track span{display:inline-block}
.motion .marquee-track{animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* hero gets a slow settle rather than a pop */
.motion .infra-hero h1 .ln-i{transition-duration:1.15s}

@media(prefers-reduced-motion:reduce){
  .motion .rv,.motion .ln-i{opacity:1!important;transform:none!important;transition:none!important}
  .motion .marquee-track{animation:none}
  .scroll-rail{display:none}
}

/* the owner-as-machine argument */
.owner-machine{padding:clamp(100px,12vw,180px) var(--pad)}
.owner-machine>h2{font-size:clamp(44px,6.4vw,110px);margin:44px 0 60px;line-height:1.02;letter-spacing:-.035em}
.om-body{display:grid;grid-template-columns:1fr 1fr;gap:60px;border-top:1px solid #33332f;padding-top:54px}
.om-body>p{min-width:0;font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:#a5a5a0;max-width:560px}
.om-close{max-width:900px;margin-top:66px;font:500 clamp(20px,2.4vw,34px)/1.35 Manrope,Arial,sans-serif;
  letter-spacing:-.02em;color:#fff}
.om-close em{font-style:normal;color:var(--green)}
@media(max-width:800px){
  .owner-machine>h2{font-size:clamp(36px,9vw,58px);margin:34px 0 44px}
  .om-body{grid-template-columns:1fr;gap:26px;padding-top:36px}
  .om-body>p{max-width:none}
  .om-close{margin-top:48px}
}

/* federal: illustrative opportunity-match card */
.match-card{border:1px solid var(--line);padding:clamp(28px,3vw,44px);max-width:900px}
.match-flag{font:500 9px/1.6 "DM Mono",ui-monospace,monospace;letter-spacing:.12em;color:#8a5a00;
  background:#f5e6c8;display:inline-block;padding:6px 10px;margin:0 0 30px}
.match-head{display:flex;align-items:baseline;gap:18px;border-bottom:1px solid var(--line);padding-bottom:22px}
.match-head span{font:500 10px "DM Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--muted)}
.match-head b{font:500 clamp(40px,5vw,72px)/1 Manrope,Arial,sans-serif;letter-spacing:-.04em;margin-left:auto}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0}
.match-grid>div{padding:20px 0;border-bottom:1px solid var(--line);min-width:0}
.match-grid>div:nth-child(odd){padding-right:30px}
.match-wide{grid-column:1/-1}
.match-grid dt{font:500 10px "DM Mono",ui-monospace,monospace;letter-spacing:.09em;color:var(--muted);margin-bottom:8px}
.match-grid dd{margin:0;font-size:16px;line-height:1.55}
.match-rec{margin:26px 0 0;font:500 13px "DM Mono",ui-monospace,monospace;letter-spacing:.09em}
.match-rec em{font-style:normal;background:var(--ink);color:var(--green);padding:5px 12px;margin-left:6px}
@media(max-width:700px){.match-grid{grid-template-columns:1fr}.match-grid>div:nth-child(odd){padding-right:0}}

/* ===== PRICING ===== */
.price-detail{padding:clamp(100px,12vw,180px) var(--pad)}
.price-detail>h2{font-size:clamp(40px,5.6vw,96px);margin:46px 0 20px;line-height:1.02;letter-spacing:-.03em}
.price-detail>.price-lede{font-size:clamp(16px,1.5vw,19px);line-height:1.65;color:var(--muted);max-width:760px;margin:0 0 clamp(50px,6vw,84px)}
.price-group{font:500 11px "DM Mono",ui-monospace,monospace;letter-spacing:.09em;color:var(--muted);
  margin:clamp(46px,5vw,72px) 0 20px;text-transform:uppercase}
.price-group:first-of-type{margin-top:0}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.price-grid article{padding:30px 26px 34px;min-width:0;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-grid b{display:block;font:500 10px "DM Mono",ui-monospace,monospace;letter-spacing:.08em;color:#77776f}
.price-grid h3{font:500 clamp(18px,1.6vw,24px)/1.18 Manrope,Arial,sans-serif;letter-spacing:-.025em;margin:16px 0 12px;
  overflow-wrap:break-word}
.price-grid .price{font:500 clamp(20px,2vw,28px)/1.1 Manrope,Arial,sans-serif;letter-spacing:-.03em;
  margin:0 0 16px;color:var(--ink)}
.price-grid p{font-size:14px;line-height:1.62;color:var(--muted);margin:0}
.section-dark .price-grid{border-top-color:#33332f;border-left-color:#33332f}
.section-dark .price-grid article{border-right-color:#33332f;border-bottom-color:#33332f}
.section-dark .price-grid .price{color:var(--green)}
.section-dark .price-grid p{color:#a5a5a0}
.price-note{max-width:860px;margin-top:clamp(50px,6vw,80px);font-size:15px;line-height:1.7;color:var(--muted);
  border-top:1px solid var(--line);padding-top:30px}
.price-note em{font-style:normal;font-weight:500;color:var(--ink)}
.section-dark .price-note{border-top-color:#33332f;color:#a5a5a0}
.section-dark .price-note em{color:var(--green)}
.price-grid .pick{font:10px/1.95 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;color:#8a8a83;
  margin:16px 0 0;border-top:1px solid var(--line);padding-top:14px}
.section-dark .price-grid .pick{border-top-color:#33332f}
.price-grid .price small{font:500 11px "DM Mono",ui-monospace,monospace;letter-spacing:.07em;color:var(--muted);
  display:block;margin-top:8px;letter-spacing:.07em}
.section-dark .price-grid .price small{color:#8a8a83}

/* entry points — the reassurance block */
.price-entry{padding:clamp(100px,12vw,180px) var(--pad)}
.price-entry>h2{font-size:clamp(40px,5.6vw,96px);margin:46px 0 24px;line-height:1.02;letter-spacing:-.03em}
.price-entry>p{max-width:820px;font-size:clamp(16px,1.5vw,20px);line-height:1.65;color:#a5a5a0;
  margin:0 0 clamp(50px,6vw,80px)}

@media(max-width:800px){
  .price-entry>h2{font-size:clamp(34px,8.4vw,54px);margin:34px 0 20px}
}

@media(min-width:1100px){.price-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.price-grid.four-up{grid-template-columns:repeat(4,1fr)}}
@media(max-width:800px){
  .price-detail>h2{font-size:clamp(34px,8.4vw,54px);margin:34px 0 18px}
}