/* ---------------------------------------------------------------------------
   Tokens. Light is the base; dark redefines only the values, so every rule
   below styles through tokens and never inside a media query.
   Palette is taken from the application itself: the CAD viewport's near-black,
   the orange of its crosshair and survey-point markers, the steel blue of its
   panel headers. Neutrals carry a blue bias so they read as chosen.
--------------------------------------------------------------------------- */
:root{
  --paper:#f2f4f6;
  --surface:#ffffff;
  --surface-2:#e8ecf0;
  --ink:#12161a;
  --ink-2:#3d4753;
  --ink-3:#69747f;
  --rule:#c9d2da;
  --rule-strong:#9aa7b3;
  --accent:#c2551b;
  --accent-ink:#ffffff;
  --steel:#2f4f6b;
  --ok:#1f7a4d;

  --shadow:0 1px 2px rgba(18,22,26,.06), 0 8px 24px rgba(18,22,26,.07);
  --measure:64ch;

  --step--1:clamp(.82rem,.79rem + .12vw,.88rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.55rem,1.35rem + 1vw,2.1rem);
  --step-3:clamp(2.1rem,1.7rem + 2vw,3.4rem);
  --step-4:clamp(2.6rem,1.9rem + 3.4vw,4.9rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f1317;
    --surface:#161b21;
    --surface-2:#1e252c;
    --ink:#e8edf2;
    --ink-2:#b3bfca;
    --ink-3:#8492a0;
    --rule:#2b343d;
    --rule-strong:#41505d;
    --accent:#f0803c;
    --accent-ink:#12161a;
    --steel:#7fa8cc;
    --ok:#4cc38a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --paper:#0f1317;
  --surface:#161b21;
  --surface-2:#1e252c;
  --ink:#e8edf2;
  --ink-2:#b3bfca;
  --ink-3:#8492a0;
  --rule:#2b343d;
  --rule-strong:#41505d;
  --accent:#f0803c;
  --accent-ink:#12161a;
  --steel:#7fa8cc;
  --ok:#4cc38a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The UA sheet hides [hidden] with display:none, which ANY author display rule outranks —
   `.tb{display:grid}` kept the beta block on screen after JS hid it, next to the note
   explaining its absence. Restore the attribute's meaning for every element. */
[hidden]{display:none !important}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"IBM Plex Sans Condensed","IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.012em;
  text-wrap:balance;
  margin:0;
}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{width:min(100% - 2.5rem,74rem);margin-inline:auto}
.mono{font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace}
.tnum{font-variant-numeric:tabular-nums}

/* Drafting label: small caps-ish tag used for section eyebrows and title-block
   cell headings. Letter-spaced because that is how drawing labels are set. */
.label{
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------------- header ---------------- */
.masthead{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
/* Three explicit columns rather than a flex row: the readout is centred in the BAR, not merely
   placed after the wordmark, so its changing width can never shift the wordmark left or the nav
   links right. The side columns are equal fractions, which is what keeps the middle one centred.
   Columns are assigned explicitly so that hiding the readout on narrow screens leaves the nav in
   column 3 instead of letting it reflow into the empty middle. */
.masthead .wrap{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:1.5rem;height:3.75rem;
}
.brand{grid-column:1;justify-self:start;display:flex;align-items:baseline;gap:.55rem;text-decoration:none;font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-.01em}
.brand .tick{color:var(--accent)}
.nav{grid-column:3;justify-self:end;display:flex;gap:1.5rem;align-items:center}
.nav a{text-decoration:none;color:var(--ink-2);font-size:.94rem}
.nav a:hover{color:var(--ink)}
@media (max-width:44rem){.nav a.hide-sm{display:none}}

/* ---------------- hero ---------------- */
.hero{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5.5rem)}
.hero-grid{display:grid;gap:2.5rem}
@media (min-width:60rem){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:4rem}}
.hero h1{font-size:var(--step-4);font-weight:700;letter-spacing:-.025em}
.hero .lede{font-size:var(--step-1);color:var(--ink-2);max-width:34ch;margin-top:1.15rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;align-items:center}

/* Live readout — first item in the masthead, ahead of the wordmark.
   The masthead is sticky, so the reading follows you down the page without needing its own
   fixed positioning. */
.readout{
  grid-column:2;justify-self:center;
  display:flex;align-items:center;gap:.5rem;
  font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
/* Fixed slot, sized to the LONGEST state. Without it every leg and the closure would each be a
   different width and shove the wordmark sideways on every click. */
.readout .call{min-width:39ch;text-align:left}

/* No pointer, no reading — hidden rather than left showing a frozen zero it can never update.
   Also hidden when the bar gets tight, so it never crowds the wordmark and the nav. */
@media (hover:none){.readout{display:none}}
@media (max-width:68rem){.readout{display:none}}

/* Nothing announces that this is clickable until you put the pointer on it — then it lights up
   in the accent, which is the hint. */
.call{
  font:inherit;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;white-space:nowrap;
  /* text-decoration, not border-bottom: the button is a fixed-width slot, and a border would
     rule off the whole empty slot instead of just the reading. */
  text-decoration:none;text-underline-offset:.3em;
  transition:color .15s;
}
.call:hover,.call:focus-visible{color:var(--accent);text-decoration:underline dotted}
.call.is-closed{color:var(--accent)}

/* Always occupies its slot, even before the first click. Removing it from layout instead
   (display:none) shoved the wordmark 34px sideways the moment the drawing appeared. */
.trav{color:var(--ink-3);overflow:visible;flex:none;visibility:hidden}
.trav.is-walking{visibility:visible}
.trav .leg{
  stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  /* Each leg is drawn on by animating its dash offset; hidden legs sit at full offset. */
  stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  transition:stroke-dashoffset .45s ease-out;
}
.trav .leg.drawn{stroke-dashoffset:0}
.trav.is-closed{color:var(--accent)}
.trav #trav-fill{transition:opacity .5s ease-out}
.trav.is-closed #trav-fill{opacity:.14}
@media (prefers-reduced-motion:reduce){
  .trav .leg{transition:none}
  .trav #trav-fill{transition:none}
}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.25rem;border-radius:2px;
  font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 86%,#000)}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn small{font-weight:400;opacity:.8;font-size:.82em}

.shot{
  border:1px solid var(--rule);
  box-shadow:var(--shadow);
  background:var(--surface);
  border-radius:3px;overflow:hidden;
}
.shot img{width:100%;height:auto}
.shot figcaption{
  border-top:1px solid var(--rule);
  padding:.6rem .85rem;background:var(--surface);
  font-size:.8rem;color:var(--ink-3);
}

/* ---------------- section frame ---------------- */
section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec-head{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2.75rem;max-width:var(--measure)}
.sec-head h2{font-size:var(--step-3)}
.sec-head p{color:var(--ink-2);font-size:var(--step-1);max-width:50ch}

/* ---------------- feature carousel (copy + 3D media) ---------------- */
#features{padding-bottom:clamp(4.5rem,9vw,7.5rem)}
#features .sec-head{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
#features .sec-head h2{font-size:var(--step-2);max-width:28ch}
#features .sec-head p{font-size:.95rem;max-width:46ch}
.feature-frame{
  border:1px solid var(--rule);background:var(--surface);
  box-shadow:var(--shadow);border-radius:3px;overflow:hidden;
}
.feature-body{
  display:grid;gap:1.15rem;
  padding:clamp(1.15rem,2.2vw,1.65rem);
  overflow:hidden;
}
@media (min-width:50rem){
  .feature-body{
    grid-template-columns:minmax(0,36%) minmax(0,64%);
    gap:clamp(1.75rem,3.5vw,2.75rem);
    padding:clamp(1.25rem,2.5vw,1.85rem) clamp(1.35rem,2.8vw,2rem);
    align-items:center;
  }
}
.feature-copy{
  position:relative;min-height:9.5rem;align-self:center;
  min-width:0;overflow:hidden;overflow:clip;
  z-index:2;padding-right:.15rem;
}
.feature-copy-panel{
  position:absolute;top:0;left:0;width:100%;margin:0;
  opacity:0;visibility:hidden;
  transform:translate3d(0,12px,0);
  transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility 0s .55s;
}
.feature-copy-panel.is-active{
  position:relative;opacity:1;visibility:visible;transform:translate3d(0,0,0);
  transition:opacity .5s ease .05s,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s;
}
.feature-frame.is-forward .feature-copy-panel.is-active{
  animation:feature-copy-in-fwd .65s cubic-bezier(.22,1,.36,1) both;
}
.feature-frame.is-back .feature-copy-panel.is-active{
  animation:feature-copy-in-back .65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes feature-copy-in-fwd{
  from{opacity:0;transform:translate3d(10px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes feature-copy-in-back{
  from{opacity:0;transform:translate3d(-10px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
.feature-copy-panel h3{font-size:clamp(1.1rem,.95rem + .35vw,1.35rem);letter-spacing:-.012em}
.feature-copy-panel .slide-lede{
  color:var(--ink-2);font-size:.88rem;line-height:1.5;margin:.45rem 0 0;
}
.feature-copy-panel ul{
  margin:.55rem 0 0;padding-left:1rem;color:var(--ink-3);font-size:.8rem;line-height:1.4;
  display:flex;flex-direction:column;gap:.15rem;
}
.feature-media-wrap{
  position:relative;min-width:0;
  padding:0 clamp(2.35rem,4vw,3rem);
  overflow:hidden;overflow:clip;z-index:1;
}
.feature-media-stage{
  position:relative;height:clamp(11rem,26vw,19rem);
  perspective:1300px;perspective-origin:62% 50%;
  outline:none;border-radius:3px;
  overflow:hidden;overflow:clip;
}
.feature-media-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.feature-media-cards{
  position:absolute;inset:0;transform-style:preserve-3d;
}
.feature-media-card{
  position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:1;
  transition:opacity .55s ease,filter .55s ease;
}
.feature-media-card .shot{
  width:min(88%,100%);margin:0;overflow:hidden;
  transform:translate3d(0,0,-180px) scale(.55);
  opacity:0;
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .55s ease,box-shadow .55s ease;
  transform-origin:62% 50%;backface-visibility:hidden;
  will-change:transform,opacity;
}
/* Captions on peeking 3D cards strip-read as ghost text beside the nav arrow — alt text is enough. */
#feature-carousel .feature-media-card .shot figcaption{display:none !important}
.feature-media-card.is-active{z-index:4;opacity:1;filter:none}
.feature-media-card.is-active .shot{
  transform:translate3d(0,0,0) rotateY(0deg) scale(1);
  transform-origin:50% 50%;
  opacity:1;
  box-shadow:0 16px 40px rgba(18,22,26,.16);
}
.feature-media-card.is-prev{z-index:2;opacity:1;filter:brightness(.92) saturate(.95)}
.feature-media-card.is-prev .shot{
  transform:translate3d(-22%,0,-70px) rotateY(28deg) scale(.82);
  transform-origin:78% 50%;
  opacity:.7;
}
.feature-media-card.is-next{z-index:2;opacity:1;filter:brightness(.92) saturate(.95)}
.feature-media-card.is-next .shot{
  transform:translate3d(18%,0,-70px) rotateY(-26deg) scale(.8);
  transform-origin:22% 50%;
  opacity:.55;
}
.feature-media-card.is-far{z-index:1;opacity:1;pointer-events:none;filter:none}
.feature-media-card.is-far .shot{
  transform:translate3d(0,0,-220px) scale(.5);
  opacity:0;
}
.feature-edge{
  position:absolute;top:50%;z-index:6;
  width:2.75rem;height:2.75rem;margin-top:-1.375rem;
  display:grid;place-items:center;
  font-size:1.55rem;line-height:1;
  color:var(--ink);background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--rule-strong);border-radius:50%;cursor:pointer;
  backdrop-filter:blur(8px);box-shadow:var(--shadow);
  transition:transform .2s ease,border-color .15s,color .15s,background .15s;
}
.feature-edge:hover{
  transform:scale(1.07);border-color:var(--accent);color:var(--accent);
}
.feature-edge.prev{left:0}
.feature-edge.next{right:0}
@media (max-width:49.99rem){
  .feature-body{grid-template-columns:1fr}
  .feature-media-wrap{order:-1;padding:0 2.5rem}
  .feature-media-stage{height:clamp(10rem,52vw,14rem)}
  .feature-media-card.is-prev,.feature-media-card.is-next{opacity:0}
  .feature-copy-panel ul{display:none}
}
.feature-nav{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.65rem 1rem;padding:.75rem 1rem;
  border-top:1px solid var(--rule);
  background:color-mix(in srgb,var(--surface-2) 45%,var(--surface));
}
.feature-nav-btn{
  font:inherit;color:var(--ink);background:transparent;
  border:1px solid var(--rule-strong);border-radius:2px;
  padding:.45rem .85rem;font-weight:600;font-size:.85rem;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.feature-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.feature-dots{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}
.feature-dot{
  width:.5rem;height:.5rem;border-radius:50%;padding:0;border:1px solid var(--rule-strong);
  background:var(--surface-2);cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.feature-dot[aria-current="true"]{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}
.feature-status{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
/* ---------------- downloads: drawing title block ----------------
   A plat's title block is a bordered grid of labelled cells in the corner of
   the sheet. Reusing it here is not ornament: each cell holds one real fact
   about the build, which is exactly what a title block does on a drawing.
------------------------------------------------------------------ */
.tb{
  border:2px solid var(--ink);
  background:var(--surface);
  display:grid;
}
.tb + .tb{margin-top:2rem}
.tb-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;
  padding:1rem 1.25rem;border-bottom:1px solid var(--ink);
}
.tb-head h3{font-size:var(--step-2);letter-spacing:-.015em}
.chip{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.22rem .5rem;border-radius:2px;
}
.chip-stable{background:var(--ok);color:#fff}
.chip-beta{background:var(--steel);color:#fff}
:root[data-theme="dark"] .chip-stable,:root[data-theme="dark"] .chip-beta{color:#0f1317}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chip-stable,
  :root:not([data-theme="light"]) .chip-beta{color:#0f1317}
}
.tb-head .blurb{color:var(--ink-3);font-size:.9rem;width:100%}

.tb-cells{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule)}
@media (min-width:52rem){.tb-cells{grid-template-columns:repeat(4,1fr)}}
.cell{background:var(--surface);padding:.85rem 1.25rem;min-width:0}
.cell .val{
  font-family:"IBM Plex Mono",monospace;font-size:.98rem;font-weight:500;
  margin-top:.25rem;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;
}
.tb-foot{padding:1.1rem 1.25rem;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.tb-foot .note{font-size:.85rem;color:var(--ink-3);margin-left:auto;max-width:42ch}

.dl-fallback{padding:1.25rem;border:1px dashed var(--rule-strong);color:var(--ink-2);font-size:.92rem}

/* ---------------- install-help modal ---------------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  background:color-mix(in srgb,var(--ink) 42%,transparent);
}
.modal{
  width:min(100%,34rem);
  max-height:min(88vh,100%);
  overflow:auto;
  background:var(--surface);
  /* --ink flips to near-white in dark mode, which reads as a harsh white frame. */
  border:1px solid var(--rule-strong);
  box-shadow:var(--shadow);
  border-radius:3px;
  scrollbar-width:thin;
  scrollbar-color:var(--rule-strong) var(--surface-2);
}
.modal::-webkit-scrollbar{width:10px}
.modal::-webkit-scrollbar-track{background:var(--surface-2)}
.modal::-webkit-scrollbar-thumb{
  background:var(--rule-strong);
  border:2px solid var(--surface-2);
  border-radius:6px;
}
.modal::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.25rem .9rem;
  border-bottom:1px solid var(--rule);
}
.modal-head h2{font-size:var(--step-1);letter-spacing:-.015em}
.modal-close{
  flex:none;
  font:inherit;color:var(--ink-3);background:none;border:0;
  padding:.15rem .35rem;cursor:pointer;line-height:1;
  font-size:1.35rem;
}
.modal-close:hover,.modal-close:focus-visible{color:var(--ink)}
.modal-body{padding:1.1rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:1rem}
.modal-lede{color:var(--ink-2);font-size:.95rem}
.modal-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85rem}
.modal-steps li{
  display:grid;grid-template-columns:auto 1fr;gap:.65rem .85rem;
  align-items:start;
}
.modal-steps .num{
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;font-weight:500;
  width:1.55rem;height:1.55rem;display:grid;place-items:center;
  border:1px solid var(--rule-strong);border-radius:2px;color:var(--ink-3);
}
/* Title only — `strong` inside the paragraph must stay inline or button names break across lines. */
.modal-steps li > div > strong{display:block;font-weight:600;margin-bottom:.15rem}
.modal-steps p{margin:0;color:var(--ink-2);font-size:.92rem;line-height:1.55}
.modal-steps p strong{font-weight:600}
.modal-callout{
  padding:.85rem 1rem;border:1px solid var(--rule);background:var(--surface-2);
  font-size:.88rem;color:var(--ink-2);
}
.modal-foot{
  display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;
  padding:0 1.25rem 1.25rem;
}
.modal-ack{
  flex:1 1 100%;
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:.92rem;color:var(--ink-2);cursor:pointer;
  padding:.15rem 0 .35rem;
}
.modal-ack input{
  flex:none;width:1rem;height:1rem;margin-top:.15rem;accent-color:var(--accent);
}
.btn-modal-secondary{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.72rem 1.25rem;border-radius:2px;
  font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid var(--rule-strong);
  background:var(--surface-2);color:var(--ink);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.btn-modal-secondary:hover{border-color:var(--ink-3);background:color-mix(in srgb,var(--surface-2) 70%,var(--ink))}
.modal-foot .btn-primary:disabled{
  opacity:.42;cursor:not-allowed;
  background:color-mix(in srgb,var(--accent) 55%,var(--surface-2));
}
.modal-foot .note{font-size:.82rem;color:var(--ink-3);margin:0;flex:1 1 100%}

/* ---------------- steps ---------------- */
.steps{display:grid;gap:1.25rem;counter-reset:s}
@media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr)}}
.step{border-top:2px solid var(--ink);padding-top:1rem;display:flex;flex-direction:column;gap:.4rem}
.step h3{font-size:1.05rem}
.step p{color:var(--ink-2);font-size:.94rem}

/* ---------------- footer ---------------- */
footer{border-top:1px solid var(--rule);padding:2.5rem 0 3.5rem;color:var(--ink-3);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
footer a{color:var(--ink-2)}
footer .right{margin-left:auto;display:flex;gap:1.5rem}

@media (prefers-reduced-motion:reduce){
  *:not(#feature-carousel):not(#feature-carousel *){animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* Carousel motion is intentional on the marketing page — keep durations above the RM clamp. */
#feature-carousel .feature-media-card .shot{
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .55s ease,box-shadow .55s ease !important;
}
#feature-carousel .feature-copy-panel{
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1),visibility 0s !important;
}
#feature-carousel.is-forward .feature-copy-panel.is-active,
#feature-carousel.is-back .feature-copy-panel.is-active{
  animation-duration:.65s !important;
}