@font-face {
  font-family:"Supah Inter";
  src:url('/fonts/inter-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

@font-face {
  font-family:"Supah Nunito";
  src:url('/fonts/nunito-black-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:900;
  font-display:swap;
}

:root {
  color-scheme:light;
  --ink:#222224;
  --paper:#ffffff;
  --soft:#f5f5f7;
  --muted:#6e6e73;
  --signal:#ff690f;
  --line:#dedee3;
  --font:"Supah Inter",Inter,system-ui,sans-serif;
  --content:1160px;
  --gutter:40px;
  --ease:cubic-bezier(.22,1,.36,1);
  --accent-text:#a74000;
  --computer-header-overlap:calc(var(--supah-shell-height) + var(--supah-space-3));
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

button,input {
  font:inherit;
}

button,a,input {
  -webkit-tap-highlight-color:transparent;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  cursor:pointer;
}

button:disabled {
  cursor:default;
}

img {
  max-width:100%;
  height:auto;
  display:block;
}

figure,p,h1,h2,h3 {
  margin:0;
}

h1,h2,h3 {
  font-weight:550;
  line-height:1.06;
  letter-spacing:-.05em;
}

h2 {
  font-size:clamp(2.6rem,4.5vw,4rem);
}

h3 {
  letter-spacing:-.035em;
}

::selection {
  background:var(--signal);
  color:var(--ink);
}

:focus-visible {
  outline:3px solid var(--signal);
  outline-offset:6px;
}

input:focus-visible {
  outline-color:var(--ink);
}

[hidden] {
  display:none!important;
}

.shell {
  width:min(var(--content),calc(100% - var(--gutter)*2));
  margin-inline:auto;
}

.section {
  padding-block:145px;
}

.light {
  background:var(--paper);
  color:var(--ink);
  color-scheme:light;
}

.eyebrow {
  font-size:.875rem;
  font-weight:550;
  letter-spacing:.035em;
  line-height:1.6;
  margin-bottom:28px;
}

.muted {
  color:var(--muted);
}

.section-lede {
  font-size:1.25rem;
  line-height:1.65;
  letter-spacing:-.025em;
  max-width:615px;
}

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:30;
  background:var(--signal);
  color:var(--ink);
  padding:12px 24px;
  border-radius:8px;
}

.skip-link:focus {
  top:16px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.brand>span {
  display:flex;
  align-items:center;
  gap:14px;
}

.brand b {
  font-family:"Supah Nunito",var(--font);
  font-size:1.8rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-.07em;
}

.brand-product {
  font-size:.94rem;
  letter-spacing:-.035em;
  border-left:1px solid var(--line);
  padding-left:14px;
}

.button {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background:var(--signal);
  color:#151515;
  border:1px solid transparent;
  border-radius:100px;
  padding:12px 23px;
  font-size:.9rem;
  font-weight:600;
  line-height:1.4;
  transition:background .2s,transform .2s;
}

.button:hover {
  background:#ff853c;
  transform:translateY(-2px);
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:.9375rem;
  font-weight:500;
  line-height:1.4;
  padding:12px 0;
  text-underline-offset:5px;
}

.text-link:hover {
  text-decoration:underline;
}

.dark-link {
  color:var(--ink);
}

.actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
}

/* Let the sky sit beneath Paint's floating header while preserving copy spacing. */
#main {
  margin-top:calc(-1 * var(--computer-header-overlap));
}

.hero {
  position:relative;
  overflow:hidden;
  background:#edf7ff;
  color:#fff;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  padding-top:var(--computer-header-overlap);
  min-height:calc(clamp(780px,calc(100svh - var(--computer-header-overlap)),980px) + var(--computer-header-overlap));
}

.hero-copy {
  position:relative;
  z-index:2;
  text-align:center;
  padding-top:108px;
  padding-bottom:110px;
}

.hero-eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:30px;
}

.hero-eyebrow span {
  border-left:1px solid var(--line);
  padding-left:14px;
  font-size:.75rem;
  letter-spacing:0;
}

.hero h1 {
  font-family:var(--supah-font-display);
  font-size:clamp(3.5rem,7.6vw,6.5rem);
  font-weight:900;
  font-synthesis:none;
  line-height:1.03;
  letter-spacing:-.055em;
  max-width:980px;
  margin-inline:auto;
}

.hero-description {
  font-size:clamp(1.25rem,2.1vw,1.5rem);
  line-height:1.55;
  margin:24px auto 34px;
  letter-spacing:-.025em;
}

.hero-status {
  font-weight:600;
  white-space:nowrap;
}

.hero-baseline {
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:auto;
  color:#405b70;
  padding:24px 0 28px;
  font-size:.8125rem;
  position:relative;
  z-index:1;
}

.hero-discover:hover span {
  transform:translateY(3px);
}

.hero-baseline a:hover {
  text-decoration:underline;
}

.intro-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:95px;
  align-items:start;
}

.section-copy {
  padding-top:7px;
}

.section-copy p,.feature-copy>p:not(.eyebrow) {
  font-size:1.125rem;
  line-height:1.7;
  color:#69696e;
  letter-spacing:-.02em;
}

.section-copy p+p {
  margin-top:22px;
}

.section-copy .emphasis {
  color:var(--ink);
  font-weight:550;
  margin-top:26px;
}

.continuity-rail {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:90px;
  border-top:1px solid var(--line);
}

.continuity-rail>div {
  position:relative;
  padding:29px 36px 0 0;
}

.continuity-rail>div+div {
  padding-left:36px;
}

.rail-number {
  color:#68686e;
  font-size:.8125rem;
  font-variant-numeric:tabular-nums;
}

.continuity-rail h3 {
  font-size:1.3rem;
  letter-spacing:-.035em;
  margin:17px 0 10px;
}

.continuity-rail p {
  font-size:.9375rem;
  line-height:1.65;
  color:#68686e;
  max-width:250px;
}

.cloud-section {
  background:var(--soft);
  color:var(--ink);
  color-scheme:light;
}

.cloud-intro {
  text-align:center;
}

.cloud-intro .section-lede {
  margin:30px auto 0;
  color:#707076;
}

.computer-diagram {
  width:min(790px,100%);
  margin:60px auto 0;
  text-align:center;
}

.diagram-person {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border:1px solid #d2d2d7;
  border-radius:50%;
  font-size:.9375rem;
  background:var(--paper);
}

.diagram-connector {
  height:40px;
  width:1px;
  background:#bcbcc0;
  margin:auto;
}

.diagram-computer {
  border:1px solid #e1e1e6;
  border-radius:20px;
  background:var(--paper);
  overflow:hidden;
  box-shadow:0 20px 60px #1d1d1f06;
}

.diagram-heading {
  display:flex;
  align-items:center;
  gap:12px;
  padding:25px 30px;
  text-align:left;
  font-size:1.125rem;
  font-weight:550;
  letter-spacing:-.035em;
  border-bottom:1px solid #dedee1;
}

.diagram-heading .diagram-label {
  margin-left:auto;
  color:#68686e;
  font-size:.8125rem;
  font-weight:400;
  letter-spacing:0;
}

.diagram-parts {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:35px 16px;
}

.diagram-parts>div {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.diagram-parts>div+div {
  border-left:1px solid #dedee1;
}

.diagram-parts span {
  font-size:.75rem;
  color:#68686e;
  margin-bottom:7px;
}

.diagram-parts strong {
  font-size:1.3rem;
  letter-spacing:-.04em;
  font-weight:500;
}

.diagram-parts small {
  color:#68686e;
  font-size:.875rem;
  white-space:nowrap;
}

.diagram-caption {
  margin-top:25px;
  color:#68686e;
  font-size:.875rem;
}

.vision-note {
  font-size:.8125rem;
  line-height:1.65;
  text-align:center;
  color:#6c6c71;
  max-width:670px;
  margin:50px auto 0;
}

.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:110px;
}

.feature-copy h2 {
  margin-bottom:27px;
}

.feature-copy>p+p {
  margin-top:20px;
}

.feature-copy .text-link {
  margin-top:25px;
}

.feature-copy .eyebrow {
  margin-bottom:24px;
}

.identity-section {
  padding-bottom:90px;
}

.intelligence-section {
  padding-top:90px;
}

.feature-grid-reverse .feature-copy {
  grid-column:2;
  grid-row:1;
}

.feature-grid-reverse figure {
  grid-column:1;
  grid-row:1;
}

.identity-figure,.context-figure {
  padding:58px 40px 32px;
  background:var(--soft);
  border-radius:22px;
}

.identity-example {
  background:#fff;
  border:1px solid #e5e5e9;
  border-radius:16px;
  padding:27px 27px 10px;
  box-shadow:0 10px 30px #1d1d1f04;
}

.example-label {
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#66666d;
  font-size:.75rem;
  line-height:1.5;
}

.example-label>span:first-child {
  color:inherit;
  font-weight:550;
}

.identity-person {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:32px;
}

.avatar {
  height:56px;
  width:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:1.5rem;
  color:#9a450e;
  background:#fff0e5;
  font-weight:500;
}

.identity-person>div {
  display:flex;
  flex-direction:column;
}

.identity-person strong {
  font-size:1.125rem;
  font-weight:550;
}

.identity-person>div>span {
  font-size:.8125rem;
  color:#696970;
}

.persona-intro {
  font-size:1.45rem;
  line-height:1.4;
  letter-spacing:-.04em;
  margin:26px 0 32px;
}

.identity-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #e9e9eb;
  padding:17px 0;
  font-size:.8125rem;
  line-height:1.5;
}

.identity-row span:last-child {
  color:#68686e;
}

.identity-figure figcaption,.context-figure figcaption {
  text-align:center;
  color:#68686e;
  font-size:.8125rem;
  margin-top:25px;
}

.context-figure {
  background:var(--soft);
}

.context-example {
  padding:3px 0;
}

.context-quote {
  font-size:clamp(1.9rem,2.8vw,2.5rem);
  line-height:1.25;
  letter-spacing:-.045em;
  padding:52px 0 36px;
}

.context-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:22px;
  color:var(--muted);
  font-size:.8125rem;
}

.context-detail {
  border-top:1px solid var(--line);
  padding-top:26px;
}

.context-category {
  font-size:.75rem;
  background:#e8e8ed;
  padding:6px 10px;
  border-radius:5px;
}

.context-detail p {
  margin-top:17px;
  font-size:.9375rem;
  color:var(--muted);
  line-height:1.6;
}

.context-figure figcaption {
  margin-top:45px;
}

.control-section {
  background:var(--soft);
  color:var(--ink);
}

.control-heading .eyebrow {
  color:var(--muted);
}

.control-heading h2 {
  font-size:clamp(2.65rem,5.3vw,4.6rem);
  line-height:1.08;
}

.control-heading .section-lede {
  color:var(--muted);
  margin-top:30px;
  margin:28px auto 0;
}

.control-principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:52px;
  margin-top:85px;
}

.principle-number {
  display:block;
  color:var(--accent-text);
  font-size:.8125rem;
  border-top:1px solid #d2d2d7;
  padding-top:21px;
  margin-bottom:25px;
}

.control-principles h3 {
  font-size:1.4375rem;
  line-height:1.2;
  margin-bottom:15px;
}

.control-principles p {
  color:var(--muted);
  font-size:1rem;
  line-height:1.7;
}

.ecosystem-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:110px;
  align-items:end;
}

.ecosystem-heading>p {
  font-size:1.125rem;
  line-height:1.7;
  color:#68686e;
  padding-bottom:5px;
}

.permission-demo {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:100px;
  background:var(--soft);
  margin-top:58px;
  padding:60px;
  border-radius:22px;
}

.demo-context {
  display:flex;
  flex-direction:column;
}

.demo-context .eyebrow {
  color:#696970;
  font-size:.8125rem;
  margin-bottom:17px;
}

.scenario-controls {
  display:flex;
  flex-direction:column;
}

.scenario-controls button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  border-bottom:1px solid #d9d9dd;
  padding:18px 0;
  background:transparent;
  color:#68686e;
  text-align:left;
  font-size:1.65rem;
  letter-spacing:-.045em;
  font-weight:500;
  transition:color .2s;
}

.scenario-controls button span {
  font-size:1.25rem;
  opacity:0;
}

.scenario-controls button[aria-pressed="true"] {
  color:var(--ink);
}

.scenario-controls button[aria-pressed="true"] span {
  opacity:1;
}

.scenario-controls button:hover {
  color:#a74000;
}

.demo-note {
  font-size:.8125rem;
  color:#696970;
  line-height:1.65;
  margin-top:auto;
  padding-top:30px;
  max-width:260px;
}

.permission-example {
  background:#fff;
  border:1px solid #e5e5e9;
  border-radius:15px;
  padding:28px 30px;
}

.permission-example h3 {
  font-size:1.6rem;
  line-height:1.2;
  margin:30px 0 12px;
}

.permission-example>p {
  font-size:.9375rem;
  color:#68686e;
  line-height:1.65;
  min-height:74px;
}

.permission-rows {
  margin-top:22px;
}

.permission-rows>div {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid #e4e4e6;
  padding:14px 0;
  font-size:.8125rem;
}

.permission-rows span {
  color:#68686e;
}

.permission-rows strong {
  font-weight:500;
  text-align:right;
}

.permission-footer {
  display:flex;
  align-items:center;
  gap:9px;
  border-top:1px solid #e4e4e6;
  padding-top:20px;
  font-size:.8125rem;
}

.permission-check {
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e9eee9;
  color:#35663e;
  display:grid;
  place-items:center;
  font-size:.75rem;
}

.developer-section {
  background:var(--paper);
  color:var(--ink);
  padding:90px 0;
  border-top:1px solid #e8e8ed;
}

.developer-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:110px;
  align-items:center;
}

.developer-grid h2 {
  font-size:2rem;
  line-height:1.15;
  letter-spacing:-.045em;
}

.developer-grid .eyebrow {
  margin-bottom:20px;
  color:#66666d;
}

.developer-grid>div>p:not(.eyebrow) {
  color:#6f6f74;
  line-height:1.7;
}

.developer-grid .text-link {
  margin-top:17px;
}

.control-heading {
  text-align:center;
}

.site-footer .footer-grid {
  column-gap:48px;
}

.site-footer .footer-thesis {
  display:flex;
  align-self:start;
  align-items:center;
  gap:12px;
}

.site-footer .footer-wordmark {
  flex:none;
}

.site-footer .footer-thesis p {
  margin:0;
  max-width:none;
  min-width:0;
  font-size:14px;
  line-height:20px;
}

/* Reuse the same photograph in softly masked depth layers; copy stays still. */

.hero-sky {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:#95bfe1;
}

.hero-sky picture,.hero-sky img {
  display:block;
  width:100%;
  height:100%;
}

.hero-sky img {
  object-fit:cover;
  object-position:center 58%;
  transform:scale(1.08);
}

.hero-sky .sky-clouds {
  display:none;
  position:absolute;
  inset:0;
}

.sky-clouds-left {
  -webkit-mask-image:radial-gradient(ellipse 58% 68% at 0% 76%,#000 20%,#000c 42%,transparent 82%);
  mask-image:radial-gradient(ellipse 58% 68% at 0% 76%,#000 20%,#000c 42%,transparent 82%);
}

.sky-clouds-right {
  -webkit-mask-image:radial-gradient(ellipse 64% 62% at 100% 86%,#000 22%,#000c 44%,transparent 84%);
  mask-image:radial-gradient(ellipse 64% 62% at 100% 86%,#000 22%,#000c 44%,transparent 84%);
}

/* A light sky tint softens gradually from blue overhead to clear lower clouds. */
.hero-sky::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(45,112,173,.46) 0%,rgba(65,134,188,.34) 35%,rgba(92,157,202,.18) 65%,rgba(92,157,202,0) 94%);
}

.hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(to bottom,transparent 68%,#ffffff26 82%,#ffffffb3 94%,#fff 100%);
}

@media (prefers-reduced-motion:no-preference) {
  .hero-sky .sky-clouds {
    display:block;
  }
  .hero-sky .sky-base img {
    animation:sky-drift 112s cubic-bezier(.45,0,.55,1) -28s infinite alternate;
    animation-play-state:paused;
  }
  .hero-sky .sky-clouds-left img {
    animation:cloud-drift-far 96s cubic-bezier(.45,0,.55,1) -32s infinite alternate;
    animation-play-state:paused;
  }
  .hero-sky .sky-clouds-right img {
    animation:cloud-drift-near 76s cubic-bezier(.45,0,.55,1) -22s infinite alternate;
    animation-play-state:paused;
  }
  .hero.sky-is-moving .hero-sky img {
    animation-play-state:running;
  }
  @keyframes sky-drift {
    from { transform:translate3d(-1.4%,0,0) scale(1.09); }
    to { transform:translate3d(1.4%,-.5%,0) scale(1.11); }
  }
  @keyframes cloud-drift-far {
    from { transform:translate3d(-3%,.6%,0) scale(1.12); }
    to { transform:translate3d(3%,-.8%,0) scale(1.14); }
  }
  @keyframes cloud-drift-near {
    from { transform:translate3d(-4%,1%,0) scale(1.16); }
    to { transform:translate3d(4%,-1.2%,0) scale(1.18); }
  }
}

@media(max-width:740px) {
  .hero { min-height:calc(800px + var(--computer-header-overlap)); }
  .hero-sky img { object-position:center bottom; }
}

@media(max-width:700px) {
  :root {
    --computer-header-overlap:calc(var(--supah-shell-height) + var(--supah-space-2));
  }
}

@media (prefers-reduced-motion:no-preference) {
  [data-reveal].will-reveal {
    opacity:0;
    transform:translateY(20px);
    transition:opacity .85s var(--ease),transform .85s var(--ease);
  }
  [data-reveal].will-reveal.is-visible {
    opacity:1;
    transform:none;
  }
  .hero-copy {
    animation:arrive 1s var(--ease) both;
  }
  @keyframes arrive {
    from {
      opacity:0;
      transform:translateY(14px);
    }
    to {
      opacity:1;
      transform:none;
    }
  }
}

@media(min-width:1600px) {
  .hero-copy {
    padding-top:110px;
  }
}

@media(max-width:1000px) {
  :root {
    --gutter:30px;
  }
  .section {
    padding-block:100px;
  }
  .intro-grid,.feature-grid,.ecosystem-heading,.developer-grid {
    gap:50px;
  }
  .brand-product {
    display:none;
  }
  .hero-copy {
    padding-top:88px;
  }
  .hero h1 {
    font-size:clamp(3.1rem,8.5vw,6rem);
  }
  .identity-figure,.context-figure {
    padding:35px 25px 25px;
  }
  .identity-example {
    padding:20px 20px 8px;
  }
  .example-label {
    font-size:.75rem;
  }
  .continuity-rail h3 {
    font-size:1.125rem;
  }
  .permission-demo {
    padding:36px;
    gap:40px;
  }
  .permission-example {
    padding:24px;
  }
  .control-principles {
    gap:30px;
  }
}

@media(max-width:740px) {
  :root {
    --gutter:23px;
  }
  .section {
    padding-block:77px;
  }
  .brand b {
    font-size:1.65rem;
  }
  .brand {
    gap:7px;
  }
  .brand img {
    width:27px;
  }
  .brand-product {
    display:inline;
    font-size:.8rem;
    padding-left:10px;
  }
  .brand>span {
    gap:10px;
  }
  .hero-copy {
    padding-top:75px;
    padding-bottom:130px;
  }
  .hero-eyebrow {
    font-size:.75rem;
    gap:9px;
    margin-bottom:25px;
    flex-wrap:wrap;
  }
  .hero-eyebrow span {
    font-size:.75rem;
    padding-left:9px;
  }
  .hero h1 {
    font-size:clamp(2rem,10.5vw,4.5rem);
    line-height:1.08;
    letter-spacing:-.055em;
  }
  .hero-description {
    font-size:clamp(.875rem,3.6vw,1.125rem);
    margin:22px auto 30px;
    line-height:1.5;
  }
  .actions {
    gap:11px;
  }
  .hero .actions {
    flex-direction:column;
  }
  .hero .text-link {
    font-size:.875rem;
  }
  .hero-baseline {
    padding-block:20px;
  }
  .eyebrow {
    font-size:.8125rem;
    margin-bottom:21px;
  }
  h2 {
    font-size:clamp(2.15rem,8.5vw,3.2rem);
    line-height:1.1;
    letter-spacing:-.055em;
  }
  .intro-grid,.feature-grid,.ecosystem-heading,.developer-grid {
    grid-template-columns:1fr;
    gap:33px;
  }
  .section-copy {
    padding-top:0;
  }
  .section-copy p,.feature-copy>p:not(.eyebrow),.ecosystem-heading>p {
    font-size:1.0625rem;
  }
  .continuity-rail {
    grid-template-columns:1fr;
    margin-top:45px;
  }
  .continuity-rail>div,.continuity-rail>div+div {
    padding:23px 0 23px 45px;
    position:relative;
    border-bottom:1px solid var(--line);
  }
  .rail-number {
    position:absolute;
    left:0;
    top:25px;
  }
  .continuity-rail h3 {
    margin:0 0 8px;
    font-size:1.25rem;
  }
  .continuity-rail p {
    max-width:none;
    font-size:.9375rem;
  }
  .cloud-intro {
    text-align:left;
  }
  .cloud-intro .section-lede {
    font-size:1.0625rem;
    margin-top:24px;
  }
  .computer-diagram {
    margin-top:42px;
  }
  .diagram-heading {
    padding:20px 18px;
    font-size:1rem;
  }
  .diagram-heading .diagram-label {
    display:none;
  }
  .diagram-heading img {
    width:29px;
  }
  .diagram-parts {
    grid-template-columns:1fr max-content 1fr;
    padding:25px 0;
  }
  .diagram-parts strong {
    font-size:1rem;
  }
  .diagram-parts small {
    font-size:.75rem;
    margin:0 auto;
    line-height:1.6;
  }
  .diagram-parts span {
    font-size:.75rem;
  }
  .vision-note {
    font-size:.75rem;
    margin-top:32px;
    text-align:left;
  }
  .diagram-caption {
    font-size:.8125rem;
    margin-top:20px;
  }
  .identity-section {
    padding-bottom:50px;
  }
  .intelligence-section {
    padding-top:25px;
  }
  .feature-grid-reverse .feature-copy,.feature-grid-reverse figure {
    grid-column:auto;
    grid-row:auto;
  }
  .feature-copy h2 {
    margin-bottom:22px;
  }
  .identity-figure,.context-figure {
    padding:35px 26px 24px;
  }
  .identity-example {
    padding:24px 23px 8px;
  }
  .feature-copy .text-link {
    margin-top:16px;
  }
  .context-quote {
    font-size:2.4rem;
  }
  .control-heading h2 {
    font-size:clamp(2.15rem,8vw,3.1rem);
    line-height:1.1;
  }
  .control-heading .section-lede {
    font-size:1.0625rem;
    margin-top:25px;
  }
  .control-principles {
    grid-template-columns:1fr;
    gap:33px;
    margin-top:43px;
  }
  .principle-number {
    margin-bottom:18px;
  }
  .control-principles h3 {
    font-size:1.375rem;
    margin-bottom:12px;
  }
  .control-principles p {
    max-width:520px;
  }
  .ecosystem-heading {
    gap:25px;
  }
  .permission-demo {
    grid-template-columns:1fr;
    padding:27px 20px;
    margin-top:32px;
    gap:28px;
  }
  .scenario-controls {
    flex-direction:row;
    gap:20px;
  }
  .scenario-controls button {
    font-size:1.1rem;
    padding:12px 0;
    flex:1;
    justify-content:flex-start;
    gap:10px;
  }
  .scenario-controls button span {
    display:none;
  }
  .scenario-controls button[aria-pressed="true"] {
    border-color:var(--ink);
  }
  .demo-note {
    max-width:none;
    padding-top:20px;
    font-size:.75rem;
  }
  .permission-example {
    padding:22px 20px;
  }
  .permission-example h3 {
    font-size:1.4rem;
    margin-top:26px;
  }
  .permission-example>p {
    min-height:0;
  }
  .permission-rows>div {
    font-size:.75rem;
  }
  .permission-footer {
    font-size:.75rem;
  }
  .developer-section {
    padding-block:62px;
  }
  .developer-grid {
    gap:25px;
  }
  .developer-grid h2 {
    font-size:1.9rem;
  }
}

@media(max-width:360px) {
  :root {
    --gutter:18px;
  }
  .hero-eyebrow {
    font-size:.75rem;
  }
  .hero-eyebrow span {
    border:0;
    padding:0;
  }
  .hero h1 {
    font-size:2rem;
  }
  .identity-figure,.context-figure {
    padding-inline:16px;
  }
  .permission-demo {
    padding-inline:14px;
  }
}

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