/* D-085 Rohit's Loom follow-ups, home area (docs/feedback/rohit-loom-2026-10-29.md). Loaded last on every route except /book-call. */

/* ── Closing CTA (every page): the heading sets on two lines and stops short of the panel's top-right squares
   (zamp.com's forest-panel-tr.svg, 151px wide at native size; 87px of it reach into the 64px padding box). Loom 3:57, 7:00.
   Phones drop the top-right squares, so the heading takes the full width there. */
html body:not(#zl) .z9-cta__panel h2 { max-width: min(33rem, calc(100% - 6.5rem)) !important; text-wrap: balance; }
@media (max-width: 767px) { html body:not(#zl) .z9-cta__panel h2 { max-width: none !important; } }

/* ── FAQ "Book a demo" (homepage, and the product FAQs that now carry it): solid black, not an outline. Loom 3:39, 6:02. */
html body:not(#zl) main .z6-faq-cta { display: inline-flex; align-items: center; justify-content: center; background: #000 !important; color: #fff !important; border: 0 !important; box-shadow: none !important; text-decoration: none; }
html body:not(#zl) main .z6-faq-cta:hover { background: #323232 !important; color: #fff !important; }
html body:not(#zl) main .z6-faq-cta:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
html body:not(#zl) main .faq_content-left .z6-faq-cta { margin-top: 32px !important; }

/* ── Filing statuses: one colour each on every graphic (hero dashboard, bento, integrations, product graphics).
   Design System v4 has no orange, so In review takes the system's attention yellow; Prepared is the neutral beige;
   Filed is mint. Each chip carries one fill, never yellow and green together. Renderers set data-st. Loom 2:09. */
html body:not(#zl) [data-st="review"] { background: #ffec72 !important; color: #000 !important; box-shadow: none !important; }
html body:not(#zl) [data-st="prepared"] { background: #e6e1da !important; color: #000 !important; box-shadow: none !important; }
html body:not(#zl) [data-st="filed"] { background: #afecdb !important; color: #183e3d !important; box-shadow: none !important; }
/* The hero's other pending state ("Reviewed") shares Prepared's beige, so the table shows two fills, not three beiges. */
html body:not(#zl) .zw-pill--quiet { background: #e6e1da; color: #000; }

/* ── "Everything sales tax asks of you, done for you.": the heading on two lines, breaking at the comma, so the
   lead and button sit level with it instead of floating beside a three-line heading. Loom 1:52. */
@media (min-width: 768px) {
  html body:not(#zl) .z11-bento .z3-head h2 { max-width: 15em !important; text-wrap: wrap !important; }
}

/* ── Notice management: the letter and the earlier notices fill the art area (no dead space). Loom 2:03. */
html body:not(#zl) .z11-cell--notice .z16-art { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
html body:not(#zl) .z11-cell--notice .z4-panel { width: 100%; max-width: 400px !important; }
/* 768–1100px pairs the notice card with exemptions (home-v8 grid), where the letter alone matches its height. */
@media (min-width: 768px) and (max-width: 1100px) { html body:not(#zl) .zl-notice-log { display: none; } }
html body:not(#zl) .zl-notice-log ul { list-style: none; margin: 0; padding: 0; }
html body:not(#zl) .zl-notice-log li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--z3-rule, #e6e1da); }
html body:not(#zl) .zl-notice-log li:first-child { border-top: 0; }
html body:not(#zl) .zl-notice-log b { display: block; font: 500 var(--g-text, 14px)/1.3 var(--z-font-body); color: #000; }
html body:not(#zl) .zl-notice-log small { display: block; margin-top: 2px; font: 400 var(--g-meta, 12px)/1.3 var(--z-font-body); color: var(--z3-body, #323232); }

/* ── Integrations grid: the highlight follows the pointer. While a tile is hovered (or focused), the auto-cycling
   highlight steps aside and the hovered tile takes it; with no pointer on the grid it keeps cycling. Loom 3:01. */
html body:not(#zl) .z3-hub__tiles:has(.z3-hub__tile:is(:hover, :focus-visible)) .z3-hub__tile.is-pulse:not(:hover):not(:focus-visible) { outline-color: #e6e1da; box-shadow: none; }
html body:not(#zl) .z3-hub__tiles:has(.z3-hub__tile:is(:hover, :focus-visible)) .z3-hub__tile.is-pulse:not(:hover):not(:focus-visible) img { filter: grayscale(1); opacity: .85; }
html body:not(#zl) .z3-hub__tile:is(:hover, :focus-visible) { outline: 1px solid var(--z3-green, #183e3d) !important; outline-offset: -1px; box-shadow: inset 0 -3px 0 var(--z3-mint, #afecdb); }
html body:not(#zl) .z3-hub__tile:is(:hover, :focus-visible) img { filter: none; opacity: 1; }

/* ── /products/* (the Webflow products collection id on <html>): the stacked converge diagram (half-width cards under ~480px) sets the Zamp hub and the result on
   the graphic's centre line under the sources, instead of a left-aligned row. Loom 5:49. */
@container (max-width: 480px) {
  html[data-wf-collection="69fa0b8721eba44ac19067d0"] body:not(#zl) .z-hub-art .zb-conv { grid-template-columns: minmax(0, 1fr); grid-template-areas: "src" "hub" "link" "out"; justify-items: center; row-gap: 0; }
  html[data-wf-collection="69fa0b8721eba44ac19067d0"] body:not(#zl) .z-hub-art .zb-conv__src { justify-self: stretch; margin-bottom: 32px; }
  html[data-wf-collection="69fa0b8721eba44ac19067d0"] body:not(#zl) .z-hub-art .zb-conv__link { width: 2px; height: 20px; }
  html[data-wf-collection="69fa0b8721eba44ac19067d0"] body:not(#zl) .z-hub-art .zb-conv__out { justify-items: center; text-align: center; }
}

/* ── Managed band checklist ("Real tax experts…", product and feature pages): native checkboxes the reader can tick
   and untick; the square forest tick follows the input's state. Loom 5:37. */
html body:not(#zl) .zl-check { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font: inherit; color: inherit; }
html body:not(#zl) .zl-check input { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
html body:not(#zl) .zl-check i { transition: background .15s, color .15s, box-shadow .15s; }
html body:not(#zl) .zl-check input:not(:checked) + i { background: #fff; color: transparent; box-shadow: inset 0 0 0 1.5px var(--z3-green, #183e3d); }
html body:not(#zl) .zl-check input:focus-visible + i { outline: 2px solid #000; outline-offset: 2px; }
html body:not(#zl) .zl-check:hover input:not(:checked) + i { background: rgba(175, 236, 219, .45); }
@media (prefers-reduced-motion: reduce) { html body:not(#zl) .zl-check i { transition: none; } }