* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--space-xs);
  left: var(--space-xs);
  transform: translateY(-160%);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-canvas);
  padding: var(--space-sm) var(--space-md);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--color-primary-focus); outline-offset: 3px; }
.global-nav {
  position: sticky;
  z-index: 10;
  top: 0;
  height: 52px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 70%, transparent);
  background: color-mix(in srgb, var(--color-canvas) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
}
.global-nav__inner {
  display: flex;
  width: min(100% - 40px, var(--content-wide));
  height: 100%;
  margin: 0 auto;
  align-items: center;
}
.brand { font-family: var(--font-display); font-weight: 600; text-decoration: none; }
.public-chip {
  margin-left: auto;
  border-radius: var(--radius-pill);
  background: var(--color-parchment);
  color: var(--color-muted);
  padding: 6px 10px;
  font-size: 12px;
}
.hero { background: var(--color-parchment); padding: 112px var(--space-lg) 96px; text-align: center; }
.hero__inner { max-width: 940px; margin: 0 auto; }
.eyebrow { margin: 0 0 var(--space-sm); color: var(--color-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.hero h1, .section-heading h2, .privacy h2 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.07; letter-spacing: -.035em; }
.hero h1 { font-size: clamp(42px, 7vw, 72px); }
.hero__lead { max-width: 760px; margin: var(--space-lg) auto 0; color: var(--color-ink-soft); font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }
.notice { display: inline-block; margin: var(--space-xl) auto 0; border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-canvas); padding: 10px 16px; color: var(--color-muted); font-size: 14px; }
.section { padding: var(--space-section) var(--space-lg); }
.section--parchment { background: var(--color-parchment); }
.section__inner { width: min(100%, var(--content-wide)); margin: 0 auto; }
.section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 440px); gap: var(--space-xl); margin-bottom: var(--space-xl); align-items: end; }
.section-heading h2 { font-size: clamp(34px, 4vw, 48px); }
.section-heading > p { margin: 0; color: var(--color-muted); }
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: pipeline; }
.pipeline-item { counter-increment: pipeline; min-height: 210px; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); background: var(--color-canvas); padding: var(--space-lg); }
.pipeline-item::before { content: counter(pipeline, decimal-leading-zero); display: block; margin-bottom: var(--space-xl); color: var(--color-primary); font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.pipeline-item h3 { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 1.2; }
.pipeline-item p { margin: var(--space-xs) 0 0; color: var(--color-muted); font-size: 14px; }
.empty { grid-column: 1 / -1; border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 48px 24px; color: var(--color-muted); text-align: center; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.principle { display: grid; grid-template-columns: auto 1fr; gap: var(--space-md); border-top: 1px solid var(--color-divider); padding: var(--space-lg) 0; }
.principle__number { color: var(--color-primary); font-family: var(--font-display); font-weight: 600; }
.principle p { margin: 0; font-family: var(--font-display); font-size: 21px; }
.privacy { background: var(--color-dark); color: var(--color-canvas); padding: 96px var(--space-lg); text-align: center; }
.privacy__inner { max-width: 800px; margin: 0 auto; }
.privacy h2 { font-size: clamp(34px, 5vw, 56px); }
.privacy p:last-child { max-width: 680px; margin: var(--space-lg) auto 0; color: #d2d2d7; font-size: 19px; }
footer { background: #000; color: #d2d2d7; padding: 44px var(--space-lg); text-align: center; font-size: 12px; }
noscript { display: block; padding: 16px; text-align: center; }
@media (max-width: 1068px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 735px) {
  .global-nav__inner { width: min(100% - 28px, var(--content-wide)); }
  .hero { padding: 80px var(--space-md) 64px; }
  .section, .privacy { padding: 64px var(--space-md); }
  .section-heading, .pipeline, .principles { grid-template-columns: 1fr; }
  .section-heading { gap: var(--space-md); }
  .pipeline-item { min-height: 0; }
  .pipeline-item::before { margin-bottom: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Detailed research handoff: uses the existing Apple tokens. */
.method-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-sm); margin-top:var(--space-xl); }
.action-link { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--color-primary); border-radius:var(--radius-pill); padding:10px 18px; background:var(--color-canvas); color:var(--color-primary); font:inherit; font-size:15px; text-decoration:none; cursor:pointer; }
.action-link:hover { background:var(--color-parchment); }
#copy-status { font-size:14px; min-height:1.5em; color:var(--color-ink-soft); }
.flow-map { margin:0; }
.flow-lane { margin-top:var(--space-lg); padding-top:var(--space-sm); border-top:1px solid var(--color-divider); }
.flow-row { display:flex; flex-wrap:wrap; align-items:stretch; gap:var(--space-lg); padding:0; list-style:none; }
.flow-row li { flex:1 1 150px; position:relative; background:var(--color-canvas); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:var(--space-md); }
.flow-row li:not(:last-child)::after { content:'→'; position:absolute; right:-21px; top:50%; transform:translateY(-50%); color:var(--color-primary); }
.flow-return, .flow-map figcaption { font-size:15px; color:var(--color-ink-soft); }
.method-doc { max-width:960px; margin:0 auto; overflow-wrap:anywhere; }
.method-doc h2 { margin-top:64px; font-size:clamp(25px,3vw,34px); line-height:1.25; }
.method-doc h3 { margin-top:var(--space-xl); }
.method-doc h2, .method-doc h3, #method { scroll-margin-top:76px; }
.method-doc p, .method-doc li { line-height:1.75; }
.method-doc li { margin-bottom:var(--space-xs); }
.method-doc a { color:var(--color-primary); }
.method-doc nav a { display:inline-block; padding:8px 0; }
.method-doc table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; font-size:15px; }
.method-doc th, .method-doc td { border-bottom:1px solid var(--color-divider); padding:var(--space-sm); text-align:left; vertical-align:top; min-width:120px; }
.method-doc th { background:var(--color-parchment); }
.method-doc pre { overflow:auto; padding:var(--space-md); background:var(--color-parchment); border-radius:var(--radius-lg); }
.method-doc code { font-size:.9em; }
@media (max-width:1068px) {
 .flow-row { flex-direction:column; gap:var(--space-lg); }
 .flow-row li { flex:auto; }
 .flow-row li:not(:last-child)::after { content:'↓'; right:50%; top:auto; bottom:-24px; transform:none; }
 .method-doc h2 { margin-top:48px; }
 .method-actions { align-items:stretch; flex-direction:column; }
}
.principles > *, .principle > * { min-width:0; overflow-wrap:anywhere; }
.principle:has(> h3) { display:block; }
.principle > h3 { margin:0 0 var(--space-sm); }
@media (max-width:735px) { .hero h1 { font-size:clamp(34px,9vw,42px); word-break:keep-all; } }
.method-doc h2, .method-doc h3 { word-break:keep-all; }
.method-doc blockquote { margin:var(--space-lg) 0; border-left:2px solid var(--color-primary); padding-left:var(--space-lg); }
.method-doc input[type=checkbox] { accent-color:var(--color-primary); }