/* Apple design system — local SF Pro stack */
:root{
  --primary:#0066cc; --primary-focus:#0071e3; --primary-on-dark:#2997ff;
  --ink:#1d1d1f; --body:#1d1d1f; --on-dark:#fff; --body-muted:#cccccc;
  --ink-80:#333; --ink-48:#7a7a7a;
  --divider:#f0f0f0; --hairline:#e0e0e0;
  --canvas:#fff; --parchment:#f5f5f7; --pearl:#fafafc;
  --tile-1:#272729; --tile-2:#2a2a2c; --tile-3:#252527; --black:#000;
  --chip-translucent:rgba(210,210,215,.64);

  --shadow-product: rgba(0,0,0,.22) 3px 5px 30px 0;

  --r-xs:5px; --r-sm:8px; --r-md:11px; --r-lg:18px; --r-pill:9999px;

  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:17px; --s-lg:24px;
  --s-xl:32px; --s-xxl:48px; --s-section:80px;

  --font-display:"SF Pro Display","SF Pro","-apple-system",system-ui,"Segoe UI",sans-serif;
  --font-text:"SF Pro Text","SF Pro","-apple-system",system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--canvas);color:var(--ink);font-family:var(--font-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:17px;line-height:1.47;letter-spacing:-0.374px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* type */
.t-hero{font-family:var(--font-display);font-size:56px;font-weight:600;line-height:1.07;letter-spacing:-0.5px}
.t-display-lg{font-family:var(--font-display);font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-0.4px}
.t-display-md{font-family:var(--font-text);font-size:34px;font-weight:600;line-height:1.2;letter-spacing:-0.374px}
.t-lead{font-family:var(--font-display);font-size:28px;font-weight:400;line-height:1.18;letter-spacing:0.196px}
.t-lead-airy{font-family:var(--font-text);font-size:24px;font-weight:300;line-height:1.5}
.t-tagline{font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.19;letter-spacing:0.231px}
.t-body-strong{font-size:17px;font-weight:600;line-height:1.24;letter-spacing:-0.374px}
.t-body{font-size:17px;font-weight:400;line-height:1.47;letter-spacing:-0.374px}
.t-caption{font-size:14px;font-weight:400;line-height:1.43;letter-spacing:-0.224px}
.t-caption-strong{font-size:14px;font-weight:600;line-height:1.29;letter-spacing:-0.224px}
.t-fine{font-size:12px;font-weight:400;letter-spacing:-0.12px}
.t-micro{font-size:10px;font-weight:400;letter-spacing:-0.08px;line-height:1.3}

.muted{color:var(--ink-48)}
.muted-80{color:var(--ink-80)}
.on-dark .muted{color:var(--body-muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-text);transition:transform .15s ease,background .15s ease;white-space:nowrap}
.btn:active{transform:scale(.95)}
.btn-pill{background:var(--primary);color:#fff;font-size:17px;letter-spacing:-0.374px;border-radius:var(--r-pill);padding:11px 22px}
.btn-pill:hover{background:#0077e6;text-decoration:none}
.btn-pill-ghost{background:transparent;color:var(--primary);border:1px solid var(--primary);border-radius:var(--r-pill);padding:10px 21px;font-size:17px;letter-spacing:-0.374px}
.btn-dark-utility{background:var(--ink);color:#fff;font-size:14px;letter-spacing:-0.224px;border-radius:var(--r-sm);padding:8px 15px}
.btn-store-hero{background:var(--primary);color:#fff;font-family:var(--font-text);font-size:18px;font-weight:300;border-radius:var(--r-pill);padding:14px 28px}
.btn-pearl{background:var(--pearl);color:var(--ink-80);border:1px solid rgba(0,0,0,.06);border-radius:var(--r-md);padding:8px 14px;font-size:14px}
.btn-icon{width:36px;height:36px;border-radius:50%;background:var(--chip-translucent);display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.link{color:var(--primary)}
.link-arrow::after{content:" ›"}
.link-on-dark{color:var(--primary-on-dark)}

/* nav */
.global-nav{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.92);backdrop-filter:saturate(180%) blur(20px);color:#fff;height:44px;display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:-0.12px}
.global-nav .inner{width:100%;max-width:1024px;display:flex;align-items:center;gap:32px;padding:0 22px}
.global-nav a{color:rgba(255,255,255,.88);font-size:12px}
.global-nav a:hover{color:#fff;text-decoration:none}
.global-nav .logo{font-weight:500;letter-spacing:.02em}
.global-nav .spacer{flex:1}

.sub-nav{position:sticky;top:44px;z-index:40;background:rgba(245,245,247,.85);backdrop-filter:saturate(180%) blur(20px);height:52px;display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.06)}
.sub-nav .inner{width:100%;max-width:1024px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:24px}
.sub-nav .brand{font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:0.231px}
.sub-nav .links{display:flex;gap:24px;flex:1;justify-content:flex-end}
.sub-nav .links a{font-size:14px;color:var(--ink);letter-spacing:-0.224px}
.sub-nav .links a.active{color:var(--ink);font-weight:600}

/* tiles */
.tile{padding:80px 22px;text-align:center}
.tile-light{background:var(--canvas);color:var(--ink)}
.tile-parchment{background:var(--parchment);color:var(--ink)}
.tile-dark{background:var(--tile-1);color:#fff}
.tile-dark-2{background:var(--tile-2);color:#fff}
.tile-dark-3{background:var(--tile-3);color:#fff}
.tile h1.headline,.tile .headline{font-family:var(--font-display);font-weight:600;font-size:56px;letter-spacing:-0.5px;line-height:1.07;margin:0 0 12px}
.tile .tagline{font-family:var(--font-display);font-size:28px;font-weight:400;line-height:1.18;margin:0 0 24px;color:var(--ink-80)}
.tile-dark .tagline{color:var(--body-muted)}
.tile .ctas{display:flex;gap:24px;justify-content:center;margin-top:8px}

/* cards */
.card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:24px}
.card-flat{background:var(--canvas);border-radius:var(--r-lg);padding:24px}

/* footer */
.footer{background:var(--parchment);color:var(--ink-80);padding:40px 22px 22px}
.footer .inner{max-width:980px;margin:0 auto}
.footer .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;padding:24px 0;border-bottom:1px solid var(--hairline)}
.footer h6{font-size:12px;font-weight:600;letter-spacing:-0.12px;margin:0 0 12px;color:var(--ink)}
.footer ul{list-style:none;padding:0;margin:0}
.footer ul li{font-size:12px;line-height:2.2;color:var(--ink-80)}
.footer ul li a{color:var(--ink-80)}
.footer .legal{padding:16px 0;font-size:12px;color:var(--ink-48);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* placeholder image */
.ph{background:
  repeating-linear-gradient(135deg,rgba(0,0,0,.03) 0 8px,rgba(0,0,0,.06) 8px 16px),
  var(--parchment);
  display:flex;align-items:center;justify-content:center;color:var(--ink-48);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:-.02em;border-radius:var(--r-sm)}
.ph-dark{background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 8px,rgba(255,255,255,.07) 8px 16px),
  #1f1f21;color:rgba(255,255,255,.5)}
.ph-circle{border-radius:50%}

/* utility */
.container{max-width:1024px;margin:0 auto;padding:0 22px}
.container-wide{max-width:1280px;margin:0 auto;padding:0 22px}
.row{display:flex}
.col{display:flex;flex-direction:column}
.gap-xs{gap:8px}.gap-sm{gap:12px}.gap-md{gap:17px}.gap-lg{gap:24px}.gap-xl{gap:32px}
.center{align-items:center;justify-content:center}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}

/* mobile */
@media (max-width:736px){
  .tile{padding:48px 16px}
  .tile h1.headline,.tile .headline{font-size:34px;letter-spacing:-0.3px}
  .tile .tagline{font-size:21px}
  .footer .grid{grid-template-columns:repeat(2,1fr)}
  .global-nav .inner{gap:18px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
  .global-nav .inner::-webkit-scrollbar{display:none}
  .sub-nav .inner{padding:0 12px}
}