:root {
  --ink: #1c1917;
  --bg: #fbf8f6;
  --panel: rgba(255, 255, 255, 0.82);
  --line: rgba(28, 25, 23, 0.08);
  --text: #1c1917;
  --muted: #78716c;
  --rose: #ff6b8a;
  --coral: #ff8f6b;
  --amber: #ffc46b;
  --violet: #b07cff;
  --sky: #6bb7ff;
  --grad: linear-gradient(
    120deg,
    var(--coral),
    var(--rose) 40%,
    var(--violet) 75%,
    var(--sky)
  );
  --radius: 22px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Outfit", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --max: 1080px;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  background-color: var(--bg);
  line-height: 1.55;
  position: relative;
}

/* Soft glow orbs — static layer (animated drift was janky on low-power GPUs). */
body::before {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  contain: paint;
  background-image:
    radial-gradient(
      1100px 620px at 8% -8%,
      rgba(255, 143, 107, 0.2),
      transparent 58%
    ),
    radial-gradient(
      900px 560px at 94% -2%,
      rgba(176, 124, 255, 0.14),
      transparent 52%
    ),
    radial-gradient(
      760px 480px at 50% 108%,
      rgba(107, 183, 255, 0.12),
      transparent 58%
    ),
    radial-gradient(
      420px 320px at 72% 42%,
      rgba(255, 196, 107, 0.1),
      transparent 60%
    );
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

a {
  color: #9a5af0;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.wrap {
  position: relative;
  z-index: 1;
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}

/*
  Keyboard users hit the nav on every page before reaching content. Off-screen
  until focused rather than display:none, which would take it out of the tab
  order and defeat the point.
*/
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 12px 0;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/*
  Visible focus, in the brand colour rather than the browser default, which the
  warm background washes out.
*/
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

/*
  Three columns: brand, links, call to action. Explicit placement rather than a
  single wrapping flex row — five items sharing one flex-wrap row is what
  stacked the nav three deep on a phone and left `space-between` centring the
  wordmark against that stack. Below 720px the call to action stays beside the
  brand and the links drop to a row of their own.
*/
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  color: transparent;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand span {
  color: inherit;
  font-weight: 700;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.92rem;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.72rem 1.15rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 28px rgba(255, 107, 138, 0.36);
  font-weight: 700;
}

.btn-primary:hover {
  box-shadow: 0 14px 34px rgba(176, 124, 255, 0.32);
}

.btn-ghost {
  border: 1.5px solid rgba(28, 25, 23, 0.16);
  background: #ffffff;
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(28, 25, 23, 0.06);
}

.btn-ghost:hover {
  border-color: rgba(176, 124, 255, 0.5);
  background: #fffaf7;
  box-shadow: 0 8px 20px rgba(176, 124, 255, 0.14);
}

.nav .btn-primary,
.header-cta {
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  white-space: nowrap;
}

.hero {
  padding: 4.5rem 0 3.5rem;
  animation: rise 700ms ease both;
}

/*
  The eyebrow above a page title.
  It used to ask for a display size and a gradient fill, and got neither: `.hero
  p` is both later in this file and more specific (0,1,1 against 0,1,0), so it
  won font-size and colour on every page. What has always shipped is this small
  muted line. Stated deliberately now, at a specificity that holds, so editing
  `.hero p` cannot silently resize every page title.
*/
.hero .hero-brand {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 0.95;
  color: var(--muted);
}

.hero .hero-brand em {
  font-style: normal;
  color: inherit;
}

.hero h1 {
  max-width: 18ch;
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink);
}

/* Homepage: brand + short hub pitch — product depth lives on Trace / MCP pages. */
.hero--home h1 {
  max-width: 18ch;
  font-size: clamp(2.15rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
}

.hero p,
.lead {
  max-width: 52ch;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

.endpoint {
  margin-top: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  color: var(--violet);
  box-shadow: 0 8px 28px rgba(28, 25, 23, 0.05);
}

/*
  A bare URL in a box asks the reader to work out what it is and then select it
  by hand on a phone. Label it and let them copy it in one tap.
*/
.endpoint-field {
  margin-top: 1.75rem;
}

.endpoint-field .endpoint {
  margin-top: 0;
  width: fit-content;
}

.endpoint-label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.endpoint code {
  font: inherit;
  color: inherit;
  overflow-wrap: anywhere;
}

.endpoint-copy {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.32rem 0.62rem;
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.endpoint-copy:hover {
  color: var(--ink);
}

.endpoint-copy[data-copied="true"] {
  color: #15803d;
  border-color: rgba(21, 128, 61, 0.35);
}

/*
  Tool table. Fourteen rows do not read as cards, and the comparison people
  actually want is "is this one included". Scrolls inside its own container so
  the page body never scrolls sideways on a phone.
*/
.table-scroll {
  overflow-x: auto;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.tool-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.tool-table th,
.tool-table td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.tool-table thead th {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
}

.tool-table tbody tr:last-child td {
  border-bottom: 0;
}

.tool-table td:first-child {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.tool-table td:last-child {
  white-space: nowrap;
  font-weight: 600;
}

.plan-free {
  color: #15803d;
}

.plan-pro {
  color: var(--violet);
}

.platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0;
  list-style: none;
}

.platform-list li {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 0.86rem;
  color: var(--muted);
}

/*
  Consent banner. Bottom of the viewport rather than a modal: it is a choice,
  not a gate, and nothing has loaded yet either way. Sits above content but
  below nothing else, and stacks on a phone so both buttons stay full-size tap
  targets.
*/
.consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 50px rgba(28, 25, 23, 0.14);
}

.consent__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.consent__actions {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.consent .btn {
  padding: 0.5rem 0.95rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .consent {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .consent__actions .btn {
    flex: 1;
  }
}

/*
  Prompt lists. Each item is something a reader copies and pastes, so it gets
  the quiet card treatment rather than a bullet, and enough padding to be a
  comfortable tap target when they long-press to select on a phone.
*/
.prompt-list {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.prompt-list li {
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}

/* Extension cards: the price line, then the small print under the pitch. */
.ext-meta {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--violet);
}

.ext-note {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.panel .hero-actions {
  margin-top: 1.15rem;
}

.section {
  padding: 2.75rem 0;
}

.section h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--ink);
}

.section > p {
  color: var(--muted);
  max-width: 60ch;
}

.grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

/*
  Phone header: brand and call to action share the first row, links take the
  second. Placed explicitly so the row assignment cannot drift with the number
  of links.
*/
@media (max-width: 720px) {
  .site-header {
    grid-template-columns: 1fr auto;
    row-gap: 0.9rem;
  }

  .brand {
    grid-area: 1 / 1 / 2 / 2;
  }

  .header-cta {
    grid-area: 1 / 2 / 2 / 3;
  }

  .nav {
    grid-area: 2 / 1 / 3 / 3;
    justify-content: flex-start;
    gap: 0.6rem 1.3rem;
  }
}

/*
  On a narrow phone the URL and the button cannot share a line without breaking
  the host mid-word ("creatorsensea / i.com"). Give the URL the full width and
  let the button drop beneath it, so the address stays readable in one piece.
*/
@media (max-width: 480px) {
  .endpoint {
    flex-wrap: wrap;
    font-size: 0.82rem;
  }

  .endpoint-field .endpoint {
    width: 100%;
  }

  .endpoint code {
    flex: 1 1 100%;
  }
}

.panel {
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 1.45rem 1.4rem 1.3rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 18px 42px -20px rgba(28, 25, 23, 0.16),
    0 10px 24px -16px rgba(176, 124, 255, 0.16);
}

.panel h3 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--ink);
}

.panel p,
.panel li {
  color: var(--muted);
  margin: 0;
}

.panel ol,
.panel ul {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
}

.panel li + li {
  margin-top: 0.4rem;
}

a.panel--link {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

a.panel--link:hover {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 26px 52px -18px rgba(176, 124, 255, 0.28);
  transform: translateY(-4px);
}

a.panel--link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.panel-meta {
  display: inline-block;
  margin-top: 0.85rem !important;
  margin-bottom: 0 !important;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 143, 107, 0.14);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink) !important;
  width: fit-content;
}

.panel-cta {
  display: block;
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: #9a5af0;
  font-size: 0.95rem;
}

.price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0.35rem 0 0.75rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price small {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--muted);
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 1rem 1rem 1rem 3.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  margin-bottom: 0.75rem;
  color: var(--muted);
  box-shadow: 0 8px 28px rgba(28, 25, 23, 0.04);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

.steps strong {
  color: var(--text);
}

.legal {
  padding: 2.5rem 0 4rem;
}

.legal h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.legal .meta {
  color: var(--muted);
  margin-bottom: 2rem;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 2rem 0 0.65rem;
}

.legal p,
.legal li {
  color: var(--muted);
}

.legal ul {
  padding-left: 1.2rem;
}

.note {
  border-left: 3px solid var(--rose);
  padding: 0.85rem 1rem;
  background: linear-gradient(
    120deg,
    rgba(255, 143, 107, 0.12),
    rgba(176, 124, 255, 0.1)
  );
  border-radius: 0 12px 12px 0;
  color: var(--text);
  margin: 1.25rem 0;
}

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 1.75rem 0 2.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--ink);
  font-weight: 500;
}

.site-footer__abn {
  font-weight: 400;
  color: var(--muted);
  font-size: 0.85rem;
}

.site-footer__nav,
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.site-footer__nav a,
.site-footer__social a,
.site-footer__trust a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__social a:hover,
.site-footer__trust a:hover {
  color: var(--ink);
}

.site-footer__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.5rem;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 1.15rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--line);
}

.site-footer__trust p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.5;
  font-size: 0.84rem;
}

.site-footer__social {
  font-weight: 600;
  color: var(--ink);
}

.site-footer__social a {
  color: var(--ink);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    animation: none;
  }
}

/* Trace public value equation */
.trace-eq__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.trace-eq__fields label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.trace-eq__fields input {
  min-width: 9rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  color: var(--ink);
}

.trace-eq__result {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
}

.trace-eq__narrative {
  margin: 0 0 0.75rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 62ch;
}

.lab-metrics-lede {
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.55;
}

.lab-metrics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.lab-metrics__card {
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}

.lab-metrics__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.lab-metrics__value {
  margin: 0.35rem 0 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.lab-metrics__note,
.lab-metrics__foot,
.lab-metrics__loading,
.lab-metrics__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}

.lab-metrics__foot {
  margin-top: 1rem;
  max-width: 70ch;
}

/* Blog / long-form guides */
.article-hero {
  padding: 2.5rem 0 1.25rem;
}

.article-hero .hero-brand {
  margin-bottom: 0.75rem;
}

.article-meta {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.article-body {
  max-width: 68ch;
}

.article-body > p,
.article-body > ul,
.article-body > ol {
  color: var(--text);
  line-height: 1.65;
}

.article-body > h2 {
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.2;
}

.article-body > h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.article-body li + li {
  margin-top: 0.4rem;
}

.article-cta {
  margin: 2rem 0;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
}

.article-cta h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.article-related {
  margin-top: 2.5rem;
}

.article-related .grid {
  margin-top: 1rem;
}

.blog-card-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.blog-card {
  display: block;
  padding: 1.25rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.blog-card:hover {
  text-decoration: none;
  border-color: rgba(176, 124, 255, 0.45);
  transform: translateY(-1px);
}

.blog-card h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.blog-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.blog-card .blog-card__meta {
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* —— G hybrid: product cinema home + scroll reveal + ask bar —— */
.hero--cinema {
  padding: 1.75rem 0 2.75rem;
  text-align: center;
  animation: rise 850ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero--cinema .hero-brand {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.85rem;
}

.hero--cinema h1 {
  margin-left: auto;
  margin-right: auto;
  max-width: 15ch;
  font-size: clamp(1.85rem, 4.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.hero--cinema > p {
  margin-left: auto;
  margin-right: auto;
}

.hero--cinema .hero-actions {
  justify-content: center;
  margin-top: 1.35rem;
}

.hero--cinema .cs-askbar {
  max-width: min(560px, 100%);
  margin: 2.1rem auto 0;
  text-align: left;
  display: grid;
  gap: 0.85rem;
}

.cs-ask {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.4rem;
  padding: 0.85rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(28, 25, 23, 0.1);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 40px rgba(28, 25, 23, 0.06);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.cs-ask__ring {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex: none;
  background: var(--grad);
  box-shadow: 0 0 0 4px rgba(176, 124, 255, 0.12);
}

.cs-ask__ring--sm {
  width: 0.55rem;
  height: 0.55rem;
  display: inline-block;
  vertical-align: -1px;
  margin-right: 0.35rem;
  box-shadow: 0 0 0 3px rgba(176, 124, 255, 0.1);
  animation: none;
}

.cs-ask__q {
  white-space: nowrap;
  overflow: hidden;
}

.cs-ask__caret {
  width: 2px;
  height: 1.05em;
  background: var(--ink);
  opacity: 0.55;
  animation: csAskBlink 1s steps(1) infinite;
  flex: none;
}

.cs-ask-stage {
  position: relative;
  min-height: 20.5rem;
}

.cs-ask-view {
  position: absolute;
  inset: 0;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.cs-ask-view.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.cs-ask-card {
  border-radius: 1.15rem;
  border: 1px solid rgba(28, 25, 23, 0.08);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 50px rgba(28, 25, 23, 0.07);
  padding: 1rem 1.05rem 1.05rem;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.cs-ask-card--trace {
  padding: 0.85rem;
}

.cs-ask-plate {
  position: relative;
  width: 100%;
  height: 14.75rem;
  border-radius: 0.9rem;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 22% 18%, #6b5b8f 0%, transparent 55%),
    radial-gradient(100% 80% at 82% 78%, #8f6b5b 0%, transparent 60%),
    linear-gradient(160deg, #2a2340 0%, #1b1726 60%, #2b2436 100%);
}

.cs-ask-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.26;
  pointer-events: none;
}

.cs-ask-stamp {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: #fbf8f6;
  background: rgba(28, 25, 23, 0.74);
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s ease 0.5s,
    transform 0.5s ease 0.5s;
}

.cs-ask-view.is-on .cs-ask-stamp {
  opacity: 1;
  transform: none;
}

.cs-ask-stamp b {
  color: var(--coral);
  font-weight: 500;
}

.cs-ask-who {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.15rem;
}

.cs-ask-who i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  display: inline-block;
}

.cs-ask-kept {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
}

.cs-ask-kept span {
  color: #3f9d7c;
}

.cs-ask-sub {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.cs-ask-bars {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.cs-ask-bars i {
  display: block;
  height: 0.45rem;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left;
}

.cs-ask-view.is-on .cs-ask-bars i {
  animation: csAskGrow 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.45s forwards;
}

.cs-ask-view.is-on .cs-ask-bars i:nth-child(2) {
  animation-delay: 0.55s;
}

.cs-ask-view.is-on .cs-ask-bars i:nth-child(3) {
  animation-delay: 0.65s;
}

.cs-ask-view.is-on .cs-ask-bars i:nth-child(4) {
  animation-delay: 0.75s;
}

.cs-ask-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.cs-ask-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cs-ask-legend i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  display: inline-block;
}

.cs-ask-clips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.cs-ask-clip {
  aspect-ratio: 9 / 16;
  border-radius: 0.75rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #2a2340, #3a2f52);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.cs-ask-view.is-on .cs-ask-clip {
  opacity: 1;
  transform: none;
}

.cs-ask-view.is-on .cs-ask-clip:nth-child(1) {
  transition-delay: 0.4s;
}

.cs-ask-view.is-on .cs-ask-clip:nth-child(2) {
  transition-delay: 0.52s;
}

.cs-ask-view.is-on .cs-ask-clip:nth-child(3) {
  transition-delay: 0.64s;
}

.cs-ask-clip b {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  color: rgba(251, 248, 246, 0.82);
  letter-spacing: 0.06em;
}

.cs-ask-kitline {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

.cs-ask-kitline b {
  color: var(--ink);
  font-weight: 400;
}

.cs-ask-foot {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

@keyframes csAskBlink {
  50% {
    opacity: 0;
  }
}

@keyframes csAskGrow {
  to {
    transform: scaleX(1);
  }
}

@media (max-width: 640px) {
  .cs-ask {
    font-size: 0.82rem;
    min-height: 3.1rem;
    padding: 0.75rem 0.9rem;
  }

  .cs-ask-stage {
    min-height: 22rem;
  }

  .cs-ask-plate {
    height: 12.5rem;
  }

  .cs-ask__q {
    white-space: normal;
  }
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 750ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero--cinema {
    animation: none;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cs-ask__caret {
    animation: none;
  }

  .cs-ask-view,
  .cs-ask-stamp,
  .cs-ask-clip {
    transition: none;
  }

  .cs-ask-view.is-on .cs-ask-bars i {
    animation: none;
    transform: scaleX(1);
  }

  .cs-ask-view.is-on .cs-ask-stamp,
  .cs-ask-view.is-on .cs-ask-clip {
    opacity: 1;
    transform: none;
  }
}

.lab-metrics__card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 36px -20px rgba(28, 25, 23, 0.14);
}

.blog-card {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 32px -20px rgba(28, 25, 23, 0.12);
}