@font-face {
  font-family: 'Nunchi Grotesk';
  src: url('/assets/fonts/general-sans-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root { --gutter: 4.2vw; }
body { font-family: Arial, Helvetica, sans-serif; }
.topbar { padding: 25px var(--gutter); }
.home-page .topbar { background: var(--blue); }
.wordmark { font-size: 18px; letter-spacing: .09em; gap: 10px; }
.wordmark img { width: 34px; height: 34px; }
.navigation { display:flex; align-items:center; gap:30px; font-size:13px; }
.footer { min-height:44px; padding-block:15px; font-size:11px; }
.footer-links { display:flex; align-items:center; gap:24px; margin-left:auto; white-space:nowrap; }
.home-page .footer-links { margin-left:auto; }

/* The headline is a composition, never auto-shrunk to fit a narrow column. */
h1, h2, #command h2, #control h2, #charge h2 {
  font-family: 'Nunchi Grotesk', Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -.04em;
  line-height: .94;
}
:is(#home,[data-loop-copy]) { display:block; }
:is(#home,[data-loop-copy]) .headline { position:absolute; left:var(--gutter); right:44%; top:48%; translate:0 -50%; padding:0; }
:is(#home,[data-loop-copy]) h1 { font-size:clamp(76px,9.7vw,180px); }
:is(#home,[data-loop-copy]) h1 span { white-space:nowrap; }
.on-your-terms {
  font-family:'Nunchi Grotesk',Helvetica,Arial,sans-serif;
  font-style:normal;
  font-weight:600;
  font-size:clamp(24px,2.3vw,36px);
  line-height:1.2;
  letter-spacing:-.035em;
  margin-top:34px;
}
:is(#home,[data-loop-copy]) .hero-art { position:absolute; inset:-9% -7% -9% 47%; width:auto; height:auto; }
:is(#home,[data-loop-copy]) .hero-art img {
  width:auto;
  height:100%;
  max-width:none;
  mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 14%,#000 82%,transparent 100%);
  mask-composite:intersect;
}
.contact-inline { margin-top:30px; min-height:96px; max-width:330px; }
.contact-cta { display:flex; align-items:center; justify-content:space-between; gap:38px; padding:13px 0; border:0; border-bottom:1px solid #f0f4d978; font-size:14px; }
.contact-cta:hover { background:transparent; color:var(--paper); border-bottom-color:var(--paper); }
.feature .headline { inset:auto var(--gutter) 4%; text-align:left; }
#command h2, #control h2, #charge h2 { font-size:clamp(65px,min(16vw,24dvh),260px); letter-spacing:-.06em; line-height:.92; }
.feature .hero-art, #control .hero-art, #charge .hero-art { inset:-10% -4% 2% 10%; }

/* Blend the landscape photograph at its actual edges, including on portrait screens. */
#control .hero-art img {
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 85%,transparent);
  mask-composite:intersect;
}

.sdk-page .screen { grid-template-columns:1fr 1fr; min-height:500px; }
.sdk-page #sdk .art { position:absolute; inset:-8% -6% -5% 48%; }
.sdk-page .hero-copy { position:relative; grid-column:1 / -1; padding:0; margin-left:var(--gutter); width:60%; z-index:1; }
.sdk-page h1 { font-size:clamp(76px,9.4vw,176px); }
.sdk-page h1 span { white-space:nowrap; }
.sdk-page .intro { font-size:clamp(20px,1.75vw,28px); line-height:1.35; letter-spacing:-.025em; margin-top:34px; }
.sdk-page .art img { mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000 83%,transparent); }
.sdk-page .section-heading { padding:0 8.4%; }
.sdk-page .quote-screen .section-heading h2 { font-size:clamp(60px,7.6vw,132px); }
.sdk-page .cto-statement { padding:28px 10% 28px 4%; }
.sdk-page .cto-statement blockquote { font-family:'Nunchi Grotesk',Helvetica,Arial,sans-serif; font-weight:600; font-size:clamp(30px,3.1vw,48px); line-height:1.14; letter-spacing:-.04em; }
.sdk-page .cto-statement figcaption { font-size:16px; gap:5px; margin-top:28px; }
.sdk-page .cto-statement .author { font-size:18px; }
.sdk-page .quote-draft { font-size:13px; }
.sdk-page .network-copy { padding:0 8.4% 0 0; }
.sdk-page .network-copy h2 { font-size:clamp(50px,5.7vw,108px); line-height:1.02; }
.sdk-page .network-priorities { font-size:clamp(20px,1.65vw,27px); margin-top:28px; line-height:1.4; }
.sdk-page .primary-link { background:transparent; color:var(--paper); padding:14px 0; border:0; border-bottom:1px solid #f0f4d978; font-size:16px; }
.sdk-page .primary-link:hover { border-bottom-color:var(--paper); }
.sdk-page .network-copy .release-line { font-size:13px; margin-top:16px; }

/* Portrait windows use the upper field for type and the lower field for art. */
@media (max-aspect-ratio: 1/1) {
  :is(#home,[data-loop-copy]) { display:block; min-height:610px; }
  :is(#home,[data-loop-copy]) .headline { position:absolute; top:5%; left:var(--gutter); right:var(--gutter); translate:none; }
  :is(#home,[data-loop-copy]) h1, .sdk-page h1 { font-size:clamp(68px,13.5vw,150px); }
  .on-your-terms { margin-top:24px; font-size:clamp(24px,3.7vw,34px); }
  :is(#home,[data-loop-copy]) .hero-art { position:absolute; inset:26% -8% -8% 18%; width:auto; height:auto; }
  .contact-inline { margin-top:18px; }
  .sdk-page #sdk { display:block; min-height:610px; }
  .sdk-page .hero-copy { position:absolute; top:5%; margin:0; left:var(--gutter); width:91.6%; }
  .sdk-page #sdk .art { inset:32% -7% -7% 25%; }
  .sdk-page .intro { margin-top:28px; font-size:24px; }
  .sdk-page .network-screen { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .sdk-page .network-screen .art { min-height:0; }
  .sdk-page .network-copy { padding:0 var(--gutter) 30px; }
  .sdk-page .network-copy h2 { font-size:clamp(48px,8vw,86px); }
  .sdk-page .network-priorities { max-width:520px; font-size:21px; margin-top:20px; }
}

@media (max-width:650px) {
  :root { --gutter:24px; }
  .topbar { padding:18px var(--gutter); }
  .wordmark { font-size:16px; gap:8px; }
  .wordmark img { width:30px; height:30px; }
  .navigation { gap:20px; font-size:12px; }
  .navigation .sdk-link { display:inline; }
  :is(#home,[data-loop-copy]) { min-height:510px; }
  :is(#home,[data-loop-copy]) .headline { top:4%; }
  :is(#home,[data-loop-copy]) h1, .sdk-page h1 { font-size:clamp(54px,13.8vw,88px); }
  :is(#home,[data-loop-copy]) .hero-art { inset:34% -17% -7% 5%; }
  .on-your-terms { margin-top:18px; font-size:23px; }
  .contact-inline { margin-top:12px; min-height:88px; max-width:300px; }
  .contact-cta { font-size:13px; padding-block:10px; }
  .feature .headline { inset:auto 24px 5%; }
  #command h2, #control h2, #charge h2 { font-size:16vw; }
  .feature .hero-art, #control .hero-art, #charge .hero-art { inset:-4% -12% 7%; }
  #control .hero-art { inset:-4% -28% 7%; }
  .sdk-page #sdk { min-height:510px; }
  .sdk-page .hero-copy { top:4%; width:calc(100% - 48px); }
  .sdk-page #sdk .art { inset:35% -15% -5% 14%; }
  .sdk-page .intro { font-size:19px; margin-top:23px; }
  .sdk-page .quote-screen { grid-template-columns:1fr; grid-template-rows:auto auto; padding:24px; min-height:560px; gap:30px; }
  .sdk-page .section-heading, .sdk-page .cto-statement { padding:0; }
  .sdk-page .quote-screen .section-heading h2 { font-size:clamp(48px,12vw,70px); }
  .sdk-page .cto-statement blockquote { font-size:27px; }
  .sdk-page .network-screen { min-height:650px; }
  .sdk-page .network-copy h2 { font-size:clamp(40px,10.5vw,64px); }
  .sdk-page .network-priorities { font-size:18px; line-height:1.35; margin-top:18px; }
  .sdk-page .network-copy .primary-link { margin-top:18px; }
  .footer { margin-inline:24px; font-size:10px; }
  .footer-links { gap:15px; }
}

/* The wrap is a position reset between visually identical openings. */
.is-loop-reset .campaign .hero-art, .is-loop-reset .campaign .headline { transition:none; }