/* Shared styles for the dark Memory pages (home, customer stories, articles). Page-only rules
   stay in each page's own <style>. Edit here, not in the pages. */
    :root {
      --paper: #f7f9fb;
      --paper-deep: #e7edf3;
      --ink: #172938;
      --body: #41515d;
      --muted: #667783;
      --line: #d7e0e8;
      --card: #ffffff;
      --green: #2f8b78;
      --green-dark: #1f6b5b;
      --green-soft: #e2f1ed;
      --amber: #6167a6;
      --amber-soft: #e8eaf6;
      --serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
      --mono: "IBM Plex Mono", monospace;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--paper);
      color: var(--body);
      font: 16px/1.6 var(--sans);
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
    .skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 9px 13px; background: var(--ink); color: white; transform: translateY(-150%); }
    .skip-link:focus { transform: translateY(0); }

    .wrap { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
    .eyebrow {
      margin: 0 0 14px;
      color: var(--green);
      font: 500 12px/1.2 var(--mono);
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2 { color: var(--ink); font-family: var(--serif); font-weight: 600; }
    h1 { margin-bottom: 24px; font-size: 48px; line-height: .98; letter-spacing: -.055em; }
    /* Large Inter glyphs carry ~0.04em of left side bearing; pull headings back so their ink lines up with the eyebrow and body text. */
    h1, h2 { margin-inline-start: -.04em; }
    h2 { margin-bottom: 18px; font-size: 34px; line-height: 1.04; letter-spacing: -.04em; }
    h3 { color: var(--ink); font-size: 19px; line-height: 1.3; }
    .lead { color: var(--body); font-size: clamp(18px, 2vw, 22px); line-height: 1.55; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      border-bottom: 1px solid rgba(215, 224, 232, .85);
      background: rgba(247, 249, 251, .9);
      backdrop-filter: blur(14px);
    }
    .nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; text-decoration: none; letter-spacing: -.02em; }
    .brand-mark { width: 21px; height: 21px; border: 1px solid var(--green); border-radius: 50%; position: relative; }
    .brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--green); border-radius: 50%; }
    .brand-mark::before { width: 5px; height: 5px; top: 3px; left: 3px; box-shadow: 9px 3px 0 var(--green); }
    .brand-mark::after { width: 5px; height: 5px; bottom: 3px; left: 8px; }
    .nav-links { display: flex; align-items: center; gap: 26px; }
    .nav-links a { color: var(--body); font-size: 14px; text-decoration: none; }
    .nav-links a:hover { color: var(--green); }
    /* The other product is not a section of this page. It goes last, behind a divider, so the eye
       reads the page's own links and then a door to somewhere else. */
    .nav-product { position: relative; padding-left: 27px; color: var(--ink) !important; font-weight: 500; }
    .nav-product::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 17px;
      transform: translateY(-50%); background: var(--line); }
    .mobile-menu-links .nav-product { margin-top: 4px; padding-left: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
    .mobile-menu-links .nav-product::before { content: none; }
    .nav-cta { padding: 9px 15px; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink) !important; font-weight: 500; }
    .mobile-menu { display: none; position: relative; }
    .mobile-menu summary { padding: 8px 11px; border: 1px solid var(--ink); border-radius: 3px; font-size: 14px; }
    .mobile-menu summary::after { margin-left: 9px; font-size: 16px; }
    .mobile-menu-links { position: absolute; top: calc(100% + 8px); right: 0; width: 210px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); box-shadow: 0 14px 40px rgba(23, 41, 56, .16); }
    .mobile-menu-links a { display: block; padding: 10px 12px; color: var(--ink); text-decoration: none; }
    .mobile-menu-links a:hover { background: var(--green-soft); }
    .mobile-menu-links a.mobile-cta { margin: 0 0 6px; background: var(--green); color: white; font-weight: 600; text-align: center; border-radius: 3px; }
    .mobile-menu-links a.mobile-cta:hover { background: var(--green-dark); }
    /* five section links plus the button don't fit on one line below ~1000px; use the menu there */
    @media (max-width: 1000px) { .nav-links { display: none; } .mobile-menu { display: block; } }

    .hero { position: relative; overflow: hidden; padding: 96px 0 76px; border-bottom: 1px solid var(--line); }
    /* the brand mark, lifted from the logo, as a watermark behind the headline.
       painted through a mask so it takes its colour from the theme token. */
    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      width: 470px;
      height: 412px;
      right: -64px;
      top: 4px;
      background: var(--green);
      opacity: .085;
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2098%22%3E%3Cpath%20d%3D%22M55.2878%200L0%2097.2632H19.7137C28.7048%2097.2632%2036.9886%2092.2817%2041.3297%2084.2633L71.4896%2028.5649L55.2878%200Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M68.8557%2062.0286L88.6589%2097.2632H94.9347L89.7157%2087.9787C88.4312%2085.6949%2088.3581%2082.9145%2089.5206%2080.5644L91.9187%2075.6988L104.178%2097.2549H110.446L107.056%2091.2887L71.4246%2028.656L68.3598%2034.316L86.6672%2066.4971C87.9028%2068.6734%2087.9841%2071.3296%2086.8704%2073.5721L84.3991%2078.5784L64.0188%2042.3261L60.9459%2048.0027L63.6529%2052.827C64.8642%2054.9784%2064.9292%2057.6016%2063.8399%2059.811L60.9052%2065.7606C59.1737%2069.2775%2059.2793%2073.4397%2061.1979%2076.849L72.6603%2097.2549H78.9036L67.3518%2076.7249C65.4333%2073.3073%2065.3195%2069.1451%2067.051%2065.6282L68.8313%2062.0204L68.8557%2062.0286Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
      mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20112%2098%22%3E%3Cpath%20d%3D%22M55.2878%200L0%2097.2632H19.7137C28.7048%2097.2632%2036.9886%2092.2817%2041.3297%2084.2633L71.4896%2028.5649L55.2878%200Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M68.8557%2062.0286L88.6589%2097.2632H94.9347L89.7157%2087.9787C88.4312%2085.6949%2088.3581%2082.9145%2089.5206%2080.5644L91.9187%2075.6988L104.178%2097.2549H110.446L107.056%2091.2887L71.4246%2028.656L68.3598%2034.316L86.6672%2066.4971C87.9028%2068.6734%2087.9841%2071.3296%2086.8704%2073.5721L84.3991%2078.5784L64.0188%2042.3261L60.9459%2048.0027L63.6529%2052.827C64.8642%2054.9784%2064.9292%2057.6016%2063.8399%2059.811L60.9052%2065.7606C59.1737%2069.2775%2059.2793%2073.4397%2061.1979%2076.849L72.6603%2097.2549H78.9036L67.3518%2076.7249C65.4333%2073.3073%2065.3195%2069.1451%2067.051%2065.6282L68.8313%2062.0204L68.8557%2062.0286Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
    }
    .hero .lead { margin-bottom: 32px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    /* ── One rule for line breaks, instead of a cap per section ────────────────────────────────
       Headings were capped narrower than the column they sit in — the memory headline at 820px
       inside 1180 broke over four lines with 360px spare beside it — and every section had its own
       number. Headings now run to their container and balance their lines; body text keeps a
       measure, because a 1180px line is genuinely hard to read, but a generous one (about 75
       characters) so a sentence that fits on one line gets one line. */
    h1, h2, h3, .price, .definition p, blockquote { text-wrap: balance; }
    p, li, figcaption { text-wrap: pretty; }
    h1, h2 { max-width: none; }
    .lead, .section-intro p:not(.eyebrow), .closing p, .definition p, .security p { max-width: 820px; }

    /* Type steps at breakpoints instead of scaling with the viewport. A clamp on vw means every
       window width renders a different size, so nothing ever settles and resizing looks like the
       page is breathing. Three sizes per heading, and between the steps the layout is fixed. */
    @media (min-width: 760px) { h1 { font-size: 72px; } h2 { font-size: 46px; } }
    @media (min-width: 1200px) { h1 { font-size: 88px; } h2 { font-size: 58px; } }
    .button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--green); border-radius: 3px; background: var(--green); color: white; font-weight: 500; text-decoration: none; transition: transform .18s ease, background .18s ease; }
    .button:hover { transform: translateY(-2px); background: var(--green-dark); }
    .button.secondary { background: transparent; color: var(--green); }
    .button.secondary:hover { background: var(--green-soft); }
    .compatibility { margin: 21px 0 0; color: var(--muted); font: 13px var(--mono); }
    .compatibility a { color: var(--green); text-decoration: none; }
    .compatibility a:hover, .compatibility a:focus-visible { text-decoration: underline; }
    /* The number and its caption start together. Sharing a baseline across 52px and 14.5px hangs the
       caption off the bottom of the number, and a forced break before "counting" left it stranded on
       a line of its own; the badge now sits above the caption, which is where a live signal belongs. */
    .counter { display: flex; align-items: start; gap: 16px; margin: 34px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
    .counter span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 5px; }
    .counter em { font-style: normal; }
    .counter b { color: var(--ink); font: 500 clamp(34px, 4.4vw, 52px)/1 var(--serif); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
    .counter span { color: var(--muted); font-size: 14.5px; line-height: 1.4; max-width: 60ch; }
    .counter i { display: inline-flex; align-items: center; gap: 6px; font-style: normal; color: var(--green); font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
    .counter i::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

    .definition { padding: 24px 0; background: var(--ink); color: #ccdbe4; }
    .definition .wrap { display: grid; grid-template-columns: 190px 1fr; align-items: baseline; gap: 40px; }
    .definition strong { color: white; font: 500 13px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .definition p { margin: 0; font-family: var(--serif); font-size: 20px; }

    .section { padding: 80px 0; border-bottom: 1px solid var(--line); }
    /* The block, not its heading: the heading runs to the container (see the line-break rules
       above) and only the paragraph under it keeps a measure. */
    .section-intro { margin-bottom: 50px; }
    .product-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); background: var(--card); }
    .product { position: relative; min-height: 430px; padding: 42px 42px 36px; overflow: hidden; }
    .product + .product { border-left: 1px solid var(--line); }
    .product-number { position: absolute; top: 26px; right: 30px; color: var(--paper-deep); font: 500 90px/.8 var(--serif); }
    .product h3 { position: relative; margin: 58px 0 14px; font: 500 35px/1.1 var(--serif); letter-spacing: -.03em; }
    .product p { position: relative; max-width: 47ch; }
    .text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--green); font-weight: 600; text-decoration: none; }
    .text-link:hover { gap: 13px; }
    .fit { position: relative; display: grid; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
    .fit-k { display: block; color: var(--green); font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .fit-k.no { color: #a2556b; }

    .delivery-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
    /* With its demo panel moved up the page, this section is a full-width block: the intro keeps a
       measure, the two options run across the row underneath it. */
    /* The intro's measure is for its sentences, not for the cards underneath it, which belong to the
       section and should use the whole row. */
    .delivery-intro > p { max-width: 820px; }
    #memory .delivery-options { gap: 16px; margin-top: 32px; }
    #memory .delivery-option { padding: 24px; }
    .delivery-option { padding: 18px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
    .delivery-option strong { display: block; margin-bottom: 5px; color: var(--ink); font-family: var(--serif); font-size: 18px; }
    .delivery-option span { color: var(--muted); font-size: 13px; }
    .delivery-option.alt { background: transparent; border-style: dashed; }

    .demo-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
    .demo-copy { position: sticky; top: 110px; }
    .conversation { border: 1px solid var(--line); border-radius: 6px; background: var(--card); box-shadow: 0 18px 60px rgba(23, 41, 56, .08); overflow: hidden; }
    .conversation-head { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #eef3f7; color: var(--muted); font: 12px var(--mono); }
    .message { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 25px 22px; border-bottom: 1px solid #e6edf3; }
    .message:last-child { border-bottom: 0; }
    .speaker { color: var(--muted); font: 500 12px var(--mono); text-transform: uppercase; }
    .message p { margin: 0; color: var(--ink); line-height: 1.55; }
    .message.agent { background: #f3f8f7; }
    .message.agent .speaker { color: var(--green); }
    .citation { border-bottom: 1px solid var(--green); color: var(--green); font-family: var(--mono); font-size: .82em; }
    .time-jump { display: flex; align-items: center; gap: 14px; padding: 16px 22px; color: var(--muted); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
    .time-jump::before, .time-jump::after { content: ""; height: 1px; flex: 1; background: var(--line); }
    .evidence-note { margin: 24px 0 0; padding-left: 18px; border-left: 2px solid var(--amber); color: var(--muted); font-size: 14px; }
    .demo-label { display: inline-block; margin-bottom: 10px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

    .analytics { background: var(--green-dark); color: #c2d3dd; border-bottom: 0; }
    .analytics h2, .analytics h3 { color: white; }
    .analytics .eyebrow { color: #8ed2c2; }
    .analytics .lead { color: #c2d3dd; }
    .analytics .analytics-link { color: #93d3c3; }
    .report { padding: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; background: rgba(255,255,255,.06); }
    .report-inner { padding: 30px; border-radius: 3px; background: #f4f8fb; color: var(--body); }
    .report-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 38px; color: var(--muted); font: 11px var(--mono); text-transform: uppercase; }
    .report h3 { color: var(--ink); font: 500 29px/1.2 var(--serif); }
    .metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }
    .metric { padding: 16px; border: 1px solid var(--line); background: white; }
    .metric strong { display: block; color: var(--ink); font: 500 27px var(--serif); }
    .metric span { color: var(--muted); font-size: 12px; }
    .recommendation { padding: 18px; border-left: 3px solid var(--amber); background: var(--amber-soft); color: var(--ink); }

    .system-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 80px; align-items: center; }
    .tree { position: relative; min-height: 500px; }
    .node { position: absolute; width: 190px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--ink); font-size: 13px; box-shadow: 0 8px 30px rgba(23, 41, 56, .06); }
    .node::before { display: block; margin-bottom: 5px; color: var(--green); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .node.root { top: 0; left: calc(50% - 95px); border-color: var(--green); }
    .node.root::before { content: "Mission"; }
    .node.branch-a { top: 150px; left: 0; }
    .node.branch-a::before, .node.branch-b::before { content: "Decision"; }
    .node.branch-b { top: 150px; right: 0; }
    .node.leaf-a { top: 320px; left: 0; }
    .node.leaf-b { top: 320px; right: 0; opacity: .48; text-decoration: line-through; }
    .node.leaf-a::before { content: "Current assertion"; }
    .node.leaf-b::before { content: "Superseded"; }
    .connector { position: absolute; height: 1px; background: var(--line); transform-origin: left center; }
    .c1 { width: 190px; top: 111px; left: 50%; transform: rotate(145deg); }
    .c2 { width: 190px; top: 111px; left: 50%; transform: rotate(35deg); }
    .c3 { width: 130px; top: 268px; left: 94px; transform: rotate(90deg); }
    .c4 { width: 130px; top: 268px; right: 94px; transform: rotate(90deg); }
    .steps { display: grid; gap: 25px; margin-top: 38px; }
    @media (min-width: 900px) {
      .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; margin-top: 44px; }
      .steps .step { grid-template-columns: 1fr; gap: 6px; }   /* beats the base rule below it */
      .steps .step-num { display: block; margin-bottom: 6px; }
    }
    .step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
    .step-num { color: var(--green); font: 500 12px var(--mono); }
    .step h3 { margin: -4px 0 5px; }
    .step p { margin: 0; color: var(--muted); }

    .evidence-section { background: #e9eff5; }
    .bench-line { padding: 12px 16px; border-left: 2px solid var(--green); background: var(--green-soft); color: var(--ink); font-size: 15px; }
    .bench-line a { color: var(--green-dark); font-weight: 600; white-space: nowrap; }
    /* Three items, two rows: the eyebrow sits alone on the first row, then the heading and its
       strapline share the second and align on their first baselines. Aligned as one row of two, the
       strapline lines up with the EYEBROW instead — which is what put it above the heading. */
    /* Tops, not baselines. Sharing a baseline across 58px and 22px drops the small text 35px, so it
       lands halfway down the heading's first line and reads as floating. Aligning the line boxes puts
       the two first lines level; the nudge is the difference in half-leading between the two sizes,
       so their capitals — not their line boxes — start on the same pixel. */
    .evidence-heading { display: grid; grid-template-columns: 1fr .9fr; column-gap: 70px; row-gap: 0;
      align-items: start; margin-bottom: 46px; }
    .evidence-heading .lead { padding-top: 4px; }
    .evidence-heading .eyebrow { grid-column: 1; grid-row: 1; }
    .evidence-heading h2 { grid-column: 1; grid-row: 2; }
    .evidence-heading .lead { grid-column: 2; grid-row: 2; }
    .evidence-heading p { margin: 0; }
    .evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .curve { margin: 0 0 14px; padding: 30px 32px 24px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }
    .curve-head { display: grid; grid-template-columns: 1fr .85fr; gap: 44px; align-items: start; margin-bottom: 10px; }
    .curve-head strong { display: block; margin-top: 12px; color: var(--ink); font: 500 27px/1.15 var(--serif); letter-spacing: -.025em; }
    .curve-head p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
    .curve-plot { width: 100%; height: auto; overflow: visible; }
    .curve-legend { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
    .curve-legend li { display: flex; align-items: center; gap: 8px; }
    .episode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }
    .episode { padding: 24px 22px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
    .episode-k { display: block; margin-bottom: 15px; color: var(--green); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .episode ol { margin: 0; padding: 0; list-style: none; counter-reset: beat; }
    .episode li { position: relative; margin: 0 0 15px; padding-left: 27px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
    .episode li:last-child { margin-bottom: 0; }
    .episode li::before { counter-increment: beat; content: counter(beat); position: absolute; top: 1px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft); color: var(--green-dark); font: 500 10px/18px var(--mono); text-align: center; }
    .episode b { display: block; margin-bottom: 3px; color: var(--ink); font-weight: 500; }
    .episode li.reuse::before { background: var(--amber-soft); color: #4a5092; }
    .curve-key { width: 22px; height: 3px; border-radius: 2px; }
    .evidence-card { min-height: 240px; padding: 28px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }
    .evidence-value { display: block; margin: 15px 0 17px; color: var(--green-dark); font: 500 52px/.95 var(--serif); letter-spacing: -.04em; }
    .evidence-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .evidence-source { display: block; color: var(--green); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .methodology { display: grid; grid-template-columns: 180px 1fr; gap: 42px; margin-top: 18px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 5px; background: rgba(255,255,255,.45); }
    .methodology strong { color: var(--ink); font-size: 14px; }
    .methodology p { margin: 0; color: var(--muted); font-size: 13px; }

    .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); background: var(--card); }
    .trust-item { min-height: 210px; padding: 30px; }
    .trust-item:nth-child(odd) { border-right: 1px solid var(--line); }
    .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .trust-item h3 { margin: 17px 0 9px; font: 500 23px var(--serif); }
    .trust-item p { margin: 0; color: var(--muted); font-size: 14px; }
    .trust-tag { color: var(--green); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

    .pricing-products { display: grid; grid-template-columns: 1fr; gap: 18px; }
    .pricing-product { display: flex; min-width: 0; flex-direction: column; }
    .pricing-product-head { margin-bottom: 16px; }
    .pricing-product-head strong { display: block; color: var(--ink); font: 500 25px var(--serif); }
    .pricing-product-head span { color: var(--muted); font-size: 13px; }
    /* Cards size to what they hold. Stretched to a common height, the shorter one carries its empty
       space in the middle, under the button; left alone it is simply a shorter card. */
    .pricing-grid { display: grid; flex: 1; gap: 14px; align-items: start; }
    .memory-pricing .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .analytics-pricing .pricing-grid { grid-template-columns: 1fr; }
    .price-card { display: flex; min-height: 390px; flex-direction: column; padding: 30px; border: 1px solid var(--line); border-radius: 5px; background: var(--card); }
    .price-card.featured { border-color: var(--green); box-shadow: inset 0 4px 0 var(--green); }
    .price-label { color: var(--green); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
    .price-card h3 { margin: 22px 0 8px; font: 500 26px var(--serif); }
    .price { margin-bottom: 22px; color: var(--ink); font: 500 31px var(--serif); }
    .price small { color: var(--muted); font: 13px var(--sans); }
    .team-price { margin: -8px 0 22px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--body); font-size: 14px; }
    .team-price strong { display: block; margin-bottom: 3px; color: var(--ink); font-family: var(--serif); }
    .price-card ul { margin: 0 0 30px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
    .tiers { margin: -10px 0 18px; padding: 0; list-style: none; }
    .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 28px; align-items: start; }
    #price .split, .wrap.split { margin-top: 0; align-items: center; }
    .split-head { margin: 0 0 14px; color: var(--ink); font: 600 19px/1.3 var(--serif); }
    .split p { margin: 0 0 14px; }
    .stats { display: grid; gap: 14px; }
    .stat { padding: 20px 22px; border: 1px solid var(--line); border-radius: 8px; }
    .stat b { display: block; color: var(--ink); font: 600 40px/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
    .stat p { margin: 10px 0 0; color: var(--body); }
    .stat a { color: var(--green); white-space: nowrap; }
    .stat-big b { font-size: 72px; color: var(--green); }
    .stat.claim strong { display: block; color: var(--ink); font: 600 22px/1.3 var(--serif); letter-spacing: -.01em; }
    .stat.claim p { margin-top: 8px; font-size: 15px; }
    .story { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
    .story-label { margin: 0 0 8px; color: var(--green); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
    .story-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
    .story-steps li { padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; }
    .story-steps li::before { content: none; }
    .story-steps b { display: block; color: var(--green); font: 600 20px var(--serif); margin-bottom: 6px; }
    .story-steps span { color: var(--body); font-size: 15px; }
    .story-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; }
    @media (max-width: 900px) { .story-steps { grid-template-columns: minmax(0, 1fr); } }
    .fit-list { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
    .fit-list li { color: var(--body); font-size: 18px; line-height: 1.5; }
    .fit-list.not li { color: var(--muted); }
    .fit-list a { color: var(--green); }
    @media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

    /* Customers, how it works, trust (home page). */
    .proof { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 36px 48px; align-items: center; }
    .proof-logo { display: block; width: 200px; max-width: 100%; height: auto; filter: brightness(0) invert(1); }
    .proof-quote { margin: 0; padding-left: 28px; border-left: 3px solid var(--green); }
    .proof-quote blockquote { margin: 0; }
    .proof-quote p { max-width: 760px; margin: 0 0 12px; color: var(--ink); font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.6; text-wrap: pretty; }
    .proof-quote figcaption { color: var(--muted); font-size: 14px; }
    .proof-quote figcaption strong { color: var(--ink); font-weight: 600; }
    .how-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
    .how-item { padding: 22px 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
    .how-item h3 { margin: 0 0 8px; font-size: 19px; }
    .how-item p { margin: 0; color: var(--body); font-size: 15.5px; line-height: 1.55; }
    #how .bench-line { margin-top: 26px; margin-bottom: 0; }
    .trust-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
    .trust-list li { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 4px 40px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line); }
    .trust-list b { color: var(--ink); font-weight: 600; }
    .trust-list span { color: var(--body); font-size: 15.5px; }
    .trust-list a { color: var(--green); }
    .agent-facts { display: grid; gap: 14px; margin: 0 0 26px; }
    .agent-fact a { color: var(--green); }
    .closing-actions { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
    .closing-actions .text-link { margin-top: 0; }
    .agent-fact { padding: 22px 24px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
    .agent-fact b { display: block; color: var(--ink); font: 600 22px var(--serif); letter-spacing: -.01em; }
    .agent-fact p { margin: 8px 0 0; color: var(--body); font-size: 15.5px; line-height: 1.55; }
    .flow { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1.25fr) 36px minmax(0, 1fr); align-items: center; gap: 10px; margin: 0; }
    .flow-col { display: grid; gap: 10px; grid-row: 2; }
    .flow-space, .flow-arrow { grid-row: 2; }
    .flow-head { display: block; grid-row: 1; align-self: end; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .flow-session { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
    .flow-session b { display: block; color: var(--ink); font-size: 15px; font-weight: 600; }
    .flow-session span { color: var(--body); font-size: 13.5px; }
    .flow-next { border-color: var(--green); }
    .flow-space { padding: 18px 20px; border: 1px solid var(--green); border-radius: 10px; background: var(--green-soft); }
    .flow-space ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .flow-space li { color: var(--ink); font-size: 14.5px; line-height: 1.45; }
    .flow-space i { display: inline-block; min-width: 62px; margin-right: 8px; color: var(--green-dark); font: 500 11px var(--mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
    .flow-arrow { height: 2px; background: var(--green); position: relative; }
    .flow-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--green); border-right: 0; }
    .flow figcaption { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 0; }
    /* Plugin card first (narrower), agent second; both cards full height with their buttons aligned. */
    #pricing .memory-pricing .pricing-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr); align-items: stretch; }
    #pricing .memory-pricing .price-card .button { margin-top: auto; }
    .plugin-tools { display: grid; margin: 0 0 30px; }
    .plugin-tools > span { margin-bottom: 6px; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .plugin-tools a { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; text-decoration: none; }
    .plugin-tools a:last-child { border-bottom: 1px solid var(--line); }
    .plugin-tools a span { color: var(--green); }
    .plugin-tools a:hover, .plugin-tools a:focus-visible { color: var(--green); }
    @media (max-width: 900px) {
      .flow { grid-template-columns: minmax(0, 1fr); }
      .flow > * { grid-row: auto !important; grid-column: 1 !important; }
      .flow > .flow-head:not(:first-child) { margin-top: 4px; }
      #pricing .memory-pricing .pricing-grid { grid-template-columns: minmax(0, 1fr); }
      .flow-arrow { width: 2px; height: 22px; justify-self: center; }
      .flow-arrow::after { right: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid var(--green); border-bottom: 0; }
    }
    @media (max-width: 900px) {
      .proof { grid-template-columns: minmax(0, 1fr); gap: 18px; }
      .proof-logo { width: 170px; }
      .proof-quote { padding-left: 18px; }
      .proof-quote + .proof-logo { margin-top: 18px; }
      .how-grid, .trust-list li { grid-template-columns: minmax(0, 1fr); }
    }
    .qa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
    .qa { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; }
    .qa-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 32px; row-gap: 10px; align-items: start; }
    .qa-wide h3, .qa-wide > p { grid-column: 1; }
    .qa-wide .demo-label { grid-column: 2; grid-row: 1; align-self: end; }
    .qa-wide .prompt-chart { grid-column: 2; grid-row: 2 / 4; align-self: start; }
    .qa h3 { margin: 0; color: var(--ink); font: 600 19px/1.3 var(--serif); }
    .qa p { margin: 0; }
    .qa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
    @media (max-width: 900px) { .qa-grid { grid-template-columns: minmax(0, 1fr); } .qa-wide { grid-template-columns: minmax(0, 1fr); } .qa-wide .demo-label, .qa-wide .prompt-chart { grid-column: 1; grid-row: auto; } .qa { padding: 20px; } .mem-track, .mem-note { grid-column: 1; } }
    .qa, .qa-wide .demo-label { min-width: 0; overflow-wrap: anywhere; }
    .prompt-chart { display: grid; gap: 18px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
    .prompt-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: end; }
    .prompt-name { grid-row: 1 / 3; align-self: center; color: var(--ink); font: 500 13px var(--sans); }
    .prompt-bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; border-bottom: 1px solid var(--line); }
    .pcol { flex: 1; display: flex; flex-direction: column-reverse; height: 100%; }
    .seg { display: block; height: var(--h); flex: none; }
    .seg.prompt-n { background: var(--muted); opacity: .6; }
    .pcol .seg:last-child { border-radius: 2px 2px 0 0; }
    .seg.prompt-a { background: var(--muted); opacity: .6; }
    .seg.mem { background: var(--green); border-radius: 2px 2px 0 0; }
    .seg.lost { border: 1px dashed var(--muted); border-bottom: 0; opacity: .8; border-radius: 2px 2px 0 0; }
    .mem-track { grid-column: 2; height: 6px; margin-top: 10px; border-radius: 3px; background: color-mix(in srgb, var(--green) 18%, transparent); overflow: hidden; }
    .mem-track span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--green) 25%, transparent), var(--green)); }
    .prompt-note.mem-note { grid-column: 2; color: var(--green); }
    .prompt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-left: 110px; color: var(--muted); font: 11.5px var(--mono); }
    .prompt-legend span { display: inline-flex; align-items: center; gap: 6px; }
    .key { display: inline-block; width: 12px; height: 10px; }
    .key.prompt-n { background: var(--muted); opacity: .6; }
    .key.mem { background: var(--green); }
    .key.lost { border: 1px dashed var(--muted); }
    .prompt-note { color: var(--muted); font: 12px var(--mono); }
    .prompt-axis { display: flex; justify-content: space-between; margin-left: 110px; color: var(--muted); font: 11.5px var(--mono); }
    @media (max-width: 520px) { .prompt-row { grid-template-columns: 1fr; } .prompt-name { grid-row: auto; } .prompt-axis, .prompt-legend { margin-left: 0; } }
    .usual-price { margin: -10px 0 18px; color: var(--muted); font-size: 12.5px; }
    .tiers li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0; padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: 13.5px; }
    .tiers li:last-child { border-bottom: 0; }
    .tiers li::before { content: none; margin: 0; }
    /* The row is three flex children — the + marker, the name, the price — and space-between pushed
       all three apart, stranding the name in the middle of the card. The name takes the free space
       instead, so the marker and the name read as one thing on the left and the price sits right. */
    .tiers b { color: var(--ink); font-weight: 500; }
    .tiers em { margin: 0 auto 0 10px; font-style: normal; color: var(--muted); font-size: 12.5px; }
    /* A "+" in front of a price means nothing — those rows are a table, not a list of features — and
       as a bullet it reads as "add this" rather than "you get this". The prices lose the marker, and
       the included list gets a check drawn in CSS so it looks the same wherever the glyph would not. */
    .price-card li { display: flex; align-items: flex-start; gap: 11px; margin: 9px 0; }
    .price-card li::before { content: ""; flex: none; width: 5px; height: 9px; margin-top: 5px;
      border: solid var(--green); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
    .price-card .tiers li { align-items: baseline; gap: 14px; }
    .price-card .tiers li::before { content: none; }
    /* Side by side, but not as equals: the agent carries three tiers, a team line and four reasons,
       the plugin carries a price and a list. Giving the agent more of the row makes the height
       difference read as intended rather than as a card that ran out of things to say, and the cards
       size to their content instead of one of them padding itself out to match. */
    .memory-pricing .pricing-grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); align-items: start; }
    .memory-pricing .price-card { min-height: 0; }
    .tiers li::before { margin-right: 10px; }
    .tiers span { color: var(--muted); font: 12.5px var(--mono); white-space: nowrap; }
    .price-card li { margin: 9px 0; }
    .price-card .button { width: 100%; margin-top: 30px; }
    .install-line { margin: 10px 0 0; min-height: 30px; color: var(--muted); font-size: 13px; }
    /* A command that cannot wrap has a min-content width as wide as the URL in it, and that width
       propagates up through the card and out past a phone's screen. It scrolls inside its own box
       instead, which needs every ancestor to be allowed to shrink below that intrinsic width. */
    .install-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .price-card, .pricing-product, .pricing-grid > * { min-width: 0; }
    .install-line code { flex: 1 1 200px; min-width: 0; max-width: 100%; overflow-x: auto; white-space: nowrap;
      font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--ink);
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 2px 6px; }
    .pricing-note { margin: 20px 0 0; color: var(--muted); font-size: 13px; }
    .backed { display: block; margin: 0; color: var(--muted); text-decoration: none; }
    .backed span { display: block; margin-bottom: 9px; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
    .backed .ah-logo { display: block; height: 19px; width: auto; color: #e6edf3; }
    .backed:hover .ah-logo { color: #ffffff; }

    .security { padding: 34px 0; border-bottom: 1px solid var(--line); background: var(--green-soft); }
    .security .wrap { display: grid; grid-template-columns: 190px 1fr; gap: 40px; }
    .security strong { color: var(--green-dark); }
    .security p { margin: 0; }

    .faq { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
    details { border-top: 1px solid var(--line); }
    details:last-child { border-bottom: 1px solid var(--line); }
    summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; color: var(--ink); font-weight: 500; cursor: pointer; list-style: none; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: "+"; color: var(--green); font: 22px var(--mono); }
    details[open] summary::after { content: "-"; }
    details p { max-width: 820px; padding: 0 32px 20px 0; color: var(--muted); }

    .closing { padding: 80px 0; background: var(--ink); text-align: center; }
    .closing h2 { margin-inline: auto; color: white; }
    .closing p { margin: 0 auto 30px; color: #a3b4c0; font-size: 18px; }
    .closing .eyebrow { color: #8ed2c2; }
    .closing .hero-actions { justify-content: center; }

    footer { padding: 40px 0; background: #112a39; color: #8c959b; }
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    footer .brand { color: white; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
    .logo { display: block; height: 24px; width: auto; color: var(--ink); }
    footer .logo { height: 22px; color: #ffffff; }
    .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
    .footer-col h4 { margin: 0 0 13px; color: #ffffff; font: 500 11px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
    .footer-col a { display: block; margin: 9px 0; font-size: 13px; text-decoration: none; }
    .footer-col a:hover { color: #ffffff; }
    .footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; font-size: 12.5px; }
    .footer-base a { text-decoration: none; }
    .footer-base a:hover { color: #ffffff; }
    .footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
    .footer-links a { font-size: 13px; text-decoration: none; }
    .footer-links a:hover { color: white; }



    @media (max-width: 900px) {
      .nav-links { display: none; }
      .mobile-menu { display: block; }
      .hero { padding-top: 76px; }
      .definition .wrap, .security .wrap { grid-template-columns: 1fr; gap: 8px; }
      .demo-grid, .system-grid, .faq, .evidence-heading { grid-template-columns: 1fr; gap: 0; }
      .evidence-heading .eyebrow, .evidence-heading h2, .evidence-heading .lead { grid-column: 1; grid-row: auto; }
      .evidence-heading .lead { margin-top: 18px; }
      .demo-copy { position: static; }
      .product { padding: 32px; }
      .pricing-products { grid-template-columns: 1fr; }
      .pricing-product + .pricing-product { margin-top: 28px; }
      .evidence-grid { grid-template-columns: 1fr; }
      .curve-head { grid-template-columns: 1fr; gap: 18px; }
      .episode-grid { grid-template-columns: 1fr; }
      .curve { padding: 24px 18px 20px; }
      .price-card { min-height: auto; }
      .tree { width: min(100%, 520px); margin-inline: auto; }
    }

    @media (max-width: 650px) {
      .wrap { width: min(calc(100% - 28px), var(--max)); }
      .site-header { position: relative; } /* not static: static ignores z-index, and the hero below would paint over the open menu */
      .nav { min-height: 60px; }
      .hero { padding: 64px 0 56px; }
      h1 { font-size: clamp(38px, 11.5vw, 58px); }
      .section, .closing { padding: 60px 0; }
      .product-grid { grid-template-columns: 1fr; }
      .delivery-options, .memory-pricing .pricing-grid { grid-template-columns: 1fr; }
      .product { min-height: 340px; }
      .product + .product { border-top: 1px solid var(--line); border-left: 0; }
      .message { grid-template-columns: 1fr; gap: 8px; }
      .metric-row { grid-template-columns: 1fr; }
      .methodology { grid-template-columns: 1fr; gap: 12px; }
      .trust-grid { grid-template-columns: 1fr; }
      .trust-item:nth-child(odd) { border-right: 0; }
      .trust-item:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
      .report-inner { padding: 21px; }
      .tree { display: flex; min-height: 0; flex-direction: column; gap: 12px; padding-left: 12px; border-left: 1px solid var(--line); }
      .node { position: static; width: calc(100% - 24px); }
      .node.root { margin-left: 0; }
      .node.branch-a, .node.branch-b { margin-left: 12px; }
      .node.leaf-a, .node.leaf-b { margin-left: 24px; }
      .connector { display: none; }
      .footer-row { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .button { transition: none; }
      .button:hover { transform: none; }
    }

    /* ---- Motion. Scroll-driven, CSS only, no library, no JS.
       Everything is wrapped so that an unsupporting browser or a reader who
       prefers reduced motion gets the page fully visible at rest. ---- */
    @media (prefers-reduced-motion: no-preference) {

      .button, .text-link, .nav-cta, .delivery-option, .episode,
      .evidence-card, .price-card, .product, .node, .how-item, .agent-fact, .flow-session {
        transition: translate .28s cubic-bezier(.2,.7,.3,1),
                    transform .28s cubic-bezier(.2,.7,.3,1),
                    box-shadow .28s cubic-bezier(.2,.7,.3,1),
                    border-color .28s ease, background .28s ease;
      }
      .episode:hover, .evidence-card:hover, .delivery-option:hover {
        translate: 0 -3px;
        border-color: var(--green);
        box-shadow: 0 16px 42px rgba(47, 139, 120, .10);
      }
      .price-card:hover { translate: 0 -3px; box-shadow: 0 20px 52px rgba(23, 41, 56, .10); }
      .product:hover .product-number { color: var(--green-soft); }
      .node:hover { translate: 0 -2px; border-color: var(--green); }
      .how-item:hover, .agent-fact:hover { translate: 0 -3px; border-color: var(--green); }
      .flow-session:hover { border-color: var(--green); }
      .text-link span { transition: transform .28s cubic-bezier(.2,.7,.3,1); }
      .text-link:hover span, .button:hover span { transform: translateX(4px); }

      @supports (animation-timeline: view()) {
        .section-intro, .product, .curve, .episode, .evidence-card,
        .price-card, .step, .delivery-option, .conversation, .tree,
        .methodology, .faq-item, .definition .wrap > *,
        .proof-quote, .proof-logo, .story-steps li, .flow-col, .flow-space, .how-item,
        .bench-line, .trust-list li, .agent-fact {
          animation: rise-in linear both;
          animation-timeline: view();
          animation-range: entry 4% cover 26%;
        }
        /* stagger: each sibling resolves a little later up the viewport */
        .product:nth-child(2), .episode:nth-child(2),
        .evidence-card:nth-child(2), .price-card:nth-child(2) { animation-range: entry 4% cover 32%; }
        .episode:nth-child(3), .evidence-card:nth-child(3) { animation-range: entry 4% cover 38%; }
        .step:nth-child(2) { animation-range: entry 4% cover 32%; }
        .step:nth-child(3) { animation-range: entry 4% cover 38%; }
        .how-item:nth-child(2), .agent-fact:nth-child(2), .story-steps li:nth-child(2), .flow-space { animation-range: entry 4% cover 32%; }
        .how-item:nth-child(3), .agent-fact:nth-child(3), .story-steps li:nth-child(3), .flow-col:last-of-type { animation-range: entry 4% cover 38%; }

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

        /* the hero ring drifts as you scroll past it */
        .hero::after {
          animation: ring-drift linear both;
          animation-timeline: scroll();
          animation-range: 0 90vh;
        }
        @keyframes ring-drift {
          from { transform: translateY(0) scale(1); }
          to   { transform: translateY(-70px) scale(1.06); }
        }

        /* the header gains a shadow only once the page has moved */
        .site-header {
          animation: header-lift linear both;
          animation-timeline: scroll();
          animation-range: 0 120px;
        }
        @keyframes header-lift {
          from { box-shadow: 0 0 0 rgba(23, 41, 56, 0); }
          to   { box-shadow: 0 10px 30px rgba(23, 41, 56, .07); }
        }
      }
    }

    /* ============================================================
       DARK THEME - Memory page only.
       Developers read on dark, and it lets us use the real brand
       teal #55a694, which fails contrast on white but works here.
       Token overrides first, then the few rules that assumed light.
       ============================================================ */
    :root {
      color-scheme: dark;
      --paper: #0f1d29;
      --paper-deep: #0a141d;
      --ink: #eef4f8;
      --body: #b5c5d1;
      --muted: #8c959b;
      --line: #263b4c;
      --card: #172938;
      --green: #55a694;
      --green-dark: #74c1ad;
      --green-soft: #1a3a37;
      --amber: #8f95d6;
      --amber-soft: #242b4d;
    }

    .site-header { border-bottom: 1px solid rgba(38, 59, 76, .9); background: rgba(15, 29, 41, .85); }
    .skip-link { background: var(--paper-deep); color: var(--ink); }
    .button { color: #0c1a24; }                       /* dark label on teal reads properly */
    .button:hover { color: #0c1a24; }
    .nav-cta { color: var(--ink) !important; }

    /* the definition inverts to a light band, so it lands as the anchor it is */
    .definition { background: #eef4f8; color: #41515d; }
    .definition strong { color: #172938; }

    .conversation { box-shadow: 0 18px 60px rgba(0, 0, 0, .38); }
    .conversation-head { background: var(--paper-deep); }
    .message { border-bottom: 1px solid var(--line); }
    .message.agent { background: rgba(85, 166, 148, .07); }

    .evidence-section { background: var(--paper-deep); }
    .methodology { background: rgba(255, 255, 255, .035); }
    .episode { background: var(--paper-deep); }
    .fit-k.no { color: #d98ea0; }
    .episode li.reuse::before { color: #a9afe8; }
    .mobile-menu-links { box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }
    .hero::after { opacity: .16; }

    .closing { background: var(--card); }
    .closing h2 { color: var(--ink); }
    .closing p { color: #a3b4c0; }
    .closing .eyebrow { color: var(--green); }

    footer { background: var(--paper-deep); border-top: 1px solid var(--line); color: var(--muted); }
    footer .brand, footer .logo, .footer-col h4 { color: var(--ink); }

    @media (prefers-reduced-motion: no-preference) {
      .episode:hover, .evidence-card:hover, .delivery-option:hover { box-shadow: 0 16px 42px rgba(0, 0, 0, .45); }
      .price-card:hover { box-shadow: 0 20px 52px rgba(0, 0, 0, .45); }
    }
  
    /* ── One box, two sizes ────────────────────────────────────────────────────────────────────
       An audit of every boxed element found seven corner radii across the two pages (0, 3, 4, 5, 6,
       7 and 12) and card padding anywhere from 8 to 30. Nothing meant anything by the difference;
       each block had simply been written on its own. Content cards share one radius and one inset,
       small chips a tighter pair, and buttons keep theirs. */
    .episode, .evidence-card, .price-card, .methodology, .delivery-option, .conversation,
    .cap, .proof-card, .compare, .report, .curve, .hero-shot img { border-radius: 6px; }
    .node, .metric, .fit, .recommendation, .report-inner, .team-price { border-radius: 4px; }
    .episode, .evidence-card, .price-card, .methodology, .delivery-option, .cap, .proof-card { padding: 24px; }

    /* ── Line breaks, part two: the sentences under the titles ──────────────────────────────────
       Measured every line box on both pages. Two faults left: a heading set at the page's size while
       sitting in a 444px column, which broke it over four lines; and short blocks ending on a stub —
       two words on a line of their own under a full one. Headings in a narrow column step down to
       suit it, and short text balances its lines instead of filling then dribbling. Long body copy
       is left to `pretty`: balancing a six-line paragraph only makes six short lines. */
    .demo-copy h2 { font-size: 34px; }
    @media (min-width: 1200px) { .demo-copy h2 { font-size: 40px; } }
    .lead, .price, figcaption, .compatibility, .pricing-note, .counter span, .install-line,
    details p, details summary, .evidence-note, .closing p, .episode li { text-wrap: balance; }
    /* `.section-intro p:not(.eyebrow)` outranks a bare `.lead`, so the wider measure has to match
       its specificity to win. A one-sentence lead that needs 825px was being handed 820. */
    .section-intro p.lead, p.lead { max-width: 900px; }
    :is(.trust-item, .step, .delivery-option, .evidence-card, .episode, .price-card, .cap,
        .proof-card, .fit, .compare-row, .metric, .recommendation, .tiers, .curve-head, .methodology, .message, .evidence-note) :is(p, li) { text-wrap: balance; }
    /* ── Header scale ───────────────────────────────────────────────────────────────────────────
       The bar was set at 14px links on a 68px rule, which is a product-UI scale, not a marketing
       one; the common range for a site like this is 15-16px links on a 72-80px bar. It read small
       for a second reason too: every other size on these pages steps up at 1200px while the header
       stayed where it was, so the wider the display, the smaller the header looked against it. It
       now steps with everything else. */
    .nav { min-height: 74px; gap: 32px; }
    .nav-links { gap: 28px; }
    .nav-links a { font-size: 15px; }
    .nav-cta { padding: 10px 17px; }
    .logo { height: 26px; }
    .nav-product { padding-left: 29px; }
    .nav-product::before { height: 19px; }
    @media (min-width: 1200px) {
      .nav { min-height: 80px; }
      .nav-links { gap: 32px; }
      .nav-links a { font-size: 16px; }
      .nav-cta { padding: 11px 19px; }
      .logo { height: 28px; }
    }
    @media (max-width: 860px) {
      .nav { min-height: 62px; }
      .logo { height: 24px; }
    }

    /* ── Sections are separated by space and surface, not rules ────────────────────────────────
       No line between sections. Two deeper bands mark the turns in the story (the proof, then
       the agent as a second offering); sections on the same surface are kept apart by space
       alone, so two neighbours never stack their padding. Rules stay where they group items:
       the FAQ rows, the security list, pricing tiers. */
    .hero { border-bottom: 0; }
    main > .section { border-bottom: 0; padding-block: 112px; }
    main > .section.band { background: var(--paper-deep); }
    main > .section:not(.band) + .section:not(.band) { padding-top: 0; }
    footer { border-top: 0; }
    @media (max-width: 760px) {
      main > .section { padding-block: 72px; }
    }

    /* Agent section: facts and the session chart share one top edge and one bottom edge; the
       button sits under the facts. Chart rows carry their label above the bars. */
    .agent-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: stretch; }
    .agent-split .agent-facts { margin: 0; }
    .agent-split > .button { grid-column: 1; justify-self: start; margin-top: 26px; }
    .agent-chart { display: contents; }
    .agent-chart .prompt-chart { grid-column: 2; grid-row: 1; align-content: center; gap: 22px; }
    .agent-chart figcaption { grid-column: 2; grid-row: 2; align-self: center; margin: 26px 0 0; }
    .agent-chart .prompt-row { grid-template-columns: minmax(0, 1fr); }
    .agent-chart .prompt-name { grid-row: auto; align-self: start; margin-bottom: 4px; }
    .agent-chart .mem-track, .agent-chart .prompt-note.mem-note { grid-column: 1; }
    .agent-chart .prompt-legend { margin-left: 0; }
    @media (max-width: 900px) {
      .agent-split { grid-template-columns: minmax(0, 1fr); }
      .agent-split > * , .agent-chart > * { grid-column: 1 !important; grid-row: auto !important; }
      .agent-chart .prompt-chart { margin-top: 26px; }
      .agent-chart figcaption { margin-top: 10px; }
    }
    .proof-story { display: inline-block; margin-top: 14px; color: var(--green); font-weight: 500; font-size: 15px; text-decoration: none; }
    .proof-story:hover { text-decoration: underline; }

/* Closing band: one line and the install button, at the foot of stories, articles and documents. */
.story-cta { padding: 96px 0; border-top: 1px solid var(--line); background: var(--paper-deep); text-align: center; }
.story-cta h2 { max-width: 24ch; margin: 0 auto 14px; color: var(--ink); font: 600 clamp(28px, 3vw, 38px)/1.2 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.story-cta p { max-width: 560px; margin: 0 auto 30px; color: var(--body); font-size: 18px; }
.story-cta .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
@media (max-width: 860px) { .story-cta { padding: 64px 0; } }