/* ══════════════════════════════════════════════════════════════════════════════
   Chimzee override: late stylesheet
   Extracted from the tail of assets/main-9037a789e0.css 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.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Appended last on purpose: the bundle carries its own @media (width<=700px) rule for
   this grid further down, and a mobile rule written above it loses.
   Chris, 2026-08-17: "for those three cards on mobile and desktop, they must always be
   three to the side." The tablet-two and phone-one steps that used to live here are gone;
   three across at every width, and the card itself is what adapts. He also asked for them
   to sit higher off the bottom, to be centred, and to have real padding. */
@media (max-width:860px){
  .alert-stream{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
.alert-stream{
  bottom:12%!important;
  width:min(1040px,92vw)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
.alert-stream article{align-content:center!important;padding:14px 16px!important}
/* Chris, 2026-08-17, on a phone: "when you open it up, all the dots are kind of blurred and
   stretched, so when you scroll down, we see the actual animation."
   The stage is height:100vh. On a phone 100vh is the LARGE viewport, the one you only get
   once the address bar has collapsed, so on arrival the box is taller than the screen and
   the canvas inside it is sized for a box that is not the one you are looking at. The first
   scroll collapses the bar, the sizes finally agree, and it snaps into focus. svh is the
   small viewport: it does not move when the bar does, so the box is right from the first
   frame and there is nothing to snap. */
@media (max-width:860px){
  .sticky-stage{height:100svh!important}
}
@media (max-width:860px){
  .alert-stream{bottom:max(92px,calc(env(safe-area-inset-bottom) + 74px))!important;gap:7px!important}
  /* Stacked inside each card so three of them still read at 390px: the badge sits over the
     line rather than stealing a third of the width from it. */
  .alert-stream article{
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center!important;text-align:center!important;
    gap:6px!important;padding:11px 8px!important;min-height:0!important;
  }
  .alert-stream article>span{width:26px!important;height:26px!important}
  .alert-stream article svg{width:12px!important;height:12px!important}
  .alert-stream small{font-size:7px!important;letter-spacing:.06em!important}
  .alert-stream p{font-size:9.5px!important;line-height:1.3!important;margin-top:2px!important}
}

/* ── phone legibility, appended last so it wins ──────────────────────────────────
   Measured across five phones (SE 375x667 to 14 Plus 428x926). The bundle sets these
   in its own @media (width<=700px) block further up, so an !important in the page's
   inline <style> loses to it on equal specificity. */
@media (max-width:860px){
  /* 7px and 9.5px, against 15px body copy on the same screen. */
  .alert-stream small{font-size:9px!important;letter-spacing:.06em!important}
  .alert-stream p{font-size:11px!important;line-height:1.28!important;margin-top:3px!important}
  .alert-stream article{padding:10px 6px!important}
  /* The hero kicker was 7px. */
  .story-copy>span:first-child{font-size:9px!important;letter-spacing:.12em!important}
  /* "52 systems - 6 working groups" sat across the headline of the panel behind it,
     measured 162x29 on every phone. It is a caption on a decorative cloud; the
     headline is the page. */
  .tool-count,.cluster-label{display:none!important}
}

/* The example dashboards pack their labels down to 4.7px on a phone, which stops reading as a
   dashboard and starts reading as a rendering fault. Lifted to a floor that is still small
   enough to keep the dense grid intact; checked afterwards for clipping and overflow. */
@media (max-width:860px){
  .coda-card small{font-size:7.5px!important;letter-spacing:.04em!important}
  /* The <em> labels are NOT touched. Bumping them ran the numbered step row out of its own
     width: "1 UNDERSTAND" grew until it collided with "2 MAP", which the ship gate caught.
     They are status chips and step badges packed into a dense example dashboard and they have
     no room to grow. Lift what has room; leave what does not rather than break the grid. */
}

/* ── readable for the people who are actually reading it ─────────────────────────
   Chris, 2026-08-18: "our demographic is probably more in the 40s, 50s and 60s ... it
   doesn't matter how good our content is, if people can't read it it's not going to be
   effective." Measured before this: the hero kicker and the scroll cue were 9px, the
   live-action card labels 8px, the promise list 14px, against 17px body copy.

   Everything here is in rem, deliberately. The site had 129 px font sizes and NOT ONE rem,
   which means a reader who has set a larger default type size in their browser was getting
   nothing at all from it: px ignores that setting entirely. (Browser zoom, ctrl-plus, has
   always worked, because it scales everything.) In rem, the text below follows whatever they
   have chosen, at whatever size they chose it.
   1rem = 16px at the browser default, so the px equivalents are noted alongside. */
@media (min-width:861px){
  .story-copy>span:first-child{font-size:.75rem!important;letter-spacing:.1em!important}   /* 9  -> 12 */
  .story-copy>p{font-size:1.1875rem!important;line-height:1.55!important}                  /* 17 -> 19 */
  .story-copy small{font-size:.6875rem!important;letter-spacing:.12em!important}           /* 9  -> 11 */
  .alert-stream small{font-size:.625rem!important;letter-spacing:.08em!important}          /* 8  -> 10 */
  .alert-stream p{font-size:.9375rem!important;line-height:1.35!important}                 /* 13 -> 15 */
  .free-first-look>span{font-size:.6875rem!important;letter-spacing:.1em!important}        /* 9  -> 11 */
  .free-first-look>p{font-size:1rem!important;line-height:1.6!important}                   /* 14 -> 16 */
  .coda-copy>p{font-size:1.1875rem!important;line-height:1.55!important}                   /* 18 -> 19 */
}
@media (max-width:860px){
  .story-copy>span:first-child{font-size:.6875rem!important;letter-spacing:.09em!important} /* 9  -> 11 */
  .story-copy>p{font-size:1.0625rem!important;line-height:1.5!important}                    /* 15 -> 17 */
  .story-copy small{font-size:.625rem!important}                                            /* 9  -> 10 */
  .alert-stream small{font-size:.5625rem!important;letter-spacing:.05em!important}           /* 9  -> 9  */
  .alert-stream p{font-size:.75rem!important;line-height:1.3!important}                      /* 11 -> 12 */
  .free-first-look>span{font-size:.625rem!important}                                         /* 9  -> 10 */
  .free-first-look>p{font-size:.9375rem!important;line-height:1.6!important}                 /* 14 -> 15 */
  .coda-copy>p{font-size:1.0625rem!important;line-height:1.55!important}                     /* 16 -> 17 */
}

/* The last of the sizes Chris named: the promise kicker, and the nav at the top right. */
@media (min-width:861px){
  .free-first-look>span{font-size:.75rem!important}            /* 11 -> 12 */
  .concept-switcher nav a,
  .concept-switcher nav button{font-size:.9375rem!important}   /* 14 -> 15 */
}
@media (max-width:860px){
  .free-first-look>span{font-size:.6875rem!important}          /* 10 -> 11 */
}

/* The pre-boot copy of the opening screen. Fixed and centred so it lands where the real
   one does; it is removed the instant the app paints its own. */
#cz-preboot{
  position:fixed; inset:0; z-index:4; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
#cz-preboot .story-deck{ position:static !important; width:min(1100px,92vw); }
#cz-preboot .story-copy{
  position:static !important; opacity:1 !important; visibility:visible !important;
  transform:none !important; translate:none !important; width:auto !important; max-width:none !important;
}

/* ── the example dashboards, rebuilt for a phone ──────────────────────────────────
   Chris, 2026-08-18: the labels were down to 4.7px and 5.5px on a phone. They were that
   small because a four-column grid was being squeezed into 262px, so the type had to
   shrink to fit rather than the layout changing. On a phone the columns become stacked
   label-and-value lines, which is the shape a phone actually wants, and the labels get a
   size a person can read. Desktop is untouched: the dashboard look is the point there. */
@media (max-width:860px){
  /* competitor rows: four columns of 57px become one column of lines */
  .competitor-analysis-row > div{ grid-template-columns:1fr!important; gap:0!important; }
  .competitor-analysis-row > div > span{
    display:flex!important; grid-template-columns:none!important;
    align-items:baseline; justify-content:space-between; gap:12px;
    padding:4px 0; border-bottom:1px solid rgba(38,63,87,.08);
  }
  .competitor-analysis-row > div > span:last-child{ border-bottom:0; }
  .competitor-analysis-row em{ font-size:9.5px!important; letter-spacing:.06em!important; }

  /* every other packed grid in these cards gets the same treatment: one column, and each
     cell becomes a label on the left with its value on the right. Found by walking the cards
     and listing everything still under 9px, rather than by guessing which ones mattered. */
  .website-analysis-metrics,
  .customer-analysis-summary,
  .customer-analysis-metrics,
  .marketing-analysis-summary,
  .marketing-analysis-metrics,
  .competitor-analysis-baseline > div,
  .implementation-steps{ grid-template-columns:1fr!important; }
  .website-analysis-metrics > *,
  .customer-analysis-summary > *,
  .customer-analysis-metrics > *,
  .marketing-analysis-summary > *,
  .marketing-analysis-metrics > *,
  .competitor-analysis-baseline > div > *,
  .marketing-analysis-performance .marketing-performance-row{
    display:flex!important; grid-template-columns:none!important;
    align-items:baseline; justify-content:space-between; gap:12px;
    padding:3px 0;
  }
  /* the numbered step row: it was this that ran out of its width when the type was lifted
     without changing the layout, and the ship gate caught "1 UNDERSTAND" colliding with
     "2 MAP". Stacked, each step has the whole width to itself. */
  .implementation-steps > *{ display:flex!important; align-items:baseline; gap:8px; padding:3px 0; }

  /* the remaining packed rows, found the same way: a bar chart, the marketing performance
     pair, and two step tracks, all squeezing three or four columns into 240px. */
  .customer-analysis-history{ grid-template-columns:1fr!important; }
  .customer-history-row{
    grid-template-columns:minmax(0,1fr) auto!important; align-items:baseline; gap:10px; padding:3px 0;
  }
  .customer-history-row > *:nth-child(2){ display:none!important; }   /* the bar, no room for it here */
  .marketing-analysis-performance{ grid-template-columns:1fr!important; }
  .marketing-analysis-performance section{ grid-template-columns:1fr!important; }
  .workflow-track{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:6px!important; }

  /* with the layouts opened up, nothing has to be crushed any more */
  .coda-card small, .coda-card em{ font-size:9.5px!important; letter-spacing:.05em!important; }
  /* the example-view disclaimer sat at 9px, under the readable floor for the audience */
  .coda-group-note{ font-size:11px!important; line-height:1.4!important; }
  /* the last of them are <b>, <i> and <p>, not <small> or <em>, which is why a rule aimed at
     the latter two kept missing. Named individually rather than blanketing every tag in the
     card, because some of these cards hold real body copy that must not be shrunk to match. */
  .coda-card .customer-history-row b,
  .coda-card .marketing-performance-row b,
  .coda-card .implementation-progress p,
  .coda-card .implementation-steps i,
  .coda-card .workflow-track i,
  .coda-card .workflow-track span,
  .coda-card .customer-analysis-history small,
  /* the last four, enumerated by walking every card rather than chased one at a time */
  .coda-card .workflow-guardrail strong,
  .coda-card .workflow-outcome span,
  .coda-card .workflow-outcome strong,
  .coda-card span > b{ font-size:9.5px!important; line-height:1.35!important; }
}

  /* Stacking the metric cells halved their height and left the old 13-15px corner on a 36-40px
     box, which the ship gate reads as a corner out of proportion and which looks like a pill
     rather than a card. The radius comes down with the box. */
@media (max-width:860px){
  .website-analysis-metric,
  .customer-analysis-metric,
  .marketing-analysis-metric,
  .customer-analysis-summary > *,
  .marketing-analysis-summary > *,
  .website-analysis-metrics > *,
  .customer-analysis-metrics > *,
  .marketing-analysis-metrics > *{
    border-radius:6px!important;
    /* and a little room, so a single line of label and value reads as a row rather than a
       squashed chip: at 390 these had collapsed to 24px tall */
    min-height:30px; padding:5px 9px!important;
  }
}

/* The time slots stop scrolling sideways out of the booking card on a phone.
   Below 700px the bundle turns .booking-slots into a horizontal scroller
   (grid-auto-flow:column with grid-auto-columns:minmax(88px,1fr)), and a 1fr track
   cannot shrink under its 88px floor, so five slots always measure 468px. Measured
   live at 390x844: the card gives them 348px, so "3:30 PM" was sliced at the card
   edge (right 391 against the card at 384) and "4:30 PM ASK" sat entirely off the
   viewport at 485. At 360 it is worse. Nothing signals the row scrolls, and it sits
   inside a dialog that already scrolls vertically, so the two gestures compete.
   Every day the calendar returns carries the same five buttons, so three columns
   over two rows shows all of them with no gesture at all. Same buttons, same styling,
   same order. The negative side margin and the bottom padding existed to hide the
   scrollbar and go with it. */
@media (max-width:700px){
  .booking-slots{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    overflow-x:visible;
    scroll-snap-type:none;
    margin:7px 0 0;
    padding:2px 0 0;
  }
}

/* ── Real scroll for the story cards (Chris, 2026-08-19) ─────────────────────
   "I want the text instead to scroll like it's actually scrolling, with only the
   background animating ... I don't want it to move, scroll up, scroll down, or change
   the color. I want it to feel like a real scroll."
   The bundle drives the four .story-copy cards as a sticky deck: inline translate,
   scale/tilt vars and opacity fades swap them in one fixed spot. These rules pin the TEXT:
   every card sits in normal flow at full ink, and the scroll moves the reader past them.
   The sticky stage and its background field keep their own animation untouched. */
/* One text per screen: each card owns an equal quarter of the runway (taller than a
   viewport), centred in it, so the next text only arrives after a full page transition. */
.immersive-story .story-deck {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: grid !important;
  /* The first text owns exactly the first screen and sits centred between the header and
     the bottom of the page (Chris: it was starting off-centre); the rest split the runway. */
  /* Tight pitch: the next text is already arriving as the last one leaves, so no screen
     between the four is ever empty and each still gets its full-page moment. */
  grid-template-rows: 100vh repeat(3, 88vh) !important;
  align-content: stretch !important;
  gap: 0 !important;
  padding: 0 !important;
  will-change: transform;
}
/* centred on the PAGE, nav spacing ignored (Chris, 2026-08-19) */
.immersive-story .story-copy {
  align-self: center !important;
}
/* The stage stays sticky and untouched, so every background layer keeps its scroll-driven
   animation exactly as built. Only the TEXT deck is counter-translated (a few lines in
   cz-overrides.js) so the copy rides the document like real content. */
/* Chris: "work faster so it feels like a scroll and you know what's coming next." The
   runway ends just past the fourth text, so the background story compresses into the same
   distance as the copy and the next section is already arriving as the last text leaves. */
.immersive-story { height: calc(100vh + 3 * 88vh + 30vh) !important; }
.immersive-story .story-copy {
  position: relative !important;
  inset: auto !important;
  z-index: 30 !important;   /* above every stage layer: the Clarity/Draft/Fit cards were
                               drawing over the copy (progress-rail sits at 25) */
  width: min(880px, 92vw) !important;
  max-width: 92vw !important;
  margin-inline: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  translate: 0 0 !important;
  transform: none !important;
  rotate: none !important;
  scale: 1 !important;
  pointer-events: auto !important;
}
.immersive-story .story-copy * {
  opacity: 1 !important;
}

/* the footer's call to action, bottom right (Chris, 2026-08-19) */
footer.coda-footer { position: relative; }
.cz-foot-cta {
  position: absolute; right: 28px; bottom: 22px;
  font: 650 15px/1 "Space Grotesk", system-ui, sans-serif;
  color: #fff; background: #263f57; border: 0; cursor: pointer;
  padding: 14px 22px; border-radius: 20px;
  box-shadow: 0 10px 26px rgba(38,63,87,.28);
}
.cz-foot-cta:hover { background: #10294b; }
@media (max-width: 760px) {
  .cz-foot-cta { position: static; display: block; margin: 18px auto 4px; }
}

/* ── the booking modal reads SOLID (Chris, 2026-08-19) ───────────────────────
   "there's just a bit too much transparency. It's really hard to see... this has to be a
   bit different than the rest." The page was bleeding through the sheet and the day/time
   cells. Solid paper for the panel, solid white cells, a firm dim behind it; the three
   moves stay exactly as they are. */
.booking-backdrop { background: rgba(16, 25, 38, .45) !important;
  -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; }
.booking-sheet, .booking-panel, .booking-modal, [class*="booking-shell"] {
  background: #FDFDFB !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: 0 30px 90px rgba(16, 25, 38, .35) !important;
}
.booking-days > *, .booking-times > *, [class*="booking-day"], [class*="booking-slot"] {
  background: #ffffff !important;
  border: 1px solid rgba(38, 63, 87, .22) !important;
}
[class*="booking-day"][class*="on"], [class*="booking-slot"][class*="on"],
.booking-days .selected, .booking-times .selected {
  border-color: #263f57 !important; box-shadow: inset 0 0 0 1px #263f57 !important;
}

/* ── Booking overlay pass (Chris, 2026-08-26): "TIME REACH INVITE need to be much
   bigger, the time slots don't have a liquid glass CSS and the times hit the border,
   the background needs to be 50% lighter, everything stays in the window." ── */
.booking-progress button{font-size:13.5px !important;padding:13px 18px !important;
  letter-spacing:.16em !important}
.booking-days button, .booking-slots button{
  background:rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.35) !important;
  backdrop-filter:blur(14px) saturate(1.35) !important;
  border:1px solid rgba(38,63,87,.18) !important;
  box-shadow:0 8px 24px rgba(38,63,87,.08) !important}
.booking-slots button{padding:13px 20px !important;font-size:14px !important;
  border-radius:16px !important}
.booking-slots{gap:10px !important}
.booking-ambient{opacity:.5 !important}
/* compact: the dialog holds itself inside the window instead of pushing the page */
.booking-dialog{max-height:calc(100vh - 20px) !important;overflow:auto !important}
.booking-head h2{font-size:clamp(24px,3.4vw,40px) !important;line-height:1 !important;
  margin:8px 0 0 !important}
.booking-step-copy h3{font-size:clamp(19px,2.4vw,26px) !important;margin:2px 0 4px !important}
.booking-step-copy small{font-size:9.5px !important}
.booking-step-copy p{margin:2px 0 10px !important;font-size:13.5px !important}
.booking-step{margin-top:10px !important}
.booking-days{margin-bottom:10px !important}

/* Chris, 2026-08-26: "I still have a box border around the times" - the container box
   goes; the glass buttons stand on their own. And "Time reach invite needs to be
   strong. It's too watered out." */
.booking-days, .booking-slots{border:0 !important;background:transparent !important;
  padding:0 !important}
.booking-progress button{color:#263f57 !important;font-weight:800 !important;
  opacity:1 !important}
.booking-progress button[disabled]{color:rgba(38,63,87,.55) !important}
.booking-progress button.active{background:#263f57 !important;color:#fff !important;
  border-color:#263f57 !important}
.booking-progress button.active i{border-color:#fff !important;background:#fff !important}

/* Chris, 2026-08-26: the invitation step's text is all too small and hard to read. */
.booking-field span{font-size:12.5px !important;letter-spacing:.12em !important;
  font-weight:800 !important;color:#263f57 !important}
.booking-field input, .booking-field textarea{font-size:16px !important;
  padding:13px 14px !important;color:#10294b !important}
.booking-field input::placeholder, .booking-field textarea::placeholder{
  color:rgba(38,63,87,.45) !important}
.booking-pillars legend{font-size:15px !important;font-weight:700 !important;
  color:#263f57 !important}
.booking-pillars button b{font-size:15px !important}
.booking-pillars button small{font-size:13px !important;color:#44525F !important}
.booking-methods button b{font-size:16px !important}
.booking-methods button small{font-size:13px !important;color:#44525F !important}
.booking-summary span{font-size:14px !important}
.booking-note{font-size:13px !important}
.booking-primary{font-size:15px !important;padding:14px 24px !important}

/* Chris, 2026-08-26: the four reach cards "stronger. Maybe darker blue with lighter
   text" - deep navy cards, light type, the chosen one ringed in the green. */
.booking-methods button{background:#263f57 !important;border:1px solid #263f57 !important;
  color:#fff !important;box-shadow:0 10px 26px rgba(16,41,75,.22) !important}
.booking-methods button b{color:#fff !important}
.booking-methods button small{color:rgba(255,255,255,.78) !important}
.booking-methods button span{color:#a8c6ba !important}
.booking-methods button:hover{background:#2f4c69 !important}
.booking-methods button.active{background:#10294b !important;
  box-shadow:0 0 0 2.5px #2e6b52, 0 12px 30px rgba(16,41,75,.3) !important}
.booking-methods button i{border-color:rgba(255,255,255,.6) !important}
.booking-methods button.active i{background:#2e6b52 !important;
  border-color:#2e6b52 !important}

/* Chris, 2026-08-26: "Get rid of time reach invite ... the three steps don't add
   anything." The summary chip with Change is the wayfinding now. */
.booking-progress{display:none !important}

/* Chris, 2026-08-26: the step header ("FIND YOUR OPENING / Pick a time that works /
   Twenty minutes...") "needs to be super readable." The dead progress bar paid for
   the room. */
.booking-step-copy small{font-size:12px !important;letter-spacing:.18em !important;
  font-weight:800 !important;color:#2e6b52 !important}
.booking-step-copy h3{font-size:clamp(26px,3vw,34px) !important;line-height:1.1 !important;
  margin:4px 0 8px !important;color:#10294b !important}
.booking-step-copy p{font-size:16px !important;line-height:1.5 !important;
  color:#44525F !important;margin:0 0 14px !important}

/* Chris, 2026-08-26: less air under "Book it in three easy moves." */
.booking-head{margin-bottom:2px !important;padding-bottom:0 !important}
.booking-head h2{margin-bottom:0 !important}
.booking-summary{margin-top:8px !important}
.booking-step{margin-top:8px !important}

/* Chris, 2026-08-26, conversion pass: selected day and time go GREEN; the summary chip
   is bigger and tighter to the header; inputs stop being washed out; Back sits quietly
   under Continue. "This is a booking form. We need to try to get 100% booking." */
.booking-days button.active, .booking-slots button.active{
  background:#2e6b52 !important;border-color:#2e6b52 !important;color:#fff !important;
  box-shadow:0 10px 26px rgba(46,107,82,.35) !important}
.booking-days button.active small, .booking-days button.active b,
.booking-days button.active span{color:#fff !important}
.booking-summary{font-size:16px !important;padding:14px 16px !important;
  margin:10px 0 6px !important}
.booking-summary span{font-size:16px !important}
.booking-summary b{font-size:17px !important;color:#10294b !important}
.booking-field input, .booking-field textarea{
  border:1.5px solid rgba(38,63,87,.45) !important;background:#fff !important}
.booking-field input:focus, .booking-field textarea:focus{
  border-color:#2e6b52 !important;box-shadow:0 0 0 3px rgba(46,107,82,.18) !important}
.booking-field span{font-size:13px !important;color:#10294b !important}
.booking-backline{background:none;border:0;color:#44525F;font:inherit;font-size:14px;
  font-weight:650;cursor:pointer;padding:10px 2px;margin-top:2px}
.booking-backline:hover{color:#10294b}