/* Landing-only product story. Keep the terrain and shared app styles independent. */
@layer components {
  .landing-story { --story-card-shadow: 0 2px 6px rgb(27 26 32 / 3%), 0 10px 28px rgb(27 26 32 / 6%); padding-block: 0; background: #f8f7f4; }
  .story-container { position: relative; max-width: 1200px; margin-inline: auto; padding-inline: 32px; }
  .story-intro { padding-block: 104px 76px; }
  .story-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--ink-soft); font-family: var(--font-sans); font-size: var(--text-label); font-weight: 500; letter-spacing: normal; line-height: 1.6; }
  .story-intro h2, .landing-close h2 { max-width: 880px; font-size: clamp(42px, 5.5vw, 76px); line-height: 1.04; font-weight: 500; letter-spacing: -.055em; text-wrap: balance; }
  .story-intro-lead { max-width: 560px; margin-top: 28px; color: #615d6e; font-size: var(--text-section); line-height: 1.6; }
  .story-text-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding-block: 9px; color: #5142ad; font-size: var(--text-heading); font-weight: 500; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #bcb4d9; }
  .story-text-link span { font-size: inherit; text-decoration: none; }
  .story-text-link:hover { color: #201745; text-decoration-color: currentColor; }
  .story-text-link:focus-visible, .story-integration-docs a:focus-visible { outline: 2px solid #7362d4; outline-offset: 5px; }
  .landing-story .journey-list { padding: 0; list-style: none; }
  /* Handoffs occupy the existing whitespace; absolute grid placement keeps
     both the product columns and the section heights unchanged. */
  .landing-story .how-step { position: relative; }
  .story-connector {
    position: absolute;
    grid-column: 2 / 3;
    z-index: 1;
    inset-inline: 0;
    top: 100%;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    pointer-events: none;
  }
  .story-connector::before, .story-connector::after {
    content: "";
    width: 1px;
    flex: 1;
    max-height: 24px;
    background: #c7c2ce;
  }
  /* The handoff is a mark on the page, not a thing on it: no fill and no lift,
     the words at full ink so they hold their own against the raised figures
     either side. It carried a paper panel to sit the line behind, which was
     never needed — story-connectors.js stops the line at the label's top edge
     and picks it up again below. */
  .story-connector-label {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 6px 12px;
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
  }
  .story-connector-label .ui-icon { width: 16px; height: 16px; flex: none; color: var(--ink-faint); }
  .story-connector-direction { transform: rotate(90deg); }
  .story-connectors-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
  .story-connectors-lines path { fill: none; stroke: #c7c2ce; stroke-width: 1; }
  .story-connectors-ready .story-connector { z-index: 2; }
  .story-connectors-ready .story-connector::before,
  .story-connectors-ready .story-connector::after { visibility: hidden; }
  .landing-story #contacts-demo .story-connector { height: 144px; }
  .landing-story #signals .story-connector { top: calc(100% - 80px); height: 168px; }
  .landing-story .how-step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 64px; align-items: start; scroll-margin-top: 96px; }
  .landing-story .how-step > div { min-width: 0; }
  .landing-story .how-step-text { padding-top: 8px; }
  .landing-story .how-step h3 { max-width: 430px; font-size: clamp(29px, 3vw, 40px); line-height: 1.13; font-weight: 500; letter-spacing: -.04em; text-wrap: balance; }
  .story-description { margin-top: 20px; color: #696471; font-size: var(--text-heading); line-height: 1.7; }
  .story-example-note { margin-top: 28px; color: #77717e; font-size: var(--text-compact); line-height: 1.6; }
  .landing-story .journey-list > li + li { margin-top: 64px; }
  .landing-story #market-demo + #prospect-list-demo,
  .landing-story #prospect-list-demo + #contacts-demo { margin-top: 112px; }
  .landing-story #market-demo .story-connector,
  .landing-story #prospect-list-demo .story-connector { height: 112px; }
  .landing-story .how-step-caption { color: var(--ink-soft); font-size: var(--text-label); font-weight: 500; letter-spacing: normal; text-transform: none; }
  /* The picker is a row of `.ui-chip`, so nothing here may set `background` or
     `border`: the component's lit face and its hairline are the whole of what
     makes it a slab, and an outline drawn over them read as a second edge.
     What is this page's is the size — a thumb target, where the app's chip is
     sized for a filter bar — and the type it is set in. */
  .landing-story .demo-chip { min-height: 42px; font-size: var(--text-read); }
  .story-profile-wrap { display: grid; margin-top: 28px; }
  /* Overlap the profiles so the longest description reserves the row height. */
  .story-profile-wrap > .journey-switch { display: block; grid-area: 1 / 1; visibility: hidden; }
  .landing-story .how-step-figure { padding: 24px; border: 0; background: #fff; box-shadow: var(--story-card-shadow); }
  .landing-story .how-step-figure figcaption { margin-bottom: 12px; color: var(--ink-faint); font-weight: 400; }
  .landing-story .how-step-typed { max-width: 630px; color: var(--ink); font-size: var(--text-title); font-weight: 400; letter-spacing: -.025em; line-height: 1.45; text-wrap: pretty; }
  .landing-story .app-shot-market { overflow: hidden; border: 0; border-radius: 0; background: #fff; box-shadow: var(--story-card-shadow); }
  .story-table-toolbar { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: #f0edf5; color: #514765; font-size: var(--text-read); font-weight: 500; }
  .story-table-toolbar .ui-icon { width: 20px; height: 20px; flex: none; }
  .landing-story .app-shot-market { container-type: inline-size; }
  .story-prospect-list, .story-contact-list { margin: 0; padding: 0; list-style: none; }
  .story-prospect { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; padding: 22px 20px; }
  .story-prospect + .story-prospect:not(:nth-child(2)) { border-top: 1px solid #e3deeb; }
  .story-prospect-name { min-width: 0; color: var(--ink-soft); font-size: var(--text-heading); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
  .story-prospect-location { color: var(--ink-soft); font-size: var(--text-read); line-height: 1.5; overflow-wrap: anywhere; }
  .story-prospect-featured { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 20px 16px; padding: 24px 20px; border: 0; background: var(--selected); }
  .story-prospect-monogram { display: grid; place-items: center; align-self: start; width: 46px; height: 46px; background: var(--accent); color: var(--paper); font-size: var(--text-subheading); line-height: 1; }
  .story-prospect-identity { min-width: 0; }
  .story-prospect-featured .story-prospect-name { color: var(--ink); font-size: var(--text-title); font-weight: 500; line-height: 1.25; }
  .story-prospect-identity .story-prospect-location { margin-top: 4px; }
  .story-prospect-fit { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: var(--text-read); line-height: 1.5; }
  .story-prospect-fit .ui-icon, .story-prospect-chip .ui-icon { flex: none; width: 18px; height: 18px; }
  .story-prospect-chips { display: flex; flex-wrap: wrap; grid-column: 2 / -1; gap: 8px; min-width: 0; }
  /* `.ui-chip` in the markup, so the facts under a matched company are the
     same slab the app cuts. The colour is the one thing kept: these are the
     parts of the market definition this company met, and the tick and the
     accent are what say so. */
  .story-prospect-chip { gap: 8px; max-width: 100%; color: var(--accent); font-size: var(--text-caption); line-height: 1.5; pointer-events: none; }
  .story-prospect-chip > span { min-width: 0; overflow-wrap: anywhere; }
  @container (max-width: 440px) {
    .story-prospect { padding: 18px 16px; }
    .story-prospect-featured { grid-template-columns: 46px minmax(0, 1fr); gap: 14px 12px; }
    .story-prospect-fit { grid-column: 2; }
    .story-prospect-chips { grid-column: 1 / -1; }
    .story-prospect:not(.story-prospect-featured) { flex-direction: column; align-items: stretch; gap: 3px; }
  }
  .story-contacts-card { container-type: inline-size; background: #fff; box-shadow: var(--story-card-shadow); }
  .story-contact { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 20px 16px; padding: 22px 20px; }
  .story-contact + .story-contact { border-top: 1px solid #e3deeb; }
  /* Round, where the company marks on this page are square: the shape is what
     separates a person from the company they work for. */
  .story-contact-photo { width: 46px; height: 46px; align-self: start; border-radius: 50%; object-fit: cover; }
  .story-contact-name { color: var(--ink); font-size: var(--text-heading); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
  .story-contact-role { margin-top: 4px; color: var(--ink-soft); font-size: var(--text-read); line-height: 1.5; }
  .story-contact-reached { display: grid; gap: 2px; color: var(--ink-soft); font-size: var(--text-read); line-height: 1.5; text-align: right; overflow-wrap: anywhere; }
  /* The chip is the app's own slab, kept still: this is an illustration, so it
     takes no hover and no click. */
  .story-contact-reveal { max-width: 100%; color: var(--accent); font-size: var(--text-caption); line-height: 1.5; pointer-events: none; }
  @container (max-width: 440px) {
    .story-contact { grid-template-columns: 46px minmax(0, 1fr); gap: 14px 12px; padding: 18px 16px; }
    .story-contact-reached, .story-contact-reveal { grid-column: 2; justify-self: start; }
    .story-contact-reached { text-align: left; }
  }
  .landing-story #signals { align-items: center; margin-inline: calc((min(100vw, 1200px) - 100vw) / 2 - 32px); padding: 80px max(32px, calc((100vw - 1136px) / 2)); color: var(--ink); }
  .landing-story #signals .how-step-text { padding: 0; }
  .landing-story #signals .story-description { max-width: 390px; margin-top: 24px; }
  .story-signal-inbox { --signal-inset: 16px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); grid-template-rows: repeat(var(--signal-count), min-content) minmax(0, 1fr); gap: 0 12px; align-items: start; color-scheme: light; --ink: #222127; --fam-leadership: #28788a; --fam-growth: #298350; --fam-gtm: #b6531e; color: var(--ink); }
  .landing-story .journey-signals,
  .landing-story .journey-signal, .landing-story .journey-signal:first-child, .landing-story .journey-signal:last-child { display: contents; }
  .story-signal-summary { position: relative; display: grid; grid-column: 1; grid-row: var(--signal-row); grid-template-columns: minmax(0, 1fr) auto; align-items: start; align-self: stretch; gap: 10px; padding: 17px calc(var(--signal-inset) - 1px); background: #fff; border: 1px solid transparent; cursor: pointer; }
  /* One shadow around the whole summary list, rather than each inbox row. */
  .story-signal-inbox::before { content: ""; grid-column: 1; grid-row: 1 / span var(--signal-count); align-self: stretch; box-shadow: var(--story-card-shadow); pointer-events: none; }
  .story-signal-summary::after { content: ""; position: absolute; bottom: -1px; inset-inline: calc(var(--signal-inset) - 1px); height: 1px; background: #e3deeb; pointer-events: none; }
  .journey-signal:last-child .story-signal-summary::after,
  .journey-signal:has(+ .journey-signal input:checked) .story-signal-summary::after,
  .story-signal-summary:has(input:checked)::after { display: none; }
  .story-signal-summary:hover { background: #f6f3f9; }
  .story-signal-summary:has(input:checked) { background: var(--selected); }
  .story-signal-summary:has(input:focus-visible) { outline: 2px solid #7362d4; outline-offset: -3px; }
  .story-signal-summary-text { min-width: 0; }
  .story-signal-heading { display: flex; align-items: flex-start; gap: 12px; }
  .story-signal-heading > .ui-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }
  .story-signal-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
  .story-signal-time { color: #746b83; font-size: var(--text-compact); line-height: 1.95; white-space: nowrap; }
  /* Overlap messages so the tallest reserves space, including when hidden. */
  .story-signal-detail { visibility: hidden; min-width: 0; grid-column: 2; grid-row: 1 / span calc(var(--signal-count) + 1); align-self: stretch; padding: 24px; background: #fff; box-shadow: var(--story-card-shadow); }
  .journey-signal:has(input:checked) .story-signal-detail { visibility: visible; }
  .story-signal-message-header { margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid #e3deeb; }
  .story-signal-message-header h4 { font-size: var(--text-title); font-weight: 500; letter-spacing: -.025em; line-height: 1.25; overflow-wrap: anywhere; }
  .story-signal-message-header .story-signal-heading > .ui-icon { margin-top: 6px; }
  .story-signal-description { margin: 0; color: #62606e; font-size: var(--text-read); line-height: 1.55; }
  .story-signal-angle { margin-top: 18px; padding: 16px 18px; background: #f6f3f9; color: #222127; font-size: var(--text-detail); line-height: 1.5; }
  .story-signal-angle-label { margin-bottom: 7px; color: #514765; font-size: var(--text-compact); }
  .landing-story .journey-signal-title { min-width: 0; margin: 0; color: #222127; font-size: var(--text-read); line-height: 1.4; font-weight: 500; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .landing-story .journey-signal-company { display: block; margin-top: 5px; color: #62606e; font-size: var(--text-read); line-height: 1.4; font-weight: 400; overflow-wrap: anywhere; }
  .landing-story .journey-signal-location { display: none; margin-top: 5px; color: #62606e; font-size: var(--text-compact); line-height: 1.5; }
  .landing-story .story-signal-message-header .journey-signal-location { display: flex; }
  .story-signal-source { display: inline-flex; align-items: center; vertical-align: -.15em; color: #62606e; font-size: var(--text-compact); line-height: 1.5; text-decoration: none; }
  .story-signal-source .ui-icon, .landing-story .journey-signal-location .ui-icon { width: 14px; height: 14px; flex: none; color: inherit; }
  .story-signal-source:hover { color: #514765; text-decoration: underline; text-underline-offset: 3px; }
  .story-signal-source:focus-visible { outline: 2px solid #7362d4; outline-offset: 4px; }
  .landing-story #integrations { color-scheme: light; margin-top: 0; padding-block: 88px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr); align-items: center; row-gap: 32px; color: #222127; }
  .landing-story #integrations .story-text-link { margin-top: 22px; }
  .story-crm-example, .story-contacts-example { min-width: 0; margin: 0; }
  .story-crm-preview { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; background: #fff; box-shadow: var(--story-card-shadow); }
  .story-crm-picker { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; margin: 0; padding: 10px; border: 0; border-bottom: 1px solid #e3deeb; }
  .story-crm-picker label { position: relative; cursor: pointer; }
  .story-crm-picker label > span { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; color: #706976; font-size: var(--text-read); }
  .story-crm-picker .ui-icon { width: 18px; height: 18px; flex: none; }
  .story-crm-picker input:checked + span { background: #f0edf5; color: #5142ad; }
  .story-crm-picker label:hover > span { color: #5142ad; }
  .story-crm-picker input:focus-visible + span { outline: 2px solid #7362d4; outline-offset: 2px; }
  .story-crm-record { padding: 28px; }
  .story-crm-record, .story-crm-request { grid-column: 1; grid-row: 2; }
  .story-crm-request { visibility: hidden; align-self: center; padding: 28px; }
  .story-crm-request h4 { font-size: 26px; font-weight: 500; letter-spacing: -.025em; line-height: 1.25; text-wrap: balance; }
  .story-crm-request > p { margin-top: 16px; color: #706976; font-size: var(--text-detail); line-height: 1.6; }
  .story-crm-preview:has(input[value="other"]:checked) .story-crm-record,
  .story-crm-example:has(input[value="other"]:checked) figcaption { visibility: hidden; }
  .story-crm-preview:has(input[value="other"]:checked) .story-crm-request { visibility: visible; }
  .story-crm-record-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-bottom: 22px; color: #706976; font-size: var(--text-compact); }
  .story-crm-synced { color: #39725a; }
  .story-crm-attio, .story-crm-pipedrive { display: none; }
  .story-crm-preview:has(input[value="attio"]:checked) .story-crm-hubspot,
  .story-crm-preview:has(input[value="pipedrive"]:checked) .story-crm-hubspot { display: none; }
  .story-crm-preview:has(input[value="attio"]:checked) .story-crm-attio,
  .story-crm-preview:has(input[value="pipedrive"]:checked) .story-crm-pipedrive { display: inline; }
  .story-crm-company { display: flex; align-items: center; gap: 14px; }
  .story-crm-monogram { display: grid; place-items: center; width: 46px; height: 46px; flex: none; background: #f0edf5; color: #5142ad; font-size: var(--text-intro); }
  .story-crm-company h4 { font-size: 25px; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; }
  .story-crm-company p { margin-top: 4px; color: #706976; font-size: var(--text-caption); }
  .story-crm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-block: 24px 20px; font-size: var(--text-read); }
  .story-crm-contact { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 6px 12px; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid #e3deeb; font-size: var(--text-read); }
  .story-crm-contact-label { grid-column: 1 / -1; color: #706976; font-size: var(--text-compact); }
  /* Smaller than the 46px company mark above it: the record is the company's,
     and the person is one field on it. */
  .story-crm-contact-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .story-crm-contact-name { font-weight: 500; overflow-wrap: anywhere; }
  .story-crm-contact-role { color: #706976; font-weight: 400; }
  .story-crm-contact-role::before { content: " · "; }
  .story-crm-contact-reached { color: #706976; overflow-wrap: anywhere; }
  .story-crm-fields dt { margin-bottom: 5px; color: #706976; font-size: var(--text-compact); }
  .story-crm-fields dd { margin: 0; overflow-wrap: anywhere; }
  .story-crm-note { padding: 18px; background: #f0edf5; font-size: var(--text-detail); line-height: 1.5; }
  .story-crm-note .story-crm-note-label { margin-bottom: 8px; color: #5142ad; font-size: var(--text-compact); }
  .story-crm-task { display: flex; gap: 11px; align-items: flex-start; margin-top: 22px; font-size: var(--text-read); line-height: 1.5; }
  .story-crm-task-box { width: 15px; height: 15px; flex: none; margin-top: 3px; border: 1px solid #9b8eba; }
  .story-crm-task-caption { margin-top: 4px; color: #706976; font-size: var(--text-compact); }
  .story-crm-example figcaption, .story-contacts-example figcaption { margin-top: 10px; text-align: right; color: #706976; font-size: var(--text-compact); }
  .story-integration-stack { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid #ddd8e3; }
  .story-integration-stack-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: var(--text-read); }
  .story-integration-stack-heading > p { color: #706976; }
  .story-integration-docs a { color: #5142ad; text-decoration: underline; text-underline-offset: 3px; }
  .story-integration-docs a:hover { color: #201745; }
  .landing-close { padding-block: 80px; background: #e9e1f3; }
  .story-close-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 100px; align-items: center; }
  .landing-close h2 { font-size: clamp(40px, 4.4vw, 64px); }
  .story-close-lead { max-width: 370px; margin-top: 24px; color: #665a77; font-size: var(--text-intro); line-height: 1.6; }
  /* The section's one key is `.ui-button-primary`: the accent slab, at the
     size this band reads at. It used to be a plum rectangle of its own, which
     kept the button component's lit top edge — a white line drawn across a
     dark fill that no other key on the site has. */
  .story-primary { justify-content: space-between; gap: 40px; margin-top: 28px; font-size: var(--text-heading); }
  .story-partner { padding: 32px; border-radius: 0; background: #f5f0fa; }
  .story-partner h3 { font-size: var(--text-title); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
  .story-partner > p { margin-top: 16px; font-size: var(--text-heading); line-height: 1.65; }
  .story-partner .story-partner-note { font-size: var(--text-read); }
  .story-partner .story-text-link { margin-top: 14px; }
  .landing-faq-section { padding-block: 72px; background: #f8f7f4; }
  .landing-faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 88px; }
  .landing-faq-grid > h2 { font-size: var(--text-page); line-height: 1.15; letter-spacing: -.025em; font-weight: 500; }
  .landing-faq details { border-bottom: 1px solid #dfd9e6; }
  .landing-faq summary { cursor: pointer; padding: 20px 0; font-size: var(--text-heading); font-weight: 500; line-height: 1.5; }
  .landing-faq details:first-child summary { padding-top: 0; }
  .landing-faq details > p { padding-bottom: 20px; color: #696471; line-height: 1.7; font-size: var(--text-detail); }
  .landing-faq a { color: #5142ad; text-decoration: underline; text-underline-offset: 3px; }
  .landing-faq a:hover { color: #201745; }
  .landing-faq a:focus-visible, .landing-faq summary:focus-visible { outline: 2px solid #7362d4; outline-offset: 5px; }
  @media (max-width: 1023px) {
    .landing-faq-grid { gap: 40px; }
    .landing-story #prospect-list-demo .story-connector,
    .landing-story #contacts-demo .story-connector,
    .landing-story #signals .story-connector { grid-column: 1 / -1; }
    .landing-story .how-step { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 32px; }
    .landing-story #signals { grid-template-columns: minmax(0, 1fr); }
    .story-close-grid { gap: 40px; }
  }
  @media (max-width: 767px) {
    .landing-faq-section { padding-block: 48px; }
    .landing-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .story-connector { grid-column: 1; height: 48px; }
    .landing-story #contacts-demo .story-connector { height: 104px; }
    .landing-story #signals .story-connector { top: calc(100% - 56px); height: 112px; }
    .story-container { padding-inline: 24px; }
    .story-intro { padding-block: 64px 48px; }
    .story-intro h2 { font-size: clamp(40px, 8vw, 56px); }
    .story-intro-lead { margin-top: 24px; }
    .story-intro-lead { font-size: var(--text-intro); }
    .landing-story .how-step { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .story-eyebrow { margin-bottom: 16px; }
    .story-description { margin-top: 14px; }
    .landing-story .how-step-typed { font-size: var(--text-title); }
    .landing-story .journey-list > li + li { margin-top: 48px; }
    .landing-story #market-demo + #prospect-list-demo,
    .landing-story #prospect-list-demo + #contacts-demo { margin-top: 96px; }
    .landing-story #market-demo .story-connector,
    .landing-story #prospect-list-demo .story-connector { height: 96px; }
    .story-table-toolbar { padding: 12px 16px; }
    .landing-story #signals { grid-template-columns: minmax(0, 1fr); margin-inline: -24px; padding: 56px 24px; }
    .landing-story #signals .story-description { margin-top: 20px; }
    .story-signal-inbox { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(var(--signal-count), min-content) auto; gap: 0; }
    .story-signal-summary { padding: 15px calc(var(--signal-inset) - 1px); gap: 12px; }
    .story-signal-detail { grid-column: 1; grid-row: calc(var(--signal-count) + 1); margin-top: 12px; padding: 24px 20px; }
    .story-signal-message-header h4 { font-size: 25px; }
    .landing-story #integrations { grid-template-columns: minmax(0, 1fr); margin-top: 0; padding-block: 56px; }
    .story-crm-record, .story-crm-request { padding: 20px; }
    .story-crm-picker label > span { gap: 6px; padding-inline: 10px; }
    .story-close-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .landing-close { padding-block: 56px; }
    .story-partner { padding: 28px; }
    .story-example-note { margin-top: 14px; }
  }
}