/* ===========================================================================
   Editbelt — site styles

   Light, quiet and monochrome, so the only dark thing on the page is the
   plugin panel itself. Plain CSS, no build step: change a value here and
   reload the page.
   ======================================================================== */

:root {
  /* --- page --- */
  --bg: #ffffff;
  --ink: #0e0e11;          /* headlines and primary text */
  --ink2: #55575e;         /* body copy */
  --ink3: #8d8f97;         /* captions, mono labels */
  --line: #e7e7e3;         /* hairline borders */
  --tile: #f5f5f2;         /* tiles, media wells, quote cards */
  --tile2: #eeeee9;        /* hover */
  --dark: #111114;         /* the sections that carry weight */
  --dark2: #1c1c21;

  /* the easing the whole site moves on */
  --hero-ease: cubic-bezier(.22, .8, .3, 1);

  /* --- the one colour on the page --- */
  --accent: #5b3df5;
  --accent-deep: #4a2ee0;
  --accent-soft: #efecff;

  /* --- the plugin panel mock (these are the panel's real colours) --- */
  --panel-bg: #1e1e1e;
  --panel-bar: #232323;
  --panel-row: #292929;
  --panel-row-hi: #333333;
  --panel-edge: #333333;
  --panel-text: #d4d4d4;
  --panel-dim: #8a8a8a;
  --panel-active: #4a90d9;   /* the blue under the selected tab */
  --panel-ok: #8fbf5a;       /* the status line on success */

  /* --- type --- */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Inter Tight", "Inter", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- layout --- */
  --page: 1080px;
  --gutter: 24px;
  --radius: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

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

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.035em;
}
p { margin: 0; }

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ===== buttons ===== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2c2c2c; color: #fff; }

.btn-ghost { border: 1px solid #d9d9d4; color: var(--ink); }
.btn-ghost:hover { background: var(--tile); color: var(--ink); border-color: #c9c9c3; }

.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; border-radius: 8px; }

/* the accent button, for the one action that matters most on a page */
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-deep); color: #fff; }

/* ===== header ===== */

.site-header { height: 76px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }

.wordmark { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }

.site-nav { display: flex; align-items: center; gap: 28px; }
/* Buttons in the nav keep their own colour and size - `.site-nav a` would
   otherwise outrank `.btn-accent` (0,1,1 vs 0,1,0) and paint the label grey. */
.site-nav a:not(.btn) { color: var(--ink2); font-size: 15px; }
.site-nav a:not(.btn):hover { color: var(--ink); }

/* ===== hero ===== */

.hero { padding: 88px 0 0; text-align: center; }

.hero h1 {
  max-width: 880px;
  margin: 18px auto 0;
  font-size: clamp(38px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero .sub { margin: 20px auto 0; max-width: 620px; font-size: clamp(17px, 1.7vw, 20px); color: var(--ink2); }

.hero-actions { display: flex; justify-content: center; gap: 12px; margin: 32px 0 16px; flex-wrap: wrap; }

/* ===== sections ===== */

section { padding: 92px 0; }
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -0.035em; }
.section-head .mono { margin-top: 10px; }

/* ===========================================================================
   THE PANEL MOCK — the plugin's own UI, drawn in CSS
   Colours come from the panel's real stylesheet, so this looks like the
   product rather than an illustration of it.
   ======================================================================== */

.panel {
  width: 100%;
  max-width: 760px;
  background: var(--panel-bg);
  border-radius: 10px;
  overflow: hidden;
  font-size: 11px;
  color: var(--panel-text);
  text-align: left;
  box-shadow: 0 18px 50px rgba(20, 20, 20, .18), 0 2px 6px rgba(20, 20, 20, .10);
  flex: none;
}

.panel-tabs { display: flex; background: var(--panel-bar); border-bottom: 1px solid #131313; }

.panel-tab {
  flex: 1 1 0;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  color: var(--panel-dim);
  border-bottom: 2px solid transparent;
}

.panel-tab img { width: 12px; height: 12px; opacity: .7; }
.panel-tab.on { color: #f2f2f2; background: #2e2e2e; border-bottom-color: var(--panel-active); }
.panel-tab.on img { opacity: 1; }

.panel-body { padding: 4px; display: flex; flex-direction: column; gap: 2px; }

.panel-row {
  height: 26px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--panel-edge);
  border-radius: 2px;
  background: var(--panel-row);
}

.panel-row img { width: 16px; height: 16px; }
.panel-row .label { flex: 1 1 auto; }
.panel-row .key { font-family: var(--mono); font-size: 9px; color: #5f5f5f; }
.panel-row.hi { background: var(--panel-row-hi); border-color: #454545; }
.panel-row.add { border-style: dashed; background: transparent; color: var(--panel-dim); }

.panel-status { padding: 5px 7px; border-top: 1px solid #131313; background: var(--panel-bar); font-size: 10px; color: var(--panel-ok); }

/* the Add-a-button popup, as the panel really draws it */
.panel-dialog { width: 300px; }
.panel-dialog .title { height: 28px; padding: 0 10px; display: flex; align-items: center; background: var(--panel-bar); border-bottom: 1px solid #131313; color: #f2f2f2; }
.panel-dialog .form { padding: 12px; display: flex; flex-direction: column; gap: 5px; }
.panel-dialog label { font-size: 10px; color: #9c9c9c; margin-top: 4px; }
.panel-dialog .field { height: 26px; padding: 0 6px; display: flex; align-items: center; border: 1px solid #3a3a3a; border-radius: 2px; background: #1b1b1b; color: var(--panel-text); }
.panel-dialog .buttons { display: flex; gap: 4px; margin-top: 10px; }
.panel-dialog .buttons span { flex: 1 1 0; height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--panel-edge); border-radius: 2px; background: var(--panel-row); }
.panel-dialog .buttons span.primary { background: var(--panel-row-hi); border-color: #454545; }

/* the stage the panel sits on */
.stage {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 56px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.stage-hero { margin-top: 56px; }

/* ===== media wells ===== */

.media {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
}

.media img, .media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-video { aspect-ratio: 16 / 9; }
.media-demo { aspect-ratio: 16 / 9; flex: 1 1 58%; min-width: 0; }


/* ===== tool tiles ===== */

.tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

.tile {
  height: 108px;
  background: var(--tile);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 10px;
}

.tile:hover { background: var(--tile2); }
.tile .glyph { width: 40px; height: 40px; border-radius: 9px; background: var(--panel-bg); display: flex; align-items: center; justify-content: center; }
.tile .glyph img { width: 20px; height: 20px; }
.tile span { font-size: 13px; color: var(--ink2); }

/* ===== demo rows ===== */

.demo { display: flex; align-items: center; gap: 48px; }
.demo.flip { flex-direction: row-reverse; }
.demo-copy { flex: 1 1 36%; min-width: 0; }
.demo-copy h2 { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.15; letter-spacing: -0.03em; }
.demo-copy p { margin-top: 12px; font-size: 17px; color: var(--ink2); }

/* ===== quotes ===== */


/* ===== price ===== */

.price { text-align: center; }
.price .amount { font-size: clamp(40px, 6vw, 58px); font-weight: 600; letter-spacing: -0.04em; display: block; }
.price .terms { margin: 14px 0 26px; font-size: 17px; color: var(--ink2); }
.price .fine { margin-top: 16px; font-size: 13px; color: var(--ink3); }

/* ===== faq and limitations ===== */

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
.faq h3 { font-size: 16px; font-weight: 600; }
.faq p { margin-top: 8px; font-size: 15px; color: var(--ink2); }

/* ===== footer ===== */

.site-footer { padding: 48px 0 56px; border-top: 1px solid var(--line); }
.legal { margin-top: 24px; font-size: 12px; color: var(--ink3); line-height: 1.55; }

/* ===========================================================================
   Narrow screens
   ======================================================================== */

@media (max-width: 900px) {
  section { padding: 56px 0; }
  .hero { padding: 48px 0 0; }
  .site-nav a:not(.btn) { display: none; }
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .demo, .demo.flip { flex-direction: column; gap: 20px; align-items: stretch; }
  .media-demo { width: 100%; }
  .faq { grid-template-columns: 1fr; gap: 26px; }
  .docs { flex-direction: column; gap: 32px; }
  .docs-nav { width: 100%; position: static; }
  .hero-actions .btn { width: 100%; }
  .stage { padding: 32px 16px; }
}


/* ===========================================================================
   The panel docked wide (how it is actually used)
   Rows flow across the panel instead of stacking, the way a wide dock lays
   them out. Each card below shows one tab.
   ======================================================================== */

.panel-body.flow {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
}

.panel-body.flow .panel-row { flex: 1 1 210px; min-width: 0; }
.panel-body.flow .panel-row .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a Settings-tab field: label on the left, control on the right */
.panel-field {
  flex: 1 1 210px;
  height: 26px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #9c9c9c;
}

.panel-field .control {
  min-width: 86px;
  height: 20px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  border: 1px solid var(--panel-edge);
  border-radius: 2px;
  background: var(--panel-bar);
  color: var(--panel-text);
}

.panel-field .control::after { content: "BE"; font-size: 8px; color: #7a7a7a; }

/* ===== one card per tab ===== */


.tab-card {
  background: var(--tile);
  border-radius: 18px;
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tab-card .panel { max-width: none; }
.tab-card h3 { font-size: 17px; font-weight: 600; }
.tab-card p { font-size: 14px; color: var(--ink2); }
.tab-card .head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

@media (max-width: 900px) {
  .panel-body.flow .panel-row,
  .panel-body.flow .panel-field { flex: 1 1 100%; }
  .panel-body.flow .panel-row.curve-row { flex: 1 1 calc(50% - 2px); }
}


.tab-card .note { font-size: 12px; line-height: 1.45; color: var(--ink3); }


/* ===========================================================================
   Tab demos — one per tool, played on click

   The stage is dressed as Premiere: panes with their own title tab, a
   timecode strip, a track-header gutter with V-labels and toggles, a time
   ruler, an audio track and a playhead. Geometry hangs off a few custom
   properties, so a tab can put the Project panel beside the timeline without
   any of the keyframes needing to know where the timeline starts.

   site.js sets data-play on the stage to the tool that was clicked. Every
   rule below keys off that. Animations are play-once with fill: both, so a
   demo stops on the state the tool leaves you in rather than looping.
   ======================================================================== */

.ds { display: flex; flex-direction: column; gap: 8px; }

.ds-stage {
  /* Premiere's own greys and its clip blue */
  --pp-chrome: #c6c6c6;
  --pp-body: #bcbcbc;
  --pp-lane: #c9c9c9;
  --pp-line: #a6a6a6;
  --pp-ink: #333333;
  --pp-clip: #2f80bd;
  --pp-clip-top: #1f6395;
  --pp-clip-edge: #164a70;
  --pp-wave: #93c157;
  --pp-wave-edge: #6f9a38;
  --pp-play: #1a6fd0;

  --head: 18px;                                       /* pane title bar */
  --bar: 16px;                                        /* timecode strip */
  --ruler: 12px;
  --gut: 52px;                                        /* track headers */
  --tl: 0px;                                          /* timeline pane's left edge */
  --x0: calc(var(--tl) + var(--gut));
  --top: calc(var(--head) + var(--bar) + var(--ruler));
  --lane-h: 23px;
  --w: calc((100% - var(--x0) - 14px) / 4);

  position: relative;
  height: 162px;
  border: 1px solid #8f8f8f;
  border-radius: 4px;
  background: var(--pp-body);
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(20, 20, 20, .14);
}

.ds-cap {
  min-height: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ------------------------------------------------------------- the panes */

.pp-pane {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(var(--pp-chrome) 0 var(--head), var(--pp-body) var(--head));
  box-shadow: inset 0 0 0 1px #9e9e9e;
}

.pp-pane.pp-full { left: 0; right: 0; }
.pp-pane.pp-left { left: 0; width: calc(var(--tl) - 3px); }
.pp-pane.pp-right { left: var(--tl); right: 0; }
.pp-pane.pp-left2 { left: 0; width: 49%; }
.pp-pane.pp-right2 { left: 51%; right: 0; }

/* the active panel tab, with Premiere's accent along its top */
.pp-pane > i {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--head);
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: #dcdcdc;
  border-top: 2px solid var(--pp-play);
  border-right: 1px solid var(--pp-line);
  font-style: normal;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-ink);
}

/* --------------------------------------------------------- timeline parts */

.pp-bar {
  position: absolute;
  left: var(--tl);
  right: 0;
  top: var(--head);
  height: var(--bar);
  background: #cacaca;
  border-bottom: 1px solid var(--pp-line);
}

.pp-bar b {
  position: absolute;
  left: 8px;
  top: 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  font: 500 8px var(--mono);
  color: #1a4f8a;
}

/* the little tool row Premiere puts beside the timecode */
.pp-bar::after {
  content: "";
  position: absolute;
  left: 76px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #8e8e8e;
  box-shadow: 11px 0 0 #8e8e8e, 22px 0 0 #8e8e8e, 33px 0 0 #8e8e8e, 44px 0 0 #8e8e8e;
}

.pp-gutter {
  position: absolute;
  left: var(--tl);
  width: var(--gut);
  top: calc(var(--head) + var(--bar));
  bottom: 0;
  background: #cfcfcf;
  border-right: 1px solid var(--pp-line);
}

.pp-ruler {
  position: absolute;
  left: var(--x0);
  right: 0;
  top: calc(var(--head) + var(--bar));
  height: var(--ruler);
  background: #cdcdcd;
  border-bottom: 1px solid var(--pp-line);
  background-image: repeating-linear-gradient(90deg, #9a9a9a 0 1px, transparent 1px 22px);
}

.ds-lane {
  position: absolute;
  left: var(--x0);
  right: 0;
  top: calc(var(--top) + var(--i) * var(--lane-h));
  height: 21px;
  background: var(--pp-lane);
  box-shadow: inset 0 -1px 0 var(--pp-line);
}

/* a track header: the name, then its two toggles */
.ds-lane b,
.pp-audio b {
  position: absolute;
  left: calc(-1 * var(--gut) + 8px);
  top: 0;
  height: 21px;
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 8px var(--mono);
  color: var(--pp-ink);
}

.ds-lane b::after,
.pp-audio b::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #9a9a9a;
  box-shadow: 9px 0 0 #9a9a9a;
}

.pp-audio {
  position: absolute;
  left: var(--x0);
  right: 0;
  top: calc(var(--top) + 4 * var(--lane-h) + 2px);
  height: 19px;
  background: var(--pp-lane);
  box-shadow: inset 0 -1px 0 var(--pp-line);
}

/* the audio clip itself, not the whole track */
.pp-audio::after {
  content: "";
  position: absolute;
  left: 0;
  width: 72%;
  top: 0;
  bottom: 0;
  border: 1px solid var(--pp-wave-edge);
  border-radius: 1px;
  background: var(--pp-wave);
  background-image: repeating-linear-gradient(90deg, rgba(52, 80, 20, .45) 0 1px, transparent 1px 4px);
}

.pp-audio b { height: 19px; color: var(--pp-ink); }

.pp-playhead {
  position: absolute;
  left: calc(var(--x0) + 30%);
  top: calc(var(--head) + var(--bar));
  bottom: 0;
  width: 1px;
  background: var(--pp-play);
}

.pp-playhead::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--pp-play);
}

/* a video clip: name strip, body, and the head thumbnail Premiere draws */
.ds-clip {
  position: absolute;
  height: 21px;
  border: 1px solid var(--pp-clip-edge);
  border-radius: 1px;
  background: linear-gradient(var(--pp-clip-top) 0 6px, var(--pp-clip) 6px);
}

.ds-clip::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  bottom: 1px;
  width: 13px;
  background: rgba(255, 255, 255, .16);
}

@keyframes ds-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-open { from { opacity: 0; transform: scaleX(.03); } to { opacity: 1; transform: none; } }
@keyframes ds-span { from { opacity: 0; transform: scaleX(.02); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- Arrange
   Spread takes what is selected in the Project panel and lays it onto the
   timeline, one clip per track. Collapse is the other direction: it gathers
   clips already spread across tracks back down onto a single one. */

.ds-arrange .ds-stage { --tl: 34%; }

/* the selected items, which stay in the project */
.pp-src {
  position: absolute;
  left: 8px;
  width: calc(var(--tl) - 22px);
  top: calc(var(--head) + 9px + var(--i) * 22px);
  height: 18px;
  border: 1px solid var(--pp-clip-edge);
  border-radius: 1px;
  background: linear-gradient(var(--pp-clip-top) 0 5px, var(--pp-clip) 5px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .75);
  text-decoration: none;
}

.ds-arrange .ds-clip {
  --bx: 8px;
  --by: calc(var(--head) + 9px + var(--i) * 22px);
  --bw: calc(var(--tl) - 22px);
  --tx: calc(var(--x0) + var(--i) * (var(--w) + 2px));
  --step: calc(var(--top) + (3 - var(--i)) * var(--lane-h));
  --flat: calc(var(--top) + 3 * var(--lane-h));
  left: var(--bx);
  top: var(--by);
  width: var(--bw);
  height: 18px;
  opacity: 0;
  transition: left .45s cubic-bezier(.22, .8, .3, 1),
              top .45s cubic-bezier(.22, .8, .3, 1),
              width .45s cubic-bezier(.22, .8, .3, 1),
              height .45s ease, opacity .3s ease;
}

@keyframes ds-lay-out {
  from { left: var(--bx); top: var(--by); width: var(--bw); height: 18px; opacity: .5; }
  to   { left: var(--tx); top: var(--step); width: var(--w); height: 21px; opacity: 1; }
}

/* collapse starts where spread finished: on the tracks, not in the bin */
@keyframes ds-gather {
  from { left: var(--tx); top: var(--step); width: var(--w); height: 21px; opacity: 1; }
  to   { left: var(--tx); top: var(--flat); width: var(--w); height: 21px; opacity: 1; }
}

.ds-stage[data-play="spread"] .ds-clip {
  animation: ds-lay-out .7s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(var(--i) * .12s);
}

.ds-stage[data-play="collapse"] .ds-clip {
  animation: ds-gather .7s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc((3 - var(--i)) * .09s);
}

.ds-stage[data-play="range"] .ds-clip {
  left: var(--tx);
  top: var(--flat);
  width: var(--w);
  height: 21px;
  opacity: 1;
}

.ds-arrange .ds-range {
  position: absolute;
  left: var(--x0);
  right: 0;
  top: calc(var(--head) + var(--bar));
  height: var(--ruler);
  background: rgba(105, 165, 45, .55);
  box-shadow: inset 2px 0 0 #4d7a1f, inset -2px 0 0 #4d7a1f;
  transform-origin: 0 50%;
  opacity: 0;
}

.ds-stage[data-play="range"] .ds-range { animation: ds-span .6s cubic-bezier(.22, .8, .3, 1) both; }

/* ------------------------------------------------------------------- Build */

.ds-build .ds-clip {
  left: calc(var(--x0) + var(--i) * (var(--w) + 2px));
  width: var(--w);
  top: calc(var(--top) + 3 * var(--lane-h));
}

.ds-build .ds-nest {
  position: absolute;
  left: var(--x0);
  right: 6px;
  top: calc(var(--top) + 3 * var(--lane-h));
  height: 21px;
  border: 1px solid #5b7f33;
  border-radius: 1px;
  background: linear-gradient(#6f9a38 0 6px, #93c157 6px);
  opacity: 0;
}

.ds-build .ds-nest i {
  position: absolute;
  inset: 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: #24400a;
}

.ds-stage[data-play="nest"] .ds-clip {
  animation: ds-hide .4s ease both;
  animation-delay: calc(var(--i) * .06s);
}
.ds-stage[data-play="nest"] .ds-nest { animation: ds-show .4s ease .32s both; }

.ds-stage[data-play="unnest"] .ds-nest { animation: ds-hide .28s ease both; }
.ds-stage[data-play="unnest"] .ds-clip {
  animation: ds-pop .5s cubic-bezier(.22, .8, .3, 1) both;
  animation-delay: calc(.18s + var(--i) * .08s);
}

@keyframes ds-pop {
  from { opacity: 0; transform: translateY(7px) scaleX(.55); }
  to { opacity: 1; transform: none; }
}

.ds-build .ds-adj,
.ds-settings .ds-adj {
  position: absolute;
  height: 21px;
  border: 1px solid #7a5aa8;
  border-radius: 1px;
  background: linear-gradient(#6b4d96 0 6px, #8b6bb8 6px);
}

.ds-build .ds-adj {
  left: var(--x0);
  right: 6px;
  top: calc(var(--top) + 2 * var(--lane-h));
  opacity: 0;
}

.ds-stage[data-play="adj"] .ds-adj {
  transform-origin: 0 50%;
  animation: ds-open .55s cubic-bezier(.22, .8, .3, 1) both;
}

.ds-stage[data-play="adjcut"] .ds-adj {
  left: calc(var(--x0) + 2 * (var(--w) + 2px) - 34px);
  right: auto;
  width: 68px;
  transform-origin: 50% 50%;
  animation: ds-open .55s cubic-bezier(.22, .8, .3, 1) both;
}

.ds-build .ds-cut {
  position: absolute;
  left: calc(var(--x0) + 2 * (var(--w) + 2px) - 1px);
  top: var(--top);
  bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(#5a5a5a 0 3px, transparent 3px 6px);
  opacity: 0;
}

.ds-stage[data-play="adjcut"] .ds-cut { animation: ds-show .3s ease both; }

/* ------------------------------------------------------------------ Curves
   Effect Controls: the property list, then the graph the curve is drawn on,
   then the clip it drives. */

.ds-curves .pp-props {
  position: absolute;
  left: 10px;
  top: calc(var(--head) + 8px);
  width: 40%;
}

.ds-curves .pp-props em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4a4a4a;
}

.ds-curves .pp-row {
  position: absolute;
  left: 10px;
  width: 40%;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 16px;
  font-family: var(--sans);
  font-size: 9px;
  color: #3a3a3a;
  border-bottom: 1px solid #b2b2b2;
}

.ds-curves .pp-row { top: calc(var(--head) + 30px + var(--i) * 18px); }

.ds-curves .pp-row i { font-style: normal; }
.ds-curves .pp-row b { font-weight: 400; color: #1a4f8a; font-family: var(--mono); font-size: 8px; }

.ds-curves .ds-graph {
  position: absolute;
  right: 14px;
  top: calc(var(--head) + 8px);
  width: 96px;
  height: 96px;
  display: block;
  background: #b0b0b0;
  border: 1px solid #969696;
  border-radius: 1px;
}

.ds-curves .grid { fill: none; stroke: #9e9e9e; stroke-width: 1px; vector-effect: non-scaling-stroke; }

.ds-curves .ease {
  fill: none;
  stroke: #17558f;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 300;
}

.ds-stage[data-play^="curve-"] .ease { animation: ds-draw 1s ease-out both; }
@keyframes ds-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }

/* the clip the curve is driving, on its own little track */
.ds-curves .ds-track {
  position: absolute;
  left: 10px;
  width: calc(60% - 24px);
  top: calc(var(--head) + 106px);
  height: 22px;
  background: var(--pp-lane);
  box-shadow: inset 0 0 0 1px var(--pp-line);
}

.ds-curves .ds-track::before {
  content: "POSITION";
  position: absolute;
  left: 0;
  top: -14px;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .12em;
  color: #5f5f5f;
}

.ds-curves .ds-ball {
  position: absolute;
  top: calc(var(--head) + 106px);
  left: 12px;
  width: 22px;
  height: 22px;
  border: 1px solid var(--pp-clip-edge);
  border-radius: 1px;
  background: linear-gradient(var(--pp-clip-top) 0 6px, var(--pp-clip) 6px);
}

.ds-stage[data-play^="curve-"] .ds-ball { animation: ds-run 1.3s var(--ease, linear) .45s both; }
@keyframes ds-run { from { left: 12px; } to { left: calc(60% - 38px); } }

/* ------------------------------------------------------------------ Motion
   The Program monitor: the picture, then Premiere's transport strip. */

.ds-motion .ds-frame {
  position: absolute;
  left: 8px;
  right: 8px;
  top: calc(var(--head) + 7px);
  bottom: 26px;
  background: #1f2126;
  box-shadow: inset 0 0 0 1px #8f8f8f;
  overflow: hidden;
}

.ds-motion .ds-frame::before {
  content: "";
  position: absolute;
  inset: 0 0 38% 0;
  background: linear-gradient(#2b2f37, #23262c);
}

.ds-motion .ds-frame::after {
  content: "";
  position: absolute;
  inset: 62% 0 0 0;
  background: #1b1a19;
  box-shadow: inset 0 1px 0 #34363c;
}

.ds-motion .pp-scene {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 27px;
  height: 52px;
  background:
    repeating-linear-gradient(90deg, #2f333b 0 22px, transparent 22px 74px) left bottom / 100% 30px no-repeat,
    repeating-linear-gradient(90deg, #383c45 0 30px, transparent 30px 98px) 44px bottom / 100% 48px no-repeat;
}

.ds-motion .pp-transport {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 16px;
  background: #cacaca;
  border: 1px solid var(--pp-line);
  border-radius: 1px;
}

.ds-motion .pp-transport::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  margin-left: -33px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #7d7d7d;
  box-shadow: 13px 0 0 #7d7d7d, 26px 0 0 #4a4a4a, 39px 0 0 #7d7d7d, 52px 0 0 #7d7d7d;
}

.ds-motion .ds-subject {
  position: absolute;
  left: 40px;
  top: 96px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9e988c;
  box-shadow: 0 0 0 1px #c4beb0;
}

.ds-motion .ds-box {
  position: absolute;
  left: 27px;
  top: 83px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(74, 144, 217, .35);
  opacity: 0;
}

.ds-motion .ds-box::before,
.ds-motion .ds-box::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid #5aa7ff;
}

.ds-motion .ds-box::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.ds-motion .ds-box::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

.ds-motion .ds-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5aa7ff;
}

.ds-motion .ds-tag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  height: 15px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  border-radius: 1px;
  background: var(--pp-play);
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  opacity: 0;
}

@keyframes ds-lock { from { opacity: 0; transform: scale(1.9); } to { opacity: 1; transform: none; } }
@keyframes ds-follow-box { from { left: 27px; top: 83px; } to { left: calc(100% - 66px); top: 36px; } }
@keyframes ds-follow-sub { from { left: 40px; top: 96px; } to { left: calc(100% - 53px); top: 49px; } }

.ds-stage[data-play="aim"] .ds-box { animation: ds-lock .7s cubic-bezier(.22, .8, .3, 1) both; }

.ds-stage[data-play="track"] .ds-box,
.ds-stage[data-play="attach"] .ds-box {
  animation: ds-lock .45s cubic-bezier(.22, .8, .3, 1) both,
             ds-follow-box 1.5s ease-in-out .4s both;
}

.ds-stage[data-play="track"] .ds-subject,
.ds-stage[data-play="attach"] .ds-subject {
  animation: ds-follow-sub 1.5s ease-in-out .4s both;
}

.ds-stage[data-play="attach"] .ds-tag { animation: ds-show .4s ease .3s both; }

.ds-stage[data-play="stabilize"] .ds-frame { animation: ds-wobble 1.9s ease-in-out both; }
.ds-stage[data-play="stabilize"] .ds-subject { left: calc(50% - 6px); top: calc(50% - 4px); }
.ds-stage[data-play="stabilize"] .ds-box {
  left: calc(50% - 19px);
  top: calc(50% - 17px);
  animation: ds-lock .45s cubic-bezier(.22, .8, .3, 1) both;
}

@keyframes ds-wobble {
  0%   { transform: translate(0, 0) rotate(0deg); }
  22%  { transform: translate(-9px, 5px) rotate(-.7deg); }
  48%  { transform: translate(8px, -4px) rotate(.6deg); }
  72%  { transform: translate(-5px, -3px) rotate(-.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ------------------------------------------------------------------- Media */

.ds-media .ds-thumb {
  position: absolute;
  width: 34px;
  height: 20px;
  top: calc(var(--head) + 14px + var(--i) * 24px);
  left: 14px;
  border: 1px solid var(--pp-clip-edge);
  border-radius: 1px;
  background: linear-gradient(var(--pp-clip-top) 0 5px, var(--pp-clip) 5px);
}

@keyframes ds-pick { from { box-shadow: none; } to { box-shadow: inset 0 0 0 1px var(--pp-play); } }
@keyframes ds-mark { from { box-shadow: none; } to { box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); } }
@keyframes ds-fly { from { left: 14px; } to { left: calc(51% + 14px); } }

.ds-stage[data-play="copy"] .pp-left2 { animation: ds-pick .6s ease both; }
.ds-stage[data-play="copy"] .ds-thumb {
  animation: ds-mark .6s ease both;
  animation-delay: calc(var(--i) * .1s);
}

.ds-stage[data-play="paste"] .ds-thumb {
  animation: ds-fly 1s cubic-bezier(.5, 0, .2, 1) both;
  animation-delay: calc(var(--i) * .12s);
}
.ds-stage[data-play="paste"] .pp-right2 { animation: ds-pick .6s ease .5s both; }

/* ---------------------------------------------------------------- Settings
   No data-play here: the fields set --start and --cut straight on the stage
   and everything transitions to the new numbers. */

.ds-settings .ds-stage { --start: 0; --cut: 10; }

.ds-settings .ds-clip {
  left: var(--x0);
  right: 6px;
  width: auto;
  top: calc(var(--top) + (3 - var(--start)) * var(--lane-h));
  transition: top .35s cubic-bezier(.22, .8, .3, 1);
}

.ds-settings .ds-adj {
  top: calc(var(--top) + (2 - var(--start)) * var(--lane-h));
  width: calc(var(--cut) * 7px);
  left: calc(var(--x0) + 40%);
  transition: top .35s cubic-bezier(.22, .8, .3, 1), width .35s ease;
}


/* ===========================================================================
   Everything in the panel is a control now, so it has to look like one
   ======================================================================== */

.panel-row[role="button"],
.panel-field[role="button"],
.panel-tab[data-tab] {
  cursor: pointer;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.panel-row[role="button"]:hover { background: #303030; border-color: #4a4a4a; }
.panel-row.hi[role="button"]:hover { background: #3a3a3a; }
.panel-row.add[role="button"]:hover { background: rgba(255, 255, 255, .04); }
.panel-row[role="button"]:active { transform: translateY(1px); }

.panel-tab[data-tab]:hover { color: #e8e8e8; background: #282828; }
.panel-tab[data-tab].on:hover { background: #343434; }
.panel-tab[data-tab]:active { background: #3a3a3a; }

/* the open tab gets its underline; the rest get a faint one on hover so the
   whole strip reads as something you can move between */
.panel-tab[data-tab]:hover { border-bottom-color: #4a4a4a; }
.panel-tab[data-tab].on:hover { border-bottom-color: var(--panel-active); }
.panel-field[role="button"]:hover .control { border-color: #4f4f4f; background: #2c2c2c; }

.panel-row:focus-visible,
.panel-field:focus-visible,
.panel-tab:focus-visible { outline: 2px solid var(--panel-active); outline-offset: 1px; }

/* the Settings control: a value and a caret, the way a dropdown reads */
.panel-field .control::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #7a7a7a;
  flex: none;
}

.panel-field .val { font-weight: 400; color: var(--panel-text); }
.panel-field i { font-style: normal; }

.hint { color: var(--ink3); }

/* Motion off: keep every end state, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .ds-stage *,
  .tab-card * {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
}


/* ===========================================================================
   One horizontal strip per tab

   The panel lives in a wide dock, so a tab's tools sit side by side on a
   single line rather than stacking. That is the whole point of it: two rows
   of panel height, however many tools a tab holds.
   ======================================================================== */

.panel-body.flow .panel-row,
.panel-body.flow .panel-field { flex: 1 1 0; min-width: 0; }

/* Curves is the one exception: eight names will not read at an eighth of the
   panel, so they break four and four. Still boxes, still horizontal. */
.panel-body.flow .panel-row.curve-row { flex: 1 1 calc(25% - 2px); }

.tab-card {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  column-gap: 26px;
  align-items: center;
  padding: 22px;
}

.tc-text { display: flex; flex-direction: column; gap: 10px; }
.tc-show { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.tc-text .head { display: block; }
.tc-text .head .mono { display: block; margin-top: 4px; }

@media (max-width: 900px) {
  .tab-card { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}


/* ===========================================================================
   The curve glyph — a small graph well, drawn square so nothing is squashed
   ======================================================================== */

.curve-well {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 2px;
  background: #1a1a1a;
  box-shadow: inset 0 0 0 1px #303030;
  display: flex;
  align-items: center;
  justify-content: center;
}

.curve-glyph { width: 100%; height: 100%; display: block; }
.curve-glyph path { stroke-width: 2.6px; }

.panel-row.curve-row { gap: 7px; padding: 0 6px; color: var(--panel-dim); }
.panel-row.curve-row .label { color: var(--panel-text); }
.panel-row.curve-row.hi { color: var(--panel-active); }
.panel-row.curve-row.hi .curve-well { box-shadow: inset 0 0 0 1px rgba(74, 144, 217, .5); }


/* ===========================================================================
   One panel, six panes

   Everything belonging to a tab carries data-pane and is hidden when that
   tab is not open. [hidden] needs the !important because .panel-body sets
   display: flex, which would otherwise win.
   ======================================================================== */

[hidden] { display: none !important; }

.tc-copy { display: flex; flex-direction: column; gap: 10px; }

/* hold the text column's height steady so switching tabs does not jolt the
   card; it is the panel side that sets the real height */
.tc-text { min-height: 252px; justify-content: center; }

.tab-card .note { margin-top: 2px; }


/* ===========================================================================
   Fit and finish
   ======================================================================== */

/* Five tools on one line need a slightly smaller label to stay whole. */
/* Inter sets wider than the old system stack, so the rows are tightened to
   keep five tool names whole rather than ellipsised. */
.panel-body.flow .panel-row {
  font-size: 9.5px;
  letter-spacing: -0.005em;
  gap: 5px;
  padding: 0 4px;
}

.panel-body.flow .panel-row img { width: 13px; height: 13px; }
.panel-body.flow .panel-row.curve-row { font-size: 10px; gap: 6px; padding: 0 5px; }



/* ===========================================================================
   Build your own button — the four-step walkthrough

   Same pattern as the tab panes: one mock is shown at a time and the steps
   on the left switch between them.
   ======================================================================== */

.how {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 14px 16px 14px 46px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 14px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e2e2e1;
  color: var(--ink2);
  font-family: var(--mono);
  font-size: 11px;
}

.step:hover { background: var(--tile); }
.step.on { background: var(--tile); }
.step.on::before { background: var(--ink); color: #fff; }
.step:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.step > b { display: block; font-size: 15px; font-weight: 600; }
.step > span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink2); line-height: 1.5; }
.step span b { font-weight: 600; color: var(--ink); }
.step em { font-style: normal; font-weight: 500; color: var(--ink); }

/* the dashed row reads as focused when the walkthrough points at it */
.how-pane .panel-row.add.hi {
  border-style: solid;
  border-color: var(--panel-active);
  background: rgba(74, 144, 217, .12);
  color: var(--panel-text);
}

.how-stage {
  background: var(--tile);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 268px;
}

.how-pane { width: 100%; display: flex; justify-content: center; }
.how-pane .panel { max-width: 620px; }

.how-note {
  margin-top: 22px;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink3);
}

/* ----- the popup, as the panel really draws it ----- */

.panel-dialog .field.dim { color: #6d6d6d; }

/* the caret that sits after what you have typed */
.panel-dialog .field.typing { color: var(--panel-text); }
.panel-dialog .field.typing::after {
  content: "";
  width: 1px;
  height: 13px;
  margin-left: 2px;
  background: var(--panel-text);
  animation: how-caret 1.1s steps(1, end) infinite;
}

@keyframes how-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

.panel-dialog .picker {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px;
  border: 1px solid #3a3a3a;
  border-radius: 2px;
  background: #1b1b1b;
}

.panel-dialog .opt {
  height: 22px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  color: #b4b4b4;
  border-radius: 2px;
}

.panel-dialog .opt.on { background: var(--panel-active); color: #fff; }

.panel-dialog .buttons span.primary.pressed {
  background: var(--panel-active);
  border-color: var(--panel-active);
  color: #fff;
}

/* the finished button, with its key showing */
.how-pane .panel-row .key {
  font-family: var(--mono);
  font-size: 9px;
  color: #8f8f8f;
  padding: 1px 4px;
  border: 1px solid #4a4a4a;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .how { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .how-stage { padding: 22px 14px; min-height: 0; }
}

/* The walkthrough mock is narrower than a real dock, so its rows wrap onto
   two lines rather than ellipsising the tool names. */
.how-pane .panel { max-width: none; }
.how-pane .panel-body.flow .panel-row { flex: 1 1 150px; font-size: 11px; }
.how-pane .panel-body.flow .panel-row img { width: 16px; height: 16px; }


/* ===========================================================================
   Pricing page
   ======================================================================== */

.price-hero { padding: 76px 0 56px; text-align: center; }

.price-hero h1 {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.price-hero .sub {
  margin: 18px auto 0;
  max-width: 560px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink2);
}

.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.plan {
  position: relative;
  padding: 34px 32px 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* the one most people want gets the weight, not a colour */
.plan.is-pick {
  border-color: var(--ink);
  box-shadow: 0 18px 44px rgba(20, 20, 20, .08);
}

.plan-flag {
  position: absolute;
  top: -11px;
  left: 32px;
  height: 22px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.plan-head h2 { font-size: 21px; letter-spacing: -0.02em; }
.plan-head p { margin-top: 6px; font-size: 15px; color: var(--ink2); }

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.plan-price .amount {
  font-size: clamp(38px, 5vw, 50px);
  font-weight: 600;
  letter-spacing: -0.04em;
}

.plan-price .per {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink3);
}

.plan .btn { width: 100%; }

.plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.plan-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink2);
}

.plan-list li b { font-weight: 600; color: var(--ink); }

/* the tick, drawn rather than fetched */
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

.plan-fine {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: var(--ink3);
}

/* ----- the comparison ----- */

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.compare th,
.compare td {
  padding: 15px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.compare thead th {
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.compare thead th:first-child { font-weight: 400; }
.compare tbody th { font-weight: 400; color: var(--ink2); width: 50%; }
.compare td { width: 25%; color: var(--ink); }
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .no { color: var(--ink3); }

@media (max-width: 900px) {
  .price-hero { padding: 44px 0 32px; }
  .plans { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .plan { padding: 30px 22px 26px; }
  .compare { font-size: 14px; }
  .compare th, .compare td { padding: 12px 10px; }
  .compare tbody th { width: 46%; }
}



/* ===========================================================================
   Accent and weight

   One colour, used where it means something: the plan you should pick, the
   step you are on, the thing that has focus. Plus a dark band so the page
   has some rhythm instead of running white the whole way down.
   ======================================================================== */

.plan.is-pick { border-color: var(--accent); box-shadow: 0 18px 44px rgba(91, 61, 245, .12); }
.plan-flag { background: var(--accent); }
.plan-list li::before { border-color: var(--accent); }

.step.on { background: var(--accent-soft); }
.step.on::before { background: var(--accent); color: #fff; }
.step:focus-visible { outline-color: var(--accent); }

.compare .yes { color: var(--ink); font-weight: 500; }

/* ----- the dark price band on the home page ----- */

#price {
  background: var(--dark);
  color: #fff;
  border-radius: 22px;
  margin: 0 var(--gutter);
  padding: 76px 0;
}

#price .amount { color: #fff; }
#price .terms { color: #b6b8bf; }
#price .fine { color: #83858d; }

@media (max-width: 900px) {
  #price { margin: 0 12px; padding: 48px 0; border-radius: 18px; }
}


/* ===========================================================================
   Logo, shared chrome, and the pages added alongside the home page
   ======================================================================== */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.wordmark img { display: block; border-radius: 7px; }

.site-nav a.here { color: var(--ink); font-weight: 600; }
.site-nav a.here:hover { color: var(--accent); }

/* a little lift under the header so it separates when you scroll */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .88); backdrop-filter: blur(10px); }

/* ----- page heroes ----- */

.page-hero { padding: 72px 0 52px; text-align: center; }

.page-hero h1 {
  max-width: 820px;
  margin: 16px auto 0;
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.03;
  letter-spacing: -0.04em;
}

.page-hero .sub {
  margin: 18px auto 0;
  max-width: 580px;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink2);
}

/* ----- tutorials ----- */

.lessons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lesson {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.lesson:hover {
  border-color: #d6d2ff;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(20, 20, 30, .07);
}

.lesson h3 { margin-top: 8px; font-size: 20px; letter-spacing: -0.025em; }

.lesson ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: lesson;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lesson li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink2);
}

.lesson li::before {
  counter-increment: lesson;
  content: counter(lesson);
  position: absolute;
  left: 0;
  top: 1px;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
}

.lesson li b { font-weight: 600; color: var(--ink); }

.lesson-out {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink3);
}

/* ----- what's new ----- */

.releases { display: flex; flex-direction: column; gap: 4px; }

.release {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

.release-meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.tag {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}

.tag-quiet { background: var(--tile); color: var(--ink2); }

.release-body h3 { font-size: 21px; letter-spacing: -0.025em; }
.release-body p { margin-top: 8px; font-size: 16px; color: var(--ink2); line-height: 1.6; }

.release-body ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.release-body li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.5;
}

.release-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cfcbe8;
}

.release-body li b { font-weight: 600; color: var(--ink); }
.release.is-next .release-body { opacity: .72; }

/* ----- about ----- */

.prose { max-width: 680px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; letter-spacing: -0.03em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 14px; font-size: 17px; line-height: 1.65; color: var(--ink2); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ----- the closing call to action ----- */

.cta-band {
  padding: 56px 40px;
  border-radius: 20px;
  background: var(--tile);
  text-align: center;
}

.cta-band h2 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.035em; }
.cta-band p { margin: 12px 0 26px; font-size: 17px; color: var(--ink2); }

/* ----- footer in columns, the way a real product site carries links ----- */

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 36px;
}

.footer-brand p { margin-top: 12px; max-width: 230px; font-size: 14px; color: var(--ink3); line-height: 1.55; }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .mono { margin-bottom: 2px; }
.footer-col a { color: var(--ink2); font-size: 14px; }
.footer-col a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .lessons { grid-template-columns: minmax(0, 1fr); }
  .release { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 0; }
  .release-meta { flex-direction: row; align-items: center; gap: 12px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
  .cta-band { padding: 38px 20px; }
  .page-hero { padding: 44px 0 30px; }
  .site-nav a.here { display: none; }
}


/* ===========================================================================
   A little more to look at
   ======================================================================== */

/* the hero stage gets a wash of the accent instead of flat grey */
.stage-hero {
  background: var(--tile);
  border-color: #e3e0f6;
}

/* cards lift slightly, which is most of what makes a page feel alive */
.tile, .quote, .plan, .tab-card, .how-stage {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.tile:hover { transform: translateY(-2px); }

.plan:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(20, 20, 30, .09); }
.plan.is-pick:hover { box-shadow: 0 22px 50px rgba(91, 61, 245, .18); }

/* the tool tiles carry the accent on hover rather than just going grey */
.tile:hover .glyph { background: var(--accent); }
.tile .glyph { transition: background .18s ease; }

/* section headings get a short accent rule above them */
.section-head .mono { color: var(--accent); }

.site-footer { border-top: 1px solid var(--line); }


/* the home page's closing band carries no price, so the headline does the
   work the number used to */
.price .amount { font-family: var(--display); letter-spacing: -0.04em; }
.price .terms { margin-bottom: 26px; }
#price .fine a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#price .fine a:hover { color: #cfc7ff; }


/* ===========================================================================
   Colour that carries meaning

   The reference site is almost monochrome and lets its product imagery bring
   the colour. This panel's imagery is a grey Premiere window, so the colour
   has to come from somewhere else: each tab gets its own hue, used on the
   tool tiles and the quote avatars. Six hues, one per tab, never decoration
   for its own sake.
   ======================================================================== */

:root {
  --h-arrange: #5b3df5;
  --h-build: #2f7fe0;
  --h-curves: #00a389;
  --h-motion: #e8850c;
  --h-media: #e0489b;
  --h-settings: #5a6270;

  --h-arrange-soft: #efecff;
  --h-build-soft: #e8f2fd;
  --h-curves-soft: #e0f6f2;
  --h-motion-soft: #fdf0e0;
  --h-media-soft: #fdeaf4;
  --h-settings-soft: #eceef1;
}

[data-hue="arrange"] { --hue: var(--h-arrange); --hue-soft: var(--h-arrange-soft); }
[data-hue="build"] { --hue: var(--h-build); --hue-soft: var(--h-build-soft); }
[data-hue="curves"] { --hue: var(--h-curves); --hue-soft: var(--h-curves-soft); }
[data-hue="motion"] { --hue: var(--h-motion); --hue-soft: var(--h-motion-soft); }
[data-hue="media"] { --hue: var(--h-media); --hue-soft: var(--h-media-soft); }
[data-hue="settings"] { --hue: var(--h-settings); --hue-soft: var(--h-settings-soft); }

/* ----- the tool tiles, coloured by the tab they live in ----- */

.tile[data-hue] { background: var(--hue-soft); }
.tile[data-hue]:hover { background: var(--hue-soft); }
.tile[data-hue] .glyph { background: var(--hue); }
.tile[data-hue]:hover .glyph { background: var(--hue); transform: scale(1.06); }
.tile .glyph { transition: background .18s ease, transform .18s ease; }
.tile[data-hue] span { color: #3d3f45; }

/* ----- alternating bands, so the page is not one long white sheet ----- */

#tabs, #own {
  background:
    linear-gradient(180deg, rgba(91, 61, 245, .045), rgba(91, 61, 245, 0) 340px),
    #fbfaff;
}

#tools { background: #fff; }

/* ----- quote cards ----- */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.quote {
  margin: 0;
  padding: 30px 28px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.quote:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(20, 20, 30, .07); }

.quote p {
  flex: 1 1 auto;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.quote footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hue, var(--accent));
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}

.quote cite { font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.quote cite b { font-size: 14px; font-weight: 600; color: var(--ink); }
.quote cite { font-size: 13px; color: var(--ink3); }

@media (max-width: 900px) {
  .quotes { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   Docs — a sticky index beside a single long page of articles
   ======================================================================== */

.docs {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 64px;
  padding: 0 0 96px;
  align-items: start;
}

.docs-nav {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.docs-group { display: flex; flex-direction: column; gap: 7px; }
.docs-group .mono { margin-bottom: 3px; color: var(--ink3); }

.docs-group a {
  padding: 3px 0 3px 12px;
  border-left: 2px solid transparent;
  color: var(--ink2);
  font-size: 14.5px;
  line-height: 1.4;
  transition: color .15s ease, border-color .15s ease;
}

.docs-group a:hover { color: var(--ink); border-left-color: #d7d3f7; }
.docs-group a.here { color: var(--accent); border-left-color: var(--accent); font-weight: 500; }

.docs-body { max-width: 700px; min-width: 0; }

.doc {
  padding: 0 0 44px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 96px;
}

.doc:last-child { border-bottom: 0; margin-bottom: 0; }

.doc > .mono { color: var(--accent); }
.doc h2 { font-size: 30px; margin: 10px 0 18px; letter-spacing: -0.035em; }
.doc p { margin-bottom: 14px; font-size: 16px; line-height: 1.65; color: var(--ink2); }
.doc .lead { font-size: 18px; color: var(--ink); }
.doc b { font-weight: 600; color: var(--ink); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.doc ol {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: docstep;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.doc ol li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink2);
}

.doc ol li::before {
  counter-increment: docstep;
  content: counter(docstep);
  position: absolute;
  left: 0;
  top: 2px;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 11px;
}

/* term and explanation, for the pages that are really a list of tools */
.deflist { margin: 0 0 16px; }
.deflist dt { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--ink); }
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: 4px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink2); }

.callout {
  padding: 20px 22px;
  background: var(--accent-soft);
  border-radius: 12px;
  margin: 22px 0;
}

.callout .mono { color: var(--accent-deep); margin-bottom: 6px; }
.callout p:last-child { margin-bottom: 0; }
.callout p { color: #4a4661; }

@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 56px; }
  .docs-nav { position: static; max-height: none; }
  .doc h2 { font-size: 25px; }
}


/* ----- star ratings on the review cards ----- */

.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.stars svg { width: 16px; height: 16px; fill: #f5a623; display: block; }


/* Buy now carries the logo's violet everywhere, including on the dark band,
   where it needs a touch more lift to sit off the black. */
#price .btn-accent { box-shadow: 0 10px 28px rgba(91, 61, 245, .35); }
#price .btn-accent:hover { background: #6d52ff; }


/* ======================================================================
   HERO MOTION GRAPHIC

   One 9s timeline expressed entirely in CSS. Every beat is a percentage
   of the same duration, so the parts cannot drift apart the way a JS
   clock would let them. site.js only toggles .is-live when the stage is
   actually on screen — nothing animates while the reader is further down
   the page. Without .is-live the hero renders exactly as it did before,
   which is also the reduced-motion and no-JS resting state.

   Beats: 0-14 rise · 18-30 tab travel · 30-46 rows · 46-62 press
          62-88 resolve · 88-100 release
   ====================================================================== */

.stage-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
}

/* The generated ambient plate. Heavily defocused on purpose: it should
   read as light in the room, never as a video playing behind the panel. */
.hero-plate {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  opacity: .62;
  filter: blur(22px) saturate(115%);
  z-index: 0;
  pointer-events: none;
}

/* ======================================================================
   THE PLATE, AS A REUSABLE SURFACE TREATMENT

   Any surface carries it by adding .plate. The default is the still —
   one 31KB jpg and no video decoder — which is all a secondary surface
   needs, because the plate is blurred well past the point where the
   drift would read. .stage-hero layers the moving version over the top,
   so the one place the eye lingers gets the motion while every other
   surface gets the same light for free.

   Layering: ::before is the plate, ::after the brand wash over it, and
   real children sit above both. The pseudos cannot use a negative
   z-index — most of these surfaces paint an opaque --tile background,
   which would hide anything sitting behind it.
   ====================================================================== */

.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.plate > * { position: relative; z-index: 2; }

.plate::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: 0;
  background: url("assets/hero-plate-poster.jpg") center / cover no-repeat;
  opacity: .55;
  filter: blur(24px) saturate(112%);
  pointer-events: none;
}

/* The wash rides over the plate, so a surface keeps its brand colour even
   before the image has loaded, or if it never loads at all. */
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 140% at 50% -20%, rgba(91, 61, 245, .16), transparent 62%);
}

/* Full-bleed page headers take a lighter dose: the same light behind a
   page title, not a whole card's worth of it. */
.page-hero.plate::before,
.price-hero.plate::before { opacity: .36; }

.page-hero.plate,
.price-hero.plate { border-bottom: 1px solid var(--line); }

/* ======================================================================
   THE HERO AS A 3D SCENE

   The reference explainer gets its depth from a real AE camera moving
   through layers placed in 3D space — not from a skew. This does the
   same thing with preserve-3d: the plate, the blooms and the panel sit
   at different translateZ, and animating the SCENE's rotation moves all
   of them together. Near layers then travel further across the frame
   than far ones, which is real parallax rather than a faked one.

   .stage-hero cannot host this itself. `.plate` gives it overflow:hidden
   to clip the plate, and overflow flattens preserve-3d — an element
   cannot both clip and hold a 3D space. So the stage stays the clipper
   and .hero-scene is the 3D space inside it.

   The angles are deliberately far shallower than the reference. Its type
   is big display lettering that can lean hard; ours is 11px UI labels,
   and every degree of rotation resamples them softer. The panel also
   counter-rotates against the camera, so the depth reads on the
   background while the labels stay close to flat and legible.
   ====================================================================== */

.stage-hero {
  perspective: 1100px;
  perspective-origin: 50% 42%;
}

.hero-scene {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Depth assignments. Each layer is scaled back up by (P + d) / P so that
   pushing it away does not shrink it — it only changes how far it moves
   when the camera turns. */
.hero-scene > .hero-plate {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(-320px) scale(1.29);
}

.hero-scene > .hero-bloom {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(900px, 96%);
  height: 260px;
  transform: translate(-50%, -50%) translateZ(-180px) scale(1.16);
  background: radial-gradient(50% 100% at 50% 50%, rgba(91, 61, 245, .45), transparent 72%);
  filter: blur(46px);
  opacity: .55;
  pointer-events: none;
}

.hero-scene > .hero-glow {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -34%) translateZ(-90px) scale(1.08);
}

.hero-scene > .panel {
  position: relative;
  z-index: 2;
  transform: translateZ(0);
}

/* A rim of light along the top edge, the way the reference lights the top
   of every glass tile. Inset, because .panel is overflow:hidden. */
.stage-hero .panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 2px 6px rgba(20, 20, 20, .16),
    0 18px 50px rgba(20, 20, 20, .24),
    0 36px 80px rgba(91, 61, 245, .20);
}

/* The camera. One slow continuous pass that starts and ends identically,
   so it loops with no seam — the reference never cuts either. */
@keyframes hero-camera {
  0%   { transform: rotateX(2.2deg) rotateY(-2.4deg) translateZ(0); }
  34%  { transform: rotateX(1.2deg) rotateY(1.8deg)  translateZ(12px); }
  67%  { transform: rotateX(2.6deg) rotateY(.6deg)   translateZ(-6px); }
  100% { transform: rotateX(2.2deg) rotateY(-2.4deg) translateZ(0); }
}

@keyframes hero-bloom-breathe {
  0%, 100% { opacity: .42; }
  50%      { opacity: .68; }
}

.stage-hero.is-live .hero-scene { animation: hero-camera 22s ease-in-out infinite both; }
.stage-hero.is-live .hero-bloom { animation: hero-bloom-breathe 11s ease-in-out infinite both; }

/* Violet bleed from under the panel. A separate element rather than a
   shadow on .panel, because .panel is overflow:hidden and because
   animating opacity on one absolutely positioned box is far cheaper
   than animating a four-layer box-shadow. */
.hero-glow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(760px, calc(100% - 48px));
  height: 130px;
  transform: translate(-50%, -34%);
  background: radial-gradient(58% 100% at 50% 50%, rgba(91, 61, 245, .6), transparent 70%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
}

.stage-hero > .panel { position: relative; z-index: 2; }

/* Real elevation. This alone is most of what the hero was missing. */
.stage-hero .panel {
  box-shadow:
    0 2px 6px rgba(20, 20, 20, .16),
    0 18px 50px rgba(20, 20, 20, .24),
    0 36px 80px rgba(91, 61, 245, .20);
}

/* --- pieces the timeline needs --- */

.panel-tabs { position: relative; }

/* One tab wide, so translateX(100%) travels exactly one tab. */
.stage-hero .tab-slide {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 16.6667%;
  height: 2px;
  background: var(--panel-active);
  opacity: 0;
  z-index: 1;
}

.stage-hero .panel-row.hi { position: relative; }

.hero-cursor {
  position: absolute;
  left: 63%;
  top: 44%;
  width: 13px;
  height: 13px;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}

.panel-status { position: relative; }
.stage-hero .panel-status .s-done {
  position: absolute;
  left: 7px;
  top: 5px;
  opacity: 0;
}

/* --- the timeline ---

   Split deliberately in two. The panel and its labels are the product
   pitch, so they arrive once, fast, and then never leave: an infinite
   loop that rebuilt the panel from nothing would hide the tool names for
   the first seconds of every cycle. What loops is only the demonstration
   -- cursor, press, status -- and it begins and ends in the same resting
   state, so the repeat is invisible.
   --------------------------------------------------------------------- */

/* intro, once */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(24px) rotateX(8deg) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-row-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

@keyframes hero-slide {
  from { transform: translateX(0);    opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: translateX(100%); opacity: 1; }
}

@keyframes hero-tab-on {
  from { background: transparent; color: var(--panel-dim); }
  to   { background: #2e2e2e;     color: #f2f2f2; }
}

/* demonstration, looping */

@keyframes hero-cursor-move {
  0%, 4%    { opacity: 0; transform: translate(13px, 13px) scale(1); }
  12%       { opacity: 1; transform: translate(0, 0) scale(1); }
  20%       { transform: translate(0, 0) scale(.78); }
  26%       { transform: translate(0, 0) scale(1); }
  82%       { opacity: 1; transform: translate(0, 0) scale(1); }
  92%, 100% { opacity: 0; transform: translate(9px, 9px) scale(1); }
}

@keyframes hero-press {
  0%, 18%   { box-shadow: none; border-color: #454545; }
  22%       { box-shadow: 0 0 0 1px rgba(91, 61, 245, .95), 0 0 18px rgba(91, 61, 245, .55); border-color: var(--accent); }
  40%       { box-shadow: 0 0 0 1px rgba(91, 61, 245, .40), 0 0 12px rgba(91, 61, 245, .22); border-color: #5f5f7a; }
  80%, 100% { box-shadow: none; border-color: #454545; }
}

@keyframes hero-glow-in {
  0%, 18%   { opacity: .32; }
  30%       { opacity: .85; }
  74%       { opacity: .55; }
  88%, 100% { opacity: .32; }
}

@keyframes hero-s-idle { 0%, 26% { opacity: 1; } 30%, 78% { opacity: 0; } 84%, 100% { opacity: 1; } }
@keyframes hero-s-done { 0%, 26% { opacity: 0; } 30%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }

/* The depth is baked into every keyframe. An animation on `transform`
   replaces the static one outright rather than composing with it, so
   omitting translateZ here would silently flatten the plate to z=0. */
@keyframes hero-plate-drift {
  0%, 100% { transform: translateZ(-320px) scale(1.29) translate3d(0, 0, 0); }
  50%      { transform: translateZ(-320px) scale(1.36) translate3d(1%, -1%, 0); }
}

/* --- run it, but only while the stage is on screen --- */

/* the intro: one pass, then it holds its end state forever */
.stage-hero.is-live .panel        { animation: hero-rise .75s var(--hero-ease) both; }
.stage-hero.is-live .panel-row    { animation: hero-row-in .5s var(--hero-ease) .15s both; }
.stage-hero.is-live .tab-slide    { animation: hero-slide .55s var(--hero-ease) .9s both; }
.stage-hero.is-live .panel-tab.on { animation: hero-tab-on .55s var(--hero-ease) .9s both; }

.stage-hero.is-live .panel-row:nth-child(2) { animation-delay: .21s; }
.stage-hero.is-live .panel-row:nth-child(3) { animation-delay: .27s; }
.stage-hero.is-live .panel-row:nth-child(4) { animation-delay: .33s; }
.stage-hero.is-live .panel-row:nth-child(5) { animation-delay: .39s; }

/* the loop: starts once the intro has landed */
.stage-hero.is-live .hero-cursor  { animation: hero-cursor-move 7s var(--hero-ease) 1.6s infinite both; }
.stage-hero.is-live .panel-row.hi { animation: hero-row-in .5s var(--hero-ease) .21s both,
                                               hero-press 7s var(--hero-ease) 1.6s infinite both; }
.stage-hero.is-live .hero-glow    { animation: hero-glow-in 7s var(--hero-ease) 1.6s infinite both; }
.stage-hero.is-live .s-idle       { animation: hero-s-idle 7s steps(1, end) 1.6s infinite both; }
.stage-hero.is-live .s-done       { animation: hero-s-done 7s steps(1, end) 1.6s infinite both; }
.stage-hero.is-live .hero-plate   { animation: hero-plate-drift 24s ease-in-out infinite both; }

/* The sliding indicator is the only tab marker once the timeline runs,
   otherwise Build would show two violet underlines at once. */
.stage-hero.is-live .panel-tab.on { border-bottom-color: transparent; }

/* Before the loop's first pass the glow still needs its resting value,
   or the card is flat for the first second and a half. */
.stage-hero.is-live .hero-glow { opacity: .32; }

/* ======================================================================
   REDUCED MOTION

   The site had no prefers-reduced-motion block at all before the hero
   timeline landed. This covers the new hero AND the older ds-* demo
   animations, which were running unguarded.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  .stage-hero.is-live .panel,
  .stage-hero.is-live .hero-glow,
  .stage-hero.is-live .tab-slide,
  .stage-hero.is-live .panel-tab.on,
  .stage-hero.is-live .panel-row,
  .stage-hero.is-live .panel-row.hi,
  .stage-hero.is-live .hero-cursor,
  .stage-hero.is-live .s-idle,
  .stage-hero.is-live .s-done,
  .stage-hero.is-live .hero-plate,
  .stage-hero.is-live .hero-scene,
  .stage-hero.is-live .hero-bloom {
    animation: none !important;
  }

  /* Back to the resting composition: static panel, no cursor, "Ready." */
  .stage-hero.is-live .panel     { opacity: 1; transform: none; }
  .stage-hero.is-live .tab-slide { opacity: 0; }
  .stage-hero.is-live .hero-cursor { opacity: 0; }
  .stage-hero.is-live .s-done    { opacity: 0; }
  .stage-hero.is-live .hero-glow { opacity: .34; }
  .stage-hero.is-live .panel-tab.on { border-bottom-color: var(--panel-active); }

  /* The plate holds on its poster frame; site.js also pauses playback. */
  .hero-plate { filter: blur(22px) saturate(115%); }

  /* Pre-existing demo animations, previously unguarded. */
  .ds-stage *, .tile, .quote, .plan, .tab-card, .how-stage {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ======================================================================
   THE CINEMATIC HERO

   The chosen direction. The reference explainer reads cinematic largely
   because it is DARK: its bloom, rim light and falloff all work by being
   bright against near-black violet. On the pale card we had, a glow has
   nothing to glow against and only washes the surface out.

   The panel keeps its real plugin colours — #1e1e1e and friends are what
   the user actually sees in Premiere, and the mock stays truthful. So the
   separation between panel and backdrop is built entirely from LIGHT:
   a deeper backdrop, a glass edge, a top rim, and a violet bleed beneath.
   Nothing here repaints the panel itself.
   ====================================================================== */

.stage-hero.cinematic {
  background: #07050f;
  border-color: #1d1738;
}

/* On dark the plate stops being a wash and becomes the light source. */
.stage-hero.cinematic .hero-plate,
.stage-hero.cinematic::before {
  opacity: .34;
  mix-blend-mode: screen;
  filter: blur(34px) saturate(118%);
}

.stage-hero.cinematic::after {
  background: radial-gradient(120% 140% at 50% -10%, rgba(91, 61, 245, .38), transparent 64%);
}

.stage-hero.cinematic .hero-bloom {
  opacity: .85;
  filter: blur(58px);
  background: radial-gradient(50% 100% at 50% 50%, rgba(124, 92, 255, .8), transparent 72%);
}

/* Glass edge + top rim + violet bleed. The 1px inset ring is what makes
   #1e1e1e read as a lit surface in front of the backdrop rather than a
   hole in it — the reference's tiles are edged the same way. */
.stage-hero.cinematic .panel {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 2px 8px rgba(0, 0, 0, .55),
    0 26px 64px rgba(0, 0, 0, .6),
    0 44px 100px rgba(91, 61, 245, .5);
}

/* One soft falloff, and only one. An earlier pass had a vignette AND a
   bottom gradient; stacked over a wide short card their radial went so
   elliptical that top and bottom crushed to black while the sides stayed
   lit — the card read as a banded tube rather than a lit space. A single
   gentle wash, weighted to the bottom, is all the reference's plane
   falloff actually needs here. */
.stage-hero.cinematic .hero-scene::after {
  content: "";
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: -90%;
  height: 62%;
  background: linear-gradient(to bottom, transparent, rgba(7, 5, 15, .88) 84%);
  transform: translateZ(-60px);
  pointer-events: none;
  z-index: 3;
}


/* ===========================================================================
   Pricing — the plan cards, the dark team card and the coming-soon list
   ======================================================================== */

.plan-soon {
  padding: 18px 18px 20px;
  border-radius: 12px;
  background: var(--accent-soft);
}

.plan-soon .mono { display: block; margin-bottom: 12px; color: var(--accent-deep); }

.tag-soon {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 2px;
}


/* ===========================================================================
   Checkout
   ======================================================================== */

.checkout { padding: 48px 0 88px; }
.checkout .back { display: inline-block; margin-bottom: 14px; }
.checkout .back:hover { color: var(--accent); }
.checkout h1 { font-size: clamp(32px, 4.4vw, 46px); }

.co-grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.co-form { display: flex; flex-direction: column; gap: 28px; }
.co-form fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-form legend { padding: 0; margin-bottom: 14px; font: 700 18px var(--display); letter-spacing: -0.02em; }

.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }

.field input,
.field select {
  height: 46px;
  padding: 0 14px;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  background: #fff;
  font: 400 15px var(--sans);
  color: var(--ink);
  width: 100%;
}

.field input:focus,
.field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.co-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-choice label { position: relative; cursor: pointer; }
.co-choice input { position: absolute; opacity: 0; }

.co-choice span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid #d9d9d4;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.co-choice b { font-size: 15px; font-weight: 600; }
.co-choice small { font-size: 13px; color: var(--ink3); }
.co-choice input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.co-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.co-ent { display: flex; flex-direction: column; gap: 14px; }
.co-ent[hidden] { display: none; }

.co-methods { display: flex; gap: 8px; }

.co-methods button {
  flex: 1;
  height: 42px;
  border: 1px solid #d9d9d4;
  border-radius: 10px;
  background: #fff;
  font: 600 14px var(--sans);
  color: var(--ink2);
  cursor: pointer;
}

.co-methods button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }

.co-gateway {
  padding: 26px 20px;
  border: 1.5px dashed #cfcfc8;
  border-radius: 12px;
  background: var(--tile);
  text-align: center;
}

.co-gateway p { margin-top: 8px; font-size: 14px; color: var(--ink2); }

.co-pay { width: 100%; border: 0; cursor: pointer; font-family: var(--sans); }
.co-note { margin-top: -14px; font-size: 14px; color: var(--accent-deep); }
.co-note:empty { display: none; }
.co-fine { margin-top: -14px; font-size: 13px; color: var(--ink3); text-align: center; }

.co-summary {
  position: sticky;
  top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--tile);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.co-summary h2 { font-size: 22px; letter-spacing: -0.02em; }
.co-sum-sub { margin-top: -8px; font-size: 14px; color: var(--ink2); }

.co-summary dl { margin: 6px 0 0; border-top: 1px solid var(--line); }
.co-summary dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.co-summary dt { color: var(--ink2); }
.co-summary dd { margin: 0; color: var(--ink); text-align: right; }
.co-summary .co-total dt,
.co-summary .co-total dd { font-size: 17px; font-weight: 600; color: var(--ink); }
.co-renew { font-size: 13px; color: var(--ink2); }
.co-renew[hidden], .co-summary li[hidden] { display: none; }

@media (max-width: 900px) {
  .checkout { padding: 28px 0 64px; }
  .co-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .co-summary { position: static; order: -1; padding: 22px; }
  .co-row, .co-choice { grid-template-columns: minmax(0, 1fr); }
}


/* ----- plan cards, second pass ----- */

.plans-section { padding-top: 56px; }

/* equal heights, so the two cards read as one pair */
.plans { align-items: stretch; max-width: 940px; margin: 0 auto; gap: 24px; }
.plan { padding: 38px 34px 34px; border-radius: 22px; }

.plan-price { align-items: flex-end; gap: 12px; padding-bottom: 22px; }
.plan-price .amount { font-size: clamp(44px, 5.4vw, 58px); line-height: .95; }
.plan-price .cents { font-size: .5em; letter-spacing: -0.02em; vertical-align: .72em; margin-left: 1px; }
.plan-price .per { line-height: 1.5; padding-bottom: 3px; }

.plan .btn { height: 54px; }
.plan-terms { margin-top: -10px; font-size: 13px; color: var(--ink3); text-align: center; }

/* the team plan is the one with the most in it, so it gets the dark surface */
.plan-dark {
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(91, 61, 245, .38), transparent 60%),
    var(--dark);
  border-color: var(--dark);
  color: #fff;
  box-shadow: 0 24px 60px rgba(20, 16, 50, .28);
}

.plan-dark:hover { box-shadow: 0 28px 64px rgba(40, 24, 120, .34); }
.plan-dark .plan-flag { background: #fff; color: var(--dark); }
.plan-dark .plan-head p,
.plan-dark .plan-list li { color: #b6b8bf; }
.plan-dark .plan-list li b,
.plan-dark .plan-price .amount { color: #fff; }
.plan-dark .plan-price { border-bottom-color: rgba(255, 255, 255, .12); }
.plan-dark .plan-price .per,
.plan-dark .plan-terms { color: #8f919a; }
.plan-dark .plan-list li::before { border-color: #a898ff; }
.plan-dark .btn-accent { box-shadow: 0 10px 28px rgba(91, 61, 245, .45); }
.plan-dark .btn-accent:hover { background: #6d52ff; }

.plan-dark .plan-soon {
  margin-top: auto;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(168, 152, 255, .28);
}

.plan-dark .plan-soon .mono { color: #b9adff; }

/* Individual keeps the accent edge but hands the loud button to the team card */
.plan.is-pick .plan-list { flex: 1; }

@media (max-width: 900px) {
  .plans-section { padding-top: 36px; }
  .plan { padding: 32px 22px 26px; }
}

.plan-upsell {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 20px;
  border-radius: 12px;
  background: var(--tile);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink2);
  transition: border-color .15s ease, background .15s ease;
}

.plan-upsell b { color: var(--accent); font-weight: 600; }
.plan-upsell:hover { color: var(--ink2); border-color: var(--accent); background: var(--accent-soft); }


/* ===========================================================================
   Legal and contact pages
   ======================================================================== */

.legal-page { padding-top: 56px; }
.legal-page .prose { margin: 0 auto; }
.legal-page .prose h2 { font-size: 20px; }
.legal-page .prose p, .legal-page .prose li { font-size: 16px; }
.legal-page .prose ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink2); line-height: 1.65; }
.legal-page .prose p.updated { margin-bottom: 32px; font-size: 11px; }

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

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}

.contact-card h2 { font-size: 20px; letter-spacing: -0.02em; }
.contact-card p { font-size: 15px; color: var(--ink2); }
.contact-card a.contact-link { margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--accent); overflow-wrap: anywhere; }

.contact-note { margin-top: 28px; text-align: center; font-size: 14px; color: var(--ink3); }
.contact-note a { color: var(--accent); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}


/* ===========================================================================
   Pricing — three plans: Basic, Pro (one-time or monthly), Enterprise
   ======================================================================== */

.plans.plans-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--page);
  gap: 20px;
}

.plans-3 .plan { padding: 36px 28px 30px; }
.plans-3 .plan-price .amount { font-size: clamp(42px, 4.6vw, 54px); }

/* the billing row sits in the same slot on every card, so the prices line up */
.plan-billing,
.plan-bill-note { height: 40px; }

.plan-bill-note { display: flex; align-items: center; }
.plan-bill-note .mono {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink2);
}
.plan-dark .plan-bill-note .mono { background: rgba(255, 255, 255, .08); color: #b6b8bf; }

.plan-billing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: var(--tile);
}

.plan-billing button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 13px var(--sans);
  color: var(--ink2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.plan-billing button:hover { color: var(--ink); }
.plan-billing button[aria-checked="true"] {
  background: #fff;
  color: var(--accent-deep);
  box-shadow: 0 1px 3px rgba(20, 20, 30, .12), 0 0 0 1px rgba(91, 61, 245, .14);
}
.plan-billing button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pro carries the accent: a wash of it from the top */
.plans-3 .plan.is-pick {
  background: linear-gradient(180deg, #f7f5ff 0%, #fff 38%);
}

.btn-light { background: #fff; color: var(--dark); }
.btn-light:hover { background: #ecebff; }

/* the AI features, boxed so they read as the reason to step up */
.plan-ai {
  position: relative;
  margin-top: auto;
  padding: 26px 18px 18px;
  border: 1px solid #ddd6ff;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(91, 61, 245, .10), transparent 60%),
    #fbfaff;
}

.plan-ai-tag {
  position: absolute;
  top: -11px;
  left: 16px;
  height: 22px;
  padding: 0 11px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b3df5, #9a5cf6 60%, #d264d9);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(91, 61, 245, .28);
}

.plan-ai-tag::before { content: "\2726"; font-size: 11px; letter-spacing: 0; }
.plan-ai .plan-list { gap: 10px; }
.plan-ai .plan-list li { font-size: 14px; }

.plan-dark .plan-ai {
  border-color: rgba(167, 150, 255, .28);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(124, 98, 255, .26), transparent 60%),
    rgba(255, 255, 255, .04);
}
.plan-dark .plan-list li::before { border-color: #a796ff; }

/* the comparison, now four columns with Pro picked out */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-3 { min-width: 620px; }
.compare-3 tbody th { width: 34%; }
.compare-3 td { width: 22%; }
.compare-3 .is-pick { background: #f7f5ff; }
.compare-3 thead th.is-pick { color: var(--accent-deep); border-radius: 10px 10px 0 0; }
.compare-3 small { font-size: 13px; color: var(--ink3); }

.tag-ai {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5b3df5, #b05ef0);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  vertical-align: 2px;
}

/* three across all the way down to small tablets */
@media (max-width: 1020px) and (min-width: 761px) {
  .plans.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .plans-3 .plan { padding: 32px 18px 24px; gap: 18px; }
  .plans-3 .plan-price .amount { font-size: 40px; }
  .plans-3 .plan-price .per { font-size: 10px; }
  .plans-3 .plan-list li { font-size: 14px; padding-left: 22px; }
  .plans-3 .plan-head p { min-height: 4.4em; font-size: 14px; }
  .plans-3 .plan-ai { padding: 24px 14px 14px; }
}

@media (max-width: 760px) {
  .plans.plans-3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 30px; }
  /* Pro first on a phone: it is the one most people want */
  .plans-3 .plan.is-pick { order: -1; }
  .compare-3 tbody th { width: 40%; }
}

.co-choice-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-billing { margin-top: 12px; }
.co-billing[hidden] { display: none; }
@media (max-width: 900px) { .co-choice-3 { grid-template-columns: minmax(0, 1fr); } }

/* equal-height subtitles so the billing row and price sit level across cards */
.plans-3 .plan-head p { min-height: 2.9em; }
.plans-3 .plan > .plan-list { margin-bottom: 12px; }
@media (max-width: 760px) { .plans-3 .plan-head p { min-height: 0; } }