/* Cards scroll over a viewport-sized hero, then release into the final canvas. */
:root {
  --story-width:1320px;
  --story-edge:clamp(16px,3.2vw,56px);
  --story-radius:40px;
  --story-top:88px;
  --story-bottom:20px;
}

/* Clip sideways overflow without creating an extra scroll container for sticky cards. */
body {
  overflow-x:clip;
}

.sky-story {
  position:relative;
  isolation:isolate;
  /* Clip the sky at this section's edge without creating a sticky scroll container. */
  overflow:clip;
  background:#e8f2fa;
}

/* The story bounds the hero's sticky lifetime, including its animated clouds.
   It remains in flow and leaves with the deck instead of following the footer. */
.sky-story .hero {
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  z-index:1;
}

.sky-story .hero-copy {
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:clamp(20px,4svh,48px);
}

.sky-story .hero-description {
  margin-bottom:0;
}

.sky-story .hero::after {
  background:linear-gradient(180deg,transparent 65%,#edf6fc20 82%,#e8f2fa99 100%);
}

.sky-story .hero-baseline {
  flex-shrink:0;
  padding-bottom:96px;
}

.story-stack {
  position:relative;
  z-index:2;
  display:flow-root;
  margin-top:-72px;
  padding-bottom:88px;
}

.story-card {
  position:relative;
  width:min(var(--story-width),calc(100% - var(--story-edge) * 2));
  margin-inline:auto;
  padding:clamp(20px,3.5svh,36px) clamp(24px,3.4vw,48px);
  max-block-size:calc(100svh - var(--card-top,var(--story-top)) - var(--story-bottom));
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#d2d2d7 transparent;
  border:1px solid #fff;
  border-radius:var(--story-radius);
  background:#fff;
  box-shadow:0 16px 48px -24px #1d1d1f24;
  scroll-margin-top:104px;
}

.story-card > .shell {
  width:100%;
  max-width:none;
}

.story-stack > .story-card {
  margin-bottom:clamp(56px,10vh,112px);
  z-index:var(--card-order,0);
  transform-origin:center top;
}

.story-stack > .story-card:last-child {
  margin-bottom:0;
}

@media (prefers-reduced-motion:no-preference) {
  .sky-story .hero-copy > *,
  .sky-story .hero-discover {
    opacity:var(--hero-ink-opacity,1);
    filter:blur(var(--hero-ink-blur,0px));
  }
  /* A keyboard user can always see the discovery link when returning to it. */
  .sky-story .hero-discover:focus-visible {
    opacity:1;
    filter:none;
  }
  .story-stack.stack-ready > .story-card {
    position:sticky;
    top:var(--card-top,96px);
    transform:scale(var(--card-scale,1));
  }
}

.story-card .intro-grid,
.story-card .feature-grid,
.story-card .ecosystem-heading,
.story-card .developer-grid {
  gap:clamp(20px,3vw,40px);
}

.story-card h2 {
  font-family:var(--supah-font-hero);
  font-weight:800;
  font-size:clamp(1.8rem,3.2vw,2.85rem);
}

.story-card .continuity-rail {
  gap:28px;
  margin-top:24px;
  border-top:1px solid var(--line);
  align-items:start;
}

.story-card .continuity-rail > div {
  padding:18px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
}

.story-card.cloud-section {
  background:var(--paper);
}

.story-card .computer-diagram {
  margin-top:0;
}

.story-card .diagram-person {
  border-color:var(--line);
  box-shadow:none;
}

.story-card .diagram-computer {
  border-color:var(--line);
  box-shadow:none;
  border-radius:20px;
}

.story-card .vision-note {
  margin-top:0;
}

.story-card .identity-figure {
  background:transparent;
  border-radius:0;
  padding:0;
}

.story-card .identity-example {
  border-color:var(--line);
  box-shadow:0 8px 24px #1d1d1f04;
}

.story-card .avatar {
  color:var(--muted);
  background:var(--soft);
}

.story-card .context-figure {
  background:var(--soft);
  border-radius:22px;
  padding:24px;
}

.story-card .context-category {
  background:transparent;
  border-radius:0;
  padding:0;
  font-weight:550;
}

.story-card.control-section {
  background:var(--paper);
}

.story-card .control-principles {
  gap:28px;
  margin-top:24px;
}

.story-card .control-principles > div {
  padding:18px 0 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}

.story-card .principle-number {
  color:var(--muted);
  padding:0;
  border:0;
  margin-bottom:12px;
}

/* The last two sections release the sticky story into a quiet white canvas. */
.story-finale {
  position:relative;
  z-index:3;
  padding:32px 0 80px;
  background:linear-gradient(180deg,#e8f2fa,#f5f5f7 280px);
}

.story-finale .story-card + .story-card {
  margin-top:28px;
}

.canvas-card .ecosystem-heading {
  display:block;
}

.canvas-card .permission-demo {
  display:contents;
}

.canvas-card .scenario-controls {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.canvas-card .scenario-controls button {
  min-height:48px;
  padding:12px 0;
  align-items:center;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:1rem;
  letter-spacing:-.02em;
  transition:color .2s,border-color .2s;
}

.canvas-card .scenario-controls button span {
  display:none;
}

.canvas-card .scenario-controls button[aria-pressed="true"] {
  border-color:var(--ink);
  color:var(--ink);
  font-weight:600;
}

.canvas-card .scenario-controls button:hover {
  color:var(--ink);
}

.canvas-card .permission-example {
  align-self:stretch;
  padding:24px;
  background:var(--soft);
  border-color:transparent;
  border-radius:22px;
}

.canvas-card .permission-example h3 {
  max-width:360px;
  font-size:clamp(1.4rem,2vw,1.85rem);
  margin-top:18px;
}

.story-finale .developer-section {
  background:var(--paper);
}

.story-finale .developer-grid h2 {
  font-size:clamp(1.8rem,2.8vw,2.5rem);
}

.story-finale .developer-grid .text-link {
  gap:12px;
  padding:8px 0;
  border:0;
  border-radius:0;
  background:transparent;
}

/* Compact content keeps the whole story legible inside the card's viewport budget. */
.story-card .section-copy p,
.story-card .feature-copy > p,
.story-card .section-lede,
.story-card .ecosystem-heading > p,
.story-card .developer-grid > div > p {
  font-size:1rem;
  line-height:1.5;
}
.story-card .feature-copy h2 { margin-bottom:16px; }
.story-card .continuity-rail h3 { font-size:1.0625rem; margin:10px 0 6px; }
.story-card .continuity-rail p { font-size:.875rem; line-height:1.45; }
.story-card .rail-number { font-size:.6875rem; }
.story-card.cloud-section > .shell {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:20px 32px;
  align-items:center;
}
.story-card .cloud-intro { text-align:left; }
.story-card .cloud-intro .section-lede { margin:14px 0 0; }
.story-card .vision-note { grid-column:1 / -1; max-width:none; text-align:left; font-size:.75rem; }
.story-card .diagram-person { width:40px; height:40px; font-size:.8125rem; }
.story-card .diagram-connector { height:20px; }
.story-card .diagram-heading { padding:16px; font-size:1rem; }
.story-card .diagram-heading .diagram-label { display:none; }
.story-card .diagram-heading img { width:28px; }
.story-card .diagram-parts { padding:20px 8px; }
.story-card .diagram-parts strong { font-size:1rem; }
.story-card .diagram-parts small { font-size:.75rem; }
.story-card .diagram-parts span { font-size:.6875rem; margin-bottom:4px; }
.story-card .identity-example { padding:18px 20px 4px; }
.story-card .identity-person { margin-top:16px; gap:10px; }
.story-card .avatar { width:42px; height:42px; font-size:1.25rem; }
.story-card .identity-person strong { font-size:1rem; }
.story-card .persona-intro { font-size:1.2rem; line-height:1.3; margin:16px 0; }
.story-card .identity-row { padding:10px 0; font-size:.75rem; }
.story-card .identity-figure figcaption,
.story-card .context-figure figcaption { margin-top:12px; font-size:.75rem; }
.story-card .context-quote { font-size:clamp(1.5rem,2.6vw,2rem); padding:24px 0 18px; }
.story-card .context-line { padding-bottom:14px; font-size:.75rem; }
.story-card .context-detail { padding-top:14px; }
.story-card .context-detail p { margin-top:12px; font-size:.8125rem; line-height:1.4; }
.story-card .control-heading .section-lede { margin:14px auto 0; }
.story-card .control-principles h3 { font-size:1.2rem; margin-bottom:10px; }
.story-card .control-principles p { font-size:.875rem; line-height:1.45; }
.story-card .principle-number { font-size:.6875rem; }
.canvas-card > .shell { display:grid; grid-template-columns:1fr 1.1fr; gap:18px 28px; }
.canvas-card .ecosystem-heading { grid-column:1; grid-row:1; }
.canvas-card .ecosystem-heading > p { margin-top:16px; }
.canvas-card .demo-context { grid-column:1; grid-row:2; }
.canvas-card .permission-example { grid-column:2; grid-row:1 / span 2; }
.canvas-card .permission-example > p { min-height:0; font-size:.875rem; line-height:1.5; }
.canvas-card .permission-rows { margin-top:14px; }
.canvas-card .permission-rows > div { padding:10px 0; font-size:.75rem; }
.canvas-card .permission-footer { padding-top:12px; font-size:.75rem; }

@media (max-width:1000px) {
  :root { --story-radius:30px; }
  .story-card { padding:24px 28px; }
  .story-card .intro-grid,
  .story-card .feature-grid,
  .story-card .developer-grid { gap:24px; }
  .story-card .continuity-rail > div,
  .story-card .control-principles > div { padding:16px 0 0; }
  .story-card .context-figure { padding:18px; }
  .story-card .diagram-parts { grid-template-columns:1fr max-content 1fr; }
  .story-card .diagram-parts strong { font-size:.875rem; }
  .story-card .diagram-parts small { font-size:.6875rem; }
  .canvas-card .permission-example { padding:20px; }
}

@media (max-width:740px) {
  :root { --story-edge:12px; --story-radius:24px; --story-top:76px; --story-bottom:16px; }
  .sky-story .hero-baseline { padding-bottom:76px; }
  .story-stack { margin-top:-48px; padding-bottom:40px; }
  .story-stack > .story-card { margin-bottom:36px; }
  .story-card { padding:20px 18px; scroll-margin-top:84px; }
  .story-card h2 { font-size:clamp(1.5rem,6.7vw,1.85rem); line-height:1.08; }
  .story-card .intro-grid,
  .story-card .feature-grid,
  .story-card .developer-grid,
  .story-card.cloud-section > .shell { grid-template-columns:1fr; gap:14px; }
  .story-card .section-copy p,
  .story-card .feature-copy > p,
  .story-card .section-lede,
  .story-card .ecosystem-heading > p,
  .story-card .developer-grid > div > p { font-size:.875rem; line-height:1.5; }
  .story-card .feature-copy h2 { margin-bottom:10px; }
  .story-card .feature-copy .text-link { margin-top:8px; padding:8px 0; font-size:.875rem; }
  .story-card .continuity-rail { margin-top:16px; gap:0; }
  .story-card .continuity-rail > div { display:grid; grid-template-columns:20px 1fr; gap:4px 10px; padding:12px 0; margin:0; border-bottom:1px solid var(--line); }
  .story-card .rail-number { position:static; grid-row:1 / span 2; }
  .story-card .continuity-rail h3 { grid-column:2; font-size:1rem; margin:0; }
  .story-card .continuity-rail p { grid-column:2; font-size:.8125rem; line-height:1.4; }
  .story-card .cloud-intro .section-lede { margin-top:10px; }
  .story-card .diagram-person,
  .story-card .diagram-connector { display:none; }
  .story-card .diagram-heading { padding:12px 14px; font-size:.9375rem; }
  .story-card .diagram-heading img { width:24px; }
  .story-card .diagram-parts { grid-template-columns:1fr; gap:0; padding:0 12px; }
  .story-card .diagram-parts > div { display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:6px; padding:10px 0; text-align:left; }
  .story-card .diagram-parts > div + div { border-left:0; border-top:1px solid #e8edf2; }
  .story-card .diagram-parts span { margin:0; font-size:.625rem; }
  .story-card .diagram-parts strong { font-size:.875rem; }
  .story-card .diagram-parts small { font-size:.6875rem; margin:0; }
  .story-card .vision-note { font-size:.6875rem; line-height:1.4; }
  .story-card .context-figure { padding:12px; border-radius:18px; }
  .story-card .identity-example { padding:12px 14px 2px; }
  .story-card .identity-person { margin-top:10px; }
  .story-card .avatar { width:32px; height:32px; font-size:1rem; }
  .story-card .identity-person > div > span { font-size:.6875rem; }
  .story-card .example-label { font-size:.625rem; }
  .story-card .persona-intro { font-size:1rem; margin:10px 0; }
  .story-card .identity-row { padding:7px 0; flex-wrap:wrap; gap:4px 10px; font-size:.6875rem; }
  .story-card .identity-figure figcaption,
  .story-card .context-figure figcaption { margin-top:8px; font-size:.6875rem; }
  .story-card .context-quote { font-size:1.35rem; padding:14px 0 12px; }
  .story-card .context-line { font-size:.6875rem; padding-bottom:8px; }
  .story-card .context-detail { padding-top:8px; }
  .story-card .context-category { font-size:.625rem; }
  .story-card .context-detail p { font-size:.75rem; margin-top:8px; }
  .story-card .control-heading .section-lede { margin:10px auto 0; }
  .story-card .control-principles { margin-top:16px; gap:8px; }
  .story-card .control-principles > div { display:grid; grid-template-columns:68px minmax(0,1fr); gap:4px 10px; padding:12px 0 0; }
  .story-card .principle-number { grid-row:1 / span 2; font-size:.625rem; line-height:1.4; margin:0; }
  .story-card .control-principles h3 { font-size:.9375rem; line-height:1.2; margin:0; }
  .story-card .control-principles p { grid-column:2; font-size:.8125rem; line-height:1.4; }
  .story-finale { padding:8px 0 40px; }
  .story-finale .story-card + .story-card { margin-top:20px; }
  .canvas-card > .shell { grid-template-columns:1fr; gap:12px; }
  .canvas-card .ecosystem-heading,
  .canvas-card .demo-context,
  .canvas-card .permission-example { grid-column:auto; grid-row:auto; }
  .canvas-card .ecosystem-heading > p { margin-top:10px; }
  .canvas-card .scenario-controls { gap:16px; }
  .canvas-card .scenario-controls button { font-size:.875rem; }
  .canvas-card .permission-example { padding:16px; border-radius:18px; }
  .canvas-card .permission-example h3 { font-size:1.25rem; margin:12px 0 8px; }
  .canvas-card .permission-example > p { font-size:.8125rem; line-height:1.4; }
  .canvas-card .permission-rows { margin-top:10px; }
  .canvas-card .permission-rows > div { padding:7px 0; font-size:.6875rem; }
  .canvas-card .permission-footer { padding-top:8px; font-size:.6875rem; }
  .story-finale .developer-grid h2 { font-size:1.7rem; }
  .story-finale .developer-grid .text-link { margin-top:12px; font-size:.875rem; }
}

@media (max-height:600px) and (min-width:741px) {
  .sky-story .hero h1 { font-size:clamp(2.5rem,10svh,4rem); }
  .sky-story .hero-description { margin-top:12px; font-size:1rem; }
  .sky-story .hero-baseline { padding-bottom:76px; }
  .story-card { padding-block:18px; }
  .story-card h2 { font-size:1.75rem; }
  .story-card .context-figure { padding:14px; }
  .story-card .continuity-rail,
  .story-card .control-principles { margin-top:16px; }
}

@media (prefers-reduced-motion:reduce) {
  .sky-story .hero { position:relative; height:auto; }
  .story-stack > .story-card { position:relative; transform:none; }
}

@media print {
  .sky-story .hero { position:relative; height:auto; min-height:0; }
  .sky-story .hero-copy > *,
  .sky-story .hero-discover { opacity:1; filter:none; }
  .story-stack { margin-top:0; }
  .story-stack.stack-ready > .story-card { position:relative; top:auto; transform:none; }
  .story-card { max-block-size:none; overflow:visible; box-shadow:none; break-inside:avoid; }
}