/* Sections below the hero, after wireframe D (../sections/d-sketch/): features as a main window with panels popping up
   over its corners, then proof and cost as four figures under one heading.
   Kept apart from style.css (the hero's) and scoped by the d- prefix; tokens come from style.css's :root. */

.d-features { padding-block:var(--section); }
.d-num { font-size:13px; font-weight:500; line-height:16px; font-variant-numeric:tabular-nums; color:var(--c3); }
.d-copy { display:grid; gap:14px; align-content:center; }
.d-copy h3 { font-size:clamp(26px, 2.3vw, 32px); font-weight:600; line-height:1.15; letter-spacing:-.025em; text-wrap:balance; }
.d-copy p { color:var(--c2); max-width:44ch; }
.d-copy .fine { color:var(--c3); }

/* one feature: copy beside a stage; --b puts the stage first, CAD generation stacks the copy over a full-width stage */
.d-feature { display:grid; grid-template-columns:minmax(0, .8fr) minmax(0, 2fr); gap:clamp(32px, 5vw, 80px); align-items:center; margin-top:clamp(112px, 13vw, 184px); }
.d-feature--b { grid-template-columns:minmax(0, 2fr) minmax(0, .8fr); }
.d-feature--gen { grid-template-columns:minmax(0, 1fr); gap:24px; margin-top:0; }
.d-feature--gen .d-copy { max-width:560px; }

/* layout B: the index at the left, the selected capability's window at the right. Both hold still (sticky) while the
   page scrolls through a tall track, wider than the text column; scrolling into a capability's share picks it, and
   the capabilities also take turns on a timer (sections.js) */
.d-idx-track { height:calc(100vh * 4.2); margin-inline:calc((min(1560px, 100vw - 2 * var(--gutter)) - 100%) / -2); }
.d-idx { position:sticky; top:72px; display:grid; grid-template-columns:minmax(0, 340px) minmax(0, 1fr); gap:clamp(32px, 4vw, 64px); align-items:center; height:calc(100vh - 88px); }
/* the list fills the pinned height, items spread over it with no rules between them; a thin rail at the left of the
   open item fills downward as it plays */
.d-idx-list { align-self:stretch; display:flex; flex-direction:column; justify-content:center; gap:clamp(8px, 2.4vh, 28px); margin:0; padding:160px 0 clamp(96px, 24vh, 320px); list-style:none; }
.d-idx-list button { position:relative; display:grid; grid-template-columns:32px 1fr; column-gap:12px; width:100%; padding:clamp(10px, 1.6vh, 18px) 0 clamp(10px, 1.6vh, 18px) 20px; text-align:left; }
.d-idx-list .d-num { padding-top:6px; }
.d-idx-text b { display:block; font-size:clamp(19px, 1.5vw, 24px); font-weight:600; letter-spacing:-.02em; line-height:1.3; color:var(--c3); transition:color .25s; }
.d-idx-list button:hover .d-idx-text b { color:var(--c2); }
.d-idx-list [aria-selected="true"] .d-idx-text b { color:var(--paper); }
.d-idx-desc { display:block; max-height:0; margin-top:0; overflow:hidden; opacity:0; font-size:clamp(15px, 1.05vw, 17px); line-height:1.55; color:var(--c2); transition:max-height .45s var(--ease), opacity .3s, margin-top .3s; }
.d-idx-list [aria-selected="true"] .d-idx-desc { max-height:140px; margin-top:8px; opacity:1; }
.d-idx-bar { position:absolute; left:0; top:0; bottom:0; width:2px; border-radius:1px; background:var(--h-subtle); overflow:hidden; opacity:0; transition:opacity .3s; }
.d-idx-list [aria-selected="true"] .d-idx-bar { opacity:1; }
.d-idx-bar i { display:block; width:100%; height:100%; background:var(--paper); transform:scaleY(var(--p, 0)); transform-origin:top; }
/* the window as large as the screen allows: its height (the window's 16:10 plus the pop-ups' room) fits under the header */
.d-idx-view { min-width:0; width:100%; max-width:calc((100vh - 120px) * 1.62); justify-self:end; }
.d-idx-view .d-feature { display:grid; grid-template-columns:minmax(0, 1fr); gap:0; margin:0; }
.d-idx-view .d-feature[hidden] { display:none; }
.d-idx-view .d-copy { order:2; }
/* the list carries each capability's words; under the window only its fine print stays */
.d-idx-view .d-copy > :not(.fine) { display:none; }
.d-idx-view .d-copy .fine { margin-top:16px; }

/* the stage: the main window in the middle, the pop-ups hanging over its corners */
.d-stage { position:relative; padding:0 6% 9%; }
.d-stage--single { padding:0; }
.d-stage--four { padding:7% 8% 8%; }

/* a window: one of the product's own screens (UX Flows, ui/screens/ + ui/ds.css) at its 1440 × 900, scaled to fit
   (sections.js sets --k); a part pack canvas moved into its viewport stands in for the screen's model image */
.d-fit { position:relative; aspect-ratio:1440 / 900; border-radius:var(--r12); overflow:hidden; background:var(--g-app); box-shadow:var(--shadow-pop); }
.d-fit > .d-app { position:absolute; left:0; top:0; width:1440px; height:900px; overflow:hidden; border-radius:12px; border:1px solid var(--border-default, rgba(255,255,255,.1)); background:var(--surface-workspace, #161618); transform:scale(var(--k, .5)); transform-origin:0 0; font:400 12px/18px Inter, system-ui, sans-serif; color:var(--content-primary, #f5f5f7); text-align:left; }
.d-app *, .d-app *::before, .d-app *::after { box-sizing:border-box; }
.d-app button { font:inherit; }
.d-app canvas[data-pack] { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .8s var(--ease); }
.d-app canvas[data-pack][data-state="live"] { opacity:1; }
.d-fit > canvas[data-pack] { display:none; }
.d-app .is-hole > .pw-viewport__grid, .d-app .is-hole > .pw-viewport__model, .d-app .is-hole > .pe-model { display:none; }
.d-app .is-hole:has(> .d-motion) > .pw-overlay { display:none; }

/* the demo (Feature 01): the conversation and parameters are live; the rest is the product's chrome */
.d-app .d-log { flex:1; min-height:0; display:flex; flex-direction:column; gap:14px; overflow-y:auto; padding-bottom:12px; scrollbar-width:none; }
.d-app .d-log > .dai-assistant__user { min-height:0; }
.d-app .pw-wl__head { display:flex; align-items:center; gap:6px; margin:0; }
.d-app .pw-turncard__row { margin:0; cursor:default; }
.d-app .d-diff .pw-turncard__meta s { color:var(--content-tertiary); }
.d-app .d-diff .pw-turncard__meta b { color:var(--selection-content); font-weight:500; }
.d-app .d-change.is-undone { opacity:.55; }
.d-app .d-change-foot { margin:6px 0 0; font-size:11.5px; color:var(--content-secondary); }
.d-app .d-change-foot:empty { display:none; }
.d-app .d-note { margin:0 12px; font-size:11.5px; color:var(--status-warning-content); }
.d-app .d-note:empty { display:none; }
.d-app .d-example { gap:6px; height:28px; }
.d-app .dai-prompt.is-sending .dai-send { transform:scale(.92); }
.d-app .d-ver { margin-left:8px; padding:1px 6px; border-radius:5px; background:var(--state-selected); font:500 11px/16px var(--font-mono, ui-monospace, monospace); }
.d-app .d-ver.is-new { background:var(--status-success-background); color:var(--status-success-content); }
.d-app .d-ver.is-preview { background:var(--selection-background); color:var(--selection-content); }
.d-app .stage3d { position:absolute; inset:0; }
.d-app .stage3d canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
.d-app .d-vfoot { position:absolute; left:16px; right:16px; bottom:12px; display:flex; align-items:center; gap:16px; font-size:11.5px; color:var(--content-secondary); }
.d-app .d-vfoot .dai-chip { margin-left:auto; }
.d-app .model-fallback { position:absolute; inset:auto 16px 56px; text-align:center; color:var(--content-secondary); }
.d-app .d-panel { display:flex; flex-direction:column; height:100%; box-shadow:inset 1px 0 0 var(--border-default); }
.d-app .d-panel > .pw-layers { flex:none; height:auto; box-shadow:none; }
.d-app .d-panel-head { display:flex; justify-content:space-between; margin:4px 4px 2px 12px; font-weight:500; color:var(--content-primary); }
.d-app .d-panel-head .data { color:var(--content-secondary); font-size:11px; }
.d-app .tree { margin:0; padding:0; list-style:none; }
.d-app .d-row { width:100%; border:0; background:none; color:inherit; text-align:left; }
.d-app .d-row small { margin-left:auto; font-size:11px; color:var(--content-secondary); transition:color .3s; }
.d-app .d-row small.is-changed { color:var(--selection-content); }
.d-app .d-row[aria-pressed="true"] { background:rgba(255, 255, 255, .1); }
.d-app .d-param { flex:none; margin-top:auto; border-top:1px solid var(--border-default); }
.d-app .d-param .param-state { margin:4px 12px 8px; font-size:11.5px; line-height:16px; color:var(--content-secondary); }
.d-app .d-param .param-state.is-preview { color:var(--selection-content); }
.d-app .d-param .param-state.is-done { color:var(--status-success-content); }
.d-app .d-param .param-state.is-error { color:var(--status-danger-content); }
.d-app .d-param-actions { display:flex; gap:8px; padding:0 12px 14px; }
.d-app .d-param input[readonly] { color:var(--content-secondary); }

/* the pop-ups: components lifted from the product's screens, each in its own product form and nothing more. A
   component that floats in the product (prompt, question, menu, annotation, change card, run rows) keeps its own
   surface and stroke and only gains the popover shadow; panel content (Layers, settings, parameters) gets the
   product's popover surface, one stroke and no added padding, since it carries its own; the work log, which sits on
   the conversation's bare ground in the product, gets that ground's padding. A small name sits above, outside. */
.d-pop { position:absolute; z-index:2; display:flex; flex-direction:column; width:var(--w, 280px); max-width:100%; }
.d-pop-tag { margin:0 0 8px 2px; font-size:12px; font-weight:500; line-height:16px; color:var(--c2); }
.d-pick-view { display:grid; gap:8px; min-width:0; }
.d-pop[data-frame="bare"] .d-pick-view { filter:drop-shadow(0 12px 28px rgba(0,0,0,.55)); }
.d-pop[data-frame="panel"] .d-pick-view, .d-pop[data-frame="pad"] .d-pick-view { overflow:hidden; border:1px solid #343436; border-radius:12px; background:var(--surface-app, #1d1d1f); box-shadow:0 12px 36px rgba(0,0,0,.55); }
.d-pop[data-frame="pad"] .d-pick-view { padding:14px 16px; }
.d-pick-root .dai-annotation { min-width:0; }
/* panels lifted out of a screen drop the divider and ground they had beside the viewport; the popover is their ground */
.d-pick-root .dai-engine-details__section, .d-pick-root .pw-layers, .d-pick-root .pw-runs, .d-pick-root .dai-shape-parameters__group { box-shadow:none !important; background:transparent !important; }
/* the ancestors a component is lifted with keep their classes but none of their dividers */
.d-pick-root [style^="display:block;position:static"]::before, .d-pick-root [style^="display:block;position:static"]::after { display:none !important; }
/* the run list's own heading repeats the pop-up's name */
.d-pick-root .pw-runs > h3 { display:none; }
/* the run list shows its rows collapsed */
.d-pick-root .dai-run-history.is-expanded { display:none; }
.d-pick-root { position:relative; font:400 12px/18px Inter, system-ui, sans-serif; color:var(--content-primary, #f5f5f7); text-align:left; }
.d-pick-root *, .d-pick-root *::before, .d-pick-root *::after { box-sizing:border-box; }
.d-pop--bl, .d-pop--bl2 { left:0; bottom:0; }
.d-pop--br { right:0; bottom:4%; }
.d-pop--bc { left:calc(316px + 4%); bottom:-8%; }
/* Feature 02: the Layers panel hangs off the window's lower right, under the panel it comes from */
.d-pop--bc[data-screen="B01"] { left:auto; right:2%; }
/* CAD generation: the drawing comes in at the lower left, beside the conversation's input where a file is attached;
   the plain-words note sits on the model in the viewport, where a note is pinned. */
.d-pop--tl { left:0; top:0; }
.d-pop--tr { right:0; top:6%; }
.d-stage--four .d-pop--tl { top:auto; bottom:-2%; left:-3%; }
.d-stage--four .d-pop--bl { left:58%; top:44%; bottom:auto; }
/* on the model its name needs a little ground to read against the lines */
.d-stage--four .d-pop--bl .d-pop-tag { text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 14px rgba(22,22,24,.95); }

/* in the index (layout B) every capability uses one frame: the same stage padding, so the window is always the same
   size in the same place, and two pop-up slots, the lower left and the lower right, each 280 px wide. Only CAD
   generation's plain-words note leaves the slots: it is pinned on the model in the viewport. */
.d-idx-view .d-stage, .d-idx-view .d-stage--four, .d-idx-view .d-stage--single { padding:3% 6% 11%; }
.d-idx-view .d-pop { width:280px; }
.d-idx-view .d-pop--tl, .d-idx-view .d-pop--bl, .d-idx-view .d-pop--bl2 { left:0; right:auto; top:auto; bottom:0; }
.d-idx-view .d-pop--br, .d-idx-view .d-pop--bc, .d-idx-view .d-pop--bc[data-screen="B01"] { left:auto; right:0; top:auto; bottom:4%; }
.d-idx-view .d-stage--four .d-pop--bl { width:300px; left:57%; top:40%; bottom:auto; }
.d-idx-view .d-copy { display:none; }
/* on a stage narrower than full size the pop-ups shrink with the window (sections.js sets --s), each from the corner
   it hangs on, so they keep their places over it */
.d-idx-view .d-pop { scale:var(--s, 1); transform-origin:left bottom; }
.d-idx-view .d-pop--br, .d-idx-view .d-pop--bc { transform-origin:right bottom; }
.d-idx-view .d-stage--four .d-pop--bl { transform-origin:left top; }

/* pop-ups rise in once their window is on screen; CAD generation's step aside while the demo window is in use */
.js .d-pop { opacity:0; transform:translateY(24px) scale(.96); transition:opacity .6s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.js .d-panel.is-in .d-pop { opacity:1; transform:none; }
.js .d-panel.is-in .d-stage--four.is-using .d-pop { opacity:.28; pointer-events:none; transition-delay:0s; }
.js .d-panel.is-in .d-stage--four.is-using .d-pop--tl { transform:translate(-34%, 0); }
.js .d-panel.is-in .d-stage--four.is-using .d-pop--tr { transform:translate(28%, -24%); }
.js .d-panel.is-in .d-stage--four.is-using .d-pop--bl { transform:translate(0, 34%); }
.js .d-panel.is-in .d-stage--four.is-using .d-pop--br { transform:translate(28%, 24%); }

/* 3 · Proof and cost: the heading over four figures, each over a rule (before-and-after times show the before small
   above the after), the customers and the fine print under them */
.d-cost { padding-block:var(--section); padding-inline:clamp(12px, 2vw, 24px); }
.d-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 32px; margin:0; }
.d-stat { display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:12px; padding-top:24px; border-top:1px solid var(--h-strong); }
.d-stat dt { display:grid; align-content:end; gap:6px; }
.d-stat-from { font-size:15px; line-height:1.4; color:var(--c3); }
.d-stat-from::after { content:" →"; }
.d-stat-to { font-size:clamp(28px, 2.6vw, 40px); font-weight:500; line-height:1.1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.d-stat dd { margin:0; font-size:15px; line-height:1.55; color:var(--c2); max-width:34ch; }
.d-cost-note { max-width:96ch; margin-top:clamp(40px, 4vw, 56px); }
/* the customers as one centred row across the full width; each logo sized to a similar visual weight, all in paper */
.d-clients { display:grid; gap:clamp(28px, 3vw, 44px); margin-top:clamp(56px, 6vw, 88px); text-align:center; }
.d-clients-label { font-size:14px; color:var(--c3); }
.d-clients-logos { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:36px 24px; align-items:center; justify-items:center; margin:0; padding:0; list-style:none; }
.d-clients-logos img { display:block; width:auto; max-width:100%; filter:brightness(0) invert(1); opacity:.8; }
.d-client--hd { height:clamp(36px, 3.4vw, 50px); }
.d-client--sam { height:clamp(18px, 1.7vw, 24px); }
.d-client--dn { height:clamp(17px, 1.6vw, 23px); }
.d-client--ys { height:clamp(36px, 3.4vw, 50px); }

@media (max-width:1100px) {
  .d-stage--four { padding:9% 4% 10%; }
  .d-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:48px; }
}
@media (max-width:900px) {
  .d-feature, .d-feature--b { grid-template-columns:minmax(0, 1fr); }
  .d-idx-track { height:auto; margin-inline:0; }
  .d-idx { position:static; grid-template-columns:minmax(0, 1fr); height:auto; }
  .d-idx-view { max-width:none; }
  .d-clients-logos { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* phones: every window full width, its pop-ups beneath it, one a row, instead of overlapping */
@media (max-width:600px) {
  .d-stage:not(.d-stage--single) { display:grid; grid-template-columns:minmax(0, 1fr); gap:10px; padding:0; }
  .d-stage .d-pop { position:static; width:auto; min-width:0; }
  .d-stats { grid-template-columns:minmax(0, 1fr); row-gap:40px; }
}
@media (prefers-reduced-motion:reduce) {
  .js .d-pop { opacity:1; transform:none; transition:none; }
}

/* ---- feature motion (feature-motion.js): a status chip, rows and markers over a part canvas, sized for the screen's
   scale (--k), so they read at the page's own type size */
.d-motion { --u:calc(1px / var(--k, 1)); position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .5s var(--ease); font-size:calc(12 * var(--u)); font-weight:500; line-height:1.35; color:var(--paper, #f5f5f7); }
.d-motion.is-on { opacity:1; }
.d-mo-chip { position:absolute; left:calc(16 * var(--u)); top:calc(14 * var(--u)); display:flex; align-items:center; gap:calc(8 * var(--u)); margin:0; padding:calc(6 * var(--u)) calc(10 * var(--u)); border:1px solid #343436; border-radius:calc(6 * var(--u)); background:rgba(29, 29, 31, .92); white-space:nowrap; }
.d-mo-chip i { width:calc(6 * var(--u)); height:calc(6 * var(--u)); border-radius:50%; background:#5b7bff; animation:d-mo-pulse 1.2s ease-in-out infinite; }
.d-mo-chip[data-tone="done"] i { background:#3fbf7f; animation:none; }
.d-mo-chip[data-tone="warn"] i { background:#f5a524; animation:none; }
.d-mo-rows { position:absolute; right:calc(16 * var(--u)); top:calc(14 * var(--u)); display:grid; gap:calc(4 * var(--u)); margin:0; padding:0; list-style:none; }
.d-mo-rows li { padding:calc(4 * var(--u)) calc(10 * var(--u)); border-left:calc(2 * var(--u)) solid #5b7bff; background:rgba(29, 29, 31, .86); color:#a1a1a6; opacity:0; transform:translateX(calc(8 * var(--u))); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.d-mo-rows li.is-on { opacity:1; transform:none; color:var(--paper, #f5f5f7); }
.d-mo-mark { position:absolute; left:0; top:0; opacity:0; transition:opacity .3s var(--ease); }
.d-mo-mark.is-on { opacity:1; }
.d-mo-mark i { position:absolute; left:calc(-9 * var(--u)); top:calc(-9 * var(--u)); width:calc(18 * var(--u)); height:calc(18 * var(--u)); border:calc(2 * var(--u)) solid var(--warn, #f5a524); border-radius:50%; box-sizing:border-box; }
.d-mo-mark.is-on i { animation:d-mo-ring .6s var(--ease) both; }
.d-mo-mark span { position:absolute; left:calc(16 * var(--u)); top:calc(-28 * var(--u)); padding:calc(3 * var(--u)) calc(8 * var(--u)); border:1px solid rgba(245, 165, 36, .55); border-radius:calc(4 * var(--u)); background:rgba(29, 29, 31, .92); white-space:nowrap; }
@keyframes d-mo-pulse { 50% { opacity:.35; } }
@keyframes d-mo-ring { from { transform:scale(2.2); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce) { .d-mo-chip i, .d-mo-mark.is-on i { animation:none; } }
/* the Graphs dock unfolding under a finished run (03): the series draw in (feature-motion.js grows each path) */
.d-app .d-mo-panel { animation:d-mo-unfold .45s var(--ease) both; }
.d-app .d-mo-series { transition:stroke .4s var(--ease), opacity .4s var(--ease); }
.d-app .d-mo-series.is-stale { stroke:#6e6e73; opacity:.6; }
.d-app .d-mo-series[data-key="revC"] { stroke:#5b7bff; }
.d-app .dai-graph__tooltip[hidden] { display:none; }
@keyframes d-mo-unfold { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }

/* ---- the sheet: the hero frame's line work carried down the whole page, like a drawing's border. Two rails at the
   frame's edges run from the hero to the footer, ruled at every section with register marks where the rules meet the
   rails and the content's edges, and a scale of ticks along the rails (sections.js). */
main { position:relative; }
.sheet { position:absolute; left:0; top:0; z-index:2; width:100%; height:0; overflow:visible; pointer-events:none; }
.sheet .s-rail, .sheet .s-rule { stroke:rgba(255,255,255,.22); stroke-width:1; fill:none; shape-rendering:crispEdges; }
.sheet .s-tick { stroke:rgba(255,255,255,.16); stroke-width:1; shape-rendering:crispEdges; }
.sheet .s-mark { stroke:rgba(255,255,255,.4); stroke-width:1; shape-rendering:crispEdges; }
.sheet .s-node { fill:var(--g-app, #161618); stroke:rgba(255,255,255,.4); stroke-width:1; }
/* the features' heading sits close over its index and window (the pinned stage centres them in a screen's height, which
   leaves room above them); where the shell is narrower than the rails it widens to them, a little in from each, the
   headline on the left one and the text on the right */
/* as wide as the index and its window below (.d-idx-track), its text 16px in from their edges */
.d-features > .split-heading { position:relative; z-index:1; margin-bottom:-64px; margin-inline:calc((min(1560px, 100vw - 2 * var(--gutter)) - 100%) / -2); padding-inline:16px; }
@media (min-width:1101px) { .d-features > .split-heading p { justify-self:end; } }
@media (max-width:900px) { .d-features > .split-heading { margin-bottom:var(--head-gap); } }

/* ---- phones: the windows cropped to their middle (sections.js sets --k and --cx), the index without the room the
   pinned stage needs */
.d-fit > .d-app { transform:scale(var(--k, .5)) translateX(var(--cx, 0px)); }
@media (max-width:900px) {
  .d-idx-list { padding:0; gap:4px; }
}
@media (max-width:600px) {
  .d-fit { aspect-ratio:1 / 1; }
  .d-fit > .d-app { border-radius:0; }
}

/* ---- phones: the features as a plain column, no tabs. Every capability shows at once (sections.js leaves the
   panels unhidden on a phone): its number, title and words, then its window. The pop-ups are the desktop
   composition's, so they stay out. */
@media (max-width:600px) {
  .d-idx-list { display:none; }
  .d-idx-view { display:grid; gap:64px; }
  .d-idx-view .d-feature { gap:20px; }
  .d-idx-view .d-copy { display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:12px; row-gap:10px; align-items:baseline; order:0; }
  .d-idx-view .d-stage { order:1; }
  .d-idx-view .d-copy > :not(.fine) { display:block; }
  .d-idx-view .d-copy .d-num { font-size:13px; font-variant-numeric:tabular-nums; color:var(--c3); }
  .d-idx-view .d-copy h3 { font-size:24px; }
  .d-idx-view .d-copy p { grid-column:1 / -1; font-size:16px; line-height:1.55; }
  .d-idx-view .d-copy .fine { margin-top:0; font-size:14px; }
  .d-wide-only { display:none; }
  .d-idx-view .d-pop { display:none; }
  .d-idx-view .d-stage, .d-idx-view .d-stage--four, .d-idx-view .d-stage--single { padding:0; }
  .d-features > .split-heading { margin-bottom:40px; }
  /* the motion's rows under the model, clear of its status chip */
  .d-mo-rows { top:auto; bottom:calc(14 * var(--u)); }
}