/* Site system: one width, one rhythm, one type scale, one section header, one device.
   Loaded after every section stylesheet so it wins ties. Sections use these tokens instead of their own sizes. */
:root{
 --ns-max:1320px;
 --ns-gutter:clamp(20px,4vw,56px);
 --ns-section:clamp(96px,11vw,168px);
 --ns-h1:clamp(56px,7vw,112px);
 --ns-h2:clamp(44px,5vw,80px);
 --ns-lead:clamp(16px,1.2vw,19px);
 --ns-body:16px;
 --ns-small:13px;
 --ns-kicker:11px;
 --ns-radius:24px;
 --ns-radius-sm:14px;
 --ns-line:rgba(244,239,231,.12);
 --ns-ink:var(--ink,#F4EFE7);
 --ns-mid:var(--ink-mid,#A8A196);
 --ns-dim:rgba(244,239,231,.45);
 --ns-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
 --ns-ease:cubic-bezier(.2,.7,.15,1);
 /* Campaign orange from the launch films: event posters and one-word accents only. */
 --ns-flare:#E6360A;
 --ns-flare-deep:#3A0D03;
}

/* Layout */
.ns-wrap{width:min(var(--ns-max),calc(100% - var(--ns-gutter)*2));margin-inline:auto}

/* Section header: kicker → headline → lead. */
.ns-head{display:flex;flex-direction:column;gap:20px}
.ns-kicker{display:flex;align-items:center;gap:14px;margin:0;font:500 var(--ns-kicker)/1 var(--body),sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--ns-dim)}
.ns-kicker b{font-weight:700;color:var(--ns-ink)}
.ns-kicker:before{content:'';width:28px;height:1px;background:currentColor;opacity:.6}
.ns-h2{margin:0;font:400 var(--ns-h2)/.92 Anton,var(--display),sans-serif;letter-spacing:.005em;text-transform:uppercase;color:var(--ns-ink);text-wrap:balance}
.ns-lead{margin:0;max-width:40ch;font-size:var(--ns-lead);line-height:1.55;font-weight:500;color:var(--ns-mid)}

/* Every section headline shares one size and leading (Aura's backdrop word is the one deliberate exception). */
#possibilities h2,#features h2,#communities h2,.film h2,#download h2,#aura .am-quote h3{font-size:var(--ns-h2);line-height:.92;letter-spacing:.005em}

/* Realistic phone. Markup:
   <div class="ns-device" style="--w:300px"><i class="ns-btn ns-btn--action"></i><i class="ns-btn ns-btn--up"></i><i class="ns-btn ns-btn--down"></i><i class="ns-btn ns-btn--power"></i><div class="ns-screen"><img …></div></div>
   Proportions follow a 6.1" device: 71.5 × 147.6 mm body, ~2.2 mm bezel. */
.ns-device{--w:300px;position:relative;width:var(--w);aspect-ratio:71.5/147.6;padding:calc(var(--w)*.032);border-radius:calc(var(--w)*.17);
 background:linear-gradient(145deg,#4a4b4f 0%,#26272a 18%,#161719 50%,#2b2c2f 82%,#55565a 100%);
 box-shadow:inset 0 0 0 calc(var(--w)*.004) rgba(255,255,255,.28),inset 0 0 0 calc(var(--w)*.012) #0d0d0f,0 1px 0 rgba(255,255,255,.06),var(--ns-shadow);
 isolation:isolate}
.ns-device:before{content:'';position:absolute;inset:calc(var(--w)*.012);border-radius:calc(var(--w)*.16);background:#050506;z-index:-1}
.ns-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--w)*.135);overflow:hidden;background:#000}
.ns-screen>img,.ns-screen>video{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
/* Dynamic Island */
.ns-screen:before{content:'';position:absolute;z-index:3;top:calc(var(--w)*.03);left:50%;width:calc(var(--w)*.3);height:calc(var(--w)*.085);transform:translateX(-50%);border-radius:999px;background:#000}
/* Glass */
.ns-screen:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.03) 28%,transparent 42%)}
.ns-btn{position:absolute;width:calc(var(--w)*.012);border-radius:2px;background:linear-gradient(90deg,#1c1d1f,#5a5b5f 60%,#2a2b2e)}
.ns-btn--action{left:calc(var(--w)*-.009);top:17%;height:5%}
.ns-btn--up{left:calc(var(--w)*-.009);top:25%;height:8.5%}
.ns-btn--down{left:calc(var(--w)*-.009);top:35.5%;height:8.5%}
.ns-btn--power{right:calc(var(--w)*-.009);top:27%;height:12%}

/* Buttons share one shape everywhere. */
.btn,.ns-btn-cta{border-radius:999px;font-weight:700;letter-spacing:.01em}

/* Header shares the page column so the logo lines up with the content and footer. */
@media(min-width:901px){.site-header .header-inner{width:min(var(--ns-max),calc(100% - var(--ns-gutter)*2))}}