/* edge AI site, 2026-09-30.
   Layout: apple.com logic. Each section is one event: a short bold line, one action, one big object.
   White, soft grey and black grounds alternate. Single deliberate light look (brand guide: white page, black type, one soft grey, no accent). */
:root{
  --white:#FFFFFF; --mist:#F5F5F7; --ink:#1D1D1F; --black:#000000;
  --grey:#6E6E6E; --hair:#D2D2D7; --onblack:#F5F5F7; --greyblack:#8E8E93; --panel:#1C1C1E; --line:#E5E5E2;
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mark:"DM Sans","Inter",system-ui,sans-serif;
  /* Sizing system, researched 2026-09-30:
     - Type: Apple.com's own scale (17 body, 21 tagline, 28 lead, 40 / 56 display, 80 hero), a ~1.4 step between sizes.
       Tuned for a 1920px-wide window (the most common desktop, StatCounter Aug 2026) and scaled with the window,
       so a 1366px laptop and a 2560px monitor see the same proportions.
     - Spacing: the 8-point grid (Material, Carbon, Atlassian): every gap is a multiple of 8.
     - Width: content spans 75% of the window (1440px at 1920), never less than 1200px unless the screen is smaller.
     - Reading: body lines under 75 characters (Bringhurst 45 to 75), line height 1.47 like Apple. */
  --t-hero:clamp(40px,4.17vw,106px);   /* 80 at 1920 */
  --t-h2:clamp(32px,2.92vw,75px);      /* 56 */
  --t-h3:clamp(28px,2.08vw,53px);      /* 40 */
  --t-lead:clamp(19px,1.46vw,37px);    /* 28 */
  --t-tag:clamp(17px,1.1vw,28px);      /* 21 */
  --t-body:clamp(16px,.89vw,22px);     /* 17 */
  --t-small:clamp(13px,.73vw,18px);    /* 14 */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;
  --s-sec:clamp(80px,6.67vw,170px);    /* 128 between sections at 1920 */
  --gut:clamp(20px,5vw,80px);
  --pad:max(var(--gut), calc((100% - max(1200px, 75vw)) / 2)); /* side padding that leaves a 75%-wide content column */
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--white)}
body{background:var(--white);color:var(--ink);font:400 var(--t-body)/1.47 var(--sans);letter-spacing:-.01em;margin:0;-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance}

/* wordmark: lowercase edge, thin divider, suffix */
.wm{font-family:var(--mark);display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.wm b{font-weight:700;letter-spacing:-.035em}
.wm i{width:1px;height:.95em;background:currentColor;opacity:.3}
.wm span{font-weight:600}

/* sticky nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;height:56px;display:flex;align-items:center;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08);padding-inline:var(--pad)} /* the bar lines up with the content column below it */
.nav .in{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px}
.nav .wm{font-size:clamp(20px,1.15vw,28px)}
.nav .right{display:flex;align-items:center;gap:var(--s4);font-size:var(--t-small)}
.nav .right a{text-decoration:none;color:#333}
.nav .right a[aria-current="page"]{color:var(--ink);font-weight:600}

.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:980px;background:var(--ink);color:var(--white)!important;text-decoration:none;font:500 var(--t-body) var(--sans);padding:.65em 1.3em;border:0;cursor:pointer;transition:background .2s}
.pill:hover{background:#3A3A3C}
.pill.sm{font-size:var(--t-small);padding:.35em .95em}
.pill.md{font-size:var(--t-small);padding:.6em 1.15em}
.pill.light{background:var(--white);color:var(--ink)!important}
.pill.light:hover{background:#E8E8ED}
.more{text-decoration:none;font-size:var(--t-body)}
.more::after{content:" \203A"}
.more:hover{text-decoration:underline}
a:focus-visible,.pill:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.dark a:focus-visible,.dk a:focus-visible{outline-color:var(--onblack)}
.ctas{display:flex;gap:var(--s4);justify-content:center;align-items:center;margin-top:var(--s4);flex-wrap:wrap}

/* section scaffolding */
.sec{padding:var(--s-sec) var(--pad);text-align:center}
.kicker{font-size:var(--t-tag);font-weight:600;color:var(--grey);letter-spacing:-.01em}
.sec h2{font-size:var(--t-h2);line-height:1.07;letter-spacing:-.03em;font-weight:700;margin-top:var(--s1)}
.lead{font-size:var(--t-lead);color:var(--grey);max-width:36ch;margin:var(--s3) auto 0;line-height:1.29;letter-spacing:-.01em}
.mist{background:var(--mist)}
.dark{background:var(--black);color:var(--onblack)}
.dark .kicker,.dark .lead{color:var(--greyblack)}

footer{background:var(--mist);color:var(--grey);font-size:var(--t-small);padding:var(--s6) var(--pad) calc(var(--s6) + env(safe-area-inset-bottom,0px))}
footer .in{display:grid;gap:22px}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-bottom:1px solid var(--hair);padding-bottom:22px}
footer h6{margin:0 0 var(--s1);font-size:var(--t-small);color:var(--ink);font-weight:600}
footer .cols div{display:grid;gap:8px;align-content:start}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}

/* reveal: content is visible at rest; JS only lifts things that start below the fold */
.rise{transition:transform .9s cubic-bezier(.2,0,0,1),opacity .9s ease}
.rise.pre{transform:translateY(36px);opacity:.001}

/* phone menu: a two-line button that drops the page links down under the bar (site.js adds it) */
.nav .menu,.nav .sheet{display:none}
@media (max-width:760px){
  .nav .right{gap:var(--s2)}
  .nav .right > a:not(.pill),.nav .right > .cur{display:none}
  .nav .menu{all:unset;box-sizing:border-box;cursor:pointer;width:40px;height:40px;margin-right:-10px;display:grid;place-content:center;gap:6px;border-radius:50%;color:var(--ink)}
  .nav .menu i{display:block;width:18px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .35s cubic-bezier(.2,0,0,1)}
  .nav.open .menu i:first-child{transform:translateY(3.75px) rotate(45deg)}
  .nav.open .menu i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .nav .sheet{display:grid;position:absolute;top:100%;left:0;right:0;padding:var(--s1) var(--pad) var(--s3);background:var(--white);border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 24px 40px -24px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s cubic-bezier(.2,0,0,1),visibility 0s .35s}
  .nav.open .sheet{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s cubic-bezier(.2,0,0,1)}
  .nav .sheet a,.nav .sheet span{font:600 24px/1.2 var(--sans);letter-spacing:-.02em;padding:12px 0;text-decoration:none;color:var(--ink)}
  .nav .sheet .cur{color:var(--grey)}
  html[data-mode="dark"] .nav .menu,html[data-mode="dark"] .nav .sheet a{color:#F7F8F8}
  html[data-mode="dark"] .nav .sheet{background:#08090A;border-bottom-color:rgba(255,255,255,.08)}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.rise.pre{transform:none;opacity:1}}