/* Tracewell — page-only sections (prefix tw-). Tokens only: every colour, radius and shadow comes from tokens.css / palette.css. */

/* ── Hero (hero-d): centred head over one wide gradient panel with three mock-ups in a flow ── */
.tw-hero { padding: 72px var(--pad-x) 40px; }
.tw-hero__head { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; max-width: 820px; margin: 0 auto 56px; }
.tw-hero__head .t-display { max-width: 780px; }
.tw-hero__lead { max-width: 560px; font-size: 18px; line-height: 1.6; }
.tw-hero__head .btn-row { justify-content: center; margin-top: 6px; }
.tw-hero__note { font-size: 14px; color: var(--muted); }
.tw-hero__art { padding: 80px 48px; border-radius: var(--r-xl); }
.tw-flow { width: 100%; max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1.15fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 14px; }
.tw-flow > .mock { min-width: 0; }
.tw-editor { overflow: hidden; }
.tw-trace { padding: 20px 22px; }
.tw-slack { padding: 18px 20px; }
.tw-arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.tw-arrow svg { width: 16px; height: 16px; }

.tw-code { display: grid; grid-template-columns: 22px 1fr; column-gap: 14px; padding: 18px 20px 20px; font-family: var(--mono); font-size: 13px; line-height: 1.9; white-space: pre; color: var(--text); overflow: hidden; }
.tw-ln { color: var(--muted); text-align: right; }
.tw-ln--on { color: var(--accent-ink); }
.tw-hl { margin-inline: -8px; padding-inline: 8px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }

.tw-trace__kind { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.tw-live { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.tw-trace__title { margin-top: 8px; font-size: 15px; line-height: 1.45; font-weight: 400; color: var(--text); }
.tw-frames { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 12px; }
.tw-frames li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--text-2); }
.tw-frames b { font-weight: 500; color: var(--text); }
.tw-frames span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-frames__hit { background: var(--danger-soft); }
.tw-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tw-meta span { padding: 2px 8px; border-radius: var(--r-xs); background: var(--surface-2); font-size: 12px; color: var(--text); }

.tw-slack__chan { font-size: 12px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.tw-slack__msg { display: flex; gap: 10px; align-items: flex-start; }
.tw-slack__msg + .tw-slack__msg { margin-top: 14px; }
.tw-slack__app { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--ink-bg); color: var(--accent-on-dark); font-weight: 500; font-size: 16px; line-height: 1; }
.tw-slack__body { min-width: 0; flex: 1; }
.tw-slack__who { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.4; }
.tw-slack__who b { font-weight: 500; }
.tw-badge { padding: 0 5px; border-radius: var(--r-xs); background: var(--surface-2); font-size: 11px; color: var(--muted); }
.tw-time { font-size: 12px; color: var(--muted); }
.tw-slack__text { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.tw-inline { font-family: var(--mono); font-size: 12px; padding: 1px 5px; border-radius: var(--r-xs); background: var(--danger-soft); color: var(--text); }
.tw-slack__btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tw-sbtn { padding: 4px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); font-size: 12px; color: var(--text); }
.tw-sbtn--on { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--on-dark); }

/* ── NEW · Incident timeline: copy + big delta left, two lanes right ── */
.tw-incident__grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 820px); justify-content: space-between; gap: 60px; align-items: stretch; }
.tw-incident__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.tw-incident__copy .sec-head { margin-bottom: 0; }
.tw-delta { padding-top: 28px; border-top: 1px solid var(--line); }
.tw-delta__label { font-size: 14px; color: var(--muted); }
.tw-delta__nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; margin-top: 10px; font-family: var(--font-display); font-size: 36px; line-height: 1.2; letter-spacing: -.045em; color: var(--text); }
.tw-delta__nums s { color: var(--muted); text-decoration-thickness: 1.5px; }
.tw-delta__nums span { font-size: 24px; color: var(--muted); }
.tw-delta__nums b { font-weight: 400; color: var(--accent-ink); }
.tw-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 40px; border-radius: var(--r-xl); background: var(--surface-2); }
.tw-lane { padding: 26px 24px; border-radius: var(--r); background: var(--surface); }
.tw-lane--old { background: var(--surface-1); }
.tw-lane__head { padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 400; color: var(--text); }
.tw-events { position: relative; display: flex; flex-direction: column; }
.tw-events::before { content: ""; position: absolute; left: 47px; top: 18px; bottom: 18px; width: 1px; background: var(--line-2); }
.tw-events li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 22px; padding: 12px 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tw-events li::after { content: ""; position: absolute; left: 44px; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--muted); }
.tw-events time { font-family: var(--mono); font-size: 12px; line-height: 1.75; color: var(--muted); }
.tw-events__bad span { color: var(--text); }
.tw-events__bad::after { background: var(--danger) !important; box-shadow: none !important; }
.tw-events__ping span, .tw-events__good span { color: var(--text); }
.tw-events__ping::after { background: var(--accent) !important; box-shadow: 0 0 0 4px var(--accent-soft) !important; }
.tw-events__good::after { background: var(--success) !important; box-shadow: none !important; }

/* ── NEW · Setup: one terminal split into three steps ── */
.tw-term { border-radius: var(--r); background: var(--ink-bg); color: var(--on-dark); overflow: hidden; box-shadow: var(--shadow-2); }
.tw-term__bar { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line-on-dark); font-size: 13px; }
.tw-term__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot-red); }
.tw-term__bar i:nth-child(2) { background: var(--dot-amber); } .tw-term__bar i:nth-child(3) { background: var(--dot-green); margin-right: 10px; }
.tw-term__bar span { color: var(--on-dark-2); font-family: var(--mono); font-size: 12px; }
.tw-term__steps { display: grid; grid-template-columns: repeat(3, 1fr); }
.tw-term__step { display: flex; flex-direction: column; gap: 10px; padding: 36px 32px 34px; }
.tw-term__step + .tw-term__step { border-left: 1px solid var(--line-on-dark); }
.tw-term__num { font-family: var(--mono); font-size: 13px; color: var(--accent-on-dark); }
.tw-term__title { font-family: var(--font); font-size: 20px; line-height: 1.4; letter-spacing: -.01em; font-weight: 400; color: var(--on-dark); }
.tw-term__text { font-size: 15px; color: var(--on-dark-2); }
.tw-term__code { margin: 14px 0 0; padding: 16px 18px; border-radius: var(--r-btn); background: rgba(255, 255, 255, .06); font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--on-dark); white-space: pre; overflow: hidden; }
.tw-p { color: var(--accent-on-dark); }
.tw-dim { color: var(--on-dark-2); }
.tw-ok { color: var(--pastel-mint); }

/* ── Feature rows (features-a): art + copy, alternating ── */
.tw-rows { display: flex; flex-direction: column; gap: 120px; }
.tw-feat { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
.tw-feat--flip { flex-direction: row-reverse; }
.tw-feat__art { flex: 0 1 700px; width: 100%; height: 600px; border-radius: var(--r-xl); padding: 40px; }
.tw-feat__copy { flex: 0 1 520px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.tw-feat__copy > p { max-width: 470px; }
.tw-feat__copy .btn { margin-top: 4px; }

.tw-issues { width: 100%; max-width: 440px; padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.tw-issues__head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 6px; font-size: 15px; }
.tw-issues__head small { font-size: 12px; color: var(--muted); }
.tw-issue { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-btn); background: var(--surface); font-size: 14px; }
.tw-issue--top { box-shadow: 0 0 0 1.5px var(--accent); }
.tw-issue__name { min-width: 0; flex: 1; display: flex; flex-direction: column; line-height: 1.35; }
.tw-issue__name small { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.tw-issue b { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.tw-issue--top b { color: var(--accent-ink); }
.tw-sev { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); }
.tw-sev--high { background: var(--danger); }
.tw-sev--new { background: var(--accent); }
.tw-issues__foot { padding: 6px 4px 0; font-size: 12px; color: var(--muted); }

.tw-thread { width: 100%; max-width: 440px; padding: 20px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-2); color: var(--text); }
.tw-snip { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-1); border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; line-height: 1.8; color: var(--text); white-space: pre; overflow: hidden; }
.tw-snip span { color: var(--muted); }
.tw-snip .tw-snip__hit { color: var(--danger); }
.tw-slack__msg--reply { padding-top: 14px; border-top: 1px solid var(--line); }
.tw-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--pastel-lilac); font-size: 13px; font-weight: 500; color: var(--text); }

/* ── NEW · Alert anatomy: one big trace card with numbered pins + a legend ── */
.tw-anatomy__art { min-height: 560px; padding: 72px 32px; border-radius: var(--r-xl); }
.tw-big { width: 100%; max-width: 640px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.tw-big__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tw-big__title { font-size: 18px; line-height: 1.4; font-weight: 400; color: var(--text); }
.tw-big__code { margin: 0; padding: 14px 16px; border-radius: var(--r-btn); background: var(--surface-1); border: 1px solid var(--line); font-family: var(--mono); font-size: 13px; line-height: 1.9; white-space: pre; overflow: hidden; color: var(--text); }
.tw-big__n { display: inline-block; width: 36px; color: var(--muted); }
.tw-big__n--hit { color: var(--danger); }
.tw-big__hit { background: var(--danger-soft); border-radius: 4px; padding-right: 8px; }
.tw-big__row { display: grid; grid-template-columns: 24px 88px 1fr; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.tw-big__k { color: var(--muted); }
.tw-big__v { color: var(--text); min-width: 0; }
.tw-pin { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 500; line-height: 1; }
.tw-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.tw-legend li { display: flex; gap: 14px; align-items: flex-start; }
.tw-legend .tw-pin { margin-top: 2px; }
.tw-legend__t { font-family: var(--font); font-size: 18px; line-height: 1.4; letter-spacing: -.01em; font-weight: 400; }
.tw-legend p { margin-top: 6px; font-size: 15px; }

/* ── Integrations (integrations-b): stack cards ── */
.tw-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tw-tool { display: flex; flex-direction: column; gap: 10px; min-height: 190px; padding: 24px; border-radius: var(--r); background: var(--surface); }
.tw-tool .icon-well { margin-bottom: auto; }
.tw-tool__t { font-family: var(--font); font-size: 18px; line-height: 1.35; font-weight: 400; }
.tw-tool__p { font-size: 15px; }

/* ── Proof band tweaks ── */
.tw-quote .quote-band__stats div { max-width: none; }
.tw-quote .quote-band__stats span { max-width: 160px; }
.tw-quote figure img { object-position: 50% 30%; }

/* ── Pricing head ── */
.tw-price-head { margin-bottom: 28px; }

/* ── NEW · CTA: split gradient panel with a "first 60 seconds" card ── */
.tw-cta { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: 60px; padding: 100px 80px; }
.tw-cta__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.tw-cta__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; }
.tw-cta__copy p { color: var(--text); font-weight: 400; max-width: 440px; }
.tw-cta__copy .btn-row { margin-top: 8px; }
.tw-first { padding: 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-2); display: flex; flex-direction: column; gap: 18px; }
.tw-first__head { font-size: 15px; font-weight: 400; color: var(--text); }
.tw-first__list li { align-items: center; }
.tw-first__t { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 300; }
.tw-cmd { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 6px 6px 16px; border-radius: var(--r-btn); background: var(--ink-bg); }
.tw-cmd__text { font-family: var(--mono); font-size: 14px; color: var(--on-dark); white-space: nowrap; overflow: hidden; }
.tw-cmd__copy { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); color: var(--on-dark); transition: background var(--dur-fast) var(--ease); }
.tw-cmd__copy:hover { background: rgba(255, 255, 255, .16); }
.tw-cmd__copy svg { width: 18px; height: 18px; }
.tw-cmd__copy.is-done { background: var(--success); }

/* ── Responsive ── */
@media (max-width: 1199px) {
  .tw-hero__art { padding: 56px 28px; }
  .tw-flow { grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); }
  .tw-flow .tw-arrow:nth-of-type(2) { display: none; }
  .tw-slack { grid-column: 1 / -1; max-width: 520px; justify-self: center; width: 100%; }
  .tw-feat__art { height: 540px; }
  .tw-legend { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 991px) {
  .tw-hero { padding-top: 48px; }
  .tw-flow { grid-template-columns: 1fr; max-width: 560px; justify-items: center; }
  .tw-flow > .mock { width: 100%; }
  .tw-flow .tw-arrow, .tw-flow .tw-arrow:nth-of-type(2) { display: grid; rotate: 90deg; }
  .tw-slack { grid-column: auto; max-width: none; }
  .tw-feat, .tw-feat--flip { flex-direction: column; align-items: stretch; }
  .tw-feat__copy { flex: none; }
  .tw-feat__art { flex: none; }
  .tw-feat__copy { order: -1; }
  .tw-rows { gap: 90px; }
  .tw-incident__grid { grid-template-columns: 1fr; gap: 48px; }
  .tw-term__steps { grid-template-columns: 1fr; }
  .tw-term__step + .tw-term__step { border-left: 0; border-top: 1px solid var(--line-on-dark); }
  .tw-tools { grid-template-columns: 1fr 1fr; }
  .tw-cta { grid-template-columns: 1fr; padding: 64px 40px; gap: 40px; }
}
@media (max-width: 767px) {
  .tw-lanes { grid-template-columns: 1fr; padding: 16px; border-radius: var(--r); }
}
@media (max-width: 560px) {
  .tw-hero__art { padding: 24px 14px; border-radius: var(--r); }
  .tw-hero__head { margin-bottom: 36px; }
  .tw-hero__lead { font-size: 16px; }
  .tw-trace { padding: 16px; }
  .tw-slack { padding: 14px; }
  .tw-code { font-size: 11.5px; padding: 14px; column-gap: 10px; grid-template-columns: 14px 1fr; }
  .tw-frames li:not(.tw-frames__hit) { display: none; }
  .tw-frames li { flex-direction: column; gap: 0; }
  .tw-delta__nums { font-size: 30px; }
  .tw-lane { padding: 20px 16px; }
  .tw-term__step { padding: 28px 20px; }
  .tw-term__code { font-size: 12px; }
  .tw-feat__art { height: 460px; padding: 20px 14px; border-radius: var(--r); }
  .tw-anatomy__art { min-height: 0; padding: 24px 12px; border-radius: var(--r); }
  .tw-big { padding: 18px 16px; }
  .tw-big__title { font-size: 15px; }
  .tw-big__code { font-size: 11px; padding: 10px; white-space: pre-wrap; }
  .tw-big__n { width: 28px; }
  .tw-big__row { grid-template-columns: 24px 1fr; font-size: 13px; }
  .tw-big__k { display: none; }
  .tw-legend { grid-template-columns: 1fr; }
  .tw-tools { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tw-tool { min-height: 0; padding: 18px 16px; }
  .tw-tool .icon-well { margin-bottom: 8px; }
  .tw-tool__t { font-size: 16px; }
  .tw-tool__p { font-size: 14px; }
  .tw-cmd__text { font-size: 13px; }
  .tw-cta { padding: 48px 16px 16px; }
  .tw-cta__copy { padding-inline: 8px; }
  .tw-first { padding: 18px 16px; }
}
.tw-lang { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text); }
.tw-quote .quote-band__stats b { white-space: nowrap; }