/* ══════════════════════════════════════════════════════════════════════════════
   Chimzee override: early stylesheet
   Extracted from the inline <style> in index.html so that a rebuild of the bundle on Chris's Mac
   cannot take it. Re-attached by deploy-overlay.sh. Every rule here answers
   something that was measured; the reasoning for each is in
   memory/logs/business/2026-08-17-logo-v3-and-header.md.
   ══════════════════════════════════════════════════════════════════════════════ */


      /* ── Chimzee, site overrides ────────────────────────────────────────────────
         One block, on purpose. There were two, each with its own .lab-brand rule, and the
         later one silently won: that is why the heights and the padding stopped responding.
         Everything the site overrides lives here and nowhere else.
         Sources: the brand system at /brand/chimzee-brand.css and the logo guide v2.1. */

      /* ── the reading size, for everyone ────────────────────────────────────────
         Chris, 2026-08-18: "I don't like the three As. Just remove them. Just default to
         the largest one." So the control is gone and its top step is simply the size the
         site is. 20px root against the 16px browser default, which is a quarter larger, and
         everything on this site that matters is authored in rem so it all follows.
         A reader who has already chosen a larger size in their own browser still gets more
         than this, because the value is a ratio of their setting, not a fixed number. */
      html { font-size: 125%; }

      /* ── the identity ──────────────────────────────────────────────────────────
         Ink on white, which is what the rest of the site is. Chris, 2026-08-16: "I love the
         black and white, the black on the white ... let's not invent things." The movement
         he asked for lives on the container behind the mark, not on its strokes. */
      /* Chris, 2026-08-17: "When the logo starts on the top left, I want it to be all black,
         not blue and black ... the monkey needs to be black, text is black." And: "I don't
         want the logo animating left to right, opening and closing." So the mark is one flat
         ink at rest and the travelling gradient is gone. What is left is the glow, which is
         light rather than colour, and a tint on the icon so slight it reads as ink. */
      .cz-brandstack {
        display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
      }
      .cz-tagline {
        /* Chris's "Use This" file: Geist Mono, #687C8B, spanning exactly the lockup's
           width. Size and letter-spacing are fitted by czFitTag in cz-overrides.js. */
        font: 600 8px/1 "Geist Mono", "CZ Geist Mono", ui-monospace, monospace;
        /* softer than the mark and visibly separate from it (his artwork's own #687C8B),
           flipping to a soft light slate on the dark plate */
        letter-spacing: .1em; text-transform: uppercase; color: var(--cz-tag-fg, #687C8B);
        white-space: nowrap; display: block;
      }
      .cz-lockup {
        /* the ORIGINAL 34px mark (Chris: bigger than the right nav is fine, the logo
           matters more), with the tagline fitted to its width below */
        display: block; height: 44px; width: auto; overflow: visible;
        /* Chris, 2026-08-17: "the font gets too blurry, I need it super crisp as it scrolls
           down." It was the glow, and it was mine. A drop-shadow is a blur of the shape itself,
           so a 3px white one around white strokes on navy paints a halo over every edge of
           every letter. Screenshotted at 3x with it on and off: with it on the strokes bleed,
           with it off they are clean.
           NO filter on the mark, at any point. The shine it was there for moved onto the plate
           below, where it is a shadow on a rounded rectangle and cannot touch a letterform. */
        filter: none !important;
        shape-rendering: geometricPrecision;
      }
      /* Still black on white, still one colour family: the ramp only travels between the ink
         and the navy, so it reads as depth in the stroke rather than as a second colour. The
         .92 is the glass: a little of the wash behind shows through the mark. Only here. The
         footer mark below is flat ink at full strength and never moves. */
      /* The icon carries the colour, the lettering stays ink. That split is the guide's own:
         colourways C05 to C08 are all "icon coloured, text ink or navy" (warm welcome, human
         growth, quiet intelligence, clear direction). So the mark travels through the four
         approved icon colours as the page does, rather than through colours nobody approved. */
      /* Chris, 2026-08-17, second pass: "some animation in the logo as you scroll down,
         whether it's just some transparencies, a gradient with a bit of color pushing through
         the logo a bit. Let's make everything dynamic."
         One ramp measured across the whole lockup, which is how the guide asks for it: the
         icon and the lettering are lit by the same sweep instead of each carrying its own.
         Every stop starts at ink, so at the top of the page it is still one flat black mark,
         which is the thing he asked for first. The colour is bled into the stops as you
         scroll, and the ramp never moves: no sliding, nothing opening and closing. */
      .cz-lockup use.cz-logo-icon, .cz-lockup use.cz-logo-word,
      .cz-lockup .cz-logo-icon path, .cz-lockup .cz-logo-icon .cz-logo-ear,
      .cz-lockup .cz-logo-word path, .cz-lockup .cz-logo-word .cz-logo-dot {
        fill: url(#czInk);
        /* The guide's own range: 100% active, 88% the preferred scroll transition, 84% the
           functional minimum. This never goes below 90. */
        fill-opacity: var(--cz-ink-op, 1);
        transition: fill-opacity .08s linear;
      }
      .lab-brand .brand-mark, .lab-brand strong, .lab-brand img { display: none !important; }

      /* ── the two ends of the bar, symmetric ────────────────────────────────────
         Chris: "Everything has to be symmetrically perfect." Both are 56px tall, both sit
         24px in from their own edge, both are fully rounded. Measured, not estimated. */
      .lab-brand {
        display: inline-flex; align-items: center; justify-content: center;
        /* Clear space is a rule with a number in it, not a judgement. The guide asks for at
           least half the icon height clear on every side; the icon is the lockup's height, so
           the container must be at least twice that tall and padded at least that much on the
           sides. At a 34px mark that is 17px, so: 68px tall, 24px each side, and the padding
           carries !important because the bundle sets its own asymmetric 9px/16px/9px/10px on
           this element, which is what left the left edge at 11px against a required 17. */
        height: 68px !important; padding: 0 24px !important; margin: 0 0 0 8px;
        border-radius: 26px;
        position: relative;
        /* ── the mark sits on the page, not on a card ────────────────────────────
           Chris, 2026-08-17: "When the website first opens, I don't want the logo on a
           glass card. It needs to sit on the page naturally." So this element carries no
           surface of its own. Every glass property the bundle sets on it is cleared here,
           not merely tinted, because a background and a backdrop-filter left in place are
           still a card even at low opacity. */
        background: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        /* The bundle clips this element, which cut the plate's shadow off at its own edge and
           left two stubs where the clip met the corner radius. The shadow is the thing that
           makes the glass read on a white page, so it has to be allowed out. */
        overflow: visible !important;
        transition: none;
      }
      /* The glass is a layer behind the mark instead, and it is only there once you have
         scrolled: at the top of the page the header has nothing under it to separate the
         mark from, and past that the mark travels over real content and needs the plate to
         stay readable. --cz-lift is written by the scroll handler and reaches 1 after 120px,
         so the plate arrives with the first scroll rather than a fifteenth of the way down a
         very tall page, which is where --cz-t would have put it. Opacity and colour only:
         nothing here moves the mark, which the motion contract forbids. */
      .lab-brand::after {
        content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
        /* Chris: "the same rounded corners as the cards ... a better border, like a less
           rounded border." The cards on this page are 26px, measured, so this is 26px. */
        border-radius: 26px;
        opacity: var(--cz-lift, 0);
        /* Chris: "I don't want the color background ... more of a transparent glass feel with
           some more shadowing and a better border." No sky and no peach wash: plain white at
           low alpha doing its work through blur, not through colour. */
        /* Chris, 2026-08-19: the plate arrives ~80% faster, carries no edge that reads
           as a stray top border over the mark, and is opaque enough that the logo is
           readable over ANY ground, at any point on any page. */
        background: var(--cz-plate-bg, rgba(255,255,255,.88));
        -webkit-backdrop-filter: blur(28px) saturate(1.04);
        backdrop-filter: blur(28px) saturate(1.04);
        border: 0;
        box-shadow:
          0 1px 2px rgba(38,63,87,.10),
          0 10px 24px rgba(38,63,87,.16),
          0 28px 60px rgba(38,63,87,.14);
        transition: opacity .1s linear,
                    box-shadow .08s linear;
      }
      /* Over the analysis band the header sits on a pale card, where a 20% ink edge all but
         disappears. Chris: "On Business Analysis and Competitor Analysis, it has to have a
         different border and lines in the nav." A firmer edge, and the nav gets hairlines
         between its items so it reads as a control rather than floating words. */
      /* Over the pale analysis cards the plate firms up its edge and its shadow. It must NOT
         set a background here: that !important white was beating the colour the plate travels
         through, so at the foot of the page the mark went white on a plate that had stayed
         pale. The extra opacity it used to add is folded into the travelling value instead. */
      .concept-switcher.over-panel .lab-brand::after,
      .concept-switcher.over-panel nav:before {
        border-color: var(--cz-plate-edge, rgba(38,63,87,.34)) !important;
        box-shadow:
          inset 1px 1px 0 rgba(255,255,255,.86),
          0 2px 6px rgba(38,63,87,.10),
          0 16px 38px rgba(38,63,87,.18) !important;
      }
      .concept-switcher.over-panel nav a + a,
      .concept-switcher.over-panel nav a + button {
        border-left: 1px solid rgba(38,63,87,.16);
      }
      .concept-switcher.over-panel nav .nav-talk { border-left: 0; }
      /* The bundle's own highlight streak is gone, not faded. It covers the top half of the
         box with an opaque white gradient, which is what was painting out the top edge of the
         plate and leaving a single line under the mark. The plate carries its own inset
         highlight instead. */
      .lab-brand::before { display: none !important; }
      .lab-brand:hover::after {
        border-color: rgba(38,63,87,.30);
        box-shadow: inset 1px 1px 0 rgba(255,255,255,.96), 0 26px 66px rgba(38,63,87,.16);
      }
      /* !important on the height: the bundle sets its own on this pill and a min-height
         loses to it. */
      /* The other end of the bar matches the plate behind the mark: same radius, same
         colourless glass, same edge. Two ends that do not match is the thing Chris keeps
         catching. */
      .concept-switcher nav {
        height: 68px !important; padding: 6px !important;
        align-items: center !important; margin-right: 8px;
        border-radius: 26px !important;
        position: relative;
        background: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        border: 1px solid transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
      }
      /* Same plate, same fade, same edge as the mark's. Two ends of one bar. */
      .concept-switcher nav:before {
        /* !important throughout: this inline block is in <head> above the bundle's own
           stylesheet link, so on equal specificity the bundle wins. That is what kept the
           streak's 48% height and left the plate showing as two hairlines. */
        content: "" !important; position: absolute !important; inset: 0 !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        height: auto !important; width: auto !important;
        z-index: 0 !important; pointer-events: none !important;
        border-radius: 26px !important;
        opacity: var(--cz-lift, 0) !important;
        background: var(--cz-plate-bg, rgba(255,255,255,.46)) !important;
        -webkit-backdrop-filter: blur(28px) saturate(1.04) !important;
        backdrop-filter: blur(28px) saturate(1.04) !important;
        border: 1px solid var(--cz-plate-edge, rgba(38,63,87,.26)) !important;
        box-shadow:
          inset 1px 1px 0 rgba(255,255,255,.92),
          inset 0 -1px 0 rgba(38,63,87,.06),
          0 1px 2px rgba(38,63,87,.10),
          0 10px 24px rgba(38,63,87,.16),
          0 28px 60px rgba(38,63,87,.14) !important;
        transition: opacity .55s cubic-bezier(.2,.7,.2,1),
                    box-shadow .32s cubic-bezier(.2,.7,.2,1),
                    border-color .32s cubic-bezier(.2,.7,.2,1) !important;
      }
      .concept-switcher nav .nav-talk { border-radius: 20px !important; }
      .concept-switcher nav a, .concept-switcher nav button {
        font-size: 14px; padding: 0 20px; display: inline-flex; align-items: center;
        align-self: stretch;
      }
      /* Chris: "remove Our Purpose from the navbar." Hidden rather than cut from the bundle,
         which is rebuilt on his Mac; the anchor it pointed at still exists for other links. */
      .concept-switcher nav a[href="#concept-top"] { display: none; }

      /* ── the footer mark ───────────────────────────────────────────────────────
         It drew the bare icon while the nav drew the lockup, and when the image was swapped
         without hiding the typed word beside it, the lettering landed on top of the word
         "Chimzee". One mark, and the typed copy is gone. */
      .coda-footer-brand .brand-mark img,
      footer .brand-mark img, .concept-end .brand-mark img {
        height: 34px !important; width: auto !important; max-width: none !important;
        object-fit: contain;
      }
      /* Chris, 2026-08-17: "I want better spacing on Miami, Florida, under the logo." It was
         sitting hard against the baseline of the mark and starting at the icon's outer stroke
         rather than under the word. Stacked, with real air, and the line indented to the
         wordmark's own left edge so the two read as one block. */
      .coda-footer-brand {
        gap: 0; width: auto;
        display: flex; flex-direction: column; align-items: flex-start;
      }
      .coda-footer-brand .brand-mark {
        width: auto !important; height: auto !important; flex: 0 0 auto;
        display: block; margin: 0 0 14px;
      }
      .coda-footer-brand > span, .coda-footer-brand small {
        display: block; letter-spacing: .16em; line-height: 1.5;
      }
      .coda-footer-brand strong, .coda-footer-brand .brand-node-field { display: none; }
      /* Chris, 2026-08-17: "The logo is still animating. The bottom of the logo should never
         animate." The bundle runs `logoBreathe` on it, a 5.4s infinite scale, and drives a
         translateY plus scaleX/scaleY off --logo-shift and --logo-stretch. The guide's motion
         contract forbids exactly those: "Forbidden: translate, rotate, scale, skew, tilt,
         perspective, parallax, bounce, drift". Only gradient position, colour, soft light,
         whole-mark opacity and whole-object shadow may ever move. It is fixed now. */
      .brand-mark img {
        animation: none !important;
        transform: none !important;
        transition: none !important;
      }
      .brand-mark {
        transform: none !important;
        transition: none !important;
      }
      /* The old mark's orbiting dots are still in the DOM in both places, still animating,
         held back by one display:none each. Removed from the document by the script below
         rather than suppressed, because a suppression is one deleted line from putting the
         previous logo back underneath this one. */

      /* ── the watermark ─────────────────────────────────────────────────────────
         A full-cover layer whose mask does the placing: this band already uses both its own
         pseudo-elements, and a small absolutely positioned box fought its layout. */
      /* Chris, 2026-08-17: "on the card, our promise, no sales pitch, on the right-hand side,
         I want a gradient version of the monkey logo." The mark is the mask and the gradient
         is the paint, which is how the guide asks for it (G01 Chimzee Spectrum, one ramp
         measured across the whole mark rather than a fill per part). It is a watermark on a
         card of copy, so it carries the ramp at low strength: the words still win. */
      .free-first-look { position: relative; overflow: hidden; }
      .cz-watermark {
        /* !important on position and z-index: the bundle sets both on every direct child of
           this band, at a specificity this cannot beat from a stylesheet that loads first.
           Everything else about where it goes is measured and written by the script, because
           a percentage offset is measured against leftover space and knows nothing about
           where the words actually end. */
        position: absolute !important; z-index: 0 !important;
        /* No inset here at all. `inset: auto !important` is a shorthand for all four offsets,
           so it beat the left and top the script writes inline and dumped the mark back at its
           static position, on top of the headline. */
        background: linear-gradient(118deg, #102948 0%, #3F739D 26%, #76B8DC 52%, #A793D7 76%, #D85F32 100%);
        -webkit-mask: url("/chimzee-mark.svg") center / contain no-repeat;
        mask: url("/chimzee-mark.svg") center / contain no-repeat;
        opacity: .24; pointer-events: none;
      }
      /* It sits in the empty lower right of the card, under the headline's last line and
         beside the short list and the link, so the sentence above it still gets the whole
         width. Capping the copy to clear a centred mark cost the headline a fourth line,
         which is exactly the thing Chris asked us to stop doing. */
      .free-first-look > *:not(.cz-watermark) { position: relative; z-index: 1; }


      /* ── why text kept dropping to a new line ──────────────────────────────────
         Chris: "For some reason, whatever our logic is, it's dropping things down when there's
         space to go to the right." Two causes, both measured across 1512/1280/1100.

         1. text-wrap: balance on every display heading. Balance deliberately SHORTENS the
            first line to make the lines even, so a headline drops a word with 593px of empty
            space beside it. `pretty` keeps the useful half of that behaviour (no orphan on the
            last line) without shortening line one.
         2. hard pixel max-widths inside much wider containers: a 620px cap on a heading in a
            1265px row, 940px on a paragraph in an 1180px column, 640px in a 1100px one. */
      .story-copy h1, .coda-copy h2, .free-first-look h3, .free-first-look > span,
      .cz-display, .booking-head h2, .booking-step-copy h3 {
        text-wrap: pretty;
      }
      /* Chris, 2026-08-17, and he made it a rule for every site we build: "That should be one
         line only ... We can't keep having these things drop when there's nothing to the
         right beside it." The caps were still winning because the bundle sets them at higher
         specificity, which is why the 620px heading kept breaking into three lines inside a
         1217px row. They are overridden outright now, and the two kickers he named are held
         on one line above 860px, where there is always room for them. */
      .coda-group-heading h3 { max-width: none !important; flex: 1 1 auto; }
      .coda-copy > p { max-width: none; }
      .free-first-look h3, .free-first-look p { max-width: none !important; }

      /* ── the story panels ──────────────────────────────────────────────────────
         Chris, 2026-08-17: "There's a huge gap to the right. Why does this keep happening?
         I kind of want to do the same way with a watermark, just like our promise section.
         That looks great. It's nice, full length ... much more condensed. We can't have all
         this dead white space."
         So these panels get the promise card's treatment: the copy runs the full width of the
         deck instead of sitting in a 640px column inside a 1037px one, the kicker holds one
         line, the headline is fitted to one line by measurement, and the mark takes the space
         on the right that the copy is no longer wasting. */
      @media (min-width: 900px) {
        .story-copy p, .story-copy h1 { max-width: none !important; }
      }
      @media (max-width: 899px) {
        /* Wide open, but not into the progress rail on the right. At 820 the paragraph's own
           ink stopped at 750 while its box ran on to the rail's column at 769, which the ship
           gate reads as an overlap and which leaves no breathing room beside the labels. */
        .story-copy p { max-width: none !important; }
        .story-copy { max-width: calc(100vw - 124px) !important; margin-left: auto; margin-right: auto; }
      }
      @media (min-width: 860px) {
        .free-first-look > span, .story-copy > span:first-child,
        .coda-group-heading .coda-group-kicker {
          max-width: none !important; white-space: nowrap !important; text-wrap: nowrap !important;
        }
      }
      /* The long headings are held to one line by measurement, not by a guess: the script
         below shrinks the type until the sentence fits the row it is in, and gives up (letting
         it wrap again) rather than ever pushing the page sideways. */
      .coda-group-heading h3.cz-one-line,
      .story-copy h1.cz-one-line,
      .story-copy p.cz-one-line,
      .coda-copy h2.cz-one-line,
      .coda-copy p.cz-one-line { white-space: nowrap; }

      /* ── the coda card ─────────────────────────────────────────────────────────
         Chris pointed at this card four times and I kept fixing the story panel instead:
         "See the move before you make it." is an h2 in .coda-copy, not the story kicker. It
         was 128px on two lines inside an 1180px box with the whole right of the section empty,
         and it had no mark. It gets the treatment of the promise card he called perfect: the
         line fitted to one line by measurement, the copy under it running the full box, and
         the gradient monkey in the space to the right that the copy is not using. */
      .coda-copy { position: relative; }
      .coda-copy > p { max-width: none !important; }
      /* Chris: "the monkey logo does not go to the right." It was offset by a fixed 230px
         from the card, which is the card's edge, not the page's, and at narrower widths a
         media query gave up and tucked it under the card instead. The offset is measured and
         written by the script now, so it is flush to the right margin of the page at every
         width. Only the look lives here. */
      .cz-coda-mark {
        position: absolute; z-index: 0; pointer-events: none;
        top: -6%; bottom: -6%;
        background: linear-gradient(118deg, #102948 0%, #3F739D 26%, #76B8DC 52%, #A793D7 76%, #D85F32 100%);
        -webkit-mask: url("/chimzee-mark.svg") right center / contain no-repeat;
        mask: url("/chimzee-mark.svg") right center / contain no-repeat;
        opacity: .24;
      }
      @media (max-width: 760px) {
        .cz-coda-mark { display: none; }
      }

      /* ── the mark's plate deepens as you go down ────────────────────────────────
         Chris, 2026-08-17: "I just want the logo in the top right to be darker blue background
         as we scrolled down", with "the logo mostly white with a bit of light gradient, going
         to a more similar blue." So the page keeps its white ground and only the plate behind
         the mark travels, from the colourless glass it arrives as into navy. C04 Reverse White
         is the guide's colourway for a mark on navy, and it is the plate that provides the
         ground, so the mark never depends on what happens to be scrolling behind the header.
         The colours themselves are written by the script; these are only the fallbacks for the
         state it arrives in. */
      .concept-switcher nav a,
      .concept-switcher nav button:not(.nav-talk) {
        color: var(--cz-nav-fg, inherit);
        transition: color .35s linear;
      }
      .concept-switcher nav .nav-talk {
        background: var(--cz-talk-bg, #263f57) !important;
        color: var(--cz-talk-fg, #ffffff) !important;
        transition: background .35s linear, color .35s linear;
      }

      /* The story stage carries NO mark. Chris, 2026-08-17, after seeing it: "let's get rid of
         that watermark when it comes up to the first idea real for free ... it's showing up
         specifically when we make the first idea real for free." The promise card keeps its
         one, which he called perfect. Anything left over is removed by the script. */
      .cz-story-mark { display: none !important; }

      /* ── the story copy runs the full stage ─────────────────────────────────────
         It was capped at 1100 inside a 1512 deck, which is where the gap on the right came
         from. It now takes the deck, and the headline and the line under it are each fitted to
         a single line by measurement. */
      @media (min-width: 900px) {
        /* An explicit width, not just a cap: these panels shrink to fit their widest child, so
           the fitter below was measuring a room that the fitter itself had just changed. The
           last panel ended up 827px wide because its fitted headline was 827px wide, and its
           paragraph then wrapped to three lines inside that. */
        .story-copy, .story-copy-3 {
          width: min(1360px, 92vw) !important;
          max-width: min(1360px, 92vw) !important;
          margin-left: auto !important; margin-right: auto !important;
        }
      }

      /* ── the example-view note ─────────────────────────────────────────────────
         Chris: "The example view on the right-hand side for both that card and the one above,
         I want that to be below, bottom-right-justified, after the three cards." It is moved
         by the script rather than by CSS order, because it lives inside the group's header and
         order only reshuffles siblings. Squeezing it beside the headline was also what forced
         it onto two lines at 1100. */
      .coda-card-group > .coda-group-note {
        display: block; margin: 14px 0 0; text-align: right; max-width: none;
        opacity: .85;
      }

      /* ── no scroll assistance ────────────────────────────────────────────────
         Chris, 2026-08-18: "get rid of where it automatically fixes it, but just be a clean
         scroll, so there should be no jumping. Just let the user scroll as it normally
         would. Don't do any assistance in the scrolling for mobile or desktop."
         What used to be here was mandatory scroll snapping with `scroll-snap-stop: always`
         on four invisible anchors, arranged so one swipe moved exactly one panel. It did
         that, and the cost was the page taking the scroll away from you: settling you onto a
         point you did not choose, refusing to be left between two panels, and re-snapping
         whenever the address bar moved. All of it is gone. The runway keeps its shortened
         height on a phone so a panel is still about one screen of scrolling; nothing decides
         where the scroll ends any more.
         The invisible .cz-snap anchors are removed from the DOM in cz-overrides.js. */
      @media (max-width: 860px) {
        .immersive-story { height: 340svh !important; }
      }

      /* ── the live-action cards stay as long as their panel does ─────────────────
         Chris: "when I scroll down, the live-action cards disappear a bit too quickly."
         Measured: the stream was up from .20 to .37 of the story runway, about 660px out of
         3330, and gone well before the panel it belongs to had finished. It now simply carries
         that panel's own opacity, so it arrives and leaves with the words it illustrates.
         !important because the bundle writes an inline opacity on it every frame. */
      .alert-stream { opacity: var(--cz-stream-op, 1) !important; }

      /* ── the words come first ────────────────────────────────────────────────────
         Chris, 2026-08-17: "on your business model stays at the center, the icons move in
         front of the text." Measured at that panel: the bundle drops .story-deck to z-index 8
         while .logo-cloud sits at 9, so the tool chips paint over the headline and the last
         words of the line under it ("all over again." was unreadable beneath the Make chip).
         Everywhere else the deck is 12 and wins; only on this panel does it lose. The copy is
         put back on top, and given a soft scrim of the page's own white so it reads cleanly
         over the densest part of the field rather than fighting it. */
      .story-deck { z-index: 14 !important; }
      .story-copy { position: relative; }
      .story-copy::before {
        content: ""; position: absolute; z-index: -1;
        inset: -6% -5%;
        background: radial-gradient(ellipse 62% 58% at 50% 50%,
          rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,0) 78%);
        pointer-events: none;
      }

      /* ── phone ergonomics ────────────────────────────────────────────────────────
         From a sweep of five real phone sizes (SE 375x667 through 14 Plus 428x926), every one
         of them showing the same three faults. */
      @media (max-width: 860px) {
        /* 1. Type that could not be read. The three live-action cards were set at 7px for the
              label and 9.5px for the line, which is under half the size of body copy on the
              same screen. They keep their three-across arrangement; the padding gives way
              instead. */

        /* 2. Targets you have to aim at. Both of these measured 27px tall against the 44px
              a thumb needs. The ink does not move; the box around it grows. */
        .free-first-look a, .free-first-look button,
        .story-copy a, .coda-copy a {
          min-height: 44px !important;
          display: inline-flex !important;
          align-items: center !important;
        }
      }
      /* 3. On a short phone there is no room for a 500px block of copy AND the cards under it:
            on the SE the hero paragraph ran straight into "Biggest source of drag identified".
            The copy is the message, so the cards stand down on screens that short. */
      @media (max-width: 860px) and (max-height: 800px) {
        .alert-stream { display: none !important; }
      }

      /* ── the open menu on a phone ────────────────────────────────────────────────
         Chris, 2026-08-17: "the nav on mobile (hamburger) is broken, I can't see the options."
         Mine. The bar is pinned to its collapsed height (68px, 52 on a phone) so that both ends
         match, and when the menu opens the items overflow that box: the plate behind it is
         inset:0, so it covered a 52px strip while three links hung underneath it on bare page.
         Open, the bar sizes to its contents and the plate is solid, on at full strength
         regardless of how far down the page you are, and the type is ink whatever the plate is
         doing further down. */
      @media (max-width: 860px) {
        .concept-switcher nav.is-open {
          height: auto !important;
          min-height: 52px;
          flex-direction: column !important;
          align-items: stretch !important;
          padding: 8px !important;
        }
        .concept-switcher nav.is-open:before {
          opacity: 1 !important;
          background: rgba(255,255,255,.94) !important;
          -webkit-backdrop-filter: blur(30px) saturate(1.06) !important;
          backdrop-filter: blur(30px) saturate(1.06) !important;
          border-color: rgba(38,63,87,.18) !important;
          box-shadow:
            inset 1px 1px 0 rgba(255,255,255,.96),
            0 18px 44px rgba(38,63,87,.20),
            0 4px 12px rgba(38,63,87,.10) !important;
        }
        .concept-switcher nav.is-open a,
        .concept-switcher nav.is-open button {
          color: #263f57 !important;
          justify-content: center;
          align-self: stretch;
          border-left: 0 !important;
        }
        .concept-switcher nav.is-open .nav-talk {
          background: #263f57 !important; color: #ffffff !important;
        }
        /* The text-size control lives inside this menu on a phone, and the blanket ink rule
           above was painting out the white letter on its active button. Restated here rather
           than loosened above, because this block loads after the control's own stylesheet and
           two !important declarations are settled by order. */
        .concept-switcher nav.is-open .cz-textsize button { color: #263F57 !important; }
        .concept-switcher nav.is-open .cz-textsize button.is-on {
          color: #FFFFFF !important; background: #263F57 !important;
        }
      }

      @media (max-width: 760px) {
        .cz-lockup { height: 30px; }
        .cz-tagline { font-size: 6.5px; }
        .lab-brand { height: 52px !important; padding: 0 18px !important; }
        .concept-switcher nav { height: 52px !important; }
        .concept-switcher nav a, .concept-switcher nav button { font-size: 13px; padding: 0 14px; }
        .cz-watermark { opacity: .10; }
      }
    

/* ── the pre-render snapshot ────────────────────────────────────────────────────────
   The homepage's own words, written into the HTML by prerender.py so that a crawler that
   runs no JavaScript can read them (GPTBot, ClaudeBot and PerplexityBot all do not, and
   the served HTML used to contain zero characters of body text). React clears #root when
   it mounts, so this is what a human sees for the ~300ms before the app paints and never
   again. It therefore has to look like a page on its own, at every width, with no bundle
   classes involved. */
.cz-pre{ color:#263f57; background:#fffaf6; }
.cz-pre-hero{
  min-height:100svh; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:12svh 6vw 8svh; gap:18px;
}
.cz-pre-kicker{
  font:600 .82rem/1.5 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:.09em; text-transform:uppercase; color:#3f739d; max-width:52ch;
}
.cz-pre-hero h1{
  font:400 clamp(2.4rem,6.2vw,4.6rem)/1.06 "Cormorant Garamond",Georgia,serif;
  color:#10294b; margin:0; max-width:20ch;
}
.cz-pre-hero p{
  font:400 1.05rem/1.6 "Space Grotesk",system-ui,sans-serif;
  color:#5f7282; margin:0; max-width:46ch;
}
.cz-pre-rest{ max-width:44rem; margin:0 auto; padding:0 6vw 14svh; }
.cz-pre-rest h1,.cz-pre-rest h2,.cz-pre-rest h3{
  font:400 clamp(1.5rem,3vw,2.1rem)/1.2 "Cormorant Garamond",Georgia,serif;
  color:#10294b; margin:2.2rem 0 .6rem; max-width:26ch;
}
.cz-pre-rest .cz-pre-kicker{ display:block; margin:2.6rem 0 .3rem; }
.cz-pre-rest p{
  font:400 1rem/1.65 "Space Grotesk",system-ui,sans-serif;
  color:#5f7282; margin:0 0 .9rem;
}

/* Chris, 2026-08-20: footer contact line */
.cz-foot-contact{font-size:12.5px;letter-spacing:.02em;opacity:.8;margin-top:10px}
.cz-foot-contact a{color:inherit;text-decoration:none}
.cz-foot-contact a:hover{text-decoration:underline}