/* Feature chapter layout, measured from the reference landing page. */
.feature-chapter {
  --chapter-gap:64px;
  --chapter-pad:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--chapter-gap);
  padding:160px var(--chapter-pad);
}
.feature-chapter :where(h3,h4,h5,h6,p,ul,figure,blockquote,pre) { margin:0; }
.feature-heading,.feature-body { width:min(100%,1024px); }
.feature-heading { display:grid; gap:12px; }
.feature-kind { font-size:var(--type-label); line-height:1.45; letter-spacing:.04em; color:var(--muted); font-weight:500; }
.feature-heading h3 { max-width:672px; }
.feature-body { display:flex; flex-direction:column; align-items:flex-start; gap:var(--chapter-gap); }
.feature-lead,.feature-beat figcaption,.feature-pair>li>p,.feature-pair figcaption {
  max-width:40em;
  padding-inline-start:12px;
  font-size:var(--type-body);
  line-height:1.6;
  color:var(--muted);
  text-wrap:pretty;
}
.feature-body strong { color:var(--ink); font-weight:600; }
.feature-lead { max-width:36em; font-size:var(--type-lead); line-height:1.5; color:var(--ink); }
.feature-stage {
  --stage-ratio:1.6;
  --surface-shadow:0 0 0 1px #0002,0 6px 24px -16px #0005;
  width:min(100%,1216px);
  max-width:calc((100svh - var(--nav-height) - 24px) * var(--stage-ratio));
  position:relative;
  aspect-ratio:var(--stage-ratio);
  overflow-x:clip;
  isolation:isolate;
}
.feature-surface {
  --bezel:36px;
  position:absolute;
  inset:0;
  border-radius:calc(var(--bezel) * .65);
  box-shadow:var(--surface-shadow);
}
.feature-screen {
  position:absolute; inset:0; overflow:hidden;
  border-radius:inherit; background:white;
}
/* During the chapter entrance the slot changes shape. Frame the scaled
   recording inside it so the shadow follows the actual window at every size. */
:is(#linking,#asking) .feature-surface {
  container-type:size; display:grid; grid-template:100% / 100%; place-items:center;
  box-shadow:none;
}
:is(#linking,#asking) .feature-screen {
  position:relative; inset:auto;
  width:min(100%,calc(100cqh * var(--media-ratio,var(--stage-ratio))));
  aspect-ratio:var(--media-ratio,var(--stage-ratio));
  border-radius:min(2cqw,calc(var(--bezel) * .65)); box-shadow:var(--surface-shadow);
}
#linking [data-secondary="write"] { --media-ratio:1.6; }
#linking [data-secondary="ask"] { --media-ratio:.4; }
.native-scene>img,.feature-screen>img {
  display:block; width:100%; height:100%; object-fit:contain;
}
:where(#writing) .feature-screen>img { object-fit:cover; object-position:center top; }
.native-scene { background:#f5f5f5; }
#link-rename .native-scene { background:#f0f0f0; }
[data-feature="ask"] .feature-pair .native-scene { background:#f0f0f0; }
.feature-surface[data-secondary] { pointer-events:none; }
[data-secondary="ask"] .feature-screen>img { object-position:center bottom; }
.feature-beat,.feature-pair>li { width:100%; display:flex; flex-direction:column; gap:32px; }
.feature-clip {
  width:100%; position:relative; isolation:isolate;
  overflow:hidden; padding:8px;
  border-radius:24px; background:#0000000a;
}
.feature-clip>.op-demo { width:100%; height:100%; overflow:hidden; border-radius:16px; }
.feature-clip .native-scene>img { height:auto; }
#link-copy .native-scene>img { aspect-ratio:16/10; object-fit:cover; object-position:right center; }
.feature-pair,.feature-icons { list-style:none; padding:0; width:100%; display:grid; align-items:start; }
.feature-pair { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 32px; }
.feature-pair>li { gap:24px; }
.feature-pair>li>p { padding-right:12px; }
[data-feature="ask"] .feature-pair>li { gap:32px; }
.feature-icons { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 16px; padding-top:64px; }
.feature-icons>li { padding:16px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.feature-icons>li>img { width:96px; height:96px; object-fit:contain; }
.feature-icons>li>p,.feature-context li>p { font-size:var(--type-body); line-height:1.6; color:var(--muted); text-wrap:pretty; }
.feature-icons strong,.feature-context strong { display:block; margin-block-end:.25em; }
.feature-key {
  display:grid; place-items:center; grid-template:100% / 100%;
  width:96px; height:96px; flex:none; color:#555651;
}
.feature-key > span {
  display:grid; place-items:center; width:60%; height:60%;
  border:1px solid #bbbcb8; border-radius:15%;
  background:linear-gradient(145deg,#fff 8%,#ededeb 77%,#d5d6d1);
  box-shadow:inset 2px 2px 1px #fff, inset -2px -2px 1px #c2c3bd, 1px 3px 0 #afb0ab, 2px 6px 7px -3px #42443b50;
  transform:perspective(240px) rotateY(-14deg) rotateX(12deg) rotateZ(-5deg);
}
.feature-key svg { width:44%; height:44%; fill:currentColor; shape-rendering:crispEdges; }
li:nth-child(even) > .feature-key > span { transform:perspective(240px) rotateY(12deg) rotateX(10deg) rotateZ(5deg); }
.feature-context .feature-key { width:76px; height:76px; }
.feature-context { scroll-margin-block-start:var(--nav-height); display:grid; width:100%; gap:32px; padding-top:64px; }
.feature-context ul { list-style:none; display:grid; align-items:start; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 24px; padding:0; }
.feature-context li { display:flex; flex-direction:column; gap:16px; min-width:0; }
.feature-context li>p { padding:0 8px 0 12px; }
.feature-context li>.feature-clip { aspect-ratio:16/10; }
@supports (corner-shape:squircle) {
  .feature-context li>.feature-clip { border-radius:64px; corner-shape:squircle; }
}

.op-demo { position:relative; height:100%; width:100%; container-type:inline-size; isolation:isolate; background:#fafafa; color:#242422; }
.op-demo [hidden] { display:none!important; }
/* With scripting disabled, transient overlays are absent and the full result is readable. */
.op-demo:not([data-playback]) [data-until] { display:none!important; }
.op-window { width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column; background:white; }
.op-bar { flex:none; display:flex; align-items:center; gap:.75em; min-height:2.65em; padding:.5em 1em; background:#eaeaea; border-bottom:1px solid #dbdbd9; font-size:clamp(8px,1.05cqw,14px); color:#666; }
.op-layout { display:flex; flex:1; min-height:0; }
.op-nav,.op-inspector { flex:0 0 21%; min-width:0; padding:2.1cqw 1.3cqw; background:#f3f3f0; color:#50514d; font-size:clamp(8px,1.14cqw,15px); }
.op-nav { border-right:1px solid #deded9; }
.op-inspector { border-left:1px solid #deded9; }
.op-paper { flex:1; min-width:0; padding:4cqw; background:#fff; }
.op-replay {
  position:absolute; z-index:5; bottom:12px; right:12px; width:40px; height:40px; border:1px solid #ffffffa6; border-radius:50%;
  background:#fffc; backdrop-filter:blur(10px); box-shadow:0 1px 5px #0002; color:#404040;
  font:22px/1 var(--sans); opacity:0; cursor:pointer; transition:opacity .15s, background .15s;
}
.op-demo:hover>.op-replay,.op-replay:focus-visible { opacity:1; }
@media(hover:none){.op-replay { opacity:1; }}
@media(prefers-reduced-motion:no-preference) {
  .chapter-motion [data-reveal],.chapter-motion [data-stagger]>li {
    --reveal-ease:linear(0.0, 0.0788, 0.2361, 0.403, 0.5509, 0.6711, 0.7638, 0.8329, 0.8832, 0.9191, 0.9445, 0.9621, 0.9743, 0.9827, 0.9884, 0.9922, 0.9948, 0.9965, 0.9977, 0.9985, 1);
    transition:opacity .7s var(--reveal-ease),transform .7s var(--reveal-ease),filter .7s var(--reveal-ease);
    transition-delay:var(--item-delay,0s);
  }
  .chapter-motion [data-reveal]:not(.shown) { opacity:0; transform:translateY(12px); }
  .chapter-motion [data-stagger]:not(.shown)>li { opacity:0; transform:translateY(var(--entry-rise,24px)); }
  .chapter-motion .feature-pair[data-stagger]:not(.shown)>li { transform:scale(.97); filter:blur(4px); }
  /* Anchor to the settled box when an operation is opened from the footer. */
  #features :is(.feature-beat,.feature-pair>li):target {
    transform:none; opacity:1; filter:none; transition:none;
  }
}
@media(max-width:767px) {
  .feature-chapter { --chapter-gap:40px; --chapter-pad:16px; padding-block:64px; }
  .feature-beat { gap:20px; }
  .feature-pair { grid-template-columns:minmax(0,1fr); gap:32px; }
  .feature-icons { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:40px; }
  .feature-icons>li { padding:0; }
  .feature-context { gap:24px; padding-top:32px; }
  .feature-context ul { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:32px; }
}
@media (prefers-reduced-motion:reduce){.op-replay { display:none; }}
@media (max-width:767px), (prefers-reduced-motion:reduce) {
  .feature-surface[data-secondary] { display:none; }
}

.operation-recording { display:block; width:100%; height:100%; object-fit:contain; background:#f3f3f3; }
/* Trim the editor sliver at the left of both 640px sidebar captures. */
.qa-detail {
  display:block; width:100%; height:auto; aspect-ratio:637 / 640;
  object-fit:cover; object-position:right center; border-radius:16px;
}

@media (max-width:767px), (orientation:landscape) and (pointer:coarse) and (max-height:560px) {
  #writing .feature-stage, #linking .feature-stage { --stage-ratio:calc(14 / 11); }
  #asking .feature-stage { --stage-ratio:.4; }
}

@media (max-width:767px) and (prefers-reduced-motion:no-preference) {
  .chapter-motion [data-stagger-rows]>li { transition-delay:var(--row-delay,0s); }
  .chapter-motion [data-stagger-rows]>li:not(.entered) { opacity:0; transform:translateY(var(--entry-rise,24px)); }
  .chapter-motion [data-stagger-rows]>li.entered,
  .chapter-motion [data-stagger-rows]>li:focus-within { opacity:1; transform:none; }
}