/* Apple design pass — loaded last.
   1. Real spring curves (CSS linear()) behind the existing --ease-settle token.
   2. One type family on every platform (SF on Apple, Inter with optical sizing elsewhere),
      with tracking that changes with size instead of one negative value everywhere.
   3. Surfaces that respond to the pointer, a mobile menu that materializes from its button.
   Revert: remove the <link> to this file (and apple-motion.js) in index.html. */

/* ---------- 1 · Springs ---------- */
:root{
  /* Critically damped (damping 1.0): settles without overshoot. Shape from x(t) = 1 − (1 + ωt)e^(−ωt). */
  --spring-settle:cubic-bezier(.22,1,.36,1);
  /* Damping 0.8: ~1.5% overshoot. Reserved for things that move because the user moved them. */
  --spring-bounce:cubic-bezier(.34,1.2,.64,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --spring-settle:linear(0,0.0435,0.1411,0.259,0.3782,0.4888,0.5862,0.6691,0.7381,0.7944,0.8397,0.8757,0.9041,0.9264,0.9437,0.9571,0.9674,0.9753,0.9813,0.9859,0.9894,0.992,0.994,0.9955,0.9967,0.9975,0.9981,0.9986,1);
    --spring-bounce:linear(0,0.0769,0.242,0.4278,0.5982,0.7376,0.8424,0.9159,0.9637,0.9922,1.0074,1.0139,1.0151,1.0137,1.0111,1.0083,1.0057,1.0037,1.0022,1.0011,1.0005,1.0001,0.9999,0.9998,1);
    --ease-settle:var(--spring-settle);
  }
}

/* ---------- 2 · Typography ---------- */
:root{
  /* No named "SF Pro" families: on Apple devices -apple-system picks the right optical cut (Text/Display)
     by size; elsewhere a locally installed SF Pro Display would be used for small text it isn't designed for. */
  --a-font:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  /* Tracking scale: display text tightens, small text opens up. */
  --track-display:-.032em;   /* ≥ 48px */
  --track-title:-.026em;     /* 28–47px */
  --track-headline:-.016em;  /* 19–27px */
  --track-body:-.009em;      /* 15–18px */
  --track-small:0em;         /* 13–14px */
  --track-caption:.01em;     /* ≤ 12px */
}
html body{font-family:var(--a-font);font-optical-sizing:auto;letter-spacing:var(--track-body);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html body p{letter-spacing:var(--track-body)}

html body .hero h1{letter-spacing:var(--track-display)!important;line-height:1.03!important}
html body main h2{letter-spacing:var(--track-title)!important}
html body main .runtime-strip h2{letter-spacing:var(--track-small)!important}
html body h3,html body .role-card strong,html body .runtime-name-list strong,
html body .founding-offer>div strong,html body .nav-wordmark{letter-spacing:var(--track-headline)!important}
html body .hero-description,html body .section-aside,html body main .eyebrow,
html body .button,html body .qa-item summary{letter-spacing:var(--track-body)!important}

/* Small UI text: never negative tracking — this is what collapsed "How it works" into "Howit works". */
html body .nav-links a,html body .nav-cta,html body .nav-sponsor,html body .nav-links-sponsor,
html body .hero-pill,html body .hero-note,html body .network-caption,html body .feature-card p,
html body .qa-answer p,html body .distribution-note p,html body .role-description,html body .step-label,
html body .beta-dock>span,html body .motion-control,html body .footer,html body .footer *,
html body .contribute-top,html body .funding-status,html body .signup-data-note,html body #signup-status,
html body .traffic-controls button,html body .use-tabs [role="tab"],html body .stage-card p,
html body .flow-stage p,html body .security-note,html body .start-steps li{letter-spacing:var(--track-small)!important}
html body .nav-badge,html body .hero-pill-tag,html body .benefit-labels span,html body .isolation-art span,
html body .branch-preview span,html body .branch-preview b,html body .role-tag,html body .peer>span,
html body .gate-detail,html body .flow-stage small,html body .diagram-node small,
html body .founding-fine,html body .runtime-name-list span{letter-spacing:var(--track-caption)!important}
/* Uppercase overlines need more air than lowercase text at the same size. */
html body .founding-limit,html body .builder-info small,html body .stage-number,html body .map-label,
html body .coordinate,html body .example-tag,html body .distribution-toolbar>span,html body .lobby-top span{letter-spacing:.06em!important}

/* Hero stage cards: Inter sets a touch wider than SF Display, so size to content and never wrap a row. */
html body .stage-card{width:auto;min-width:250px}
html body .stage-card p,html body .stage-card em{white-space:nowrap}

/* Leading tracks size inversely. */
html body .feature-card p,html body .qa-answer p,html body .distribution-note p{line-height:1.55}
html body h3{line-height:1.25}
/* No one-word last lines in short descriptions. */
html body .role-description,html body .feature-card p,html body .distribution-note p,html body .qa-answer p{text-wrap:pretty}

/* ---------- 3 · Surfaces respond to the pointer ---------- */
/* Hover lift: slow, critically damped; press: instant. Both start from wherever the card is. */
html body .feature-card,html body .role-card{
  transition:transform .55s var(--spring-settle),box-shadow .55s var(--spring-settle),border-color .35s var(--spring-settle),background-color .35s var(--spring-settle)}
@media (hover:hover) and (pointer:fine){
  html body .feature-card:hover{transform:translateY(-3px)!important;box-shadow:0 18px 40px -18px #000c!important}
  html body .role-card:hover{transform:translateY(-3px)!important}
}
html body .feature-card:active,html body .role-card:active{transform:scale(.985)!important;transition-duration:.1s!important}

/* Light that follows the pointer across a card (position set by apple-motion.js). */
html body .feature-card,html body .role-card{position:relative;isolation:isolate}
html body .feature-card::before,html body .role-card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),#ffffff0d,transparent 60%);
  transition:opacity .5s var(--spring-settle)}
@media (hover:hover) and (pointer:fine){
  html body .feature-card:hover::before,html body .role-card:hover::before{opacity:1}
}

/* Selecting a role is a direct action: the check mark lands with a little spring. */
html body .role-card .role-radio svg{transition:scale .5s var(--spring-bounce),opacity .2s var(--spring-settle)}

/* Buttons: lift on hover, settle on release. Press scale comes from apple-refine.css. */
@media (hover:hover) and (pointer:fine){
  html body .button.primary:hover,html body .nav-cta:hover{filter:brightness(1.06)}
}
html body .button .icon,html body .nav-arrow .icon,html body .hero-pill .icon{transition:transform .45s var(--spring-settle)}
@media (hover:hover){
  html body .button:hover .icon,html body .nav-cta:hover .nav-arrow .icon,html body .hero-pill:hover .icon{transform:translateX(3px)}
}

/* Mobile menu materializes from the toggle (top right) instead of appearing. */
@media (max-width:700px){
  html body .header .nav-links.open{transform-origin:calc(100% - 22px) -8px;animation:menu-in .42s var(--spring-settle) both}
}
@keyframes menu-in{from{opacity:0;transform:scale(.94) translateY(-6px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* Section reveal: shorter travel, spring settle. */
html body .reveal-in{animation-duration:.8s!important;animation-timing-function:var(--spring-settle)!important}

/* Floating chrome reads as one material family. */
html body .motion-control{border-radius:999px;background:rgba(29,29,31,.72);border:1px solid #ffffff14;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);color:var(--a-secondary)}
html body .motion-control:hover{color:var(--a-text)}

/* Focus: a soft accent ring that follows the shape, not a square outline. */
html body :is(a,button,summary,[role="tab"],input,textarea):focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html body .feature-card,html body .role-card{transition:box-shadow .2s ease,border-color .2s ease,background-color .2s ease}
  html body .feature-card:hover,html body .role-card:hover,html body .feature-card:active,html body .role-card:active{transform:none!important}
  html body .button:hover .icon,html body .nav-cta:hover .nav-arrow .icon,html body .hero-pill:hover .icon{transform:none}
  html body .role-card .role-radio svg{transition:opacity .2s ease}
  html body .header .nav-links.open{animation:fade-in .2s ease both}
}
@media (prefers-reduced-transparency:reduce){
  html body .motion-control{background:#1d1d1f;-webkit-backdrop-filter:none;backdrop-filter:none}
}