:root {
  color-scheme:light dark;
  --blue:#204cc7;
  --ink:#14213b;
  --muted:#4c5b72;
  --paper:#fff;
  --bg:#f6f8fc;
  --line:#dbe2ef;
  --soft:#e8efff;
  --focus:#9b4900;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.65
}
a {
  color:var(--blue);
  text-underline-offset:.2em
}
button,a,input {
  touch-action:manipulation
}
a:focus-visible,summary:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px;
  border-radius:3px
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.1;
  letter-spacing:-.035em
}
h1 {
  font-size:clamp(2.9rem,6.8vw,5.7rem);
  max-width:12ch;
  font-weight:740;
  margin-bottom:1.5rem
}
h2 {
  font-size:clamp(2rem,4.2vw,3.3rem);
  max-width:20ch;
  margin-bottom:1.25rem
}
h3 {
  font-size:1.35rem
}
p {
  max-width:65ch
}
small,.small {
  font-size:.85rem;
  color:var(--muted)
}
.wrap {
  width:min(1160px,calc(100% - 3rem));
  margin-inline:auto
}
.skip {
  position:absolute;
  top:-8rem;
  left:1rem;
  padding:.7rem 1rem;
  background:var(--paper);
  z-index:5
}
.skip:focus {
  top:1rem
}
.review-banner {
  padding:.55rem 1.25rem;
  background:#17243e;
  color:#fff;
  font-size:.8rem;
  text-align:center
}
.review-banner a {
  color:#d2dfff
}
.brand {
  min-height:48px;
  display:flex;
  align-items:center;
  gap:.75rem;
  font-weight:750;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-.02em
}
.brand img {
  width:42px;
  height:42px;
  border-radius:10px
}
.site-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  min-height:100px
}
.nav {
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
  font-size:.9rem
}
.nav a {
  display:inline-flex;
  align-items:center;
  min-height:48px;
  text-decoration:none;
  color:var(--muted)
}
.nav a:hover {
  text-decoration:underline;
  color:var(--blue)
}
.eyebrow {
  font-weight:720;
  font-size:.78rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:1.2rem
}
.hero {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:5rem;
  padding:4.8rem 0 5.8rem;
  align-items:center
}
.intro {
  font-size:1.16rem;
  max-width:42ch;
  color:var(--muted)
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:2rem
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:.75rem 1.25rem;
  border-radius:100px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-size:.94rem;
  font-weight:680;
  border:1px solid var(--blue)
}
.button.secondary {
  color:var(--blue);
  background:transparent;
  border-color:var(--line)
}
.button:hover {
  filter:brightness(.94)
}
.hero-note {
  margin-top:1.3rem;
  font-size:.82rem;
  max-width:47ch;
  color:var(--muted)
}
.control-panel {
  background:var(--blue);
  color:#fff;
  padding:2.3rem;
  border-radius:30px;
  box-shadow:0 24px 60px #204cc71a
}
.control-panel h2 {
  font-size:2.7rem;
  margin:0 0 1.3rem;
  max-width:10ch
}
.control-panel p {
  color:#e1eaff;
  font-size:.95rem
}
.flow {
  list-style:none;
  padding:0;
  margin:1.4rem 0 0;
  counter-reset:step
}
.flow li {
  counter-increment:step;
  display:grid;
  grid-template-columns:2rem 1fr;
  gap:.8rem;
  padding:1rem 0;
  border-top:1px solid #ffffff38
}
.flow li:before {
  content:"0" counter(step);
  font-size:.78rem;
  color:#bdceff;
  font-weight:700;
  padding-top:.2rem
}
.flow strong {
  display:block;
  font-size:1rem
}
.flow span {
  display:block;
  font-size:.84rem;
  color:#dae5ff;
  margin-top:.15rem
}
.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  padding:0 0 5rem
}
.principle {
  padding:1.6rem 1.5rem;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--paper)
}
.principle .number {
  display:block;
  color:var(--blue);
  font-size:.8rem;
  font-weight:750;
  margin-bottom:1.5rem
}
.principle p {
  font-size:.94rem;
  color:var(--muted);
  margin-bottom:0
}
.section {
  padding:4.5rem 0;
  border-top:1px solid var(--line)
}
.section-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  margin-bottom:2.7rem
}
.section-intro>p {
  color:var(--muted)
}
.feature-rows {
  display:grid;
  gap:0
}
.feature-row {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:3rem;
  border-top:1px solid var(--line);
  padding:1.8rem 0
}
.feature-row h3 {
  margin-bottom:0
}
.feature-row p {
  color:var(--muted);
  margin-bottom:0;
  font-size:.97rem
}
.access-box {
  padding:2.5rem;
  background:var(--soft);
  border-radius:24px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:3rem
}
.access-box h2 {
  font-size:2.35rem
}
.access-box p:last-child {
  margin-bottom:0
}
.access-box code {
  overflow-wrap:anywhere;
  font-size:.85rem
}
.access-box ul {
  padding-left:1.2rem
}
.testing {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3rem
}
.testing p {
  color:var(--muted);
  margin-bottom:0
}
.testing h2 {
  font-size:2.2rem;
  margin-bottom:1rem
}
.badge {
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:100px;
  padding:.25rem .7rem;
  font-size:.77rem;
  font-weight:700;
  color:var(--muted);
  margin-bottom:1rem
}
.footer {
  padding:2.5rem 0 3rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:2rem;
  font-size:.85rem
}
.footer p {
  margin-bottom:.4rem
}
.footer nav a {min-height:48px;display:inline-flex;align-items:center}
.footer nav {
  display:flex;
  gap:1.3rem
}
.document {
  padding:3rem 0 5rem;
  max-width:800px
}
.document h1 {
  font-size:clamp(2.4rem,5vw,3.6rem);
  max-width:20ch
}
.document h2 {
  font-size:1.6rem;
  margin:2.5rem 0 .8rem;
  max-width:none
}
.document h3 {
  font-size:1.1rem;
  margin:1.7rem 0 .6rem
}
.document p,.document li {
  font-size:1rem
}
.document li+li {
  margin-top:.5rem
}
.notice {
  background:var(--soft);
  padding:1.3rem 1.5rem;
  border-radius:14px;
  border-inline-start:4px solid var(--blue);
  margin:1.5rem 0
}
.document details {
  border-top:1px solid var(--line);
  padding:1.2rem 0
}
.document summary {
  cursor:pointer;
  font-weight:700;
  min-height:48px
}
.document details p {
  margin-top:1rem;
  color:var(--muted)
}
.contact {
  font-weight:700;
  overflow-wrap:anywhere
}
.status-line {
  font-size:.85rem;
  color:var(--muted)
}
@media(prefers-color-scheme:dark) {
  :root {
  --blue:#8db9ff;
  --ink:#f0f4fa;
  --muted:#ccd8e9;
  --paper:#19212b;
  --bg:#10151d;
  --line:#43536a;
  --soft:#202e45;
  --focus:#ffd8aa
}
.control-panel {
  background:#204cc7;
  box-shadow:none
}
.button {
  color:#082957
}
.button.secondary {
  color:var(--blue)
}
.brand img {
  border:1px solid #43536a
}

}
@media(max-width:800px) {
  .hero {
  grid-template-columns:1fr;
  gap:2.5rem;
  padding:2.5rem 0 3rem
}
.hero h1 {
  max-width:14ch
}
.control-panel {
  max-width:580px
}
.principles {
  grid-template-columns:1fr;
  padding-bottom:3rem
}
.principle {
  padding:1.3rem
}
.principle .number {
  margin-bottom:.8rem
}
.section-intro,.access-box {
  grid-template-columns:1fr;
  gap:1rem
}
.section-intro {
  margin-bottom:1.8rem
}
.feature-row {
  grid-template-columns:1fr;
  gap:.7rem
}
.testing {
  display:block
}
.testing .actions {
  margin-top:1.5rem
}
.section {
  padding:3rem 0
}
.site-header {
  min-height:90px
}
.nav {
  gap:1rem
}
.access-box {
  padding:1.5rem
}

}
@media(max-width:460px) {
  .wrap {
  width:calc(100% - 2rem)
}
.site-header {
  align-items:flex-start;
  flex-direction:column;
  justify-content:center;
  padding:1.2rem 0
}
.brand {
  font-size:1rem
}
.brand img {
  width:36px;
  height:36px
}
.nav {
  font-size:.85rem;
  gap:1.3rem
}
.hero h1 {
  font-size:3rem
}
.intro {
  font-size:1.04rem
}
.control-panel {
  padding:1.7rem
}
.control-panel h2 {
  font-size:2.4rem
}
.footer {
  display:block
}
.footer nav a {min-height:48px;display:inline-flex;align-items:center}
.footer nav {
  margin-top:1.4rem
}
.actions .button {
  width:100%
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}
* {
  transition:none!important
}

}


/* Source-verified native UI captures; fluid, no horizontal overflow. */
.screen-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
.screen-shot{margin:0;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.screen-shot picture,.screen-shot img{display:block;width:100%}
.screen-shot img{height:auto;aspect-ratio:9/16;object-fit:cover}
.screen-shot figcaption{display:grid;gap:.2rem;padding:1rem 1rem 1.2rem;line-height:1.4}
.screen-shot figcaption strong{font-size:1rem}
.screen-shot figcaption span{font-size:.83rem;color:var(--muted)}
.screen-caveat{max-width:80ch;margin-top:1.1rem}
@media(max-width:800px){.screen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:460px){.screen-grid{gap:.6rem}.screen-shot{border-radius:14px}.screen-shot figcaption{padding:.7rem}.screen-shot figcaption span{font-size:.76rem}}