/* ClipSpark premium presentation layer.
   Loaded after base.css so deploys cannot combine the new template structure
   with an older cached stylesheet. No external fonts, scripts, or assets. */

:root {
  color-scheme: dark;
  --bg: #070a09;
  --panel: #0d1210;
  --panel-2: #121a17;
  --border: #26322d;
  --text: #f4f7f1;
  --muted: #9eaaa4;
  --accent: #d2ff6b;
  --accent-2: #8edcff;
  --ok: #72e7b4;
  --warn: #f2c96d;
  --danger: #ff8d8d;
  --shadow-sm: 0 12px 34px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.42);

  /* Surfaces. The site is one dark room, so anything raised has to earn it with
     a lighter fill and a hairline, not with a heavier shadow. */
  --surface-sunken: #060908;
  --surface-1: #0d1210;
  --surface-2: #101713;
  --surface-3: #141d19;
  --surface-field: #0a0f0d;
  --surface-panel-gradient: linear-gradient(168deg, #131b17 0%, #0d1210 58%, #0b100e 100%);
  --surface-raised-gradient: linear-gradient(168deg, #16201b 0%, #101713 62%, #0d1310 100%);

  /* Borders, from hairline to the hover state of an interactive card. */
  --line-soft: rgba(244, 247, 241, 0.07);
  --line: #26322d;
  --line-strong: #33423b;
  --line-accent: rgba(210, 255, 107, 0.42);

  /* Text tiers. Four steps stops one-off greys appearing per component. */
  --text-strong: #f4f7f1;
  --text-body: #c6cfca;
  --text-muted: #9eaaa4;
  --text-faint: #75817b;

  /* Accent derivatives, so tints stay identical across components. */
  --accent-ink: #10150b;
  --accent-hi: #e4ff9c;
  --accent-soft: rgba(210, 255, 107, 0.12);
  --accent-line: rgba(210, 255, 107, 0.32);
  --accent-2-soft: rgba(142, 220, 255, 0.12);
  --edge-highlight: linear-gradient(90deg, transparent, rgba(210, 255, 107, 0.5), rgba(142, 220, 255, 0.3), transparent);

  /* Elevation. Ambient glows are separate from drop shadows because a premium
     dark surface reads as lit, not just floating. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 20px 48px rgba(0, 0, 0, 0.32);
  --glow-accent: 0 0 0 1px rgba(210, 255, 107, 0.16), 0 18px 44px rgba(210, 255, 107, 0.09);
  --glow-focus: 0 0 0 3px rgba(142, 220, 255, 0.16);

  /* Radii. Larger and consistent; the old 4-8px range read utilitarian. */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Motion. One easing curve everywhere keeps the whole site feeling made by
     the same hand. */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 700ms;
}

html { background: var(--bg); }

body {
  /* The base colour is on html, and body stays transparent on purpose. The
     ambient wash below is a fixed pseudo-element at a negative stack level,
     which paints after html's background but before body's background box — so
     an opaque background here would hide it completely. */
  background: transparent;
  color: var(--text);
  /* Local faces only — the site ships no webfont and loads no font CDN. This
     stack picks the best grotesque already installed on each platform and only
     then falls back to system-ui. */
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "SF Pro Text", "Helvetica Neue", Inter, Roboto, "Noto Sans",
               "DejaVu Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* An ambient wash behind everything. Fixed, painted once, so it costs nothing
   on scroll and stops large dark pages looking like a flat black rectangle. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(900px 520px at 12% -8%, rgba(210, 255, 107, 0.07), transparent 60%),
    radial-gradient(760px 480px at 92% 2%, rgba(142, 220, 255, 0.055), transparent 62%);
  pointer-events: none;
}

::selection { background: rgba(210, 255, 107, 0.26); color: var(--text); }

a { color: var(--accent-2); text-underline-offset: 3px; }
a:hover { color: var(--text); }

h1, h2, h3, h4 {
  color: var(--text);
  font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "Helvetica Neue", Inter, Roboto, "Noto Sans", system-ui, sans-serif;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1, h2 { font-weight: 700; }

p { text-wrap: pretty; }

.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px rgba(210, 255, 107, 0.4);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

/* Header ---------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0 24px;
  border-bottom: 1px solid transparent;
  background: rgba(7, 10, 9, 0.72);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* The hairline only appears once the page has moved, so the header sits flush
   with the hero on first paint and becomes a real bar as you scroll. */
.topbar.is-scrolled {
  border-bottom-color: var(--line-soft);
  background: rgba(7, 10, 9, 0.94);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.34);
}

.topbar__inner {
  width: 100%;
  max-width: 1280px;
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  color: var(--text);
  text-decoration: none;
}

.brand:hover { color: var(--text); }

.brand__mark {
  position: relative;
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, #1c2712 0%, #11180e 100%);
  color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(210, 255, 107, 0.22), 0 8px 22px rgba(210, 255, 107, 0.1);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.brand:hover .brand__mark {
  border-color: rgba(210, 255, 107, 0.6);
  box-shadow: inset 0 1px 0 rgba(210, 255, 107, 0.3), 0 10px 26px rgba(210, 255, 107, 0.18);
}

.brand__logo {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
  opacity: 0;
  transition: opacity 180ms ease;
}

.brand__fallback {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.brand__mark.has-image .brand__logo { opacity: 1; }
.brand__mark.has-image .brand__fallback { opacity: 0; }

.brand__name { font-size: 17px; font-weight: 720; letter-spacing: -0.015em; }
.brand__name em { color: var(--accent); font-style: normal; }

.topnav {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 1 1 auto;
  font-size: 13px;
}

.topnav__group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.topnav__group--account { justify-content: flex-end; margin-left: auto; }

.topnav a,
.topnav .linkbutton {
  position: relative;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.topnav a:hover,
.topnav .linkbutton:hover,
.topnav a.is-active {
  color: var(--text);
  background: rgba(244, 247, 241, 0.06);
}

.topnav a.is-active::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 3px;
  left: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(210, 255, 107, 0.5);
}

.topnav .btn {
  min-height: 38px;
  padding: 0 16px;
  background: var(--accent);
  color: var(--accent-ink);
}

.topnav .btn:hover { background: var(--accent-hi); color: var(--accent-ink); }
.topnav__signout { margin-left: 5px; padding-left: 6px; border-left: 1px solid var(--border); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.nav-toggle:hover { border-color: var(--line-strong); background: var(--surface-3); }
.nav-toggle span { width: 16px; height: 2px; border-radius: 2px; background: currentColor; }

.bell { position: relative; display: inline-flex; align-items: center; }
.bell-button { min-width: 38px; min-height: 38px; padding: 0; border-radius: var(--r-xs); }
.bell-button:hover { background: rgba(244, 247, 241, 0.06); }
.bell-button > span:first-child { color: var(--accent); font-size: 9px; }
.bell-badge { top: 2px; right: 1px; background: var(--accent); color: var(--accent-ink); }

.bell-panel {
  top: calc(100% + 14px);
  right: 0;
  width: 350px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: var(--shadow-lg);
}

.bell-link:hover, .bell-foot:hover { background: var(--surface-3); }

/* Shared application surfaces ------------------------------------------- */

.shell { max-width: 1020px; padding: 56px 24px 96px; }
.shell--wide { max-width: 1240px; }

.pagehead { margin-bottom: 34px; }
.pagehead h1 { margin-bottom: 9px; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.08; }
.pagehead .lead { max-width: 670px; color: var(--text-muted); font-size: 16px; }

.eyebrow {
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.panel {
  position: relative;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-panel-gradient);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(244, 247, 241, 0.035);
}

.panel h2 { font-size: 20px; letter-spacing: -0.018em; }

.btn {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  overflow: hidden;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, #e2ff96 0%, var(--accent) 55%, #c2f34f 100%);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 720;
  line-height: 1;
  letter-spacing: -0.008em;
  box-shadow: 0 10px 26px rgba(210, 255, 107, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              filter var(--dur-fast) var(--ease);
}

/* A sheen that sweeps once on hover. It passes over the label rather than behind
   it — that is the effect — and pointer-events: none keeps it out of hit
   testing so the sweep can never swallow a click. */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
  transition: left 620ms var(--ease), opacity 200ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent-hi);
  filter: saturate(112%);
  color: var(--accent-ink);
  box-shadow: 0 16px 34px rgba(210, 255, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn:hover::after { left: 120%; opacity: 1; }
.btn:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(210, 255, 107, 0.16); }

.btn--sm { min-height: 36px; padding: 0 14px; font-size: 12px; border-radius: var(--r-xs); }

.btn--ghost {
  border-color: var(--border);
  background: rgba(244, 247, 241, 0.02);
  color: var(--text);
  box-shadow: none;
}

.btn--ghost::after { display: none; }

.btn--ghost:hover {
  border-color: var(--line-accent);
  background: var(--surface-3);
  color: var(--text);
  filter: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.btn--danger {
  border-color: #a94747;
  background: linear-gradient(180deg, #b85252 0%, #a94747 100%);
  color: #fff;
  box-shadow: none;
}

.btn--danger:hover { border-color: #c25b5b; background: #c25b5b; filter: none; box-shadow: 0 12px 26px rgba(169, 71, 71, 0.28); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; transform: none; box-shadow: none; cursor: not-allowed; }

input[type="text"], input[type="email"], input[type="password"], textarea, .input, .select {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-field);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

input[type="text"]:hover, input[type="email"]:hover, input[type="password"]:hover,
textarea:hover, .input:hover, .select:hover { border-color: var(--line-strong); }

input:focus, textarea:focus, select:focus, .input:focus {
  border-color: var(--accent-2);
  outline: 0;
  background: #0c1210;
  box-shadow: var(--glow-focus);
}

.stat {
  position: relative;
  min-height: 124px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-raised-gradient);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(244, 247, 241, 0.04);
}

.stat-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 650; }
.stat-value { color: var(--text); font-size: 29px; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.meter { border-color: var(--border); border-radius: var(--r-pill); background: var(--surface-field); }
.meter-fill { border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

.projectcard, .campaign-card, .clipcard, .plancard, .featurecard {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-raised-gradient);
  box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(244, 247, 241, 0.04);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.projectcard:hover, .campaign-card:hover, .clipcard:hover, .featurecard:hover {
  transform: translateY(-3px);
  border-color: var(--line-accent);
  background: var(--surface-3);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(210, 255, 107, 0.1);
}

.badge--draft, .badge--uploading, .badge--analyzing, .badge--rendering, .badge--open {
  background: var(--accent-2-soft);
  color: var(--accent-2);
}

.badge--queued, .badge--awaiting_admin { background: rgba(242, 201, 109, 0.12); color: var(--warn); }
.badge--completed, .badge--closed { background: rgba(114, 231, 180, 0.12); color: var(--ok); }

.tabs__list { border-bottom-color: var(--border); }
.tabs__tab:hover, .tabs__tab.is-active { border-bottom-color: var(--accent); color: var(--text); }

.footer {
  max-width: 1240px;
  padding: 44px 24px 44px;
  border-top: 1px solid var(--border);
}

.footer__heading { color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.footer__col a:not(.brand) { color: var(--muted); transition: color var(--dur-fast) var(--ease); }
.footer__col a:not(.brand):hover { color: var(--text); }

/* Dashboard -------------------------------------------------------------- */

.dashboard-head { min-height: 94px; align-items: center; }

.dashboard-summary {
  padding: 0 0 30px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-summary .statgrid { gap: 12px; }
.dashboard-summary .stat:first-child { border-top-color: var(--accent); }
.dashboard-summary .stat:nth-child(2) { border-top-color: var(--accent-2); }

.dashboard-section {
  padding: 28px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard-section:last-child { border-bottom: 0; }
.dashboard-section > .pagehead { margin-bottom: 18px; }

/* Public homepage -------------------------------------------------------- */

.home-hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: 72px;
  padding: 74px 0 90px;
}

.home-hero__copy { min-width: 0; }

.home-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 6px 13px 6px 11px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-kicker > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(210, 255, 107, 0.14);
}

.home-hero h1 {
  max-width: 680px;
  margin: 0 0 24px;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* The last word of the headline carries the accent, so the hero has a focal
   point without needing an image to do it. */
.home-hero h1 mark {
  background: none;
  color: transparent;
  background-image: linear-gradient(96deg, var(--accent) 12%, var(--accent-2) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

.home-hero__lead {
  max-width: 610px;
  margin: 0 0 32px;
  color: var(--text-body);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
}

.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--hero { min-height: 52px; padding: 0 24px; font-size: 15px; border-radius: var(--r-md); }

.home-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 28px;
  color: var(--muted);
  font-size: 13px;
}

.home-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.home-hero__meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(210, 255, 107, 0.13);
}

.product-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--surface-panel-gradient);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(244, 247, 241, 0.05);
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform 80ms linear;
}

/* A lit top edge. Reads as a device bezel catching light and is what separates
   a mock window from a plain bordered box. */
.product-stage::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge-highlight);
}

.product-stage__bar {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(244, 247, 241, 0.018);
  color: var(--muted);
  font-size: 12px;
}

.product-stage__brand { color: var(--text); font-weight: 650; }
.product-stage__status { display: inline-flex; align-items: center; gap: 8px; }
.product-stage__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(114, 231, 180, 0.12); }

.product-stage__body {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(220px, 0.88fr);
  min-height: 400px;
}

/* The poster sits on top. Underneath it sits a drawn scene — vignette, a soft
   light source, and a waveform ruled with repeating-linear-gradient — so the
   panel still looks composed on the day the image is missing or has not finished
   loading. That fallback also covers the browsers too old for WebP, which is why
   there is no second `url()` naming a PNG: a stacked fallback layer would be
   downloaded by every modern browser as well, and paying for the fallback on
   every visit to serve a fraction of a percent is the wrong trade when the
   fallback below is a designed one rather than an empty box.

   The waveform is a background layer rather than a pseudo-element on purpose. A
   pseudo-element paints above the element's own background, so it would stripe
   fake bars across a real screenshot; as a layer below the poster it only ever
   shows when there is no poster to cover it. That is also why it has a hard top
   edge instead of a masked fade — a mask cannot apply to one background layer,
   and being correct under the real asset matters more than the softer edge in
   the placeholder state. */
.product-stage__video {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background-color: #0f1613;
  background-image:
    url("../img/clipspark-poster.webp"),
    radial-gradient(120% 90% at 50% 0%, rgba(142, 220, 255, 0.14), transparent 62%),
    radial-gradient(90% 70% at 22% 108%, rgba(210, 255, 107, 0.12), transparent 60%),
    repeating-linear-gradient(90deg, rgba(244, 247, 241, 0.11) 0 2px, transparent 2px 7px),
    linear-gradient(158deg, #16211c 0%, #0e1512 52%, #0a0f0d 100%);
  background-position: center, center, center, center bottom, center;
  background-size: cover, cover, cover, calc(100% - 48px) 58px, cover;
  background-repeat: no-repeat;
}

.product-stage__play {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 247, 241, 0.34);
  border-radius: 50%;
  background: rgba(7, 10, 9, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.product-stage__duration {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 16px;
  padding: 5px 9px;
  border: 1px solid rgba(244, 247, 241, 0.14);
  border-radius: var(--r-xs);
  background: rgba(7, 10, 9, 0.78);
  color: var(--text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.product-stage__results { padding: 30px 26px; }
.product-stage__label { margin: 0 0 14px; color: var(--accent); font-size: 10px; font-weight: 760; letter-spacing: 0.09em; text-transform: uppercase; }
/* Deliberately not an <h2>, though it is sized like one. The text is a sample
   clip title inside a mockup, so as a heading it claimed second place in the home
   page's outline behind the real h1 — telling a crawler that this site's most
   important section was called "The idea that changes the conversation". The
   heading properties are restated here because a <p> inherits none of them. */
.product-stage__title {
  margin: 0 0 13px;
  color: var(--text);
  font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
               "SF Pro Display", "Helvetica Neue", Inter, Roboto, "Noto Sans", system-ui, sans-serif;
  font-size: clamp(21px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.product-stage__results > p:not(.product-stage__label):not(.product-stage__title) { margin: 0; color: var(--muted); font-size: 14px; }

.product-stage__scores { display: grid; gap: 10px; margin-top: 30px; }
.product-stage__scores span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.product-stage__scores strong { color: var(--text); font-size: 19px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.product-stage__timeline { position: relative; height: 54px; display: flex; align-items: center; padding: 0 20px; border-top: 1px solid var(--border); }
.product-stage__timeline > span { width: 68%; height: 3px; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 12px rgba(210, 255, 107, 0.3); }
.product-stage__timeline::after { content: ""; flex: 1; height: 3px; border-radius: var(--r-pill); background: #27312d; }
.product-stage__timeline i { position: absolute; top: 19px; width: 2px; height: 16px; border-radius: 1px; background: var(--accent-2); }
.product-stage__timeline i:nth-of-type(1) { left: 28%; }
.product-stage__timeline i:nth-of-type(2) { left: 51%; }
.product-stage__timeline i:nth-of-type(3) { left: 68%; }

.home-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.home-proof > div { min-width: 0; padding: 30px 26px; border-right: 1px solid var(--border); transition: background-color var(--dur) var(--ease); }
.home-proof > div:first-child { padding-left: 0; }
.home-proof > div:last-child { border-right: 0; }
.home-proof strong { display: block; margin-bottom: 8px; font-size: 17px; letter-spacing: -0.015em; }
.home-proof span { display: block; color: var(--muted); font-size: 14px; }

.home-section { padding: 112px 0; border-bottom: 1px solid var(--border); }

.home-section__heading { max-width: 800px; margin-bottom: 54px; }
.home-section__heading h2, .home-showcase__copy h2, .home-cta h2 { margin: 0 0 18px; font-size: clamp(31px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.028em; }
.home-section__heading > p:last-child, .home-showcase__copy > p, .home-cta > p { max-width: 660px; color: var(--text-muted); font-size: clamp(15px, 1.2vw, 17px); }

.home-story__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.home-story__steps li { position: relative; min-width: 0; padding: 32px 32px 10px 0; border-top: 1px solid var(--border); }
.home-story__steps li + li { padding-left: 32px; border-left: 1px solid var(--border); }

/* A short accent tick above each step, so the row of rules reads as a numbered
   sequence rather than an accidental table. */
.home-story__steps li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 46px;
  height: 1px;
  background: var(--accent);
}

.home-story__steps li + li::before { left: 32px; }
.home-story__steps span { color: var(--accent); font-size: 12px; font-weight: 760; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.home-story__steps h3 { margin: 34px 0 12px; font-size: 22px; letter-spacing: -0.02em; }
.home-story__steps p { margin: 0; color: var(--muted); font-size: 15px; }

.home-showcase { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr); align-items: center; gap: 84px; }

/* Same treatment as the hero preview: real screenshot on top, a drawn scene
   beneath it. The diagonal rule pattern reads as a timeline grid, which is what
   this block is describing. */
.home-showcase__media {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background-color: #0e1512;
  background-image:
    url("../img/clipspark-poster.webp"),
    radial-gradient(95% 70% at 78% 8%, rgba(142, 220, 255, 0.15), transparent 60%),
    radial-gradient(85% 65% at 14% 96%, rgba(210, 255, 107, 0.13), transparent 62%),
    repeating-linear-gradient(115deg, rgba(244, 247, 241, 0.032) 0 1px, transparent 1px 26px),
    linear-gradient(162deg, #172420 0%, #0f1714 55%, #0a0f0d 100%);
  background-position: center, center, center, center, center;
  background-size: cover, cover, cover, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(244, 247, 241, 0.05);
  transform: translate3d(0, var(--parallax-y, 0), 0);
  transition: transform 80ms linear;
}

.home-showcase__badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(244, 247, 241, 0.16);
  border-radius: var(--r-pill);
  background: rgba(7, 10, 9, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.home-showcase__badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(210, 255, 107, 0.18); }

.home-showcase__caption {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(244, 247, 241, 0.14);
  border-radius: var(--r-md);
  background: rgba(7, 10, 9, 0.74);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
}

.home-showcase__caption strong { font-size: 14px; letter-spacing: -0.015em; }
.home-showcase__caption span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.home-showcase__copy > p { margin: 0 0 26px; }

.home-checks { margin: 0 0 32px; padding: 0; list-style: none; }
.home-checks li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--border); color: var(--text-body); font-size: 15px; }
.home-checks li::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 3px;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.home-text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 14px; font-weight: 700; text-decoration: none; }
.home-text-link span { color: var(--accent); transition: transform var(--dur-fast) var(--ease); }
.home-text-link:hover span { transform: translateX(4px); }

.home-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }

.home-feature-grid article {
  position: relative;
  min-width: 0;
  min-height: 268px;
  padding: 26px 24px;
  overflow: hidden;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-field);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Hover lights the top edge of the cell rather than moving the border colour,
   which keeps the grid's rules perfectly aligned while still responding. */
.home-feature-grid article::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge-highlight);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.home-feature-grid article:hover { background: var(--surface-2); transform: translateY(-3px); }
.home-feature-grid article:hover::before { opacity: 1; }
.home-feature-grid article > span { color: var(--accent); font-size: 11px; font-weight: 760; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.home-feature-grid h3 { margin: 64px 0 12px; font-size: 19px; letter-spacing: -0.018em; }
.home-feature-grid p { margin: 0; color: var(--muted); font-size: 14px; }

/* The base grid is sized for one-line descriptions: a fixed 268px cell with a
   64px gap above the heading, and `overflow: hidden` on the cell so the hover
   highlight stays inside its rounded corner. Put a three-sentence paragraph in
   one and the last line is silently cut off rather than wrapped.

   This modifier lets the content set the height instead. Dropping `min-height`
   costs nothing in alignment, because grid items already stretch to the tallest
   cell in their row, so the rules between them stay continuous. */
.home-feature-grid--tall article { min-height: 0; }
.home-feature-grid--tall h3 { margin-top: 26px; }
.home-feature-grid--tall p { line-height: 1.62; }

/* Three of the four cells carry a link to their use-case page and the fourth
   does not, so the spacing is on the link rather than on the paragraph below it:
   the cell without one must not end in a gap where a link would have been. */
.home-feature-grid--tall .home-text-link { margin-top: 18px; }

/* The grid's own cells carry the bottom border, so the link below it needs the
   gap the grid does not provide. */
.home-audience__link { margin: 34px 0 0; }

.home-cta {
  position: relative;
  margin: 112px 0 30px;
  padding: 76px;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 50% -30%, rgba(210, 255, 107, 0.14), transparent 60%),
    linear-gradient(168deg, #16200f 0%, #101609 60%, #0b0f08 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(210, 255, 107, 0.14);
  text-align: center;
}

.home-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge-highlight);
}

.home-cta .home-kicker { justify-content: center; }
.home-cta h2 { max-width: 760px; margin-right: auto; margin-left: auto; }
.home-cta > p:not(.home-kicker) { margin: 0 auto 30px; }

/* Scroll reveals --------------------------------------------------------- */

.has-ui [data-reveal] {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(28px);
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.has-ui [data-reveal="left"] { transform: translateX(-34px); }
.has-ui [data-reveal="right"] { transform: translateX(34px); }
.has-ui [data-reveal="scale"] { transform: translateY(18px) scale(0.975); }
.has-ui [data-reveal].is-visible { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
.has-ui [data-reveal-delay="1"] { transition-delay: 90ms; }
.has-ui [data-reveal-delay="2"] { transition-delay: 180ms; }
.has-ui [data-reveal-delay="3"] { transition-delay: 270ms; }

/* Responsive -------------------------------------------------------------
   Headings size themselves with clamp() further up, so these breakpoints only
   change layout. Re-declaring a font-size here would override the clamp and
   reintroduce the stepped jumps it exists to remove. */

@media (max-width: 1120px) {
  .topbar { padding: 0 16px; }
  .topbar__inner { gap: 18px; }
  .topnav a, .topnav .linkbutton { padding: 0 8px; font-size: 12px; }
  .home-hero { grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr); gap: 42px; }
  .home-showcase { gap: 55px; }
}

@media (max-width: 920px) {
  .topbar__inner { position: relative; min-height: 66px; }
  .nav-toggle { display: inline-flex; }
  .has-ui .topnav {
    position: absolute;
    top: calc(100% + 1px);
    right: -16px;
    left: -16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px 18px;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 10, 9, 0.985);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow: var(--shadow-lg);
  }
  .has-ui .topbar.nav-open .topnav { display: flex; }
  .topnav__group, .topnav__group--account { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; }
  .topnav a, .topnav .linkbutton { padding: 0 10px; font-size: 14px; }
  .topnav__signout { border-left: 0; }
  .bell-panel { position: fixed; top: 74px; right: 16px; left: 16px; width: auto; max-width: 420px; margin-left: auto; }

  .home-hero { min-height: 0; grid-template-columns: 1fr; gap: 56px; padding: 64px 0 78px; }
  .home-hero__copy { max-width: 720px; }
  .product-stage { max-width: 760px; }
  .home-showcase { grid-template-columns: 1fr; }
  .home-showcase__media { min-height: 480px; }
  .home-feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .shell { padding: 38px 16px 64px; }
  .panel { padding: 24px; border-radius: var(--r-md); }
  .dashboard-head { min-height: 0; }

  .home-hero { padding-top: 34px; }
  .product-stage { border-radius: var(--r-lg); }
  .product-stage__body { grid-template-columns: 1fr; }
  .product-stage__video { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--border); }
  .product-stage__results { display: none; }
  .home-proof { grid-template-columns: 1fr; }
  .home-proof > div { padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .home-proof > div:last-child { border-bottom: 0; }
  .home-section { padding: 82px 0; }
  .home-story__steps { grid-template-columns: 1fr; }
  .home-story__steps li, .home-story__steps li + li { padding: 26px 0; border-left: 0; border-top: 1px solid var(--border); }
  .home-story__steps li + li::before { left: 0; }
  .home-story__steps h3 { margin-top: 20px; }
  .home-showcase__media { min-height: 420px; border-radius: var(--r-lg); }
  .home-cta { margin-top: 82px; padding: 52px 26px; border-radius: var(--r-lg); }
}

@media (max-width: 480px) {
  .brand__name { font-size: 15px; }
  .brand__mark { width: 34px; height: 34px; border-radius: var(--r-sm); }
  .home-hero__actions { flex-direction: column; align-items: stretch; }
  .home-hero__actions .btn { width: 100%; }
  .home-hero__meta { flex-direction: column; gap: 8px; }
  .product-stage__bar { padding: 0 14px; }
  .product-stage__status { display: none; }
  .product-stage__video { min-height: 285px; }
  .home-showcase__media { min-height: 350px; }
  .home-showcase__caption { align-items: flex-start; flex-direction: column; gap: 4px; }
  .home-feature-grid { grid-template-columns: 1fr; }
  .home-feature-grid article { min-height: 220px; }
  .home-feature-grid h3 { margin-top: 45px; }
  /* Restated after the base rules above, which this media query would otherwise
     override at the width where the cells are narrowest and the text tallest. */
  .home-feature-grid--tall article { min-height: 0; }
  .home-feature-grid--tall h3 { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .has-ui [data-reveal] { opacity: 1; filter: none; transform: none; }
  [data-parallax] { transform: none !important; }
  .scroll-progress { display: none; }
  .btn::after { display: none; }
  .btn:hover, .btn:active, .projectcard:hover, .campaign-card:hover, .clipcard:hover,
  .featurecard:hover, .home-feature-grid article:hover { transform: none; }
}

/* Premium route system --------------------------------------------------- */

.skip-link {
  position: fixed;
  z-index: 200;
  top: 10px;
  left: 10px;
  padding: 9px 13px;
  border: 1px solid var(--accent);
  border-radius: var(--r-xs);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 150ms ease;
}

.skip-link:focus { color: var(--accent-ink); transform: translateY(0); }

:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

main:focus { outline: 0; }

button, input, select, textarea { font: inherit; }

input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }

select option { background: var(--surface-field); color: var(--text); }

label, legend { color: #dce3df; font-size: 13px; font-weight: 650; letter-spacing: -0.005em; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
.input,
.select {
  min-height: 48px;
  padding: 12px 14px;
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}

textarea { min-height: 120px; }

input:hover, textarea:hover, select:hover, .input:hover, .select:hover {
  border-color: #4a5e54;
  background: #0c1210;
}

.btn:active { transform: translateY(0); }

.btn[disabled], .btn:disabled {
  border-color: #2b3430;
  background: #171d1a;
  color: #747f79;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
}

.eyebrow a { color: inherit; text-decoration: none; }

.pagehead.app-page__header {
  position: relative;
  min-height: 122px;
  margin-bottom: 34px;
  padding: 10px 0 30px;
  border-bottom: 1px solid var(--border);
}

.pagehead.app-page__header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 74px;
  height: 2px;
  background: var(--accent);
}

.pagehead.app-page__header h1 { max-width: 720px; font-size: clamp(31px, 3.6vw, 44px); }
.pagehead.app-page__header .lead { margin-bottom: 0; }

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.section-heading h2 { margin-bottom: 0; font-size: 22px; }
.section-heading .eyebrow { margin-bottom: 7px; }

.account-summary,
.data-section {
  padding: 32px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-summary { padding-top: 0; }
.data-section:last-child { border-bottom: 0; }

.account-summary > h2 {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.account-summary .stat,
.route-admin .stat {
  position: relative;
  overflow: hidden;
}

.account-summary .stat::before,
.route-admin .stat::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--accent-2);
  opacity: 0.72;
}

.account-summary .stat:nth-child(even)::before,
.route-admin .stat:nth-child(even)::before { background: var(--accent); }

.premium-empty {
  min-height: 310px;
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: var(--line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(142, 220, 255, 0.05), transparent 62%),
    var(--surface-field);
  text-align: center;
}

.premium-empty .emptystate { max-width: 470px; }

/* Public editorial pages ------------------------------------------------ */

.public-page { width: 100%; }

.public-page__hero,
.legal-page__header,
.article-page__header {
  min-height: 390px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  align-items: end;
  gap: 80px;
  padding: 62px 0 70px;
  border-bottom: 1px solid var(--border);
}

.public-page__hero h1,
.legal-page__header h1,
.article-page__header h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.public-page__hero .lead,
.legal-page__header .lead,
.article-page__header .lead {
  max-width: 510px;
  margin: 0;
  color: var(--text-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.72;
}

.public-section {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 54px;
  padding: 76px 0;
  border-bottom: 1px solid var(--border);
}

.public-section__heading { align-self: start; }

/* Two columns, but a section is not limited to two children, and auto-placement
   sends a third child back into the 210px column, a fourth into the wide one,
   and so on. That is how /pricing came to render its first and third credit-pack
   rows narrow with the second one wide, and the credit table crushed into 210px.
   Everything that is not the heading belongs in the content column, stacked. The
   FAQ page had already fixed this for itself with `.faq-section > .faq` below;
   this generalises it, and the single-column breakpoint undoes it. */
.public-section > *:not(.public-section__heading) { grid-column: 2; }

/* The content column is wide enough that a bare paragraph in it runs past a
   comfortable measure. `.pricing-section` had already picked 820px for exactly
   this; the same number is used here so the two do not disagree. */
.public-section > .field-hint { max-width: 820px; }

.public-section__heading > span {
  display: block;
  margin-bottom: 38px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
}

.public-section__heading h2 { margin: 0; font-size: clamp(21px, 2vw, 26px); line-height: 1.2; letter-spacing: -0.022em; }

.feature-section .featuregrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.feature-section .featurecard {
  position: relative;
  min-height: 220px;
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-field);
  box-shadow: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.feature-section .featurecard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge-highlight);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.feature-section .featurecard:hover {
  border-color: var(--border);
  background: var(--surface-2);
  transform: translateY(-3px);
  box-shadow: none;
}

.feature-section .featurecard:hover::before { opacity: 1; }

.feature-section .featurecard h3 {
  max-width: 280px;
  margin: 48px 0 10px;
  font-size: 19px;
  letter-spacing: -0.018em;
}

.feature-section .featurecard p { max-width: 480px; font-size: 14px; line-height: 1.7; }

.faq-section { align-items: start; }

.faq-section > .faq {
  grid-column: 2;
  padding: 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.faq-section > .public-section__heading + .faq { border-top: 1px solid var(--border); }

.faq-section .faq > summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 18px 52px 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease);
}

.faq-section .faq > summary:hover { padding-left: 8px; color: var(--accent); }

.faq-section .faq > summary::after {
  top: 20px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--accent);
  font-size: 16px;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.faq-section .faq > summary:hover::after { border-color: var(--line-accent); background: var(--accent-soft); }

.faq-section .faq > p,
.faq-section .faq > ul {
  max-width: 760px;
  margin: 0;
  padding: 20px 48px 26px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  font-size: 15px;
  line-height: 1.75;
}

.public-cta {
  position: relative;
  margin: 88px 0 18px;
  padding: 68px 44px;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 50% -30%, rgba(210, 255, 107, 0.13), transparent 60%),
    linear-gradient(168deg, #16200f 0%, #101609 60%, #0b0f08 100%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(210, 255, 107, 0.13);
  text-align: center;
}

.public-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge-highlight);
}

.public-cta .eyebrow { justify-content: center; }
.public-cta h2 { margin: 12px 0; font-size: clamp(27px, 3.4vw, 40px); letter-spacing: -0.026em; }
.public-cta .field-hint { max-width: 560px; margin: 0 auto 24px; }

.pricing-plans { padding: 70px 0 76px; border-bottom: 1px solid var(--border); }

.pricing-page .plangrid { align-items: stretch; gap: 14px; }

.pricing-page .plancard {
  position: relative;
  padding: 30px 25px;
  overflow: hidden;
  border-color: var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-panel-gradient);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.pricing-page .plancard:hover {
  z-index: 1;
  border-color: rgba(210, 255, 107, 0.55);
  background: var(--surface-3);
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(210, 255, 107, 0.1);
}

.pricing-page .plancard::before {
  content: "";
  position: absolute;
  top: 0;
  right: 22px;
  left: 22px;
  height: 2px;
  background: var(--accent-2);
  opacity: 0.5;
}

.pricing-page .plancard:nth-child(even)::before { background: var(--accent); opacity: 0.8; }
.pricing-page .plancard-price { font-size: clamp(29px, 2.8vw, 36px); letter-spacing: -0.028em; font-variant-numeric: tabular-nums; }
.pricing-page .plancard-features { min-height: 250px; }

.pricing-section .field-hint { max-width: 820px; }

.pricing-section .pricerow {
  padding: 19px 0;
  border-top: 1px solid var(--border);
  border-bottom: 0;
}

.pricing-section .tablewrap { max-width: 760px; }

/* Contact and authentication -------------------------------------------- */

.contact-layout,
.auth-layout {
  min-height: 680px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.72fr);
  align-items: center;
  gap: 82px;
  padding: 58px 0 76px;
}

.contact-intro,
.auth-story {
  max-width: 650px;
  padding-right: 58px;
  border-right: 1px solid var(--border);
}

.contact-intro h1,
.auth-story h1 {
  margin: 0 0 22px;
  font-size: clamp(31px, 4.4vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.contact-intro .lead,
.auth-story .lead { max-width: 590px; color: var(--text-body); font-size: 17px; }

.contact-facts,
.auth-points {
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
}

.contact-facts > div,
.auth-points li {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--border);
}

.contact-facts dt,
.auth-points strong { color: var(--text); font-size: 12px; font-weight: 720; }

.contact-facts dd,
.auth-points span { margin: 0; color: var(--muted); font-size: 12px; }

.contact-form,
.auth-card {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 36px;
  overflow: hidden;
  border-color: #34433c;
  border-radius: var(--r-lg);
  background: var(--surface-panel-gradient);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(244, 247, 241, 0.04);
}

/* The sign-in and contact cards are the two places a stranger judges the
   product's care, so they get the lit edge treatment. */
.contact-form::before,
.auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--edge-highlight);
}

.contact-form h2,
.auth-card h2 { margin: 4px 0 7px; font-size: clamp(23px, 2.4vw, 28px); letter-spacing: -0.024em; }

.contact-form > form,
.auth-card > form { margin-top: 27px; }

.contact-form .formlinks,
.auth-card .formlinks {
  margin: 24px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  text-align: left;
}

.auth-layout--compact { min-height: 570px; }

/* Several sibling links in one .formlinks paragraph. Inline they run together
   with only a word space between, which reads as one broken sentence; laid out
   they read as the set of next steps they are. Wraps rather than shrinks, so a
   phone stacks them. */
.public-section .formlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
}

.completion-card { position: relative; padding-top: 38px; }

.completion-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border: 1px solid rgba(210, 255, 107, 0.5);
  border-radius: 50%;
  background: rgba(210, 255, 107, 0.08);
  color: var(--accent);
  font-size: 21px;
  font-weight: 750;
  box-shadow: 0 0 0 6px rgba(210, 255, 107, 0.05), 0 14px 30px rgba(210, 255, 107, 0.12);
}

.auth-card.completion-card .completion-mark { margin-left: 0; }
.completion-mark--mail { border-color: rgba(142, 220, 255, 0.5); background: rgba(142, 220, 255, 0.08); color: var(--accent-2); box-shadow: 0 0 0 6px rgba(142, 220, 255, 0.05), 0 14px 30px rgba(142, 220, 255, 0.12); }
.completion-mark--muted { border-color: var(--border); background: var(--surface-2); color: var(--muted); box-shadow: none; }

/* Workspace and forms --------------------------------------------------- */

.workspace-meter {
  margin-bottom: 30px;
  border-color: #344239;
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: none;
}

.workspace-meter .meterrow { grid-template-columns: 90px minmax(140px, 1fr) auto; }

.workspace-grid { gap: 16px; }

.workspace-card {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  padding: 25px;
  border-color: #2d3a34;
  border-radius: var(--r-lg);
  background: var(--surface-panel-gradient);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.workspace-card::after {
  content: "→";
  position: absolute;
  right: 20px;
  bottom: 18px;
  color: var(--accent);
  font-size: 18px;
  transition: transform var(--dur) var(--ease);
}

.workspace-card:hover {
  border-color: rgba(210, 255, 107, 0.45);
  background: var(--surface-3);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(210, 255, 107, 0.1);
  transform: translateY(-4px);
}

.workspace-card:hover::after { transform: translateX(4px); }
.workspace-card h2 { padding-right: 26px; font-size: 20px; letter-spacing: -0.02em; }

.workspace-tabs > .tabs__list {
  position: sticky;
  z-index: 12;
  top: 72px;
  gap: 4px;
  padding: 9px 0 0;
  background: rgba(7, 10, 9, 0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.workspace-tabs .tabs__tab {
  min-height: 46px;
  padding: 0 17px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.workspace-tabs .tabs__panel { padding-top: 24px; }

.page-projects-detail .workspace-tabs .layout,
.page-campaigns-detail .workspace-tabs .layout { align-items: start; gap: 16px; }

.page-projects-detail .workspace-tabs .panel,
.page-campaigns-detail .workspace-tabs .panel { border-color: #314039; box-shadow: none; }

.page-campaigns-detail .campaign-requirements > div {
  padding: 17px 0;
  border-bottom-color: var(--border);
}

.page-campaigns-detail .campaign-requirements dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.support-meta,
.support-thread {
  padding: 30px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.support-meta .metalist { max-width: 760px; }

.support-thread .thread {
  max-width: 900px;
  margin: 26px 0 0;
}

.support-thread .thread__item {
  margin-bottom: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0b100e;
}

.support-thread .thread__item--reply {
  margin-left: 40px;
  border-color: #3b4935;
  background: #10160d;
}

.support-thread > form.fieldgroup {
  max-width: 900px;
  padding: 28px;
  border-color: #344239;
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.archive-section {
  margin-top: 38px;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.upload-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 18px;
}

.upload-workbench,
.form-workbench {
  padding: 36px;
  border-color: #344239;
  border-radius: var(--r-lg);
  background: var(--surface-panel-gradient);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(244, 247, 241, 0.035);
}

.upload-sidebar {
  position: sticky;
  top: 94px;
  display: grid;
  gap: 16px;
}

.upload-aside { margin: 0; padding: 24px; border-radius: var(--r-md); box-shadow: none; }
.upload-aside h2 { font-size: 18px; letter-spacing: -0.018em; }

.upload-workbench form { counter-reset: upload-step; }

.upload-workbench .fieldgroup {
  position: relative;
  margin: 0;
  padding: 28px 0 28px 52px;
  border: 0;
  border-top: 1px solid var(--border);
  counter-increment: upload-step;
}

.upload-workbench .fieldgroup:first-of-type { border-top: 0; }

.upload-workbench .fieldgroup::before {
  content: counter(upload-step, decimal-leading-zero);
  position: absolute;
  top: 29px;
  left: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.upload-workbench .fieldgroup legend { padding: 0; font-size: 15px; }

.upload-workbench .dropzone {
  min-height: 250px;
  display: grid;
  place-items: center;
  margin-top: 26px;
  border: 1px dashed #4a5e54;
  border-radius: var(--r-lg);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(142, 220, 255, 0.05), transparent 62%),
    var(--surface-sunken);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.upload-workbench .dropzone:hover,
.upload-workbench .dropzone:focus-visible,
.upload-workbench .dropzone.dz-active {
  border-color: var(--accent);
  background: #10160d;
  box-shadow: var(--glow-accent);
}

.upload-workbench .dropzone-title { font-size: 20px; letter-spacing: -0.02em; }

.upload-workbench .ratio-card {
  min-height: 142px;
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.upload-workbench .ratio-card:hover { border-color: #50665c; background: var(--surface-2); }

/* Phase I caption picker. Shorter than a ratio card — it carries a sample strip
   instead of a shape, and forcing it to 142px left a gap under the text. */
.upload-workbench .caption-card {
  border-color: var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.upload-workbench .caption-card:hover { border-color: #50665c; background: var(--surface-2); }

.form-workbench form { max-width: 900px; }

.campaign-form-grid {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}

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

.settings-card { margin: 0; border-color: #314039; box-shadow: none; }
.settings-card h2 { margin-bottom: 24px; font-size: 22px; letter-spacing: -0.022em; }

.account-identity {
  min-width: 280px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.account-identity__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: linear-gradient(150deg, var(--accent-hi), var(--accent));
  color: var(--accent-ink);
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(210, 255, 107, 0.16);
}

.account-identity > span:last-child { min-width: 0; display: grid; gap: 5px; }
.account-identity strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; }

.danger-zone {
  margin-top: 32px;
  border-color: #6b3338;
  background: linear-gradient(168deg, #1c1113 0%, #160e0f 100%);
  box-shadow: none;
}

.danger-zone .eyebrow { color: var(--danger); }

/* Tables, notifications, sharing, and errors ---------------------------- */

.datatable, .table { border-collapse: collapse; }

.datatable thead th, .table thead th {
  height: 46px;
  background: var(--surface-field);
  color: #8f9a94;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.datatable tbody tr, .table tbody tr { transition: background-color 140ms ease; }
.datatable tbody tr:hover, .table tbody tr:hover { background: var(--surface-2); }
.datatable td, .table td { padding-top: 16px; padding-bottom: 16px; }

.notification-page .pagehead { margin-bottom: 26px; }

.notification-surface {
  padding: 0;
  overflow: hidden;
  border-color: #314039;
  border-radius: var(--r-lg);
}

.notification-surface .note { padding: 20px 22px; background: transparent; transition: background-color var(--dur-fast) var(--ease); }
.notification-surface .note:hover { background: rgba(244, 247, 241, 0.02); }
.notification-surface .note.is-unread { border-left: 2px solid var(--accent); background: #10160d; }
.notification-surface .note-title { color: var(--text); font-size: 15px; }

.share-stage {
  max-width: 980px;
  margin: 22px auto 0;
}

.share-stage__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding: 25px 0;
  border-bottom: 1px solid var(--border);
}

.share-stage__header h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.026em; }
.share-stage__header p { white-space: nowrap; }

.share-stage__media {
  padding: 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: #050706;
}

.share-stage .share-video { width: 100%; max-height: 68vh; margin: 0; border-radius: var(--r-sm); background: #000; }
.share-stage .share-actions { display: flex; justify-content: flex-end; margin: 18px 0 8px; }
.share-stage > .field-hint { text-align: right; }

.error-stage {
  position: relative;
  max-width: 760px;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 0 auto;
  padding: 72px;
  border-left: 1px solid var(--border);
}

.error-stage::before {
  content: "";
  position: absolute;
  top: 0;
  left: -1px;
  width: 2px;
  height: 100px;
  background: var(--danger);
}

.error-stage h1 { font-size: clamp(34px, 4.4vw, 50px); letter-spacing: -0.03em; }
.error-stage .lead { max-width: 580px; }

.legal-page__header { min-height: 340px; }
.legal-page__header h1 { font-size: clamp(32px, 4.2vw, 52px); }
.legal-page__header .legal__meta { margin-top: 18px; }

.legal-page .banner { margin-top: 24px; }

.legal-page .legal,
.article-page .article {
  max-width: 780px;
  margin: 0 auto;
  padding: 70px 0;
}

.legal-page .legal h2,
.article-page .article h2 {
  margin: 40px 0 13px;
  padding-top: 30px;
  font-size: 23px;
  letter-spacing: -0.022em;
}

/* Legal copy and blog articles are the one place on the site people actually
   read at length, so both get a measure-appropriate size rather than the dense
   UI size. An article and a legal document are the same object as far as
   typesetting is concerned — one column of prose read top to bottom — which is
   why the three rules above are shared rather than a second set of the same
   numbers. */
.legal-page .legal p,
.legal-page .legal li,
.article-page .article p,
.article-page .article li { color: var(--text-body); font-size: 16px; line-height: 1.8; }

/* The onward-links footer on an article is the same object as the "questions
   about this document" footer on a legal page — a small heading in a narrow
   column with links beside it — so it is the same rules rather than the same
   numbers written twice. */
.legal-contact,
.article-footer {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--border);
}

.legal-contact h2,
.article-footer h2 { margin: 0; font-size: 19px; }
.legal-contact p,
.article-footer p { grid-column: 2; margin: 0; }
.legal-contact p + p,
.article-footer p + p { margin-top: -34px; padding-top: 18px; border-top: 1px solid var(--border); }

/* Blog ------------------------------------------------------------------- */

/* The prose itself is typeset by the shared `.legal-page .legal` rules above,
   and the onward-links footer by the shared `.legal-contact` rules. What is left
   here is what an article has and a legal document does not: a dateline, lists
   inside the body, and the index that links to them all. */

.article-page .article ul { margin: 18px 0; padding-left: 22px; }
.article-page .article li + li { margin-top: 10px; }
.article-page .article strong { color: var(--text); }

/* Laid out for the reason `.public-section .formlinks` is, minus the centring:
   these sit in the wide column beside their heading, and centred links there
   read as belonging to neither column. */
.article-footer .formlinks { display: flex; flex-wrap: wrap; gap: 10px 28px; }

.article-page__header .eyebrow a { color: inherit; text-decoration: none; }
.article-page__header .eyebrow a:hover { text-decoration: underline; }
.article-page__header .article__meta { margin-top: 18px; }

/* The index list. `<ol>` because the order is meaningful — newest first — which
   also means the numbers have to go, since a reader would read them as a ranking
   of the articles rather than as their order of publication. */
.postlist { margin: 0; padding: 0; list-style: none; }

.postcard { padding: 26px 0; border-top: 1px solid var(--border); }
.postcard:first-child { padding-top: 0; border-top: 0; }
.postcard:last-child { padding-bottom: 0; }

.postcard__meta {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.postcard h3 { margin: 0 0 10px; font-size: 22px; letter-spacing: -0.022em; }
.postcard h3 a { color: var(--text); text-decoration: none; }
.postcard h3 a:hover { color: var(--accent); }
.postcard .field-hint { max-width: 700px; margin: 0; }

/* Admin console --------------------------------------------------------- */

.route-admin .shell { max-width: 1420px; }

.admin-workspace {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 44px;
}

.admin-workspace__rail {
  position: sticky;
  top: 96px;
  min-width: 0;
}

.admin-workspace__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-workspace__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(114, 231, 180, 0.08);
}

.admin-workspace .adminnav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
  box-shadow: none;
}

.admin-workspace .adminnav a {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border-radius: var(--r-xs);
  font-size: 13px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.admin-workspace .adminnav a:hover { background: rgba(244, 247, 241, 0.04); color: var(--text); }

.admin-workspace .adminnav a.is-active {
  background: #172015;
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.admin-workspace__content { min-width: 0; }

.route-admin .pagehead {
  padding: 5px 0 25px;
  border-bottom: 1px solid var(--border);
}

.route-admin .pagehead h1 { font-size: clamp(26px, 3vw, 38px); }

.route-admin .admin-workspace__content > .panel {
  padding: 30px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.route-admin .admin-workspace__content > .panel::before { display: none; }
.route-admin .admin-workspace__content > .panel:last-child { border-bottom: 0; }
.route-admin .panel h2 { font-size: 20px; }

.route-admin .filterbar {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.route-admin .datatable { font-size: 13px; }
.route-admin .tablewrap { border-color: #2d3934; border-radius: var(--r-md); }
.route-admin .codeblock { border-radius: var(--r-sm); background: #050706; }

/* Responsive route system ----------------------------------------------- */

@media (max-width: 1040px) {
  .public-page__hero,
  .legal-page__header,
  .article-page__header { gap: 48px; }

  .contact-layout,
  .auth-layout { gap: 48px; }

  .contact-intro,
  .auth-story { padding-right: 40px; }

  .admin-workspace { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 860px) {
  .public-page__hero,
  .legal-page__header,
  .article-page__header {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 28px;
    padding: 48px 0 55px;
  }

  .public-section { grid-template-columns: 150px minmax(0, 1fr); gap: 34px; padding: 58px 0; }

  .contact-layout,
  .auth-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 46px 0 64px;
  }

  .contact-intro,
  .auth-story {
    max-width: 760px;
    padding: 0 0 36px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .contact-form,
  .auth-card { max-width: 620px; }

  .upload-layout { grid-template-columns: 1fr; }
  .upload-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .admin-workspace { grid-template-columns: 1fr; gap: 28px; }
  .admin-workspace__rail { position: static; }
  .admin-workspace .adminnav { display: flex; overflow-x: auto; }
  .admin-workspace .adminnav a { flex: 0 0 auto; }
  .admin-workspace .adminnav a.is-active { box-shadow: inset 0 -2px 0 var(--accent); }

  .workspace-tabs > .tabs__list { top: 66px; }
}

@media (max-width: 700px) {
  .pagehead.app-page__header { min-height: 0; padding-top: 0; }
  .pagehead--split.app-page__header { align-items: flex-start; }

  .public-section { grid-template-columns: 1fr; gap: 26px; padding: 50px 0; }
  .public-section__heading { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 8px; }
  .public-section__heading > span { margin: 0; }

  /* One column here, so column 2 does not exist. Left in place it would be
     created implicitly and every child would sit beside an empty first column. */
  .public-section > *:not(.public-section__heading) { grid-column: 1; }

  .faq-section > .faq { grid-column: 1; }

  .public-cta { margin-top: 64px; padding: 50px 26px; border-radius: var(--r-lg); }

  .contact-form,
  .auth-card,
  .upload-workbench,
  .form-workbench { padding: 26px; border-radius: var(--r-md); }

  .settings-grid { grid-template-columns: 1fr; }
  .account-identity { width: 100%; min-width: 0; }

  .share-stage__header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .share-stage__header p { white-space: normal; }

  .legal-contact,
  .article-footer { grid-template-columns: 1fr; gap: 18px; }
  .legal-contact p,
  .article-footer p { grid-column: 1; }
  .legal-contact p + p,
  .article-footer p + p { margin-top: 0; }

  .error-stage { min-height: 400px; padding: 48px 28px; }
}

@media (max-width: 540px) {
  .feature-section .featuregrid { grid-template-columns: 1fr; }
  .feature-section .featurecard { min-height: 190px; padding: 23px; }
  .feature-section .featurecard h3 { margin-top: 34px; }

  .faq-section .faq > summary { min-height: 62px; padding-right: 45px; }
  .faq-section .faq > p,
  .faq-section .faq > ul { padding-right: 0; }

  .pricing-plans { padding: 48px 0 56px; }
  .pricing-page .plangrid { grid-template-columns: 1fr; }
  .pricing-page .plancard-features { min-height: 0; }

  .contact-facts > div,
  .auth-points li { grid-template-columns: 1fr; gap: 3px; }

  .contact-form,
  .auth-card,
  .upload-workbench,
  .form-workbench { padding: 22px; }

  .upload-sidebar { grid-template-columns: 1fr; }
  .upload-workbench .fieldgroup { padding-left: 38px; }
  .upload-workbench .ratio-options { grid-template-columns: 1fr; }

  .workspace-meter .meterrow { grid-template-columns: 1fr; }
  .workspace-meter .meter-value { text-align: left; }

  .notification-surface .note { padding: 18px 16px; }
  .share-stage__media { padding: 8px; }
  .share-stage .share-actions { justify-content: stretch; }
  .share-stage .share-actions .btn { width: 100%; }
  .share-stage > .field-hint { text-align: left; }

  .admin-workspace__label { margin-left: 2px; }
  .route-admin .filterbar { padding: 10px; }
  .route-admin .filterbar .input,
  .route-admin .filterbar .select,
  .route-admin .filterbar .btn { width: 100%; flex-basis: 100%; }

  .workspace-tabs > .tabs__list { right: -16px; left: -16px; padding-left: 16px; overflow-x: auto; }
  .workspace-tabs .tabs__tab { flex: 0 0 auto; }
  .support-thread .thread__item--reply { margin-left: 14px; }
}

/* ── Phase H: campaign compliance ─────────────────────────────────────────────
   The panel appears twice with the same vocabulary: inside a `.clipcard`, where
   it needs the same top-rule divider `.hook-generator` uses, and alone on the
   pre-download advisory page, where it sits directly in a `.panel`. Everything
   below the wrapper is therefore context-free, and only `.compliance` itself
   carries the card treatment.

   Status is carried by the glyph and by the word next to it, never by colour
   alone — the row reads "Duration — Potential issue" whether or not the amber
   lands. */
.compliance {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.compliance__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.compliance__head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

/* The status pill is written across several template lines, so it would wrap
   mid-phrase at a narrow width without this. */
.compliance__head .pill { white-space: nowrap; }

.compliance__list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compliance__check {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.compliance__mark {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}

.compliance__check--pass .compliance__mark { color: var(--ok); }
.compliance__check--issue .compliance__mark { color: var(--warn); }

.compliance__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.compliance__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.compliance__check--issue .compliance__label { color: var(--warn); }
.compliance__check--unknown .compliance__label { color: var(--muted); }

.compliance__detail {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Collapsed by default. These are the rules nothing can verify, so they are
   reference material the user opens when they want it — not a wall of prose
   above the download button. */
.compliance__manual {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-1);
}

.compliance__manual > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.compliance__manual > summary:hover { color: var(--accent); }
.compliance__manual > .field-hint { margin: 8px 0 6px; }
.compliance__manual dd { overflow-wrap: anywhere; }

/* On the advisory page the list is the whole point of the screen rather than a
   footnote on a card, so it gets room to read as one. */
.panel > .compliance__list {
  gap: 12px;
  margin-bottom: 18px;
}

.panel > .compliance__list .compliance__label { font-size: 14px; }
.panel > .compliance__list .compliance__detail { font-size: 13.5px; }

@media (max-width: 520px) {
  .compliance__head { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   Phase J — smart editing
   --------------------------------------------------------------------------- */

/* The smart-editing fieldset is the first to stack two checkboxes directly.
   `.checkrow` carries no margin of its own because everywhere else a
   `.field-hint` sits between the rows and supplies the spacing; when the options
   are unavailable there is one shared hint at the bottom instead, and the rows
   would otherwise be flush. Scoped to adjacent rows rather than loosening
   `.checkrow` app-wide, which would move every checkbox on every form. */
.checkrow + .checkrow { margin-top: 12px; }