/* lab.css */
/* =====================================================================
   Diversicom Design Lab (staging only)
   Every rule is scoped to a token on <html data-lab="...">, so with the
   panel set to "Original" this file changes nothing on the page.
   Round 1 (the de-templating ideas) reaches all 34 pages; the numbered
   notes below match the Round 3 refinement spec.
   ===================================================================== */

:root {
  --lab-ultra: #010ed0;       /* the logo's real brand blue; white text on it is 9.6:1 */
  --lab-ultra-hover: #1a26e6;
  --lab-navy: #0a0d31;        /* the logo's real deep navy */
  --lab-onnavy-link: #cfd6ff; /* links and accents on navy: never ultramarine text on navy */
}

/* stand-in for the hero <em> when the scramble is skipped (see lab.js); matches the original style.
   It only exists while type or calm is on; lab.js puts the original <em> back when both go off. */
:root[data-lab] .hero h1 .dclab-em { font-style: normal; color: var(--cyan); }

/* ---------- 1. Headline typeface (body stays Inter) ---------- */
:root[data-lab~="type"] :is(h1, h2, h3, h4, .font-display, .stat-num, .hero-proof-num, .why-stat-num, .crew-card b, .team-name, .logo-text,
  .faq-item summary, .industry-visual .num, .cs-stat > :first-child, .pricing-card .price, .result-total, .about-stat > :first-child) {
  font-family: var(--lab-face) !important;
}
:root[data-lab~="type-mona"] { --lab-face: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; }
:root[data-lab~="type-mona"] :is(h1, h2, h3, h4, .font-display, .stat-num, .hero-proof-num, .why-stat-num) { font-stretch: 125%; font-weight: 750; letter-spacing: -0.012em; }
:root[data-lab~="type-mona"] :is(.industry-visual .num, .cs-stat > :first-child, .pricing-card .price, .result-total, .about-stat > :first-child) { font-stretch: 125%; font-weight: 750; letter-spacing: -0.015em; }
:root[data-lab~="type-mona"] h1 { font-size: clamp(2.05rem, 4.35vw, 3.75rem); line-height: 1.04; }
/* On phones the wider numerals wrap the four hero stats three and one; set them two by two instead. */
@media (max-width: 600px) {
  :root[data-lab~="type"] .hero-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
}
/* Interior page titles sit in a 640px copy column beside a visual, so the wide face gets a lower cap there:
   every interior hero h1 runs three lines or fewer, with no single word left on the last line, at 1100 to 1440. */
:root[data-lab~="type-mona"] main > section:first-of-type:not(.hero) h1 { font-size: clamp(2.05rem, 3.5vw, 2.95rem); }
/* below 1200px Chrome stops balancing a title with a forced break ("...in hours, not / weeks."), so it avoids a lone last word instead */
@media (min-width: 481px) and (max-width: 1199px) {
  @supports (text-wrap: pretty) { :root[data-lab~="type"] main > section:first-of-type:not(.hero) h1:has(> br) { text-wrap: pretty; } }
}
:root[data-lab~="type-mona"] h2 { line-height: 1.08; }
:root[data-lab~="type-mona"] h3 { font-stretch: 110%; font-weight: 650; letter-spacing: -0.005em; }
/* FAQ questions read as questions, not as bold UI labels */
:root[data-lab~="type-mona"] .faq-item summary { font-stretch: 110%; font-weight: 650; letter-spacing: -0.004em; }

:root[data-lab~="type-familjen"] { --lab-face: 'Familjen Grotesk', 'Inter Tight', system-ui, sans-serif; }
:root[data-lab~="type-familjen"] :is(h1, h2, h3, h4, .font-display) { font-weight: 700; letter-spacing: -0.03em; }
:root[data-lab~="type-familjen"] h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 0.98; }
:root[data-lab~="type-familjen"] .faq-item summary { font-weight: 600; }

:root[data-lab~="type-stack"] { --lab-face: 'Stack Sans Headline', 'Inter Tight', system-ui, sans-serif; }
:root[data-lab~="type-stack"] :is(h1, h2, h3, h4, .font-display) { font-weight: 650; letter-spacing: -0.02em; }
:root[data-lab~="type-stack"] h1 { line-height: 1.02; }
:root[data-lab~="type-stack"] .faq-item summary { font-weight: 600; }

/* hold the hero headline to three lines: "IT that answers / in 15 seconds, / not 15 hours." */
:root[data-lab~="type"] .hero h1 { max-width: 9.8em; }
:root[data-lab~="type-mona"] .hero h1 { max-width: 10.4em; }
:root[data-lab~="type"] .hero h1 .dclab-keep { white-space: nowrap; }
/* The Clarity demo's app bar title is app chrome, not a page title: it keeps its own size, width and face. */
:root[data-lab~="type"] header.top.top h1 { font-family: 'Inter Tight', system-ui, sans-serif !important; font-size: 1.12rem; font-stretch: 100%; font-weight: 800; line-height: normal; letter-spacing: normal; max-width: none; }
@media (max-width: 560px) { :root[data-lab~="type"] header.top.top h1 { font-size: 1rem; } }

/* 14. Buttons, fields and tabs inherit the page face instead of the browser's Arial.
   :where() keeps this at low specificity, so any idea that styles its own controls still wins.
   ARIA's widget and the lab panel live outside main and the header, so they are untouched. */
:root[data-lab~="type"] :where(main, .site-header) :where(button, input, select, textarea) { font-family: inherit; }

/* 16. Phones: page and section headlines narrower and smaller, so a service page title fits in three lines.
   Only the page's own h1 and section heads: headings inside cards, forms, the 404 plate and other ideas'
   components keep their own sizes. */
@media (max-width: 480px) {
  :root[data-lab~="type-mona"] main :is(h1, .section-header > h2):not([class^="dclab-"], [style*="font-size"], main [class^="dclab-"] *, form *, [class*="card"] *, .nf-inner *) { font-stretch: 108%; }
  :root[data-lab~="type-mona"] main h1:not([class^="dclab-"], [style*="font-size"], main [class^="dclab-"] *, form *, [class*="card"] *, .nf-inner *) { font-size: clamp(1.9rem, 7.4vw, 2.4rem) !important; line-height: 1.06; }
  :root[data-lab~="type-mona"] main .section-header > h2:not([class^="dclab-"], [style*="font-size"], main [class^="dclab-"] *, form *, [class*="card"] *) { font-size: 1.6rem !important; line-height: 1.1; }
}

/* the two-up stats strip on phones: wide numerals must not push the page sideways (revive overflowed) */
@media (max-width: 640px) {
  :root[data-lab~="type"] .stats-bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root[data-lab~="type"] .stat-item { min-width: 0; padding: 24px 12px; }
  :root[data-lab~="type"] .stat-num { font-size: 2rem; }
  :root[data-lab~="type-mona"] .stat-num { font-stretch: 112%; }
  :root[data-lab~="type"] .stat-label { overflow-wrap: anywhere; }
  /* a one-word stat ("Nationwide" on healthcare) cannot wrap, so it sets narrower and smaller */
  :root[data-lab~="type"] .stat-num.stat-word { font-size: clamp(1.3rem, 6.2vw, 1.6rem); letter-spacing: -0.01em; }
  :root[data-lab~="type-mona"] .stat-num.stat-word { font-stretch: 100%; }
}

/* 17. Balanced headlines, no one-word last lines in body copy */
@supports (text-wrap: balance) {
  :root[data-lab~="type"] :is(h1, h2, h3) { text-wrap: balance; }
  :root[data-lab~="type"] main p { text-wrap: pretty; }
}
/* 18. A phone number never breaks across lines */
:root[data-lab~="type"] a[href^="tel:"] { white-space: nowrap; }

/* ---------- 2. Plain-spoken (every page) ---------- */
:root[data-lab~="plain"] .hero-toprow { display: none !important; }
/* the homepage's "15 seconds" keeps the live site's cyan (Josh, 10/5); other heroes stay one color */
:root[data-lab~="plain"] .hero h1:not(#hero-headline) :is(em, .dclab-em) { color: inherit !important; }
:root[data-lab~="plain"] .btn-outline svg[style*="#a78bfa"] { display: none !important; }
:root[data-lab~="plain"] .btn svg:has(path[d^="M17 8l4 4"]),
:root[data-lab~="plain"] .btn svg:has(path[d^="M13 7l5 5"]) { display: none !important; }
:root[data-lab~="plain"] body:has(.hero-proof-item) .stats-bar { display: none; }
/* 5. status dots stop pulsing, on the homepage and on every interior spec card */
:root[data-lab~="plain"] :is(.hero-badge .dot, .ops-dot, .spec-card .dot, .spec-head .dot) { animation: none !important; }
/* 6. the pretend dashboard and ticker go; fifteen-ring (or the sail) takes the right side */
:root[data-lab~="plain"] .hero .hero-visual,
:root[data-lab~="plain"] .ops-ticker { display: none !important; }
/* 7. no single recolored phrase: the gradient words take the heading's own color */
:root[data-lab~="plain"] :is(.cl-grad, .il-grad, .rv-grad),
:root[data-lab~="plain"] #revive-band h2 span[style*="gradient"],
:root[data-lab~="plain"] main :is(h1, h2) em[style*="color"] {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit !important;
}
/* 8. the cyan stroke along each section cut; the cut itself stays */
:root[data-lab~="plain"] .seam { display: none !important; }
/* 9. the Solutions menu in one ink (pillar-sails glyphs follow --pc), and no NEW badge */
:root[data-lab~="plain"] .nav-dd-group { --pc: var(--lab-onnavy-link) !important; }
:root[data-lab~="plain"] .nav-dd-new { display: none !important; }
/* the 404 numerals: one solid tint instead of the blue-to-cyan gradient */
:root[data-lab~="plain"] .nf-code { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--lab-onnavy-link) !important; }
/* 10. the logo strip: it labels clients and vendors together as "partners" */
:root[data-lab~="plain"] main section:has(> .container > .partner-bar) { display: none !important; }
/* the homepage Revive band: flat navy, no teal glow, white numerals. The search window stays (it is the demo). */
:root[data-lab~="plain"] #revive-band > .container > div[style*="gradient"] { background: var(--lab-navy) !important; border-color: rgba(176,190,255,.14) !important; }
:root[data-lab~="plain"] #revive-band div[style*="radial-gradient"] { display: none !important; }
:root[data-lab~="plain"] #revive-band div[style*="font-size:1.5rem"][style*="font-weight:800"] { color: #fff !important; }
:root[data-lab~="plain"] #revive-band div[aria-hidden="true"][style*="backdrop-filter"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-color: rgba(176,190,255,.16) !important; }
/* the Trust Center "at a glance" tiles fit their card (two tiles ran 29px past its right edge): one per row */
:root:is([data-lab~="plain"], [data-lab~="boxes"]) .trust-pillars { grid-template-columns: minmax(0, 1fr); }
:root:is([data-lab~="plain"], [data-lab~="boxes"]) .trust-pillars .tp,
:root:is([data-lab~="plain"], [data-lab~="boxes"]) .trust-pillars .tp > div { min-width: 0; }
:root[data-lab~="boxes"] .trust-pillars { gap: 0; margin-top: 8px; }
:root[data-lab~="boxes"] .trust-pillars .tp { background: none; border: 0; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0; padding: 14px 0; }

/* ---------- 3. Fewer labels ---------- */
:root[data-lab~="eyebrows"] main > section:not(:first-of-type) .section-label { display: none !important; }
:root[data-lab~="eyebrows"] main > section:not(:first-of-type) .section-header > h2 { margin-top: 0; }
/* 11. the chip under a breadcrumb repeats the breadcrumb (product pages keep theirs: it is the product name) */
:root[data-lab~="eyebrows"]:not(.dclab-r1-product) main > section:first-of-type :is(.svc-hero-copy:has(> .crumbs), .container:has(> .crumbs)) > .tag:not(.dclab-pillar-sails-tag) { display: none !important; }
/* 12. a first label that only repeats the page title (about, contact, estimator, trust, privacy) */
:root[data-lab~="eyebrows"].dclab-r1-title-label main > section:first-of-type .section-label { display: none !important; }
/* 13. "Pillar 01 · Manage" above "Manage", and the logo strip's label when the strip stays */
:root[data-lab~="eyebrows"] .px-kicker { display: none !important; }
:root[data-lab~="eyebrows"]:not([data-lab~="plain"]) main section:has(> .container > .partner-bar) > .container > p:first-child { display: none !important; }
/* the homepage Revive band's small label, and the uppercase group labels on About's team */
:root[data-lab~="eyebrows"] #revive-band .tag { display: none !important; }
:root[data-lab~="eyebrows"] #team h3[style*="uppercase"] {
  text-transform: none !important; letter-spacing: -0.005em !important; font-size: 1.25rem !important; color: var(--navy) !important; margin-bottom: 20px !important;
}
:root[data-lab~="eyebrows"][data-lab~="type-mona"] #team h3[style*="uppercase"] { font-stretch: 110%; font-weight: 650; }

/* ---------- 4. Editorial openers (desktop) ---------- */
@media (min-width: 1000px) {
  :root[data-lab~="editorial"] .section-header {
    display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 80px; align-items: end;
    text-align: left; max-width: var(--max-w); margin: 0 auto 72px;
  }
  :root[data-lab~="editorial"] .section-header > .section-label { grid-column: 1 / -1; justify-self: start; }
  :root[data-lab~="editorial"] .section-header > :is(h2, h1) { grid-column: 1; font-size: clamp(2.4rem, 3.9vw, 3.7rem); }
  :root[data-lab~="editorial"] .section-header > h2 br { display: none; }
  :root[data-lab~="editorial"] .section-header > p { grid-column: 2; margin: 0 0 8px !important; max-width: 44ch; font-size: 1.08rem; line-height: 1.6; }

  /* 19. FAQs in two columns: the heading holds still on the left while the questions scroll on the right */
  :root[data-lab~="editorial"] section#faq > .container {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; align-items: start;
  }
  :root[data-lab~="editorial"] section#faq > .container > * { grid-column: 6 / 13; min-width: 0; }
  :root[data-lab~="editorial"] section#faq > .container > .section-header {
    grid-column: 1 / 6; grid-row: 1 / span 6; display: block; text-align: left; max-width: none;
    margin: 0; padding-right: 40px; position: sticky; top: 120px; align-self: start;
  }
  :root[data-lab~="editorial"] section#faq > .container > .section-header > :is(h2, h1) { font-size: clamp(2.4rem, 3.2vw, 3rem); }
  :root[data-lab~="editorial"] section#faq > .container > .section-header > p { margin: 20px 0 0 !important; max-width: 34ch; }
  :root[data-lab~="editorial"] section#faq .faq { max-width: none; margin: 0; }
  :root[data-lab~="editorial"] section#faq > .container > .text-center { text-align: left !important; margin-top: 28px !important; }

  /* 20. narrow blocks share the heading's left edge instead of floating in the middle */
  :root[data-lab~="editorial"] main :is(.compare-table, .hub-cards, .compliance-note),
  :root[data-lab~="editorial"] main .grid[style*="max-width"]:not([style*="text-align:center"]),
  :root[data-lab~="editorial"] main .section-header ~ div.reveal[style^="max-width:640px"] { margin-left: 0 !important; }
  /* the cards and the note in a block that moved left read left too, so nothing floats off-center */
  :root[data-lab~="editorial"] main .grid[style*="max-width"]:not([style*="text-align:center"]) > [style*="text-align:center"] { text-align: left !important; }
  :root[data-lab~="editorial"] main .grid[style*="max-width"]:not([style*="text-align:center"]) > [style*="text-align:center"] .service-icon { justify-content: flex-start !important; margin-left: 0 !important; }
  :root[data-lab~="editorial"] main .grid[style*="max-width"]:not([style*="text-align:center"]) + p:is([style*="text-align:center"], .text-center) { text-align: left !important; margin-left: 0 !important; }
  :root[data-lab~="editorial"] main .industry-tabs { justify-content: flex-start; }
  /* ...and they fill the measure, so their right edges line up with the heading row above instead of
     stopping short (three across stays three; four short items sit in one row; the rest keep two). */
  :root[data-lab~="editorial"] main .grid[style*="max-width"]:not([style*="text-align:center"]) { max-width: none !important; }
  :root[data-lab~="editorial"] main .grid.grid-2[style*="max-width"]:not([style*="text-align:center"]):has(> :nth-child(4):last-child):not(:has(> * > :is(ul, ol, .grid))) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  /* the Manage and Illuminate hubs span the measure too: five or six cards in threes, four in two wide columns */
  :root[data-lab~="editorial"] main .hub-cards { max-width: none !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  :root[data-lab~="editorial"] main .hub-cards:is(:has(> :nth-child(4):last-child), :has(> :nth-child(2):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :root[data-lab~="editorial"] main .hub-cards > :last-child:nth-child(odd) { grid-column: auto !important; justify-self: stretch !important; max-width: none !important; }
  /* the industry checklists ("What law firms get"): two columns across the measure, not one short column */
  :root[data-lab~="editorial"] main .section-header ~ div.reveal[style^="max-width:640px"] { max-width: none !important; }
  :root[data-lab~="editorial"] main .section-header ~ div.reveal[style^="max-width:640px"] > .risk-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; row-gap: 4px;
  }
  /* a lone CTA row under a left-set heading reads left too (the pain grid, comparison, 30-day plan) */
  :root[data-lab~="editorial"] main .container:has(> .section-header:not([style*="text-align:center"])) > :is(.text-center, div[style*="text-align:center"]):last-child:has(> .btn) { text-align: left !important; }
  :root[data-lab~="editorial"] main .container:has(> .section-header) > .ob-foot { text-align: left; margin-left: 0; }
  /* Managed IT pricing: the page's main conversion block sits on the heading's edge and spans the measure,
     price and button on the left, what is included on the right */
  :root[data-lab~="editorial"] main .reveal[style*="max-width:500px"][style*="margin:0 auto"]:has(> .pricing-card) { margin-left: 0 !important; max-width: none !important; }
  :root[data-lab~="editorial"] main .pricing-card {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto auto auto 1fr; grid-auto-flow: row dense;
    column-gap: 72px; align-items: start; text-align: left;
  }
  :root[data-lab~="editorial"] main .pricing-card > * { grid-column: 1; }
  :root[data-lab~="editorial"] main .pricing-card > .feature-list { grid-column: 2; grid-row: 1 / span 5; margin-bottom: 0 !important; columns: 2; column-gap: 40px; }
  :root[data-lab~="editorial"] main .pricing-card > .feature-list li { break-inside: avoid; }
  :root[data-lab~="editorial"] main .pricing-card > .dclab-price-typical { grid-column: 2; margin: 24px 0 0; }
}
/* Phones and tablets: section headings set left too, so a heading and the open columns under it share one edge */
@media (max-width: 999px) {
  :root[data-lab~="editorial"] .section-header:not([style*="text-align:center"]) { text-align: left; }
  :root[data-lab~="editorial"] .section-header:not([style*="text-align:center"]) > p { margin-left: 0; }
}

/* ---------- 5. Fewer boxes: open columns instead of identical cards ---------- */
:root[data-lab~="boxes"] :is(.service-card, .pain-card, .testimonial-card) {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 28px 4px 0 0 !important; transform: none !important;
  border-top: 1px solid var(--gray-200) !important;
}
:root[data-lab~="boxes"] .section-dark :is(.service-card, .pain-card, .testimonial-card) { border-top-color: rgba(255,255,255,.14) !important; }
:root[data-lab~="boxes"] :is(.service-card, .pain-card, .testimonial-card):hover { transform: none !important; box-shadow: none !important; }
:root[data-lab~="boxes"] .pain-solution { background: none !important; border: 0 !important; border-radius: 0 !important; padding: 12px 0 0 !important; }
:root[data-lab~="boxes"] .pain-solution .pain-arrow { display: none !important; }
:root[data-lab~="boxes"] .pain-solution strong { color: var(--navy) !important; }
/* proof sets the testimonial typography when it is on */
:root[data-lab~="boxes"]:not([data-lab~="proof"]) .testimonial-card p { font-style: normal !important; font-size: 1.08rem; color: var(--text) !important; }
:root[data-lab~="boxes"] :is(.grid-3, .grid-2):has(> :is(.service-card, .pain-card, .testimonial-card)) { column-gap: 48px !important; row-gap: 40px !important; }

/* An opened card that is a link still reads as one: a quiet underline on its title that firms up on hover and focus
   (the homepage tools, the Manage and Illuminate hubs, the AI suite). */
:root[data-lab~="boxes"] :is(a.service-card, a.hub-card) { text-decoration: none; }
:root[data-lab~="boxes"] :is(a.service-card, a.hub-card) h3 {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(10,13,49,.28);
  transition: color .15s ease, text-decoration-color .15s ease;
}
:root[data-lab~="boxes"] :is(a.service-card, a.hub-card):is(:hover, :focus-visible) h3 { color: var(--lab-ultra) !important; text-decoration-color: currentColor; }
:root[data-lab~="boxes"] :is(a.service-card, a.hub-card):focus-visible { outline: 2px solid var(--lab-ultra); outline-offset: 6px; }
:root[data-lab~="boxes"] .section-dark :is(a.service-card, a.hub-card) h3 { text-decoration-color: rgba(255,255,255,.35); }
:root[data-lab~="boxes"] .section-dark :is(a.service-card, a.hub-card):is(:hover, :focus-visible) h3 { color: var(--lab-onnavy-link) !important; }
:root[data-lab~="boxes"] .section-dark :is(a.service-card, a.hub-card):focus-visible { outline-color: var(--lab-onnavy-link); }

/* the rest of the card kit, opened the same way on every page: product and pillar hubs, Revive and Clarity
   features, the four Revive steps, the AI use cases and the Trust Center frameworks */
:root[data-lab~="boxes"] :is(.hub-card, .rv-fcard, .cl-fcard, .ai-uc, .framework-card, .rv-step) {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--gray-200) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; padding: 26px 8px 0 0 !important;
}
:root[data-lab~="boxes"] .hub-card:hover { border-top-color: var(--navy) !important; }
:root[data-lab~="boxes"] .section-dark :is(.hub-card, .rv-fcard, .cl-fcard, .ai-uc, .framework-card, .rv-step) { border-top-color: rgba(255,255,255,.14) !important; }
:root[data-lab~="boxes"] :is(.hub-cards, .rv-steps, .ai-uc-grid, .grid, div):has(> :is(.hub-card, .rv-fcard, .cl-fcard, .ai-uc, .framework-card, .rv-step)) { column-gap: 40px !important; row-gap: 40px !important; }
/* the Revive steps: a plain numeral in ink instead of a green tile */
:root[data-lab~="boxes"] .rv-step .n {
  background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; justify-content: flex-start !important;
  color: var(--navy) !important; font-size: 1.7rem !important; line-height: 1; margin-bottom: 14px !important;
}
:root[data-lab~="boxes"][data-lab~="type"] .rv-step .n { font-family: var(--lab-face) !important; }
:root[data-lab~="boxes"][data-lab~="type-mona"] .rv-step .n { font-stretch: 125%; font-weight: 750 !important; }
/* the framework names and the hours saved read as text, not chips */
:root[data-lab~="boxes"] .framework-card .fw-badge {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: var(--navy) !important; letter-spacing: .01em !important;
}
:root[data-lab~="boxes"] .ai-uc .hrs { background: none !important; border-radius: 0 !important; padding: 0 !important; color: var(--text-muted) !important; font-size: .8rem !important; }

/* Managed IT pricing: the card opens up, a navy rule on top, the price in ink, the label in plain words */
:root[data-lab~="boxes"] main .pricing-card {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--navy) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 32px 0 0 !important;
}
:root[data-lab~="boxes"] main .pricing-card .price { color: var(--navy) !important; }
/* with editorial (headings set left at every width), the opened card reads left too */
:root[data-lab~="boxes"][data-lab~="editorial"] main .pricing-card { text-align: left; }
:root[data-lab~="boxes"] main .pricing-card > div:first-child[style*="uppercase"] {
  text-transform: none !important; letter-spacing: 0 !important; color: var(--text-muted) !important; font-size: .95rem !important; font-weight: 600 !important;
}

/* Opened cards share a baseline: the last button, tag or link in each card in a row sits at the same height */
:root[data-lab~="boxes"] :is(.service-card, .pain-card):has(> :is(.btn, .tag, .more):last-child),
:root[data-lab~="boxes"] :is(.service-card, .pain-card):has(> div:last-child > .btn) { display: flex !important; flex-direction: column; }
:root[data-lab~="boxes"] :is(.service-card, .pain-card):is(:has(> :is(.btn, .tag, .more):last-child), :has(> div:last-child > .btn)) > :nth-last-child(2) { flex-grow: 1; }
:root[data-lab~="boxes"] :is(.service-card, .pain-card) > :is(.btn, .tag, .more):last-child { align-self: flex-start; }
:root[data-lab~="boxes"] :is(.service-card, .pain-card)[style*="text-align:center"] > :is(.btn, .tag, .more):last-child { align-self: center; }

/* FAQ rows: hairlines, not a stack of cards */
:root[data-lab~="boxes"] .faq-item {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--gray-200) !important;
  border-radius: 0 !important; box-shadow: none !important; margin: 0 !important;
}
:root[data-lab~="boxes"] .faq-item:last-child { border-bottom: 1px solid var(--gray-200) !important; }
:root[data-lab~="boxes"] .faq-item[open] { border-top-color: var(--navy) !important; }
:root[data-lab~="boxes"] .faq-item summary { padding: 22px 0 !important; }
:root[data-lab~="boxes"] .faq-item .faq-a { padding: 0 48px 24px 0 !important; }
:root[data-lab~="boxes"] .section-dark .faq-item { border-top-color: rgba(255,255,255,.14) !important; }

/* 21. side tabs (a thick colored left border) become one hairline on top. Never inside tool results. */
:root[data-lab~="boxes"] main :is(.compliance-note, p.disclaimer-note, blockquote[style*="border-left"]):not(:is(#results, #results-content) *) {
  border-left: 0 !important; border-top: 1px solid var(--gray-200) !important; padding-left: 0 !important; padding-top: 16px !important;
}
:root[data-lab~="boxes"] main .section-dark :is(p.disclaimer-note, blockquote[style*="border-left"]):not(:is(#results, #results-content) *) { border-top-color: rgba(255,255,255,.16) !important; }
:root[data-lab~="boxes"] main .compliance-note {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--navy) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 28px 0 0 !important;
}
/* a reading measure for the single-column notes only; the two-column blocks (healthcare, Tampa, Pittsburgh) keep the full width */
:root[data-lab~="boxes"] main .compliance-note:not(:has(> div > h2)) { max-width: 46rem !important; }
:root[data-lab~="boxes"] main .compliance-note h3 { max-width: 30ch; }

/* 22. Cybersecurity: seven open layers in rows of 4 and 3, no outline numerals, no two navy odd ones out */
:root[data-lab~="boxes"] .layer-num { display: none !important; }
:root[data-lab~="boxes"] .layer-card {
  background: none !important; border: 0 !important; border-top: 1px solid var(--gray-200) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding: 26px 8px 0 0 !important; overflow: visible !important;
}
:root[data-lab~="boxes"] .layer-card h3 { color: var(--navy) !important; font-size: 1.12rem; margin-bottom: 8px; }
:root[data-lab~="boxes"] .layer-card p { color: var(--text-muted) !important; font-size: .9rem !important; }
:root[data-lab~="boxes"] .layer-card .service-icon svg { color: inherit !important; }
:root[data-lab~="boxes"] .grid.grid-3:has(> .layer-card) { column-gap: 40px !important; row-gap: 44px !important; }
@media (min-width: 1100px) {
  :root[data-lab~="boxes"] .grid.grid-3:has(> .layer-card) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* 23. About: team, stats and principles without the card around each one */
:root[data-lab~="boxes"] .team-card {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  transform: none !important; padding: 0 !important; text-align: left;
}
:root[data-lab~="boxes"] .team-card .team-avatar { margin-left: 0; }
:root[data-lab~="boxes"] .team-card .team-bio { margin-left: 0; }
:root[data-lab~="boxes"] .team-card .team-bio { max-width: 34ch; }
:root[data-lab~="boxes"] div:has(> .grid > .about-stat) { background: none !important; padding: 0 !important; border-radius: 0 !important; }
:root[data-lab~="boxes"] .about-stat {
  background: none !important; border: 0 !important; border-top: 1px solid var(--gray-200) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; text-align: left !important; padding: 18px 0 6px !important;
}
:root[data-lab~="boxes"] .about-stat > :first-child { color: var(--navy) !important; }
/* the principles (and every centered card grid under a left-set heading) read left, like the team and stats,
   at every width (editorial sets the headings left on phones too) */
:root[data-lab~="boxes"][data-lab~="editorial"] main .container:has(> .section-header:not([style*="text-align:center"])) > .grid > .service-card[style*="text-align:center"] { text-align: left !important; }
:root[data-lab~="boxes"][data-lab~="editorial"] main .container:has(> .section-header:not([style*="text-align:center"])) > .grid > .service-card[style*="text-align:center"] .service-icon { justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; }
:root[data-lab~="boxes"][data-lab~="editorial"] main .container:has(> .section-header:not([style*="text-align:center"])) > .grid > .service-card[style*="text-align:center"] > :is(.btn, .tag, .more):last-child { align-self: flex-start; }
/* About: one column grid for every team group, so the portraits share edges from Leadership to Strategy */
@media (min-width: 1000px) {
  :root:is([data-lab~="boxes"], [data-lab~="people"]) #team .grid:has(> .team-card) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; column-gap: 32px !important; row-gap: 48px !important; }
}
@media (min-width: 521px) and (max-width: 999px) {
  :root:is([data-lab~="boxes"], [data-lab~="people"]) #team .grid:has(> .team-card) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* without editorial, the team heading sets left too, over the left-set grid */
:root:is([data-lab~="boxes"], [data-lab~="people"]):not([data-lab~="editorial"]) #team .section-header { text-align: left; margin-left: 0; }
:root:is([data-lab~="boxes"], [data-lab~="people"]):not([data-lab~="editorial"]) #team .section-header > p { margin-left: 0; }
/* the homepage industry panel: the side figure is an open column, not a card inside the card */
:root[data-lab~="boxes"] .industry-visual {
  background: none !important; border: 0 !important; border-top: 1px solid var(--navy) !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 24px 0 0 !important; text-align: left !important; align-self: start;
}
:root[data-lab~="boxes"] .industry-content .industry-visual .big-icon { margin: 0 0 14px !important; justify-content: flex-start !important; }
:root[data-lab~="boxes"] .industry-visual .stat-row { justify-content: flex-start !important; }
:root[data-lab~="boxes"] .industry-visual .stat-row div { text-align: left !important; }

/* ---------- 6. Quieter icons ---------- */
:root[data-lab~="icons"] :is(.service-icon, .pain-icon, .why-stat-icon, .why-feature-icon) {
  background: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; justify-content: flex-start !important; margin-bottom: 14px;
}
:root[data-lab~="icons"] :is(.service-icon, .pain-icon, .why-stat-icon, .why-feature-icon) svg { width: 26px !important; height: 26px !important; stroke-width: 1.6; }
:root[data-lab~="icons"] :is(.service-icon, .pain-icon) { color: var(--navy) !important; }
:root[data-lab~="icons"] .section-dark :is(.service-icon, .why-stat-icon, .why-feature-icon) { color: var(--lab-onnavy-link) !important; }
/* Integration: the pain icons (stroke set in CSS) and the #why icons (stroke set on the svg) follow the ink too. */
:root[data-lab~="icons"] .pain-icon svg { stroke: currentColor !important; }
:root[data-lab~="icons"] .why-stat-icon svg[stroke] { stroke: currentColor; }
:root[data-lab~="icons"] .why-stat-icon { color: var(--lab-onnavy-link) !important; }
/* 24. where the text is centered, the icon stays centered with it */
:root[data-lab~="icons"] :is(.text-center, [style*="text-align:center"], .feature-visual) .service-icon,
:root[data-lab~="icons"] .service-icon[style*="margin:0 auto"] { justify-content: center !important; }
/* 25. contact and industry icons lose their tile */
:root[data-lab~="icons"] :is(.contact-detail-icon, .industry-visual .big-icon) {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  width: auto !important; height: auto !important;
}
:root[data-lab~="icons"] .contact-detail-icon { width: 22px !important; padding-top: 2px; align-items: flex-start !important; }
:root[data-lab~="icons"] :is(.contact-detail-icon, .industry-visual .big-icon) svg { width: 22px !important; height: 22px !important; color: var(--navy) !important; stroke-width: 1.6; }
:root[data-lab~="icons"] .industry-visual .big-icon { margin: 0 auto 14px !important; color: var(--navy) !important; }
/* the remaining tinted tiles: the Trust Center controls, the Illuminate hub, Clarity and Revive features, the AI suite links.
   Demo nodes (forge's flow, the recovery dots, the Revive search mock) are left alone. */
:root[data-lab~="icons"] :is(.protect-item .pico, .hub-card .il-icon, .cl-fcard .fi, .rv-fcard .fi),
:root[data-lab~="icons"] main a.spotlight > div:first-child[style*="width:52px"][style*="border-radius:14px"] {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  width: auto !important; height: auto !important; justify-content: flex-start !important; color: var(--navy) !important;
}
:root[data-lab~="icons"] :is(.protect-item .pico, .hub-card .il-icon, .cl-fcard .fi, .rv-fcard .fi) svg,
:root[data-lab~="icons"] main a.spotlight > div:first-child[style*="width:52px"][style*="border-radius:14px"] svg {
  width: 24px !important; height: 24px !important; color: currentColor !important; stroke: currentColor !important; stroke-width: 1.6;
}
:root[data-lab~="icons"] .protect-item .pico { padding-top: 2px; align-items: flex-start !important; }
/* the pillar explorer tabs keep their pillar color as a line icon, without the tinted tile (pillar-sails draws its own) */
:root[data-lab~="icons"] .px-ico:not(.dclab-pillar-sails-pxico) { background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; }
:root[data-lab~="icons"] .px-ico:not(.dclab-pillar-sails-pxico) svg { width: 24px !important; height: 24px !important; }
:root[data-lab~="icons"] .section-dark :is(.protect-item .pico, .hub-card .il-icon, .cl-fcard .fi, .rv-fcard .fi) { color: var(--lab-onnavy-link) !important; }
/* compliance chips read as a plain run of terms, not a row of pills */
:root[data-lab~="icons"] :is(.industry-compliance, .badge-row):has(> .compliance-badge) { gap: 6px 20px !important; }
:root[data-lab~="icons"] .compliance-badge {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: var(--text-muted) !important; font-weight: 600 !important; font-size: .84rem !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* terms are set apart by space alone, so no separator dot is ever left dangling at the end of a wrapped line */
:root[data-lab~="icons"] .compliance-badge { white-space: nowrap; }
:root[data-lab~="icons"] .section-dark .compliance-badge { color: rgba(255,255,255,.72) !important; }
:root[data-lab~="icons"] .compliance-note .badge-row { margin: 14px 0 18px !important; }
/* 26. a .tag reads as small text, not a pill (pillar-sails keeps its glyph tags) */
:root[data-lab~="icons"] .tag:not(.dclab-pillar-sails-tag) {
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: var(--text-muted) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; font-size: .82rem !important;
}
:root[data-lab~="icons"] :is(.section-dark, .hero, .px-panel, #revive-band) .tag:not(.dclab-pillar-sails-tag) { color: rgba(255,255,255,.72) !important; }

/* ---------- 7. Committed brand blue ---------- */
:root[data-lab~="blue"] .btn-primary { background: var(--lab-ultra) !important; box-shadow: none !important; }
:root[data-lab~="blue"] .btn-primary:hover { background: var(--lab-ultra-hover) !important; transform: none !important; }
:root[data-lab~="blue"] .cta-section { background: var(--lab-ultra) !important; }
:root[data-lab~="blue"] .cta-section::before { display: none !important; }
:root[data-lab~="blue"] .cta-section::after { opacity: .12 !important; filter: brightness(10); }
:root[data-lab~="blue"] .cta-section .btn-primary { background: #fff !important; color: var(--lab-ultra) !important; }
:root[data-lab~="blue"] .cta-section .btn-primary:hover { background: #e9ebff !important; }
:root[data-lab~="blue"] .cta-section :is(p, li, span, .section-label) { color: rgba(255,255,255,.86) !important; }
:root[data-lab~="blue"] .cta-section svg { color: #fff !important; }
/* 27. tool selections in the brand blue; on navy, links stay a light tint (never ultramarine text on navy) */
:root[data-lab~="blue"] .est-toggle-btn.active { background: var(--lab-ultra) !important; border-color: var(--lab-ultra) !important; color: #fff !important; }
:root[data-lab~="blue"] .option-card.selected { border-color: var(--lab-ultra) !important; background: rgba(1,14,208,.04) !important; box-shadow: 0 0 0 2px var(--lab-ultra) !important; }
:root[data-lab~="blue"] .option-card.selected .check-icon { background: var(--lab-ultra) !important; }
:root[data-lab~="blue"] .q-opt.sel { border-color: var(--lab-ultra) !important; background: rgba(1,14,208,.05) !important; color: var(--lab-ultra) !important; box-shadow: 0 0 0 1px var(--lab-ultra) !important; }
:root[data-lab~="blue"] #progress-bar { background: var(--lab-ultra) !important; }
:root[data-lab~="blue"] main .section-dark :is(p, li) a:not(.btn) { color: var(--lab-onnavy-link) !important; }

/* ---------- 8. People first ---------- */
:root[data-lab~="people"] .crew-grid { gap: 14px; }
/* 30. crew tiles: the portrait is the tile, no white card behind it */
:root[data-lab~="people"] .crew-card {
  position: relative; padding: 0 0 14px !important; overflow: visible; text-align: left;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
:root[data-lab~="people"] .crew-card img {
  width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0 !important; box-shadow: none !important; margin: 0 0 12px;
}
:root[data-lab~="people"] .crew-card :is(b, span) { padding: 0 2px; }
/* the homepage six stay modest until there are proper headshots (Josh 10/4): 144px wide instead of filling the column */
:root[data-lab~="people"] .crew-grid { grid-template-columns: repeat(3, minmax(0, 144px)); justify-content: center; column-gap: 20px; row-gap: 6px; }
:root[data-lab~="people"] .crew-card span { font-size: .74rem; }
:root[data-lab~="people"] .crew-card:hover { transform: none; }
:root[data-lab~="people"] .team-avatar {
  width: 160px !important; height: 200px !important; border-radius: 0 !important; background: #e9e4da !important;
}
:root[data-lab~="people"] .team-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* 28. monochrome: neutral greys on a gentle tone curve (filter#dclab-duo is inserted by lab.js).
   Every portrait on the site gets the same treatment: team, client quotes and the "who answers" faces. */
/* lab.js inserts the filter in the same task that turns people on, before the first paint. (A grayscale "fallback"
   declared before this one never applied: every browser parses url(), so the second declaration always won.) */
:root[data-lab~="people"] :is(.crew-card img, .team-avatar img, .testimonial-avatar img, .dclab-who-picks-face img) {
  filter: url(#dclab-duo);
}
/* 29. the portrait corner follows the logo's leading edge (14px over 34px, about 22.6 degrees) */
:root[data-lab~="people"] :is(.crew-card img, .team-avatar) {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 34px, 100% 100%, 0 100%);
}
@media (max-width: 520px) { :root[data-lab~="people"] .team-avatar { width: 128px !important; height: 160px !important; } }
/* With who-picks' sharper 4:5 photos, About's portraits fill their column (a 64px gutter between people instead of
   100px of empty space beside each face). The live 192px files stay at 160x200 so they never upscale. */
@media (min-width: 1000px) {
  :root[data-lab~="people"][data-lab~="who-picks"] #team .grid:has(> .team-card) { column-gap: 56px !important; }
  :root[data-lab~="people"][data-lab~="who-picks"] #team .team-avatar { width: 100% !important; max-width: 240px; height: auto !important; aspect-ratio: 4 / 5; }
}

/* the duotone filter's <svg> holder takes no room (it would add a line box under the footer) */
.dclab-duo-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---------- 9. Sail-line hero ---------- */
.dclab-sail { display: none; }
:root[data-lab~="hero"] :is(.hero, main > section.section-dark:first-of-type, .nf-wrap) { background: var(--lab-navy) !important; }
:root[data-lab~="hero"] :is(.hero, main > section.section-dark:first-of-type, .nf-wrap) :is(.aurora, .hero-grid) { display: none !important; }
:root[data-lab~="hero"] .hero-bg::before { display: none !important; }
/* 1. no falling packets (enhance.js still spawns three hidden ones; harmless) */
:root:is([data-lab~="hero"], [data-lab~="calm"]) .hero-bg .packet { display: none !important; }
/* 2. The sail shows only where the hero's right side is empty (lab.js measures the room and sets
   .dclab-sail-free plus its size), and never on the homepage while the fifteen ring is there. */
:root[data-lab~="hero"] .dclab-sail-free > .dclab-sail {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  left: var(--dclab-sail-x, 60%); top: var(--dclab-sail-y, 20%); width: var(--dclab-sail-w, 40%); height: auto;
  fill: none; stroke: rgba(176, 190, 255, .22); stroke-width: 1.25; vector-effect: non-scaling-stroke;
}
:root[data-lab~="hero"] .dclab-sail-free { position: relative; }
:root[data-lab~="hero"][data-lab~="fifteen-ring"] .hero > .dclab-sail { display: none !important; }
/* 3. the homepage headline starts on the same left edge as the logo and every other page */
:root[data-lab~="hero"] .hero > .hero-row { width: 100%; }
:root[data-lab~="hero"] .hero-visual-card { background: #10163f !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: rgba(176,190,255,.14) !important; box-shadow: none !important; }
:root[data-lab~="hero"] .hero-visual-card.glow::before, :root[data-lab~="hero"] .hero-visual-card.glow::after { display: none !important; }
/* 4. no empty outline box or scan line on the first card */
:root[data-lab~="hero"] .hero-visual-card.glow-ring::before,
:root[data-lab~="hero"] .hero .scan::before { display: none !important; }

/* ---------- 10. Paper grain (sits on top; no layout changes) ---------- */
:root[data-lab~="grain"] :is(.hero, .section-dark):not(.cta-section) { isolation: isolate; position: relative; }
:root[data-lab~="grain"] :is(.hero, .section-dark):not(.cta-section)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 11. One motion moment ---------- */
:root[data-lab~="calm"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
:root[data-lab~="calm"] .aurora b { animation: none !important; }
:root[data-lab~="calm"] :is(.service-card, .pain-card, .testimonial-card, .crew-card, .team-card, .layer-card, .about-stat, .cs-stat):hover { transform: none !important; }
/* 31. counters show their final value (lab.js holds the text); 32. no sheen, spotlight or magnetic pull */
:root[data-lab~="calm"] .spotlight::after,
:root[data-lab~="calm"] .btn-primary::after { display: none !important; animation: none !important; }
:root[data-lab~="calm"] .btn-primary.magnetized { transform: none !important; }
:root[data-lab~="calm"] .marquee-track { animation-play-state: paused !important; }


/* =====================================================================
   The review panel itself
   ===================================================================== */
.dclab { position: fixed; left: 16px; bottom: 16px; z-index: 2147483000; width: min(340px, calc(100vw - 32px));
  font: 13px/1.45 Inter, system-ui, sans-serif; color: #e8ebf7; background: #090c20; isolation: isolate;
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.dclab[hidden] { display: none; }
.dclab button { font: inherit; color: inherit; cursor: pointer; }
.dclab a { color: #9fb2ff; }
.dclab-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 11px 14px; background: none; border: 0; text-align: left; }
.dclab-dot { width: 8px; height: 8px; border-radius: 50%; background: #3d5afe; box-shadow: 0 0 0 3px rgba(61,90,254,.25); }
.dclab-title { font-weight: 700; letter-spacing: .01em; }
.dclab-count { margin-left: auto; color: #9aa3c2; font-size: 12px; }
.dclab-caret { color: #9aa3c2; }
.dclab-body { max-height: min(64vh, 580px); overflow: auto; padding: 0 14px 12px; border-top: 1px solid rgba(255,255,255,.08); }
.dclab-intro { margin: 10px 0; color: #9aa3c2; font-size: 12px; }
.dclab-quick { display: flex; gap: 6px; margin-bottom: 8px; }
.dclab-quick button { flex: 1; padding: 7px 8px; border-radius: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.dclab-quick button[aria-pressed="true"] { background: #3d5afe; border-color: #3d5afe; }
.dclab-list { list-style: none; margin: 0; padding: 0; }
.dclab-list li { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); }
.dclab-list li.dclab-group { padding: 14px 0 4px; border-top: 0; color: #9fb2ff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dclab-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dclab-label { font-weight: 600; flex: 1; }
.dclab-note { margin: 4px 0 0; color: #9aa3c2; font-size: 12px; }
.dclab-row input { position: absolute; opacity: 0; pointer-events: none; }
.dclab-switch { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,.18); position: relative; transition: background .15s; flex: 0 0 auto; }
.dclab-switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.dclab-row input:checked + .dclab-switch { background: #3d5afe; }
.dclab-row input:checked + .dclab-switch::after { transform: translateX(14px); }
.dclab-row input:focus-visible + .dclab-switch { outline: 2px solid #00d4ff; outline-offset: 2px; }
.dclab-seg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.dclab-seg button { padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.dclab-seg button[aria-checked="true"] { background: #3d5afe; border-color: #3d5afe; }
.dclab-foot { margin: 8px 0 0; color: #6b7194; font-size: 11px; }
.dclab kbd { font: 11px ui-monospace, Menlo, monospace; padding: 0 4px; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; }
@media (max-width: 560px) { .dclab { left: 8px; bottom: 76px; } .dclab-body { max-height: 46vh; } }
/* Phones and touch: every panel control is a 44px target, and the list scrolls inside the panel only. */
.dclab-body { overscroll-behavior: contain; }
.dclab :focus-visible { outline: 2px solid #00d4ff; outline-offset: 2px; }
@media (pointer: coarse), (max-width: 560px) {
  .dclab-head { min-height: 44px; }
  .dclab-quick button { min-height: 44px; }
  .dclab-seg button { min-height: 44px; padding: 8px 10px; }
  .dclab-row { min-height: 44px; }
  .dclab-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .dclab-body { max-height: min(58vh, calc(100dvh - 180px)); }
}
/* Phones: closed, the panel stops short of the chat launcher on the right (they overlapped at 375 to 430). */
@media (max-width: 560px) {
  .dclab:has(> .dclab-body[hidden]) { width: calc(100vw - 96px); }
  .dclab-head { gap: 6px; padding-inline: 12px; }
  .dclab-count { font-size: 11px; white-space: nowrap; }
}

/* ---------- Round 3 QA: one treatment on every page ---------- */
@supports selector(:has(*)) {
  /* plain: the duplicate stat strips on the Manage, Illuminate, Clarity and Trust heroes go too (the homepage's already did) */
  :root[data-lab~="plain"]:has(link[rel="canonical"]:is([href$="/manage"], [href$="/illuminate"], [href$="/clarity"], [href$="/trust"])) .stats-bar { display: none !important; }
  /* eyebrows: the inline pill labels below the hero (Diversicom Ascend, Across Florida) and the AI suite's card kickers */
  :root[data-lab~="eyebrows"] main > section:not(:first-of-type) div[style*="border-radius:100px"]:has(> svg + span[style*="letter-spacing"]) { display: none !important; }
  :root[data-lab~="eyebrows"] main a.spotlight > div[style*="text-transform:uppercase"] { display: none !important; }
  /* plain: the procurement sparkle becomes a plain clipboard (a spec list), like the rest of the line icons */
  :root[data-lab~="plain"] .service-icon:has(> svg > path[d^="M9.813 15.904"]) > svg { display: none !important; }
  :root[data-lab~="plain"] .service-icon:has(> svg > path[d^="M9.813 15.904"])::before {
    content: ""; width: 26px; height: 26px; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 12h6M9 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2M9 12h6M9 16h4'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
/* plain: the AI ROI card's gradient numerals and purple glow read as solid white on navy */
:root[data-lab~="plain"] .roi-num { background: none !important; -webkit-text-fill-color: currentColor; color: #fff !important; }
:root[data-lab~="plain"] .roi-card::before { display: none !important; }
/* icons: the device-management feature tile loses its pastel square */
:root[data-lab~="icons"] main div[aria-hidden="true"][style*="width:88px"][style*="border-radius:24px"] { background: none !important; border-radius: 0 !important; height: auto !important; }

/* boxes: the healthcare, Tampa and Pittsburgh pillar cards, the AI suite cards and the cost-optimization steps open the
   same way as every other card set (a hairline on top, no box, no colored arc, ink labels) */
:root[data-lab~="boxes"] :is(.pillar-link-card, .co-step, main a.spotlight[style*="border-radius:20px"][style*="background:#fff"]) {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--gray-200) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; padding: 26px 8px 0 0 !important;
}
:root[data-lab~="boxes"] :is(.grid, .co-steps):has(> :is(.pillar-link-card, .co-step, a.spotlight[style*="border-radius:20px"])) { column-gap: 40px !important; row-gap: 40px !important; }
:root[data-lab~="boxes"] .pillar-link-card .pillar-eyebrow { color: var(--navy) !important; font-weight: 600 !important; letter-spacing: .08em !important; font-size: .72rem !important; }
:root[data-lab~="boxes"] .pillar-link-card .pillar-go { color: var(--lab-ultra) !important; }
:root[data-lab~="boxes"] :is(.pillar-link-card, main a.spotlight[style*="border-radius:20px"]) h3 {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(10,13,49,.28);
  transition: color .15s ease, text-decoration-color .15s ease;
}
:root[data-lab~="boxes"] :is(.pillar-link-card, main a.spotlight[style*="border-radius:20px"]):is(:hover, :focus-visible) h3 { color: var(--lab-ultra) !important; text-decoration-color: currentColor; }
:root[data-lab~="boxes"] :is(.pillar-link-card, main a.spotlight[style*="border-radius:20px"]):focus-visible { outline: 2px solid var(--lab-ultra); outline-offset: 6px; }
:root[data-lab~="boxes"] .co-step .n {
  background: none !important; width: auto !important; height: auto !important; border-radius: 0 !important; justify-content: flex-start !important;
  color: var(--navy) !important; font-size: 1.7rem !important; line-height: 1; margin-bottom: 14px !important;
}
:root[data-lab~="boxes"][data-lab~="type"] .co-step .n { font-family: var(--lab-face) !important; }
:root[data-lab~="boxes"][data-lab~="type-mona"] .co-step .n { font-stretch: 125%; font-weight: 750 !important; }

@media (min-width: 1000px) {
  /* editorial: a compliance note whose heading has no intro sits beside the heading, top-aligned, instead of under it
     with half the row empty (accounting, construction, legal, manufacturing, nonprofit) */
  :root[data-lab~="editorial"] main .container:has(> .section-header + .compliance-note:last-child):not(:has(> .section-header > p)) {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 80px; align-items: start;
  }
  :root[data-lab~="editorial"] main .container:has(> .section-header + .compliance-note:last-child):not(:has(> .section-header > p)) > .section-header { display: block; grid-column: 1; margin: 0; }
  :root[data-lab~="editorial"] main .container:has(> .section-header + .compliance-note:last-child):not(:has(> .section-header > p)) > .section-header > h2 { font-size: clamp(2.2rem, 3vw, 2.9rem); }
  :root[data-lab~="editorial"] main .container:has(> .section-header + .compliance-note:last-child):not(:has(> .section-header > p)) > .compliance-note { grid-column: 2; margin: 6px 0 0 !important; max-width: none !important; }
  /* editorial: the narrow centered blocks on Clarity, Forge and Revive take the same left edge and measure as every other section */
  :root[data-lab~="editorial"] main .container:is([style*="max-width:7"], [style*="max-width:8"])[style*="text-align:center"]:has(> .section-header) { max-width: var(--max-w) !important; text-align: left !important; }
  :root[data-lab~="editorial"] main .container:is([style*="max-width:7"], [style*="max-width:8"])[style*="text-align:center"] > .section-header { align-items: start; }
  :root[data-lab~="editorial"] main :is(.fg-eng, .rv-flow) { margin-left: 0 !important; }
  :root[data-lab~="editorial"] main .fg-engnote { text-align: left; margin-left: 0 !important; }
}

/* plain, phones: with the chip row gone, the homepage hero no longer needs 230px above the headline (the fixed header
   is 72px). The headline, the line about who we are and "Write to us" all land on a 667px-tall first screen. */
@media (max-width: 600px) {
  :root[data-lab~="plain"] .hero > .hero-row { padding-top: 40px; }
}

/* lab-carry.css */
/* Design Lab, Round 4: "Pages that hand off" (carry). Cross-document view transitions, Chrome 126+ and Safari 18.2+;
   Firefox navigates as it always has. See js/lab-early-carry.js and js/lab-carry.js.
   The early script decides the idea in <head>, before the page draws (data-lab arrives too late for the new page's
   first frame), and marks html.dclab-carry-on. Every rule here keys off classes that exist only while one of this
   idea's page changes runs (html.dclab-carry-leave on the page being left, html.dclab-carry-vt on the page arriving),
   so the pages render exactly as before and other ideas' same-page view transitions are untouched.
   Off: production's root crossfade. Everything sits inside the same no-preference gate as production's
   @view-transition: with reduced motion there is no transition at all, as on the live site. */
@media (prefers-reduced-motion: no-preference) {
  /* the slant's run across the full page height: the logo's leading edge, 22.6 degrees off vertical (slope .416) */
  :root.dclab-carry-vt { --dclab-carry-s: calc(.416 * 100vh); }

  /* 1. The header and the phone call bar hold still while the page changes under them (one of each per page). The
     arriving bar takes over in one step as the sweep starts, in the look the old one had (js/lab-early-carry.js), so
     nothing moves; a cross fade of two see-through bars would only double the links. An open menu closes with the old
     bar. While the lab holds the sweep, the old bars stay up: this page's bars are not styled by the lab yet. */
  :root:is(.dclab-carry-leave, .dclab-carry-vt) .site-header { view-transition-name: dc-header; }
  :root:is(.dclab-carry-leave, .dclab-carry-vt) .mobile-cta-bar { view-transition-name: dc-cta-bar; }
  :root.dclab-carry-vt::view-transition-group(dc-header),
  :root.dclab-carry-vt::view-transition-group(dc-cta-bar) { animation: none; }
  :root.dclab-carry-vt::view-transition-new(dc-header),
  :root.dclab-carry-vt::view-transition-new(dc-cta-bar) { animation: none; mix-blend-mode: normal; }
  :root.dclab-carry-vt::view-transition-old(dc-header),
  :root.dclab-carry-vt::view-transition-old(dc-cta-bar) { animation: none; opacity: 0; mix-blend-mode: normal; }
  :root.dclab-carry-hold::view-transition-old(dc-header),
  :root.dclab-carry-hold::view-transition-old(dc-cta-bar) { opacity: 1; }
  :root.dclab-carry-hold::view-transition-new(dc-header),
  :root.dclab-carry-hold::view-transition-new(dc-cta-bar) { opacity: 0; }

  /* 2. The sail cut: the next page is revealed behind an edge at the logo's angle, rising to the right like the sail's
     leading edge, sweeping left to right (right to left when going back) while the old page holds still underneath. Both
     clips move their edge vertices by the same amount on the same curve, so the slant holds the whole way, and the 2px
     gap between them shows the image pair's ultramarine: a hairline riding the edge, with no extra element. */
  :root.dclab-carry-vt::view-transition-image-pair(root) { background: #010ed0; }
  :root.dclab-carry-vt::view-transition-old(root) { animation: dclab-carry-under .36s cubic-bezier(.22, 0, .36, 1) both; mix-blend-mode: normal; }
  :root.dclab-carry-vt::view-transition-new(root) { animation: dclab-carry-wipe .36s cubic-bezier(.22, 0, .36, 1) both; mix-blend-mode: normal; }
  :root.dclab-carry-back::view-transition-old(root) { animation-name: dclab-carry-under-back; }
  :root.dclab-carry-back::view-transition-new(root) { animation-name: dclab-carry-wipe-back; }

  /* 3. Pillar handoff: the glyph you clicked flies into its place in the next page's hero label, then hands over to the
     label's own glyph. The early script measures the landing (--dclab-carry-x/y/w/h) and adds .dclab-carry-fly. With no
     label to land in, it fades where it was. */
  :root.dclab-carry-vt::view-transition-group(dc-pillar) { z-index: 2; animation: none; }
  :root.dclab-carry-vt::view-transition-old(dc-pillar) { animation: dclab-carry-out .14s ease-out both; mix-blend-mode: normal; }
  :root.dclab-carry-fly::view-transition-group(dc-pillar) { animation: dclab-carry-fly .34s cubic-bezier(.3, 0, .2, 1) both; }
  :root.dclab-carry-fly::view-transition-old(dc-pillar) { animation: dclab-carry-land .42s linear both; }

  /* Lab only: the lab styles a page from deferred scripts, after its first frame. The transition holds on the old page
     until they have run (at most .4s), so the sweep reveals the finished page instead of a page restyling mid-sweep. */
  :root.dclab-carry-hold::view-transition-group(*),
  :root.dclab-carry-hold::view-transition-image-pair(*),
  :root.dclab-carry-hold::view-transition-old(*),
  :root.dclab-carry-hold::view-transition-new(*) { animation-play-state: paused !important; }
}

/* With s = --dclab-carry-s, the edge's foot runs from -(s + 4px), just off the left, to 100%. The new page is clipped to
   the left of the edge, the old page to the right of the edge plus 2px; the far corners sit well outside the page. */
@keyframes dclab-carry-wipe {
  from { clip-path: polygon(calc(-1 * var(--dclab-carry-s) - 60px) 0, -4px 0, calc(-1 * var(--dclab-carry-s) - 4px) 100%, calc(-1 * var(--dclab-carry-s) - 60px) 100%); }
  to { clip-path: polygon(calc(-1 * var(--dclab-carry-s) - 60px) 0, calc(100% + var(--dclab-carry-s)) 0, 100% 100%, calc(-1 * var(--dclab-carry-s) - 60px) 100%); }
}
@keyframes dclab-carry-under {
  from { clip-path: polygon(-2px 0, calc(100% + var(--dclab-carry-s) + 60px) 0, calc(100% + var(--dclab-carry-s) + 60px) 100%, calc(-1 * var(--dclab-carry-s) - 2px) 100%); }
  to { clip-path: polygon(calc(100% + var(--dclab-carry-s) + 2px) 0, calc(100% + var(--dclab-carry-s) + 60px) 0, calc(100% + var(--dclab-carry-s) + 60px) 100%, calc(100% + 2px) 100%); }
}
/* going back: the same edge, the foot running from just off the right (100% + 4px) to -s */
@keyframes dclab-carry-wipe-back {
  from { clip-path: polygon(calc(100% + var(--dclab-carry-s) + 4px) 0, calc(100% + var(--dclab-carry-s) + 60px) 0, calc(100% + var(--dclab-carry-s) + 60px) 100%, calc(100% + 4px) 100%); }
  to { clip-path: polygon(0 0, calc(100% + var(--dclab-carry-s) + 60px) 0, calc(100% + var(--dclab-carry-s) + 60px) 100%, calc(-1 * var(--dclab-carry-s)) 100%); }
}
@keyframes dclab-carry-under-back {
  from { clip-path: polygon(calc(-1 * var(--dclab-carry-s) - 60px) 0, calc(100% + var(--dclab-carry-s) + 2px) 0, calc(100% + 2px) 100%, calc(-1 * var(--dclab-carry-s) - 60px) 100%); }
  to { clip-path: polygon(calc(-1 * var(--dclab-carry-s) - 60px) 0, -2px 0, calc(-1 * var(--dclab-carry-s) - 2px) 100%, calc(-1 * var(--dclab-carry-s) - 60px) 100%); }
}
@keyframes dclab-carry-out { to { opacity: 0; } }
/* the glyph arrives in .34s, then hands over in place to the label's own glyph (the early script fades that one in) */
@keyframes dclab-carry-fly {
  to { translate: var(--dclab-carry-x, 0) var(--dclab-carry-y, 0); width: var(--dclab-carry-w); height: var(--dclab-carry-h); }
}
@keyframes dclab-carry-land { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* lab-checks.css */
/* Design Lab, Round 3: "Check us first" (token: checks). Every rule is scoped to the token.
   A typeset list, not a table of Xs and checks: the question in the display face, our answer in Inter,
   1px rules between rows. Ink, muted and ultramarine only. Print sheets live at the bottom. */

:root[data-lab~="checks"] #compare.dclab-checks-hidden { display: none !important; }

:root[data-lab~="checks"] .dclab-checks {
  --ck-ink: #0a0d31;          /* the logo navy, 18.8:1 on white */
  --ck-body: rgba(10, 13, 49, .86);
  --ck-muted: #585d78;        /* 6.5:1 */
  --ck-rule: #e3e6f0;
  --ck-ultra: #010ed0;        /* 10.6:1 */
  --ck-gap: 32px;
  background: #fff;
  color: var(--ck-ink);
}
/* the list ends on an ink rule, so the next section needs less air to start clearly */
:root[data-lab~="checks"] .dclab-checks:not(.dclab-checks-compact) { padding-bottom: 64px; }
:root[data-lab~="checks"] .dclab-checks :is(h2, h3, p, ul) { margin: 0; }

/* ---------- header: heading left, intro right (stacked below 1000px) ---------- */
:root[data-lab~="checks"] .dclab-checks-head { display: grid; gap: 18px; margin: 0 0 56px; }
:root[data-lab~="checks"] .dclab-checks .dclab-checks-head h2 {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif;
  font-stretch: 125%;
  font-weight: 750;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--ck-ink);
  text-wrap: balance;
  max-width: 16em;
}
:root[data-lab~="checks"] .dclab-checks-head p {
  font: 400 1.08rem/1.6 Inter, system-ui, sans-serif;
  color: var(--ck-muted);
  max-width: 40ch;
  text-wrap: pretty;
}
@media (min-width: 1000px) {
  :root[data-lab~="checks"] .dclab-checks-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ck-gap);
    align-items: end;
    margin-bottom: 64px;
  }
  :root[data-lab~="checks"] .dclab-checks-head > h2 { grid-column: 1 / 8; }
  :root[data-lab~="checks"] .dclab-checks-head > p { grid-column: 8 / 13; padding-bottom: 6px; }
}

/* ---------- the list ---------- */
:root[data-lab~="checks"] .dclab-checks-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--ck-ink);
}
/* the list closes on an ink rule: on the homepage the keys row below it carries it */
:root[data-lab~="checks"] .dclab-checks-list--compact { border-bottom: 1px solid var(--ck-ink); }
:root[data-lab~="checks"] .dclab-checks-row { padding: 28px 0; }
:root[data-lab~="checks"] .dclab-checks-row + .dclab-checks-row { border-top: 1px solid var(--ck-rule); }
:root[data-lab~="checks"] .dclab-checks .dclab-checks-q {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif;
  font-stretch: 110%;
  font-weight: 650;
  font-size: 1.15rem;
  line-height: 1.32;
  letter-spacing: -.004em;
  color: var(--ck-ink);
  text-wrap: balance;
  max-width: 24em;
}
:root[data-lab~="checks"] .dclab-checks-a { margin-top: 10px; }
:root[data-lab~="checks"] .dclab-checks-a > p:first-child {
  font: 400 1rem/1.62 Inter, system-ui, sans-serif;
  color: var(--ck-body);
  max-width: 60ch;
}
/* pretty wrapping leaves short lines on a phone; only use it where the measure is long */
@media (min-width: 641px) {
  :root[data-lab~="checks"] .dclab-checks-a > p:first-child { text-wrap: pretty; }
}
@media (max-width: 640px) {
  :root[data-lab~="checks"] .dclab-checks :is(.dclab-checks-a > p, .dclab-checks-close, .dclab-checks-keys-intro) { text-wrap: wrap; }
}
@media (min-width: 1000px) {
  :root[data-lab~="checks"] .dclab-checks-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ck-gap);
    align-items: baseline;
  }
  :root[data-lab~="checks"] .dclab-checks-q { grid-column: 1 / 6; padding-right: 12px; }
  :root[data-lab~="checks"] .dclab-checks-a { grid-column: 6 / 13; margin-top: 0; }
}

/* ---------- text actions: ultramarine 600, 44px tall targets ---------- */
:root[data-lab~="checks"] .dclab-checks-act {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 22px;
  margin: 4px 0 -12px;               /* the 44px target hangs into the row padding, not the rhythm */
  font: 600 .95rem/1.3 Inter, system-ui, sans-serif;
}
:root[data-lab~="checks"] :is(.dclab-checks-link, .dclab-checks-btn, .dclab-checks-copy) {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 600 .95rem/1.3 Inter, system-ui, sans-serif;
  color: var(--ck-ultra);
  text-decoration: underline 1px;
  text-decoration-color: rgba(1, 14, 208, .32);
  text-underline-offset: .28em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-lab~="checks"] :is(.dclab-checks-btn, .dclab-checks-copy) {
  appearance: none; background: none; border: 0; padding: 0; margin: 0; border-radius: 0; text-align: left;
}
:root[data-lab~="checks"] :is(.dclab-checks-link, .dclab-checks-btn, .dclab-checks-copy, .dclab-checks-tel):hover {
  text-decoration-color: currentColor;
}
:root[data-lab~="checks"] .dclab-checks :focus-visible {
  outline: 2px solid var(--ck-ultra);
  outline-offset: 3px;
  border-radius: 2px;
}
/* copy the number: only where there's a mouse; on a phone the call link is the whole point */
:root[data-lab~="checks"] .dclab-checks-copy { color: var(--ck-muted); text-decoration-color: rgba(88, 93, 120, .4); }
:root[data-lab~="checks"] .dclab-checks-copy:hover { color: var(--ck-ultra); }
:root[data-lab~="checks"] .dclab-checks-copy,
:root[data-lab~="checks"] .dclab-checks-status { display: none; }
@media (hover: hover) and (pointer: fine) {
  :root[data-lab~="checks"] .dclab-checks-copy { display: inline-flex; }
  :root[data-lab~="checks"] .dclab-checks-status { display: inline; font-weight: 500; color: var(--ck-muted); }
}

/* ---------- under the list: print sits under the question column ---------- */
:root[data-lab~="checks"] .dclab-checks-under { display: flex; flex-wrap: wrap; column-gap: 28px; padding-top: 14px; }
@media (min-width: 1000px) {
  :root[data-lab~="checks"] .dclab-checks-under {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ck-gap);
    align-items: start;
  }
  :root[data-lab~="checks"] .dclab-checks-under > :first-child { grid-column: 1 / 6; justify-self: start; }
}

/* ---------- the keys checklist: the eighth row. Summary = the question, body = the answer ---------- */
:root[data-lab~="checks"] .dclab-checks-keys {
  --ck-indent: calc((100% - 11 * var(--ck-gap)) * 5 / 12 + 5 * var(--ck-gap)); /* where column 6 starts */
  padding: 28px 0;
  border-top: 1px solid var(--ck-rule);
  border-bottom: 1px solid var(--ck-ink);
  scroll-margin-top: calc(var(--header-h, 72px) + 24px);
}
:root[data-lab~="checks"] .dclab-checks-summary {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 2px;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  color: var(--ck-ink);
  -webkit-tap-highlight-color: transparent;
}
:root[data-lab~="checks"] .dclab-checks-summary::-webkit-details-marker { display: none; }
:root[data-lab~="checks"] .dclab-checks-summary::marker { content: ''; }
:root[data-lab~="checks"] .dclab-checks-sum-t {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif;
  font-stretch: 110%;
  font-weight: 650;
  font-size: 1.15rem;
  line-height: 1.32;
  letter-spacing: -.004em;
  text-wrap: balance;
  text-decoration: underline 1px;
  text-decoration-color: rgba(10, 13, 49, .22);
  text-underline-offset: .26em;
}
:root[data-lab~="checks"] .dclab-checks-summary:hover .dclab-checks-sum-t { text-decoration-color: currentColor; }
:root[data-lab~="checks"] .dclab-checks-tally {
  grid-column: 1 / -1;
  font: 600 .85rem/1.4 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ck-muted);
}
:root[data-lab~="checks"] .dclab-checks-keys.is-done .dclab-checks-tally { color: var(--ck-ultra); }
/* "0 of 10 found" reads like an empty score before anyone has looked inside */
:root[data-lab~="checks"] .dclab-checks-keys:not([open]) .dclab-checks-tally[data-n="0"] { display: none; }
/* a drawn plus in ultramarine that loses its upright when open */
:root[data-lab~="checks"] .dclab-checks-plus { position: relative; flex: none; width: 12px; height: 12px; color: var(--ck-ultra); }
:root[data-lab~="checks"] .dclab-checks-plus::before,
:root[data-lab~="checks"] .dclab-checks-plus::after {
  content: ''; position: absolute; left: 0; top: 5.25px; width: 12px; height: 1.5px; background: currentColor;
}
:root[data-lab~="checks"] .dclab-checks-plus::after { transform: rotate(90deg); }
:root[data-lab~="checks"] .dclab-checks-keys[open] .dclab-checks-plus::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="checks"] .dclab-checks-plus::after { transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
}

:root[data-lab~="checks"] .dclab-checks-keys-body { padding: 16px 0 0; }
:root[data-lab~="checks"] .dclab-checks-keys-intro { font: 400 1rem/1.62 Inter, system-ui, sans-serif; color: var(--ck-body); padding-bottom: 12px; }
/* the live region announces the tally; the summary shows it */
:root[data-lab~="checks"] .dclab-checks-count {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:root[data-lab~="checks"] .dclab-checks-keys-list { list-style: none; padding: 0; border-top: 1px solid var(--ck-rule); }
:root[data-lab~="checks"] .dclab-checks-keys-list > li { border-bottom: 1px solid var(--ck-rule); }
:root[data-lab~="checks"] .dclab-checks-key {
  display: flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 10px 0;
  font: 400 .97rem/1.45 Inter, system-ui, sans-serif;
  color: var(--ck-ink);
  cursor: pointer;
}
:root[data-lab~="checks"] .dclab-checks-key input {
  flex: none; width: 18px; height: 18px; margin: 0;
  accent-color: var(--ck-ultra);
  cursor: pointer;
}
:root[data-lab~="checks"] .dclab-checks-key input:focus-visible { outline: 2px solid var(--ck-ultra); outline-offset: 3px; }
:root[data-lab~="checks"] .dclab-checks-key:hover span { text-decoration: underline 1px rgba(10, 13, 49, .25); text-underline-offset: .25em; }

/* desktop: the checklist sits in the answer column, like every other answer */
@media (min-width: 1000px) {
  :root[data-lab~="checks"] .dclab-checks-summary { max-width: calc(var(--ck-indent) - var(--ck-gap) - 12px); }
  :root[data-lab~="checks"] .dclab-checks-keys-body { margin-left: var(--ck-indent); max-width: 60ch; }
}
/* where <details> can be a grid, put the summary and the body side by side on one row */
@supports selector(::details-content) {
  @media (min-width: 1000px) {
    :root[data-lab~="checks"] .dclab-checks-keys {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--ck-gap);
      align-items: start;
    }
    :root[data-lab~="checks"] .dclab-checks-keys > .dclab-checks-summary { grid-column: 1 / 6; grid-row: 1; max-width: 100%; padding-right: 12px; }
    :root[data-lab~="checks"] .dclab-checks-keys::details-content { grid-column: 6 / 13; grid-row: 1; }
    :root[data-lab~="checks"] .dclab-checks-keys-body { margin-left: 0; padding-top: 0; }
    :root[data-lab~="checks"] .dclab-checks-keys[open] > .dclab-checks-summary {
      position: sticky; top: calc(var(--header-h, 72px) + 28px);
    }
  }
}

:root[data-lab~="checks"] .dclab-checks-keys-foot { display: grid; gap: 6px; padding-top: 10px; }
:root[data-lab~="checks"] .dclab-checks-close {
  font: 400 .97rem/1.6 Inter, system-ui, sans-serif;
  color: var(--ck-body);
  max-width: 54ch;
  text-wrap: pretty;
}
/* an inline phone link with a 44px hit area that doesn't open up the line */
:root[data-lab~="checks"] .dclab-checks-nw { white-space: nowrap; }
:root[data-lab~="checks"] .dclab-checks-tel {
  display: inline-block; padding: 12px 0; margin: -12px 0;
  color: var(--ck-ultra); font-weight: 600; white-space: nowrap;
  text-decoration: underline 1px rgba(1, 14, 208, .32); text-underline-offset: .28em;
}

/* ---------- Managed IT: the short version, just before the FAQ ---------- */
:root[data-lab~="checks"] .dclab-checks-compact { padding-top: 0; }
:root[data-lab~="checks"] .dclab-checks-compact .dclab-checks-head { margin-bottom: 32px; }
:root[data-lab~="checks"] .dclab-checks-compact .dclab-checks-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); max-width: 18em; }
:root[data-lab~="checks"] .dclab-checks-compact .dclab-checks-row { padding: 24px 0; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  :root[data-lab~="checks"] .dclab-checks-head { margin-bottom: 36px; }
  :root[data-lab~="checks"] .dclab-checks-row { padding: 24px 0; }
  :root[data-lab~="checks"] .dclab-checks .dclab-checks-q { font-size: 1.1rem; }
  :root[data-lab~="checks"] .dclab-checks-summary { width: auto; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  :root[data-lab~="checks"] .dclab-checks-plus { margin-top: 7px; }
  :root[data-lab~="checks"] .dclab-checks-sum-t { font-size: 1.1rem; }
  :root[data-lab~="checks"] .dclab-checks-keys { padding: 24px 0; }
  :root[data-lab~="checks"] .dclab-checks-key { align-items: flex-start; }
  :root[data-lab~="checks"] .dclab-checks-key input { margin-top: 2px; }
}

/* =====================================================================
   Print sheets: lab-checks.js appends .dclab-checks-sheet to <body> and sets
   html.dclab-checks-printing, then removes both on afterprint.
   ===================================================================== */
:root[data-lab~="checks"] .dclab-checks-sheet { display: none; }
@media print {
  :root[data-lab~="checks"].dclab-checks-printing body > :not(.dclab-checks-sheet) { display: none !important; }
  :root[data-lab~="checks"].dclab-checks-printing,
  :root[data-lab~="checks"].dclab-checks-printing body { background: #fff !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  :root[data-lab~="checks"].dclab-checks-printing .dclab-checks-sheet {
    display: block !important;
    color: #000;
    font: 400 10.5pt/1.45 Inter, system-ui, sans-serif;
  }
  :root[data-lab~="checks"] .dclab-checks-sheet * { box-sizing: border-box; margin: 0; padding: 0; }
  :root[data-lab~="checks"] .dclab-checks-sheet-head {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
    padding-bottom: 12pt; border-bottom: 1.5pt solid #000; margin-bottom: 12pt;
  }
  :root[data-lab~="checks"] .dclab-checks-sheet-logo { display: block; flex: none; height: 26pt; width: auto; }
  :root[data-lab~="checks"] .dclab-checks-sheet-head > div { text-align: right; }
  :root[data-lab~="checks"] .dclab-checks-sheet-title {
    font-family: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; font-stretch: 115%;
    font-weight: 700; font-size: 15pt; line-height: 1.2;
  }
  :root[data-lab~="checks"] .dclab-checks-sheet-date { font-size: 9pt; color: #444; margin-top: 2pt; }
  :root[data-lab~="checks"] .dclab-checks-sheet-intro { font-size: 10pt; color: #333; margin-bottom: 12pt; }

  :root[data-lab~="checks"] .dclab-checks-sheet-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table thead { display: table-header-group; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table th, :root[data-lab~="checks"] .dclab-checks-sheet-table td { text-align: left; vertical-align: top; padding: 9pt 10pt 9pt 0; border-bottom: .75pt solid #999; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table thead th { font-size: 8pt; font-weight: 700; letter-spacing: .04em; color: #444; border-bottom: 1.25pt solid #000; padding-top: 0; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table thead th:nth-child(1) { width: 32%; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table thead th:nth-child(2) { width: 34%; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table tbody th {
    font-family: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; font-stretch: 110%;
    font-weight: 650; font-size: 10.5pt; line-height: 1.3;
  }
  :root[data-lab~="checks"] .dclab-checks-sheet-table tbody td:last-child { font-size: 9.5pt; color: #222; padding-right: 0; }
  :root[data-lab~="checks"] .dclab-checks-sheet-table tr { break-inside: avoid; page-break-inside: avoid; }
  :root[data-lab~="checks"] .dclab-checks-lines { display: block; }
  :root[data-lab~="checks"] .dclab-checks-lines > span { display: block; height: 16pt; border-bottom: .5pt solid #aaa; }

  :root[data-lab~="checks"] .dclab-checks-sheet-keys { list-style: none; border-top: .75pt solid #000; }
  :root[data-lab~="checks"] .dclab-checks-sheet-keys > li {
    display: flex; gap: 10pt; padding: 8pt 0 0;
    break-inside: avoid; page-break-inside: avoid;
  }
  :root[data-lab~="checks"] .dclab-checks-sheet-keys > li > div { flex: 1; }
  :root[data-lab~="checks"] .dclab-checks-sheet-keys p { font-weight: 600; font-size: 10.5pt; }
  :root[data-lab~="checks"] .dclab-checks-sheet-keys .dclab-checks-lines > span { height: 13pt; }
  :root[data-lab~="checks"] .dclab-checks-sheet-keys .dclab-checks-lines > span:last-child { border-bottom-color: #666; }
  :root[data-lab~="checks"] .dclab-checks-box { flex: none; width: 11pt; height: 11pt; margin-top: 2pt; border: 1pt solid #000; }
  :root[data-lab~="checks"] .dclab-checks-sheet-keys li.is-found .dclab-checks-box { border-width: 5.5pt; background: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* found: a filled box, printed as border */
  :root[data-lab~="checks"] .dclab-checks-sheet-close { margin-top: 12pt; font-size: 10pt; }

  :root[data-lab~="checks"] .dclab-checks-sheet-foot {
    display: flex; justify-content: space-between; gap: 16pt;
    margin-top: 16pt; padding-top: 8pt; border-top: .75pt solid #000;
    font-size: 9pt; font-weight: 600;
  }
}

/* Round 3 QA: on the homepage the checklist above already answers terms, documentation and leaving, so the
   "Fair terms" section keeps its heading, its intro and its one line about clients staying for years, without the
   three cards that said the same thing a third time. */
:root[data-lab~="checks"] #no-lock-in > .container > .grid { display: none !important; }
:root[data-lab~="checks"] #no-lock-in > .container > .grid + p { margin-top: 0 !important; }

/* lab-colophon.css */
/* Design Lab, Round 2: "Colophon footer" (every page with .site-footer; see js/lab-colophon.js).
   The giant outlined DIVERSICOM wordmark behind the footer gives way to a short typeset colophon,
   set where the blurb sat, under the logo in the brand column: the facts we stand behind, said once,
   plus the typefaces the page is actually set in.
   Every rule needs the token AND the .dclab-colophon-on class the script adds once the paragraph is in,
   so if the script never runs the footer keeps its wordmark and blurb. Nothing here applies when off. */

:root[data-lab~="colophon"] .site-footer.dclab-colophon-on::before { content: none; }
:root[data-lab~="colophon"] .site-footer.dclab-colophon-on .footer-desc { display: none; }

:root[data-lab~="colophon"] .dclab-colophon {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: .9rem;
  line-height: 1.75;
  font-weight: 400;
  color: #b8bdd1;               /* 10.2:1 on the footer navy #0a0e27 */
  max-width: 62ch;              /* the brand column is narrower than this on desktop; caps the one-column tablet case */
  margin: 0 0 24px;             /* the blurb's own spacing above the social tiles */
  text-wrap: pretty;
  hanging-punctuation: first last;
  /* proportional lining figures: tabular ones widen every 1 in running prose ("1 5 seconds") */
  font-variant-numeric: proportional-nums lining-nums;
  overflow-wrap: break-word;
}

/* "Diversicom." reads as a run-in title, the way a colophon names its maker */
:root[data-lab~="colophon"] .dclab-colophon-name { color: #fff; font-weight: 600; }

:root[data-lab~="colophon"] .dclab-colophon a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(184, 189, 209, .5);
  white-space: nowrap;
  border-radius: 2px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
:root[data-lab~="colophon"] .dclab-colophon a:hover { color: #fff; text-decoration-color: currentColor; }
:root[data-lab~="colophon"] .dclab-colophon a:focus-visible { color: #fff; outline: 2px solid #fff; outline-offset: 3px; }

/* the typeface line: its own line under a short rule, like the type note at the foot of a book's colophon,
   with each face named in itself, like a specimen */
:root[data-lab~="colophon"] .dclab-colophon-type {
  display: block;
  margin-top: .7em;
  padding-top: .7em;
  border-top: 1px solid rgba(255, 255, 255, .08);
  width: fit-content;
  max-width: 100%;
  color: #9aa0b8;               /* 7.3:1 on #0a0e27 */
}
:root[data-lab~="colophon"] .dclab-colophon-type:empty { display: none; }
:root[data-lab~="colophon"] .dclab-colophon-face { color: #dfe2ee; }

@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="colophon"] .dclab-colophon a { transition: none; }
}

/* Integration pass: when "The number, lit" closing band is on the same page, it already ends on
   "A real person on our team answers in about 15 seconds, on average." a few hundred pixels up, so the
   colophon stops at the number instead of repeating the sentence word for word. */
:root[data-lab~="colophon"]:has(.dclab-light-promise) .dclab-colophon-human { display: none; }

/* lab-datapath.css */
/* Design Lab, Round 4: "Where your data goes" (datapath). See js/lab-datapath.js.
   A drawing sheet: hairline frame, fine-line glyphs, a dashed line around the client's tenant, numbered callouts.
   Ink states: a step not reached yet is a light construction line, a step passed is navy, the current step is
   brand ultramarine with an amber callout (the only amber on the sheet). Every rule is scoped to the token. */

:root:not([data-lab~="datapath"]) .dclab-dp { display: none; }

:root[data-lab~="datapath"] .dclab-dp {
  --dp-paper: #fff;
  --dp-ink: #0a0d31;
  --dp-now: #010ed0;
  --dp-amber: #f5b53d;
  --dp-ghost: #c9cbd5;                /* lines not reached yet (opaque, so crossing lines don't darken) */
  --dp-line: #8f93ab;                 /* the tenant line before it is reached: always findable */
  --dp-text: #4a4f6a;                 /* 8.1:1 on white */
  --dp-soft: #6b7194;                 /* 4.9:1 on white */
  --dp-rule: rgba(10, 13, 49, .14);
  margin-top: 72px; color: var(--dp-ink); text-align: left; font-family: Inter, system-ui, sans-serif;
}
:root[data-lab~="datapath"] .dclab-dp :where(p, ol, li, h3) { margin: 0; padding: 0; }
:root[data-lab~="datapath"] .dclab-dp-nw { white-space: nowrap; }
:root[data-lab~="datapath"] .dclab-dp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

:root[data-lab~="datapath"] .dclab-dp-sheet {
  position: relative; background: var(--dp-paper); border: 1px solid var(--dp-rule); border-radius: 3px; padding: 30px 40px 26px;
}
:root[data-lab~="datapath"] .dclab-dp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
:root[data-lab~="datapath"] .dclab-dp-h {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 720;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem); line-height: 1.15; letter-spacing: -.01em; color: var(--dp-ink);
}
/* the sheet's note, set like a cell of a drawing's title block */
:root[data-lab~="datapath"] .dclab-dp-typ { flex: none; padding: 6px 10px; border: 1px solid var(--dp-rule); font-size: .76rem; font-weight: 600; line-height: 1.2; color: var(--dp-text); }

/* ---------- the drawing ---------- */
:root[data-lab~="datapath"] .dclab-dp-fig { margin: 22px 0 4px; }
:root[data-lab~="datapath"] .dclab-dp-fig svg {
  display: block; width: 100%; height: auto; max-width: 1000px; margin: 0 auto; overflow: visible;
  font-family: Inter, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
:root[data-lab~="datapath"] .dclab-dp-compact .dclab-dp-fig[data-l="wide"] svg { max-width: 760px; }
:root[data-lab~="datapath"] .dclab-dp-fig[data-l="tall"] svg { max-width: 420px; }
:root[data-lab~="datapath"] .dclab-dp-fig [data-s] { cursor: pointer; }
:root[data-lab~="datapath"] .dclab-dp-fig .w { fill: var(--dp-paper); }
:root[data-lab~="datapath"] #dclab-dp-hatch path { stroke: var(--dp-ink); stroke-width: 1; }

/* glyphs: they light when their step comes */
:root[data-lab~="datapath"] .dclab-dp-g {
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
  color: var(--dp-ghost); transition: color .3s ease;
}
:root[data-lab~="datapath"] .dclab-dp-g.is-done { color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-g.is-now { color: var(--dp-now); stroke-width: 1.5; }

/* paths: a light construction line is always there; the inked line draws over it */
:root[data-lab~="datapath"] :is(.dclab-dp-gh, .dclab-dp-ink, .dclab-dp-ah) { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:root[data-lab~="datapath"] .dclab-dp-gh { stroke: var(--dp-ghost); stroke-width: 1.3; }
:root[data-lab~="datapath"] .dclab-dp-ink { stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 1 2; stroke-dashoffset: 1; color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-ink:is(.is-done, .is-now) { stroke-dashoffset: 0; }
:root[data-lab~="datapath"] .dclab-dp-ink.is-now { color: var(--dp-now); transition: stroke-dashoffset .8s cubic-bezier(.3, .6, .3, 1); }
:root[data-lab~="datapath"] .dclab-dp-ah { stroke: currentColor; stroke-width: 1.6; color: var(--dp-ink); opacity: 0; }
:root[data-lab~="datapath"] .dclab-dp-ah:is(.is-done, .is-now) { opacity: 1; }
:root[data-lab~="datapath"] .dclab-dp-ah.is-now { color: var(--dp-now); transition: opacity .2s ease .6s; }

/* the tenant line */
:root[data-lab~="datapath"] .dclab-dp-bd { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-dasharray: 7 5; color: var(--dp-line); transition: color .3s ease; }
:root[data-lab~="datapath"] .dclab-dp-bd.is-done { color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-bd.is-now { color: var(--dp-now); stroke-width: 1.6; }

/* who can see what: a solid record they can see, one hatched on the sail's angle they can't */
:root[data-lab~="datapath"] .dclab-dp-tl { color: var(--dp-ghost); transition: color .3s ease; }
:root[data-lab~="datapath"] .dclab-dp-tl rect { fill: none; stroke: currentColor; stroke-width: 1.1; }
:root[data-lab~="datapath"] .dclab-dp-tl.is-done { color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-tl.is-now { color: var(--dp-now); }
:root[data-lab~="datapath"] .dclab-dp-tl:is(.is-done, .is-now) .y { fill: currentColor; }
:root[data-lab~="datapath"] .dclab-dp-tl:is(.is-done, .is-now) .n { fill: url(#dclab-dp-hatch); }

/* labels stay readable in every state (4.9:1 at their lightest); a paper halo knocks out any line behind them */
:root[data-lab~="datapath"] .dclab-dp-t {
  fill: var(--dp-soft); stroke: var(--dp-paper); stroke-width: 6px; stroke-linejoin: round; paint-order: stroke fill;
  font-size: 12.5px; font-weight: 500; transition: fill .3s ease;
}
:root[data-lab~="datapath"] .dclab-dp-t.is-done { fill: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-t.is-now { fill: var(--dp-now); }
:root[data-lab~="datapath"] .dclab-dp-grp { font-size: 13px; font-weight: 650; stroke-width: 9px; }
:root[data-lab~="datapath"] .dclab-dp-sm { font-size: 11.5px; }

/* numbered callouts */
:root[data-lab~="datapath"] .dclab-dp-co { color: var(--dp-soft); }
:root[data-lab~="datapath"] .dclab-dp-co circle { fill: var(--dp-paper); stroke: currentColor; stroke-width: 1.2; transition: fill .2s ease; }
:root[data-lab~="datapath"] .dclab-dp-co text { fill: currentColor; stroke: none; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root[data-lab~="datapath"] .dclab-dp-co:is(.is-done, .is-now) { color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-co.is-now circle { fill: var(--dp-amber); }

/* ---------- the key and the controls (desktop: one column per step under the drawing) ---------- */
:root[data-lab~="datapath"] .dclab-dp-cap { display: none; }
/* Back and Next sit on the left, clear of the chat teaser that lives in the bottom right corner */
:root[data-lab~="datapath"] .dclab-dp-ctl { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px 10px; margin-top: 14px; }
:root[data-lab~="datapath"] .dclab-dp-key { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 28px; list-style: none; }
:root[data-lab~="datapath"] .dclab-dp-back { grid-column: 1; grid-row: 2; }
:root[data-lab~="datapath"] .dclab-dp-next { grid-column: 2; grid-row: 2; }
:root[data-lab~="datapath"] .dclab-dp-key li { padding-top: 10px; border-top: 1px solid var(--dp-rule); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; }
:root[data-lab~="datapath"] .dclab-dp-key li.is-now { border-top-color: var(--dp-now); box-shadow: inset 0 1px 0 var(--dp-now); }
:root[data-lab~="datapath"] .dclab-dp-step {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; background: none;
  color: var(--dp-text); font: 650 .95rem/1.25 Inter, system-ui, sans-serif; text-align: left; cursor: pointer;
}
:root[data-lab~="datapath"] .dclab-dp-n {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid currentColor; border-radius: 50%;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .2s ease;
}
:root[data-lab~="datapath"] .dclab-dp-key li:is(.is-done, .is-now) .dclab-dp-step { color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-key li.is-now .dclab-dp-n { background: var(--dp-amber); }
:root[data-lab~="datapath"] .dclab-dp-key li:not(.is-now):hover .dclab-dp-st { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-lab~="datapath"] .dclab-dp-s { margin-top: 2px; font-size: .88rem; line-height: 1.55; color: var(--dp-text); text-wrap: pretty; }

:root[data-lab~="datapath"] .dclab-dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; margin: 0; padding: 0 16px;
  border: 1px solid var(--dp-rule); border-radius: 4px; background: var(--dp-paper); color: var(--dp-ink);
  font: 600 .9rem/1 Inter, system-ui, sans-serif; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
:root[data-lab~="datapath"] .dclab-dp-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:root[data-lab~="datapath"] .dclab-dp-btn:hover { border-color: var(--dp-ink); }
:root[data-lab~="datapath"] .dclab-dp-next { background: var(--dp-now); border-color: var(--dp-now); color: #fff; }
:root[data-lab~="datapath"] .dclab-dp-next:hover { background: #1a26e6; border-color: #1a26e6; }
:root[data-lab~="datapath"] .dclab-dp-back[aria-disabled="true"] { color: #9aa0b8; border-color: var(--dp-rule); cursor: default; }
:root[data-lab~="datapath"] :is(.dclab-dp-step, .dclab-dp-btn, .dclab-dp-foot a):focus-visible { outline: 2px solid var(--dp-now); outline-offset: 3px; border-radius: 4px; }

/* Illuminate: links to the full drawings, beside Back and Next */
:root[data-lab~="datapath"] .dclab-dp-foot { grid-column: 3; grid-row: 2; justify-self: end; font-size: .9rem; line-height: 1.55; color: var(--dp-text); text-align: right; }
:root[data-lab~="datapath"] .dclab-dp-foot a { color: var(--dp-now); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- phones and tablets: the drawing, a row of step numbers, one caption, then Back and Next ---------- */
@media (max-width: 999px) {
  :root[data-lab~="datapath"] .dclab-dp { margin-top: 48px; }
  :root[data-lab~="datapath"] .dclab-dp-sheet { padding: 22px 20px 20px; }
  :root[data-lab~="datapath"] .dclab-dp-fig { margin-top: 18px; }
  :root[data-lab~="datapath"] .dclab-dp-ctl { grid-template-columns: repeat(2, minmax(0, 210px)); justify-content: center; gap: 14px 10px; }
  :root[data-lab~="datapath"] .dclab-dp-btn { width: 100%; }
  :root[data-lab~="datapath"] .dclab-dp-foot { grid-column: 1 / -1; grid-row: auto; justify-self: start; text-align: left; }
}
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  :root[data-lab~="datapath"] .dclab-dp-key { display: flex; justify-content: center; gap: 6px; }
  :root[data-lab~="datapath"] .dclab-dp-key :is(li, li.is-now) { padding: 0; border: 0; box-shadow: none; }
  :root[data-lab~="datapath"] .dclab-dp-step { justify-content: center; width: 44px; height: 44px; }
  :root[data-lab~="datapath"] .dclab-dp-n { width: 32px; height: 32px; font-size: .86rem; }
  :root[data-lab~="datapath"] :is(.dclab-dp-st, .dclab-dp-s) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  :root[data-lab~="datapath"] .dclab-dp-cap { display: block; grid-column: 1 / -1; font-size: .95rem; line-height: 1.5; color: var(--dp-text); text-wrap: pretty; }
  :root[data-lab~="datapath"] .dclab-dp-cap b { display: block; margin-bottom: 2px; font-weight: 650; color: var(--dp-ink); }
  :root[data-lab~="datapath"] .dclab-dp-back { grid-column: 1; grid-row: 3; }
  :root[data-lab~="datapath"] .dclab-dp-next { grid-column: 2; grid-row: 3; }
}
/* reduced motion on a narrow screen: every step as a plain list, nothing hidden, Back and Next under it */
@media (max-width: 999px) and (prefers-reduced-motion: reduce) {
  :root[data-lab~="datapath"] .dclab-dp-key { display: block; }
  :root[data-lab~="datapath"] .dclab-dp-key li { padding: 8px 0 12px; }
}
@media (max-width: 380px) {
  :root[data-lab~="datapath"] .dclab-dp-sheet { padding: 20px 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="datapath"] .dclab-dp * { transition: none !important; animation: none !important; }
}

/* lab-desk.css */
/* Design Lab, Round 3: "The contact desk" (staging only).
   Every rule is scoped to the desk token; the nodes it styles only exist while the token is on. */

:root[data-lab~="desk"] {
  --dk-ink: #0a0d31;
  --dk-muted: #5b6185;
  --dk-rule: #e3e6f0;
  --dk-ultra: var(--lab-ultra, #010ed0);
  --dk-face: var(--lab-face, 'Mona Sans', 'Inter Tight', system-ui, sans-serif);
}
:root[data-lab~="desk"]:not([data-lab~="blue"]) { --dk-ultra: var(--blue, #2b5cff); } /* match the live site's links and buttons until 'blue' is on */
:root[data-lab~="desk"] .dclab-desk-gone { display: none !important; }
:root[data-lab~="desk"] .dclab-desk-opt { font-weight: 400; margin-left: 2px; }

/* ---------- 1. Offer echo: the subline sits closer, the steps take its old gap ---------- */
:root[data-lab~="desk"] #contact-form-wrapper > p.dclab-desk-sub { margin-bottom: 18px !important; font-size: .9rem; line-height: 1.55; color: var(--dk-muted); max-width: 34em; }

:root[data-lab~="desk"] .dclab-desk-urgent { margin: 14px 0 0; padding: 16px 0 18px; border-top: 1px solid var(--dk-rule); border-bottom: 1px solid var(--dk-rule); }
:root[data-lab~="desk"] .dclab-desk-urgent p { margin: 0; font: 400 .875rem/1.55 Inter, system-ui, sans-serif; color: var(--dk-muted); }
:root[data-lab~="desk"] .dclab-desk-urgent p.dclab-desk-urgent-call {
  margin: 0 0 8px; font-family: var(--dk-face); font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--dk-ink);
}
:root[data-lab~="desk"][data-lab~="type-mona"] .dclab-desk-urgent-call { font-stretch: 110%; }
:root[data-lab~="desk"] .dclab-desk-urgent-tel {
  display: inline-flex; align-items: center; min-height: 44px; font-family: var(--dk-face); font-size: 1.6rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.1;
  color: var(--dk-ultra); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(1, 14, 208, .3); text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
}
:root[data-lab~="desk"] .dclab-desk-urgent-tel:hover { text-decoration-color: currentColor; }

/* ---------- 2. Steps strip ---------- */
:root[data-lab~="desk"] .dclab-desk-stepswrap { margin: 0 0 26px; container-type: inline-size; }
:root[data-lab~="desk"] .dclab-desk-steps {
  position: relative; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--dk-rule); border-bottom: 1px solid var(--dk-rule);
}
:root[data-lab~="desk"] .dclab-desk-steps > li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 0 6px;
  margin: 0; padding: 12px 0; font: 500 .875rem/1.45 Inter, system-ui, sans-serif; color: var(--dk-ink);
}
:root[data-lab~="desk"] .dclab-desk-steps > li::before { content: none; }
:root[data-lab~="desk"] .dclab-desk-steps > li + li { border-top: 1px solid var(--dk-rule); }
:root[data-lab~="desk"] .dclab-desk-n {
  font-family: var(--dk-face); font-weight: 750; font-size: 1.05rem; line-height: 1.3; color: var(--dk-ultra);
  font-variant-numeric: tabular-nums;
}
:root[data-lab~="desk"] .dclab-desk-t { min-width: 0; }
:root[data-lab~="desk"] .dclab-desk-steps details > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin: -12px 0; padding: 12px 0; min-height: 44px; box-sizing: border-box; cursor: pointer; list-style: none; color: var(--dk-ink);
}
:root[data-lab~="desk"] .dclab-desk-steps details > summary::-webkit-details-marker { display: none; }
:root[data-lab~="desk"] .dclab-desk-steps details > summary::marker { content: ''; }
:root[data-lab~="desk"] .dclab-desk-steps details > summary:hover { color: var(--dk-ultra); }
:root[data-lab~="desk"] .dclab-desk-steps details > summary:focus { outline: none; }
:root[data-lab~="desk"] .dclab-desk-steps details > summary:focus-visible { outline: 3px solid var(--dk-ultra); outline-offset: 2px; border-radius: 2px; }
/* A drawn plus that becomes a minus: a disclosure mark, not an arrow. */
:root[data-lab~="desk"] .dclab-desk-plus { position: relative; flex: none; width: 11px; height: 11px; margin-top: 5px; }
:root[data-lab~="desk"] .dclab-desk-plus::before,
:root[data-lab~="desk"] .dclab-desk-plus::after { content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 1.5px; background: var(--dk-ultra); }
:root[data-lab~="desk"] .dclab-desk-plus::after { transform: rotate(90deg); transition: transform .18s ease; }
:root[data-lab~="desk"] details[open] .dclab-desk-plus::after { transform: rotate(0deg); }
:root[data-lab~="desk"] .dclab-desk-more { margin: 14px 0 0; font: 400 .8125rem/1.55 Inter, system-ui, sans-serif; color: var(--dk-muted); max-width: 36em; }

/* One row once the strip has the room (two steps since 10/8). */
@supports (container-type: inline-size) {
  @container (min-width: 440px) {
    :root[data-lab~="desk"] .dclab-desk-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    :root[data-lab~="desk"] .dclab-desk-steps.dclab-desk-open { padding-bottom: var(--dk-more, 0px); }
    :root[data-lab~="desk"] .dclab-desk-steps > li { display: block; padding: 12px 14px 14px 0; }
    :root[data-lab~="desk"] .dclab-desk-steps > li + li { border-top: 0; border-left: 1px solid var(--dk-rule); padding-left: 14px; }
    :root[data-lab~="desk"] .dclab-desk-n { display: block; margin-bottom: 4px; }
    :root[data-lab~="desk"] .dclab-desk-steps details > summary { margin: 0; padding: 0; min-height: 0; }
    :root[data-lab~="desk"] .dclab-desk-more {
      position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 11px 0 13px; max-width: none;
      border-top: 1px solid var(--dk-rule);
    }
  }
}

/* ---------- 3. Topic: the optional marker matches "Tell us more (optional)" ---------- */
:root[data-lab~="desk"] label[for="topic"] .dclab-desk-opt { font-size: .75rem; }

/* ---------- 4. Callback window ----------
   Known deviation from the Round 3 6px / 1px rule: the segments wear the form's own input edge and radius
   (2px var(--gray-200), var(--radius)) so one card never shows two control systems. */
:root[data-lab~="desk"] .dclab-desk-when { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
:root[data-lab~="desk"] .dclab-desk-when > legend {
  display: block; margin: 0 0 6px; padding: 0; font-size: .85rem; font-weight: 600; color: var(--text, var(--dk-ink));
}
:root[data-lab~="desk"] .dclab-desk-seg { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
:root[data-lab~="desk"] .dclab-desk-seg > input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
:root[data-lab~="desk"] .dclab-desk-seg > label {
  display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 8px;
  font: 500 .875rem/1.2 Inter, system-ui, sans-serif; color: var(--dk-ink); text-align: center;
  background: var(--white, #fff); border: 2px solid var(--gray-200, #dde1eb); border-radius: var(--radius, 12px); cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
:root[data-lab~="desk"] .dclab-desk-seg > label:hover { border-color: var(--gray-300, #b8bdd1); }
:root[data-lab~="desk"] .dclab-desk-seg > input:checked + label:hover { border-color: var(--dk-ultra); }
:root[data-lab~="desk"] .dclab-desk-seg > input:checked + label { background: var(--dk-ultra); border-color: var(--dk-ultra); color: #fff; font-weight: 600; }
:root[data-lab~="desk"] .dclab-desk-seg > input:focus-visible + label { outline: 3px solid var(--dk-ultra); outline-offset: 2px; }
:root[data-lab~="desk"] .dclab-desk-hint { margin: 6px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--dk-muted); }

/* ---------- 6. Tool prefill note ---------- */
:root[data-lab~="desk"] .dclab-desk-brought { margin: 0 0 18px; font: 400 .875rem/1.5 Inter, system-ui, sans-serif; color: var(--dk-muted); }

/* ---------- 7. Under the button, and the client box ---------- */
:root[data-lab~="desk"] .dclab-desk-sooner { margin: 14px 0 0; text-align: center; font: 500 .875rem/1.45 Inter, system-ui, sans-serif; color: var(--dk-ink); }
:root[data-lab~="desk"] .dclab-desk-sooner a,
:root[data-lab~="desk"] .dclab-desk-ty-wait a {
  color: var(--dk-ultra); font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(1, 14, 208, .3); text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
}
:root[data-lab~="desk"] .dclab-desk-ty-wait a { white-space: normal; }
:root[data-lab~="desk"] .dclab-desk-sooner a:hover,
:root[data-lab~="desk"] .dclab-desk-ty-wait a:hover { text-decoration-color: currentColor; }
:root[data-lab~="desk"] .dclab-desk-nowrap { white-space: nowrap; }
:root[data-lab~="desk"] .dclab-desk-on-navy { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); white-space: nowrap; }
:root[data-lab~="desk"] .dclab-desk-client a.btn { min-height: 44px !important; }
:root[data-lab~="desk"] .dclab-desk-on-navy:hover { text-decoration-color: #fff; }
:root[data-lab~="desk"] :is(.dclab-desk-sooner, .dclab-desk-ty-wait, .dclab-desk-urgent, .dclab-desk-ty-call) a:focus-visible,
:root[data-lab~="desk"] .dclab-desk-on-navy:focus-visible { outline: 3px solid var(--dk-ultra); outline-offset: 2px; border-radius: 2px; }
:root[data-lab~="desk"] .dclab-desk-on-navy:focus-visible { outline-color: #fff; }

/* ---------- 8. The thank-you ---------- */
:root[data-lab~="desk"] .form-success.dclab-desk-ty { padding: 4px 0 0; text-align: left; }
:root[data-lab~="desk"] .dclab-desk-ty .form-success-icon { width: 44px; height: 44px; margin: 0 0 22px; }
:root[data-lab~="desk"] .dclab-desk-ty .form-success-icon svg { width: 22px; height: 22px; }
:root[data-lab~="desk"] .dclab-desk-ty h3.dclab-desk-ty-h {
  margin: 0 0 8px !important; font-family: var(--dk-face); font-size: clamp(1.55rem, 2.6vw, 1.9rem); font-weight: 750;
  line-height: 1.08; letter-spacing: -.012em; color: var(--dk-ink);
}
:root[data-lab~="desk"][data-lab~="type-mona"] .dclab-desk-ty h3.dclab-desk-ty-h { font-stretch: 125%; }
:root[data-lab~="desk"] .dclab-desk-ty-h:focus { outline: none; }
:root[data-lab~="desk"] .dclab-desk-ty-h:focus-visible { outline: 3px solid var(--dk-ultra); outline-offset: 4px; border-radius: 2px; }
:root[data-lab~="desk"] .dclab-desk-ty-body p { margin: 0; }
:root[data-lab~="desk"] p.dclab-desk-ty-lede { font: 400 1rem/1.5 Inter, system-ui, sans-serif; color: var(--dk-ink); }

:root[data-lab~="desk"] .dclab-desk-faces { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 22px 0 0; padding: 0; list-style: none; }
:root[data-lab~="desk"] .dclab-desk-face { min-width: 0; margin: 0; padding: 0; }
:root[data-lab~="desk"] .dclab-desk-face::before { content: none; }
/* The sail cut: the top right corner follows the leech, same frame as Who picks up. */
:root[data-lab~="desk"] .dclab-desk-frame {
  position: relative; display: block; width: 64px; height: 64px; background: #c3c8ee;
  clip-path: polygon(0 0, 85% 0, 100% 28%, 100% 100%, 0 100%);
}
:root[data-lab~="desk"] .dclab-desk-frame-in {
  position: absolute; inset: 1px; display: block; overflow: hidden; background: #dfe3f2;
  clip-path: polygon(0 0, 85% 0, 100% 28%, 100% 100%, 0 100%);
}
:root[data-lab~="desk"] .dclab-desk-frame-in::after { content: ''; position: absolute; inset: 0; background: var(--dk-ultra); mix-blend-mode: screen; opacity: .16; pointer-events: none; }
:root[data-lab~="desk"] .dclab-desk-frame img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.06);
}
:root[data-lab~="desk"] .dclab-desk-fname { display: block; margin-top: 8px; font: 600 .875rem/1.3 Inter, system-ui, sans-serif; color: var(--dk-ink); }
:root[data-lab~="desk"] .dclab-desk-frole { display: block; font: 400 .8125rem/1.35 Inter, system-ui, sans-serif; color: var(--dk-muted); }

:root[data-lab~="desk"] p.dclab-desk-ty-handy {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--dk-rule);
  font: 400 .875rem/1.55 Inter, system-ui, sans-serif; color: var(--dk-muted); max-width: 36em;
}
:root[data-lab~="desk"] p.dclab-desk-ty-save { margin-top: 16px; }
/* Incident thank-you: the call is the primary action, the saved number the secondary one. */
:root[data-lab~="desk"] p.dclab-desk-ty-call { margin-top: 14px; }
:root[data-lab~="desk"] .dclab-desk-callbtn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 22px; border-radius: 6px;
  font: 700 1.125rem/1 var(--dk-face); letter-spacing: -.005em; white-space: nowrap; text-decoration: none;
  color: #fff !important; background: var(--dk-ultra); border: 1px solid var(--dk-ultra);
}
:root[data-lab~="desk"] .dclab-desk-callbtn:hover { background: var(--dk-ink); border-color: var(--dk-ink); }
:root[data-lab~="desk"] p.dclab-desk-ty-15 { margin-top: 10px; font-size: .9375rem; color: var(--dk-muted); }
:root[data-lab~="desk"] .dclab-desk-vcf {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 18px;
  font: 600 .875rem/1 Inter, system-ui, sans-serif; color: var(--dk-ultra); background: #fff;
  border: 1px solid var(--dk-ultra); border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease;
}
:root[data-lab~="desk"] .dclab-desk-vcf:hover { background: var(--dk-ultra); color: #fff; }
:root[data-lab~="desk"] .dclab-desk-vcf:focus { outline: none; }
:root[data-lab~="desk"] .dclab-desk-vcf:focus-visible { outline: 3px solid var(--dk-ultra); outline-offset: 2px; }
:root[data-lab~="desk"] p.dclab-desk-ty-wait { margin-top: 18px; font: 400 .875rem/1.55 Inter, system-ui, sans-serif; color: var(--dk-ink); }
:root[data-lab~="desk"] .dclab-desk-ty p.dclab-desk-ty-right a { color: var(--dk-ultra) !important; white-space: nowrap; }
:root[data-lab~="desk"] .dclab-desk-ty p.dclab-desk-ty-right { max-width: none !important; margin: 10px 0 0 !important; font-size: .875rem !important; line-height: 1.55; color: var(--dk-muted) !important; }

/* Phones: 44px hit areas. A link alone on its line gets padding; links that can share a paragraph across lines
   become 44px line boxes instead, so neighbouring hit areas never overlap. */
@media (max-width: 600px) {
  :root[data-lab~="desk"] .dclab-desk-sooner a { padding-block: 14px; }
  /* "While you wait" becomes a short stacked list of two 44px links */
  :root[data-lab~="desk"] .dclab-desk-ty-wait a { display: flex; align-items: center; width: fit-content; min-height: 44px; }
  :root[data-lab~="desk"] .dclab-desk-ty-wait .dclab-desk-or { display: none; }
  :root[data-lab~="desk"] p.dclab-desk-ty-wait { margin-top: 14px; }
  :root[data-lab~="desk"] .dclab-desk-on-navy,
  :root[data-lab~="desk"] .dclab-desk-ty p.dclab-desk-ty-right a { display: inline-block; max-width: 100%; padding-block: 11px; line-height: 22px; }
  :root[data-lab~="desk"] .dclab-desk-urgent-tel { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
  :root[data-lab~="desk"] .dclab-desk-faces { gap: 14px 24px; }
}
/* With Who picks up on, Joshua and Dave already stand in the right column beside the form: no second set. */
@media (min-width: 901px) {
  :root[data-lab~="desk"][data-lab~="who-picks"] .dclab-desk-faces { display: none; }
}
/* Desk alone on a laptop: the short right column (call, email, client box) stays beside the form as it scrolls.
   With Who picks up on, the column is full and tall, so it scrolls normally. */
@media (min-width: 1024px) and (min-height: 760px) {
  :root[data-lab~="desk"]:not([data-lab~="who-picks"]) .contact-info { position: sticky; top: 96px; }
}
@media (max-width: 420px) {
  :root[data-lab~="desk"] .dclab-desk-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="desk"] .dclab-desk-plus::after,
  :root[data-lab~="desk"] .dclab-desk-seg > label,
  :root[data-lab~="desk"] .dclab-desk-vcf { transition: none; }
}

/* lab-domain.css */
/* Design Lab, Round 4: "Start with your domain" (domain). See js/lab-domain.js.
   Two parts. The email check page (email-check.html, lab only) must work with the token on or off, so its rules are
   not token scoped; every one of them targets a dclab-dom class that exists only on that page. The quick check that
   joins the legal, accounting and financial pages is scoped to the token, like every other idea. */

/* ---------- the page ---------- */
.dclab-dom-hero, .dclab-dom-sheet, .dclab-dom-figs, .dclab-dom-band {
  --dd-ink: #0a0d31; --dd-line: rgba(10, 13, 49, .14); --dd-line-2: rgba(10, 13, 49, .26); --dd-muted: #4a4f6a;
  --dd-accent: var(--blue); --dd-good: #047857; --dd-warn: #b45309; --dd-bad: #b42318;
  --dd-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-lab~="blue"] :is(.dclab-dom-hero, .dclab-dom-sheet, .dclab-dom-figs, .dclab-dom-band) { --dd-accent: var(--lab-ultra); }

.dclab-dom-hero { position: relative; padding: 136px 0 64px; }
.dclab-dom-hero-in { max-width: 760px; text-align: center; }
.dclab-dom-hero .tag { margin-bottom: 16px; }
.dclab-dom-hero h1 { color: #fff; margin: 0 auto 16px; max-width: 15em; text-wrap: balance; }
.dclab-dom-lede { color: #b8bdd1; font-size: 1.1rem; line-height: 1.65; max-width: 36em; margin: 0 auto; text-wrap: pretty; }

.dclab-dom-form { max-width: 600px; margin: 34px auto 0; text-align: left; }
.dclab-dom-label { display: block; margin: 0 0 8px 2px; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: #cfd6ff; }
.dclab-dom-field { display: flex; gap: 6px; padding: 6px; border-radius: 14px; background: #fff; }
.dclab-dom-field:focus-within { box-shadow: 0 0 0 3px var(--cyan, #00d4ff); }
/* the button draws its own ring; the field's ring is for the input */
.dclab-dom-field:has(.dclab-dom-btn:focus) { box-shadow: none; }
.dclab-dom-field input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent;
  font: 500 1.05rem/1.2 Inter, system-ui, sans-serif; color: var(--dd-ink); outline: none;
}
.dclab-dom-field input::placeholder { color: #8a90a8; }
.dclab-dom-btn { min-height: 52px; padding: 0 22px; border-radius: 10px; white-space: nowrap; }
/* it sits inside the field, so it never takes the site's magnetic pull */
.dclab-dom-field .dclab-dom-btn.magnetized { transform: none !important; }
.dclab-dom-btn[aria-disabled="true"] { opacity: .72; cursor: progress; }
.dclab-dom-err { margin: 10px 2px 0; font-size: .9rem; font-weight: 600; color: #ffc2b8; }
.dclab-dom-field:has(input[aria-invalid="true"]):not(:focus-within) { box-shadow: 0 0 0 2px #ffc2b8; }
.dclab-dom-err:empty { display: none; }
.dclab-dom-hint { margin: 10px 2px 0; font-size: .86rem; color: #b8bdd1; }

/* the records it reads, as a ruled line; each one is underlined when its real answer comes back */
.dclab-dom-ruler {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; max-width: 600px; margin: 30px auto 0; padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .16); list-style: none;
  font: 600 .72rem/1 var(--dd-mono); letter-spacing: .12em; color: rgba(255, 255, 255, .62);
}
.dclab-dom-ruler li { position: relative; padding-bottom: 6px; transition: color .3s ease; }
.dclab-dom-ruler li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.3, .6, .3, 1);
}
.dclab-dom-ruler li.is-read { color: #fff; }
.dclab-dom-ruler li.is-read::after { transform: scaleX(1); }
.dclab-dom-privacy { max-width: 600px; margin: 18px auto 0; font-size: .84rem; line-height: 1.6; color: #b8bdd1; text-wrap: pretty; }

/* ---------- the sheet: six records ---------- */
.dclab-dom-sheet { padding: 72px 0 40px; background: #fff; }
.dclab-dom-wrap { max-width: 1000px; }
.dclab-dom-intro, .dclab-dom-figs-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; }
.dclab-dom-intro h2, .dclab-dom-figs-head h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.4rem); line-height: 1.1; }
.dclab-dom-intro p, .dclab-dom-figs-head p { margin: 0; color: var(--dd-muted); font-size: 1rem; line-height: 1.65; max-width: 34em; }
.dclab-dom-intro[hidden], .dclab-dom-head[hidden] { display: none; }
.dclab-dom-head { scroll-margin-top: 24px; }

.dclab-dom-for { margin: 0 0 12px; font: 500 .8rem/1.4 var(--dd-mono); letter-spacing: .02em; color: var(--dd-muted); overflow-wrap: anywhere; }
.dclab-dom-for b { color: var(--dd-ink); font-weight: 700; }
.dclab-dom-verdict { margin: 0 0 14px; max-width: 24em; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.16; color: var(--dd-ink); text-wrap: balance; overflow-wrap: anywhere; }
.dclab-dom-next { margin: 0 0 10px; max-width: 40em; font-size: 1.04rem; line-height: 1.6; color: #2d3152; }
.dclab-dom-next:empty { display: none; }
.dclab-dom-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin: 0; font-size: .88rem; color: var(--dd-muted); }
.dclab-dom-again, .dclab-dom-see, .dclab-dom-subgo {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 .9rem/1 Inter, system-ui, sans-serif; color: var(--dd-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.dclab-dom-again:hover, .dclab-dom-see:hover, .dclab-dom-subgo:hover { text-decoration-thickness: 2px; }
.dclab-dom-see[hidden] { display: none; }
.dclab-dom-fig:focus { outline: none; }
.dclab-dom-fig:focus-visible, .dclab-dom-between:focus-visible { outline: 3px solid var(--cyan, #00d4ff); outline-offset: 4px; }
.dclab-dom-sub { margin: 6px 0 0; font-size: .95rem; color: #2d3152; }
.dclab-dom-sub[hidden] { display: none; }
.dclab-dom-sub .dclab-dom-subgo { margin-left: 6px; }

.dclab-dom-rows { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1.5px solid var(--dd-ink); }
.dclab-dom-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "n name st" "n say st" "n note st" "n raw st";
  column-gap: 14px; padding: 20px 0 21px; border-bottom: 1px solid var(--dd-line);
}
.dclab-dom-n {
  grid-area: n; display: grid; place-items: center; width: 27px; height: 27px; margin-top: 1px; border: 1px solid var(--dd-ink); border-radius: 50%;
  font: 600 .74rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--dd-ink);
}
.dclab-dom-name { grid-area: name; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 2px 0 6px; font-size: 1.1rem; line-height: 1.3; color: var(--dd-ink); }
.dclab-dom-rec {
  padding: 4px 6px 3px; border: 1px solid var(--dd-line-2); border-radius: 4px;
  font: 600 .66rem/1 var(--dd-mono); letter-spacing: .1em; color: var(--dd-muted); font-stretch: 100%;
}
.dclab-dom-say { grid-area: say; margin: 0; max-width: 40em; font-size: .96rem; line-height: 1.6; color: #2d3152; }
.dclab-dom-note { grid-area: note; margin: 6px 0 0; max-width: 44em; font-size: .88rem; line-height: 1.55; color: var(--dd-muted); }
.dclab-dom-note[hidden] { display: none; }
.dclab-dom-raw {
  grid-area: raw; justify-self: start; max-width: 100%; margin: 10px 0 0; padding: 6px 10px; border-radius: 6px; background: #f4f5f9;
  font: .76rem/1.55 var(--dd-mono); color: #3b4060; word-break: break-all; white-space: pre-line;
}
.dclab-dom-raw[hidden] { display: none; }
.dclab-dom-st { grid-area: st; justify-self: end; align-self: start; margin: 0; text-align: right; }
.dclab-dom-st:not(:empty) {
  padding: 6px 10px 5px; border: 1px solid currentColor; border-radius: 6px; background: #fff;
  font: 650 .8rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em; color: var(--dd-muted); white-space: nowrap;
}
.dclab-dom-row[data-tone="good"] .dclab-dom-st { color: var(--dd-good); }
.dclab-dom-row[data-tone="warn"] .dclab-dom-st { color: var(--dd-warn); }
.dclab-dom-row[data-tone="bad"] .dclab-dom-st { color: var(--dd-bad); }
.dclab-dom-row[data-k="sts"] .dclab-dom-name, .dclab-dom-row[data-k="rpt"] .dclab-dom-name { font-size: 1rem; }
.dclab-dom-sheet.is-busy .dclab-dom-rows { opacity: .55; transition: opacity .2s ease; }

/* the hand-off */
.dclab-dom-go {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: center;
  margin-top: 40px; padding: 28px 32px; border: 1px solid var(--dd-ink); border-radius: 16px;
}
.dclab-dom-go h3 { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.25; color: var(--dd-ink); }
.dclab-dom-go p { margin: 0; color: #2d3152; line-height: 1.6; }
.dclab-dom-go-act { text-align: center; }
.dclab-dom-go-act .btn { white-space: nowrap; }
.dclab-dom-go-act p { margin-top: 10px; font-size: .9rem; color: var(--dd-muted); }
.dclab-dom-go-act a[href^="tel:"] { color: var(--dd-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- the same fake, two endings ---------- */
.dclab-dom-figs { padding: 56px 0 96px; background: #fff; }
.dclab-dom-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 32px; }
.dclab-dom-fig {
  position: relative; display: flex; flex-direction: column; margin: 0; padding: 22px 24px 20px;
  border: 1px solid var(--dd-line-2); border-radius: 16px; background: #fff; transition: border-color .3s ease, box-shadow .3s ease;
}
.dclab-dom-fig.is-you { border-color: var(--dd-ink); box-shadow: 0 0 0 1px var(--dd-ink); }
.dclab-dom-fighead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 14px; }
.dclab-dom-illo { font: 600 .66rem/1 Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dd-muted); }
.dclab-dom-fighead b {
  font-family: var(--lab-face, 'Inter Tight'), system-ui, sans-serif; font-stretch: 110%; font-weight: 700; font-size: 1.08rem; line-height: 1.25; color: var(--dd-ink);
}
.dclab-dom-you {
  position: absolute; top: -12px; right: 18px; padding: 6px 10px 5px; border-radius: 6px; background: var(--dd-ink); color: #fff;
  font: 600 .74rem/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
}
.dclab-dom-you[hidden] { display: none; }
.dclab-dom-mail { margin: 0 0 6px; padding: 8px 0; border-top: 1px solid var(--dd-line); border-bottom: 1px solid var(--dd-line); font: .78rem/1.6 var(--dd-mono); color: #2d3152; }
.dclab-dom-mail p { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); margin: 0; }
.dclab-dom-mail p > span:first-child { color: var(--dd-muted); }
.dclab-dom-mail .dclab-dom-addr { overflow-wrap: anywhere; }

.dclab-dom-svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 10px auto 0; overflow: visible; }
.dclab-dom-svg :is(rect, path, circle) { fill: none; stroke: var(--dd-ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dclab-dom-svg .dclab-dom-node rect, .dclab-dom-svg .dclab-dom-env rect, .dclab-dom-svg .dclab-dom-tray, .dclab-dom-svg .dclab-dom-ball circle { fill: #fff; }
.dclab-dom-svg .dclab-dom-node circle { fill: var(--dd-ink); stroke: none; }
.dclab-dom-svg .dclab-dom-fine { stroke-opacity: .4; }
.dclab-dom-svg .dclab-dom-lead { stroke-opacity: .45; stroke-dasharray: 2 3; }
.dclab-dom-svg .dclab-dom-route { stroke-opacity: .5; stroke-dasharray: 3 4; }
.dclab-dom-svg .dclab-dom-gate { stroke-width: 2; }
.dclab-dom-svg :is(.dclab-dom-shut, .dclab-dom-x) { stroke: var(--dd-bad); stroke-width: 2; opacity: 0; }
.dclab-dom-svg .dclab-dom-x { transform-box: fill-box; transform-origin: center; }
.dclab-dom-fig.is-end .dclab-dom-svg :is(.dclab-dom-shut, .dclab-dom-x) { opacity: 1; }
.dclab-dom-svg text { fill: var(--dd-ink); font-family: Inter, system-ui, sans-serif; text-anchor: middle; }
.dclab-dom-svg .dclab-dom-ball text { font-size: 10px; font-weight: 600; }
.dclab-dom-svg .dclab-dom-lbl { font-size: 11.5px; font-weight: 600; }
.dclab-dom-svg .dclab-dom-lbl2 { font-size: 10.5px; fill: #5a6080; }
.dclab-dom-svg .dclab-dom-k { font-size: 8px; font-weight: 700; letter-spacing: .16em; fill: #5a6080; }
.dclab-dom-svg .dclab-dom-v { font-family: var(--dd-mono); font-size: 12.5px; font-weight: 600; }
.dclab-dom-fig[data-end="lands"] .dclab-dom-v { fill: var(--dd-warn); }
.dclab-dom-fig[data-end="refused"] .dclab-dom-v { fill: var(--dd-bad); }
.dclab-dom-cap { margin: 14px 0 0; font-size: .93rem; line-height: 1.55; color: #2d3152; }
.dclab-dom-play { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; padding-top: 16px; }
.dclab-dom-send {
  min-height: 44px; padding: 0 16px; border: 1px solid var(--dd-ink); border-radius: 10px; background: #fff; color: var(--dd-ink); cursor: pointer;
  font: 600 .9rem/1 Inter, system-ui, sans-serif; transition: background .2s ease, color .2s ease;
}
.dclab-dom-send:hover { background: var(--dd-ink); color: #fff; }
.dclab-dom-send[aria-disabled="true"] { opacity: .5; cursor: default; background: #fff; color: var(--dd-ink); }
.dclab-dom-send[hidden] { display: none; }
.dclab-dom-out { margin: 0; font-size: .9rem; font-weight: 650; line-height: 1.4; }
.dclab-dom-out:empty { display: none; }
.dclab-dom-fig[data-end="lands"] .dclab-dom-out { color: var(--dd-warn); }
.dclab-dom-fig[data-end="refused"] .dclab-dom-out { color: var(--dd-good); }
.dclab-dom-between { margin: 20px 0 0; font-size: 1rem; font-weight: 600; color: var(--dd-ink); text-align: center; }
.dclab-dom-between[hidden] { display: none; }
.dclab-dom-fine-print { margin: 18px 0 0; font-size: .8rem; line-height: 1.55; color: var(--dd-muted); text-align: center; }

@media (max-width: 860px) {
  .dclab-dom-intro, .dclab-dom-figs-head { grid-template-columns: minmax(0, 1fr); }
  .dclab-dom-pair { grid-template-columns: minmax(0, 1fr); }
  .dclab-dom-go { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
  .dclab-dom-go-act { text-align: left; }
}
@media (max-width: 640px) {
  .dclab-dom-hero { padding: 116px 0 52px; }
  .dclab-dom-field { flex-direction: column; gap: 10px; padding: 0; background: none; }
  .dclab-dom-field:focus-within { box-shadow: none; }
  .dclab-dom-field input { background: #fff; border-radius: 12px; }
  .dclab-dom-field input:focus-visible { box-shadow: 0 0 0 3px var(--cyan, #00d4ff); }
  .dclab-dom-btn { width: 100%; }
  .dclab-dom-sheet { padding-top: 52px; }
  .dclab-dom-row { grid-template-columns: 38px minmax(0, 1fr); grid-template-areas: "n name" "n st" "n say" "n note" "n raw"; padding: 18px 0; }
  .dclab-dom-st { justify-self: start; margin: 2px 0 8px; text-align: left; }
  .dclab-dom-st:empty { display: none; }
  .dclab-dom-go-act .btn { width: 100%; white-space: normal; }
  .dclab-dom-fig { padding: 20px 16px 18px; }
  .dclab-dom-svg .dclab-dom-lbl { font-size: 13px; }
  .dclab-dom-svg .dclab-dom-lbl2 { font-size: 12px; }
  .dclab-dom-svg .dclab-dom-v { font-size: 13.5px; }
  .dclab-dom-figs { padding: 40px 0 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .dclab-dom-ruler li, .dclab-dom-ruler li::after, .dclab-dom-fig, .dclab-dom-send { transition: none; }
}

/* ---------- the quick check on the legal, accounting and financial pages (token only) ---------- */
:root[data-lab~="domain"] .dclab-dom-band { padding: 64px 0; background: #fff; }
:root[data-lab~="domain"] .dclab-dom-band-flush { padding-top: 0; }
:root[data-lab~="domain"] .dclab-dom-mini {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 48px; align-items: center;
  max-width: 1040px; margin: 0 auto; padding: 30px 34px; border: 1px solid var(--dd-ink); border-radius: 16px; background: #fff;
}
:root[data-lab~="domain"] .dclab-dom-mini h2 { margin: 0 0 8px; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.15; color: var(--dd-ink); }
:root[data-lab~="domain"] .dclab-dom-mini-copy p { margin: 0; max-width: 32em; font-size: .98rem; line-height: 1.6; color: #2d3152; }
:root[data-lab~="domain"] .dclab-dom-mini-form label { display: block; margin: 0 0 6px 2px; font-size: .8rem; font-weight: 600; color: var(--dd-ink); }
:root[data-lab~="domain"] .dclab-dom-mini-field { display: flex; gap: 8px; }
:root[data-lab~="domain"] .dclab-dom-mini-field input {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--dd-line-2); border-radius: 10px; background: #fff;
  font: 500 1rem/1.2 Inter, system-ui, sans-serif; color: var(--dd-ink);
}
:root[data-lab~="domain"] .dclab-dom-mini-field input::placeholder { color: #8a90a8; }
:root[data-lab~="domain"] .dclab-dom-mini-field input:focus { border-color: var(--dd-ink); }
:root[data-lab~="domain"] .dclab-dom-mini-field input[aria-invalid="true"] { border-color: var(--dd-bad); }
:root[data-lab~="domain"] .dclab-dom-mini-field .btn { min-height: 48px; padding: 0 18px; border-radius: 10px; white-space: nowrap; }
:root[data-lab~="domain"] .dclab-dom-mini-err { margin: 8px 2px 0; font-size: .86rem; font-weight: 600; color: var(--dd-bad); }
:root[data-lab~="domain"] .dclab-dom-mini-err:empty { display: none; }
:root[data-lab~="domain"] .dclab-dom-mini-note { margin: 8px 2px 0; font-size: .8rem; color: var(--dd-muted); }
@media (max-width: 860px) {
  :root[data-lab~="domain"] .dclab-dom-mini { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
}
@media (max-width: 520px) {
  :root[data-lab~="domain"] .dclab-dom-band { padding: 48px 0; }
  :root[data-lab~="domain"] .dclab-dom-band-flush { padding-top: 0; }
  :root[data-lab~="domain"] .dclab-dom-mini-field { flex-direction: column; }
  :root[data-lab~="domain"] .dclab-dom-mini-field .btn { width: 100%; }
}

/* lab-doors.css */
/* =====================================================================
   Design Lab, Round 3: "One next step" (token: doors)
   One call to action, a phone menu that is a next step, a quiet ARIA
   where people decide, and the homepage sentence about why people call.
   Every rule is scoped to :root[data-lab~="doors"]; js/lab-doors.js adds
   the nodes, the attributes and the html classes, and removes them on off.
   ===================================================================== */

:root[data-lab~="doors"] {
  --dclab-doors-ink: #0a0d31;
  --dclab-doors-muted: #5b6185;
  --dclab-doors-rule: #e3e6f0;
  --dclab-doors-ultra: #010ed0;
  --dclab-doors-face: var(--lab-face, 'Mona Sans', 'Inter Tight', system-ui, sans-serif);
  --dclab-doors-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ---------- C. homepage: the old FAQ button row goes; the closing band follows directly ---------- */
:root[data-lab~="doors"] [data-dclab-doors="hide"] { display: none !important; }
/* "See what it costs" has nothing to do with AI, so the AI sparkle goes with the old label */
:root[data-lab~="doors"] a[data-dclab-doors="cost"] > svg { display: none !important; }
/* B. the tool link that steps back to second place loses its arrow, so the eye goes to the person first */
:root[data-lab~="doors"] a[data-dclab-doors="demoted"] > svg { display: none !important; }

/* ---------- G. quiet ARIA: no unread count for a message that doesn't exist; no teaser where people decide ---------- */
:root[data-lab~="doors"] #aria-badge { display: none !important; }
:root[data-lab~="doors"].dclab-doors-quiet #aria-teaser { display: none !important; }

/* ---------- D. the mobile bar steps aside for the keyboard and for the open menu ---------- */
:root[data-lab~="doors"].dclab-doors-typing .mobile-cta-bar,
:root[data-lab~="doors"].dclab-doors-menu .mobile-cta-bar { display: none !important; }

/* ---------- H. the homepage sentence ---------- */
:root[data-lab~="doors"] .dclab-doors-why {
  background: #fff;
  padding: 44px 0 0; /* the pillar section below brings its own generous top padding */
}
:root[data-lab~="doors"] .dclab-doors-why .container { text-align: left; }
:root[data-lab~="doors"] .dclab-doors-why p.dclab-doors-why-p {
  margin: 0;
  padding: 0 0 28px; /* one rule, under the line: the stats bar above already draws its own */
  border-bottom: 1px solid var(--dclab-doors-rule);
  max-width: none;
  font-family: var(--dclab-doors-face);
  font-stretch: 100%;
  font-weight: 500;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.45;
  letter-spacing: -.008em;
  color: var(--dclab-doors-ink);
  text-wrap: pretty;
}
:root[data-lab~="doors"] .dclab-doors-why .dclab-doors-why-lead { color: var(--dclab-doors-muted); }
:root[data-lab~="doors"] .dclab-doors-why a {
  color: var(--dclab-doors-ultra);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(1, 14, 208, .25); /* five links in one sentence: a quiet line until you point at one */
  text-underline-offset: 4px;
  text-decoration-skip-ink: auto;
  border-radius: 2px;
  transition: text-decoration-color 150ms ease, color 150ms ease;
}
:root[data-lab~="doors"] .dclab-doors-why a:hover,
:root[data-lab~="doors"] .dclab-doors-why a:focus-visible { text-decoration-thickness: 2px; text-decoration-color: currentColor; }
:root[data-lab~="doors"] .dclab-doors-why a:focus-visible { outline: 3px solid var(--dclab-doors-ultra); outline-offset: 2px; }
@media (max-width: 600px) {
  :root[data-lab~="doors"] .dclab-doors-why { padding: 36px 0 0; }
  /* inline links in a sentence (WCAG 2.5.8 exempt): more air between lines instead of overlapping hit areas */
  :root[data-lab~="doors"] .dclab-doors-why p.dclab-doors-why-p { line-height: 1.7; }
}

/* ---------- F. the phone menu ---------- */
:root[data-lab~="doors"] .dclab-doors-card { display: none; }
@media (max-width: 900px) {
  :root[data-lab~="doors"].dclab-doors-menu { overflow: hidden; }
  /* The open menu is a full sheet under the header: flush to both edges (the desktop margin-left no longer
     pushes it 32px off the left edge), opaque, and exactly as tall as the screen below the header (100% is the
     fixed header's own height, so the sheet follows the header live, even while it animates), scrolling inside
     itself while the page behind stays put. */
  :root[data-lab~="doors"].dclab-doors-menu .site-header .nav-links.open {
    margin-left: 0;
    height: calc(100vh - 100%);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: #0a0e27;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  @supports (height: 100dvh) {
    :root[data-lab~="doors"].dclab-doors-menu .site-header .nav-links.open { height: calc(100dvh - 100%); max-height: calc(100dvh - 100%); }
  }
  /* Production caps the open Solutions list at 640px, which cuts Forge (the last item, 680px down) out of the
     phone menu. The sheet scrolls now, so the list can be as tall as it needs to be. */
  :root[data-lab~="doors"] .site-header .nav-dd.open .nav-dd-menu { max-height: 1600px; }
  :root[data-lab~="doors"].dclab-doors-menu #aria-toggle,
  :root[data-lab~="doors"].dclab-doors-menu #aria-badge,
  :root[data-lab~="doors"].dclab-doors-menu #aria-teaser { display: none !important; }

  :root[data-lab~="doors"] .site-header .nav-links .dclab-doors-card {
    display: block;
    flex: none;
    margin: 0 0 12px;
    padding: 6px 8px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    font-family: var(--dclab-doors-body);
    text-align: left;
  }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card p { margin: 0; }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card p.dclab-doors-card-k {
    font: 600 .95rem/1.4 var(--dclab-doors-body);
    letter-spacing: 0;
    text-transform: none;
    color: #cfd6ff;
  }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card a.dclab-doors-card-num {
    display: flex;
    align-items: center;
    min-height: 48px;
    width: fit-content;
    padding: 0;
    margin: 2px 0 2px;
    border-radius: 2px;
    font-family: var(--dclab-doors-face);
    font-stretch: 100%;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -.01em;
    font-variant-numeric: lining-nums;
    color: #fff;
    background: none;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .35);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: text-decoration-color 150ms ease;
  }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card a.dclab-doors-card-num:hover { background: none; text-decoration-color: #fff; }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card p.dclab-doors-card-note {
    font: 400 .9rem/1.5 var(--dclab-doors-body);
    color: rgba(255, 255, 255, .75);
    max-width: 34em;
  }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card a.dclab-doors-card-btn {
    display: flex;
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    padding: 12px 20px;
    justify-content: center;
    border-radius: 6px;
    background: var(--dclab-doors-ultra) !important;
    color: #fff !important;
    font: 600 1rem/1.2 var(--dclab-doors-body);
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 150ms ease;
  }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card a.dclab-doors-card-btn::after { display: none !important; animation: none !important; }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card a.dclab-doors-card-btn:hover { background: #1a26e6 !important; }
  :root[data-lab~="doors"] .nav-links .dclab-doors-card a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}

/* ---------- I. Revive hero: offer and phone side by side, the anchor link under them as plain text ---------- */
:root[data-lab~="doors"] [data-dclab-doors="row"] { flex-wrap: wrap; row-gap: 14px; }
:root[data-lab~="doors"] [data-dclab-doors="row"] > .btn { white-space: nowrap; }
:root[data-lab~="doors"] .dclab-doors-more {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  color: #cfd6ff; font-weight: 600; font-size: .95rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(207, 214, 255, .4);
}
:root[data-lab~="doors"] .dclab-doors-more:hover { text-decoration-color: currentColor; }
:root[data-lab~="doors"] .dclab-doors-more:focus-visible { outline: 2px solid #cfd6ff; outline-offset: 3px; border-radius: 2px; }

/* ---------- J. the phone bar drops its "Write to us" while the form, its thank-you or the closing band is in view ---------- */
:root[data-lab~="doors"].dclab-doors-seen .mobile-cta-bar > a:not([href^="tel:"]) { display: none !important; }

/* lab-faqopen.css */
/* Design Lab, Round 4: "FAQ answers that open" (token: faqopen). See js/lab-faqopen.js.
   The FAQs stay native <details class="faq-item">, so the keyboard, find in page and screen readers behave exactly as
   before; only the opening and closing move. Where the browser can animate to a natural height (::details-content with
   interpolate-size, Chrome and Edge today), the answer's box grows open and folds shut while it fades. Elsewhere the
   answer fades in as it opens. Reduced motion: instant, as on the live site. */
:root[data-lab~="faqopen"] .faq-item { interpolate-size: allow-keywords; }

/* folding shut: a little quicker than opening */
:root[data-lab~="faqopen"] .faq-item::details-content {
  block-size: 0; overflow-y: clip; opacity: 0;
  transition: block-size .26s cubic-bezier(.4, 0, .2, 1), opacity .16s ease, content-visibility .26s allow-discrete;
}
/* opening: the same curve as the chevron's turn, held a touch longer so the answer settles after it */
:root[data-lab~="faqopen"] .faq-item[open]::details-content {
  block-size: auto; opacity: 1;
  transition: block-size .34s cubic-bezier(.2, .7, .2, 1), opacity .3s ease .05s, content-visibility .34s allow-discrete;
}

/* browsers without ::details-content: the answer fades in as it opens (closing stays instant) */
@supports not selector(::details-content) {
  :root[data-lab~="faqopen"] .faq-item[open] .faq-a { animation: dclab-fq-in .32s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes dclab-fq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="faqopen"] .faq-item::details-content,
  :root[data-lab~="faqopen"] .faq-item[open]::details-content { transition: none; }
  :root[data-lab~="faqopen"] .faq-item[open] .faq-a { animation: none; }
}

/* lab-handoff.css */
/* Design Lab, Round 3: "Results to a person" (handoff).
   Only styles nodes js/lab-handoff.js inserts or marks on /assessment and /cyber-insurance-readiness.
   Every rule is scoped to the 'handoff' token. House style: ink, muted and 1px rules, ultramarine actions,
   6px control radius, 3px focus ring, 44px targets, no tints, shadows or side borders. */

:root[data-lab~="handoff"] .dclab-handoff-zone {
  --hf-ink: var(--text, #1a1a2e);
  --hf-muted: #4a4f6a;            /* 8.3:1 on white */
  --hf-rule: var(--gray-200, #dde1eb);
  --hf-act: var(--lab-ultra, #010ed0);
  --hf-act-hover: var(--lab-ultra-hover, #1a26e6);
  --hf-face: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif;
}
/* production's .btn sets display, which beats the hidden attribute; inside the zone, hidden means hidden */
:root[data-lab~="handoff"] .dclab-handoff-zone [hidden] { display: none !important; }

/* ---------- the fix list (assessment findings, insurance "Fix these first") ---------- */
:root[data-lab~="handoff"] .dclab-handoff-lede {
  margin: -12px 0 14px; font-size: .9rem; color: var(--hf-muted);
}
:root[data-lab~="handoff"] .dclab-handoff-fixes { list-style: none; margin: 0; padding: 0; }
:root[data-lab~="handoff"] .dclab-handoff-fix {
  display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: 14px;
  padding: 18px 0 20px; border-top: 1px solid var(--hf-rule);
}
:root[data-lab~="handoff"] .dclab-handoff-fix:last-child { padding-bottom: 4px; }
:root[data-lab~="handoff"] .dclab-handoff-single .dclab-handoff-fix { grid-template-columns: minmax(0, 1fr); }
:root[data-lab~="handoff"] .dclab-handoff-n {
  font-family: var(--hf-face); font-stretch: 125%; font-weight: 700; font-size: 1.6rem; line-height: 1;
  color: var(--hf-ink); font-variant-numeric: tabular-nums; padding-top: 1px;
}
:root[data-lab~="handoff"] .dclab-handoff-area {
  display: block; margin-bottom: 4px; font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--hf-muted);
}
:root[data-lab~="handoff"] .dclab-handoff-what { margin: 0; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--hf-ink); }
:root[data-lab~="handoff"] .dclab-handoff-step { margin: 6px 0 0; font-size: .92rem; line-height: 1.55; color: var(--hf-ink); }
:root[data-lab~="handoff"] .dclab-handoff-step b { font-weight: 700; }
:root[data-lab~="handoff"] .dclab-handoff-said { margin: 6px 0 0; font-size: .82rem; color: var(--hf-muted); }
:root[data-lab~="handoff"] .dclab-handoff-fix p { text-wrap: wrap; } /* 'pretty' strands short first lines in a narrow column */

/* insurance: the block sits between the score and the full control list */
:root[data-lab~="handoff"] .dclab-handoff-first .dclab-handoff-firsth {
  font-family: var(--hf-face); font-size: 1.35rem; line-height: 1.15; margin: 0 0 16px; color: var(--hf-ink);
}

/* ---------- assessment: the outage math under production's badge ---------- */
:root[data-lab~="handoff"] .dclab-handoff-math { margin: 10px 0 0; font-size: .8rem; line-height: 1.5; color: var(--hf-muted); }

/* insurance: production's disclaimer, without the tinted box and side bar */
:root[data-lab~="handoff"] .dclab-handoff-fine {
  background: none !important; border: 0 !important; border-top: 1px solid var(--hf-rule) !important; border-radius: 0 !important;
  padding: 14px 0 0 !important; color: var(--hf-muted) !important;
}

/* assessment: production's "Recommended next step" link, without the tint, the caps label and the arrow */
:root[data-lab~="handoff"] .dclab-handoff-rec { background: transparent !important; border: 1px solid var(--hf-rule) !important; border-radius: 6px !important; }
:root[data-lab~="handoff"] .dclab-handoff-rec > span > span:first-child {
  text-transform: none !important; letter-spacing: 0 !important; font-size: .8rem !important; font-weight: 600 !important; color: var(--hf-muted) !important;
}
:root[data-lab~="handoff"] .dclab-handoff-rec strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--gray-300, #b8bdd1); }
:root[data-lab~="handoff"] .dclab-handoff-rec:hover strong { color: var(--hf-act); text-decoration-color: currentColor; }
:root[data-lab~="handoff"] .dclab-handoff-rec > svg { display: none; }
:root[data-lab~="handoff"] .dclab-handoff-rec:focus-visible { outline: 3px solid var(--hf-act); outline-offset: 3px; }

/* ---------- the send-failed note, top of the results ---------- */
:root[data-lab~="handoff"] .dclab-handoff-note {
  margin: 0 0 28px; padding: 14px 18px; border: 1px solid var(--hf-ink); border-radius: 6px; background: #fff;
  color: var(--hf-ink); font-size: .95rem; line-height: 1.55; text-align: left;
}
:root[data-lab~="handoff"] .dclab-handoff-note a { color: var(--hf-act); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* empty until a send fails, but never display:none, so the live region is already in the tree when the text lands */
:root[data-lab~="handoff"] .dclab-handoff-note:empty { margin: 0; padding: 0; border: 0; }

/* ---------- the close: from a navy sales box to the last page of the report ---------- */
:root[data-lab~="handoff"] .dclab-handoff-close {
  background: transparent !important; color: var(--hf-ink) !important; text-align: left !important;
  border-radius: 0 !important; border-top: 1px solid var(--hf-ink) !important;
  padding: 36px 0 0 !important; margin-top: 40px !important;
}
:root[data-lab~="handoff"] .dclab-handoff-close > h3 {
  font-family: var(--hf-face); color: var(--hf-ink) !important; font-size: clamp(1.55rem, 3.2vw, 2.05rem) !important;
  line-height: 1.1 !important; margin: 0 0 12px !important; max-width: 22ch; text-wrap: balance;
}
:root[data-lab~="handoff"] .dclab-handoff-close > p:not([class*="dclab-handoff"]) {
  color: var(--hf-muted) !important; font-size: 1.02rem !important; line-height: 1.6; max-width: 48ch; margin: 0 0 26px !important;
}
:root[data-lab~="handoff"] .dclab-handoff-row { justify-content: flex-start !important; gap: 12px !important; }
:root[data-lab~="handoff"] .dclab-handoff-walk {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px;
  border: 0; border-radius: 6px; background: var(--hf-act); color: #fff; text-decoration: none;
  font: 600 1rem/1.2 Inter, system-ui, sans-serif; cursor: pointer;
  transition: background-color .15s ease;
}
:root[data-lab~="handoff"] .dclab-handoff-walk:hover { background: var(--hf-act-hover); color: #fff; }
:root[data-lab~="handoff"] .dclab-handoff-walk[aria-disabled="true"] { cursor: progress; opacity: .72; }
:root[data-lab~="handoff"] .dclab-handoff-row .btn-outline {
  min-height: 52px; padding: 12px 22px; border-radius: 6px !important; border: 1px solid var(--hf-ink) !important;
  background: transparent !important; color: var(--hf-ink) !important; box-shadow: none !important; transform: none !important;
  font: 600 1rem/1.2 Inter, system-ui, sans-serif; letter-spacing: 0;
}
:root[data-lab~="handoff"] .dclab-handoff-row .btn-outline:hover { background: var(--hf-ink) !important; color: #fff !important; }

:root[data-lab~="handoff"] .dclab-handoff-acts { display: flex; flex-wrap: wrap; gap: 0 28px; margin-top: 14px; }
:root[data-lab~="handoff"] .dclab-handoff-act {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--hf-ink); font: 600 .92rem/1.3 Inter, system-ui, sans-serif; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: var(--gray-300, #b8bdd1);
}
:root[data-lab~="handoff"] .dclab-handoff-act:hover { color: var(--hf-act); text-decoration-color: currentColor; }
:root[data-lab~="handoff"] .dclab-handoff-status { margin: 2px 0 0; font-size: .88rem; line-height: 1.5; color: var(--hf-muted); }
:root[data-lab~="handoff"] .dclab-handoff-status:empty { margin: 0; } /* stays in the accessibility tree */
:root[data-lab~="handoff"] .dclab-handoff-hint { margin: 10px 0 0 !important; font-size: .86rem; line-height: 1.5; color: var(--hf-muted) !important; }

/* the score's quiet way down to the close */
:root[data-lab~="handoff"] .dclab-handoff-jump {
  display: flex; align-items: center; min-height: 44px; margin: 6px 0 -8px; padding: 0; border: 0; background: none;
  color: var(--hf-act); font: 600 .92rem/1.3 Inter, system-ui, sans-serif; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
:root[data-lab~="handoff"] .dclab-handoff-jump:hover { text-decoration-thickness: 2px; }
:root[data-lab~="handoff"] .dclab-handoff-status.dclab-handoff-err { color: var(--hf-ink); font-weight: 600; }

:root[data-lab~="handoff"] .dclab-handoff-done { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; }
:root[data-lab~="handoff"] .dclab-handoff-faces { display: inline-flex; flex-shrink: 0; padding-left: 8px; }
:root[data-lab~="handoff"] .dclab-handoff-faces img {
  width: 44px; height: 44px; margin-left: -8px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  border: 2px solid #fff; background: var(--gray-100, #eef0f6);
}
:root[data-lab~="handoff"] .dclab-handoff-doneline { margin: 0; max-width: 46ch; font-size: 1rem; line-height: 1.5; font-weight: 600; color: var(--hf-ink); }

:root[data-lab~="handoff"] .dclab-handoff-facts {
  margin-top: 28px !important; padding-top: 16px; border-top: 1px solid var(--hf-rule);
  color: var(--hf-muted) !important; font-size: .8rem !important; letter-spacing: 0;
}

/* focus: one ring for every new control */
:root[data-lab~="handoff"] :is(.dclab-handoff-walk, .dclab-handoff-act, .dclab-handoff-jump, .dclab-handoff-note a, .dclab-handoff-row .btn-outline, .dclab-handoff-doneline):focus-visible {
  outline: 3px solid var(--hf-act) !important; outline-offset: 3px; border-radius: 6px;
}

/* the print sheet's header and footer never show on screen */
:root[data-lab~="handoff"] :is(.dclab-handoff-phead, .dclab-handoff-pfoot) { display: none; }

/* ---------- phones: the actions stack ---------- */
@media (max-width: 560px) {
  :root[data-lab~="handoff"] .dclab-handoff-close { padding-top: 28px !important; margin-top: 32px !important; }
  :root[data-lab~="handoff"] .dclab-handoff-row { flex-direction: column; align-items: stretch !important; }
  :root[data-lab~="handoff"] :is(.dclab-handoff-walk, .dclab-handoff-row .btn-outline) { width: 100%; }
  :root[data-lab~="handoff"] .dclab-handoff-acts { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 10px; }
  :root[data-lab~="handoff"] .dclab-handoff-done { align-items: flex-start; }
  :root[data-lab~="handoff"] .dclab-handoff-fix { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 8px; }
  :root[data-lab~="handoff"] .dclab-handoff-n { font-size: 1.35rem; }
  :root[data-lab~="handoff"] :is(.dclab-handoff-findings, .dclab-handoff-first) { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- print: only the report, with a letterhead and the phone ---------- */
@supports selector(:has(*)) {
  @media print {
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) body { padding: 0 !important; background: #fff !important; }
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) body > :not(main),
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) main > :not(section.section),
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) main > section.section-gray,
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) main .step:not(#step-results),
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) #tool-wrap,
    :root[data-lab~="handoff"] .dclab-handoff-zone :is(.dclab-handoff-close, .dclab-handoff-note, .dclab-handoff-jump, .dclab-handoff-rec) { display: none !important; }
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) main section.section { padding: 0 !important; }
    :root[data-lab~="handoff"]:has(.dclab-handoff-zone) main .container { max-width: none !important; padding: 0 !important; }
    :root[data-lab~="handoff"] .dclab-handoff-zone { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    :root[data-lab~="handoff"] .dclab-handoff-zone :is(.dclab-handoff-fix, .ctrl-row),
    :root[data-lab~="handoff"] .dclab-handoff-zone .est-section:not(:has(.dclab-handoff-fixes, .ctrl-row)) { break-inside: avoid; }
    :root[data-lab~="handoff"] .dclab-handoff-zone :is(h2, h3) { break-after: avoid; }
    :root[data-lab~="handoff"] .dclab-handoff-zone .est-section { margin-bottom: 12px !important; padding: 16px 20px !important; }
    :root[data-lab~="handoff"] .dclab-handoff-zone h2 { font-size: 1.5rem !important; }
    :root[data-lab~="handoff"] .dclab-handoff-zone .dclab-handoff-fix { padding: 8px 0 9px; }
    :root[data-lab~="handoff"] .dclab-handoff-zone > div:has(> h2) { margin-bottom: 14px !important; }
    :root[data-lab~="handoff"] .dclab-handoff-zone > div:has(> .est-section) { margin: 10px 0 !important; }
    :root[data-lab~="handoff"] .dclab-handoff-zone .est-section h3 { margin-bottom: 12px !important; }
    :root[data-lab~="handoff"] .dclab-handoff-zone .dclab-handoff-step { margin-top: 3px; }

    :root[data-lab~="handoff"] .dclab-handoff-phead {
      display: grid; grid-template-columns: 1fr auto; grid-auto-flow: row dense; align-items: center; row-gap: 2px;
      margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid #1a1a2e; color: #1a1a2e;
    }
    :root[data-lab~="handoff"] .dclab-handoff-pbrand { display: flex; align-items: center; gap: 10px; }
    :root[data-lab~="handoff"] .dclab-handoff-pbrand svg { width: 30px; height: auto; flex-shrink: 0; }
    :root[data-lab~="handoff"] .dclab-handoff-pbrand span { font-family: var(--hf-face); font-stretch: 125%; font-weight: 700; font-size: 15pt; }
    :root[data-lab~="handoff"] .dclab-handoff-pbrand { grid-row: 1 / span 2; }
    :root[data-lab~="handoff"] .dclab-handoff-pdate { grid-column: 2; text-align: right; font-size: 9.5pt; color: #4a4f6a; }
    :root[data-lab~="handoff"] .dclab-handoff-ptitle { grid-column: 1 / -1; margin: 12px 0 0; font-family: var(--hf-face); font-weight: 700; font-size: 19pt; line-height: 1.15; }
    :root[data-lab~="handoff"] .dclab-handoff-pfor { grid-column: 1 / -1; margin: 2px 0 0; font-size: 10pt; color: #4a4f6a; }
    :root[data-lab~="handoff"] .dclab-handoff-pfoot {
      display: block; margin-top: 12px; padding-top: 8px; border-top: 1px solid #1a1a2e;
      font-size: 10pt; font-weight: 600; color: #1a1a2e; break-inside: avoid;
    }
  }
}

/* lab-herox.css */
/* Design Lab, Round 3 follow-up: "Hero visual" (herox). See js/lab-herox.js.
   Every rule is scoped to the token; the script inserts nothing until it is on. */

/* the timer and the old illustrative cards step aside while an alternative holds the seat */
:root[data-lab~="herox"]:has(.dclab-herox.is-under-aria) #aria-teaser { display: none !important; }
:root[data-lab~="herox"] .hero :is(.dclab-fifteen, .hero-visual) { display: none !important; }

:root[data-lab~="herox"] .dclab-herox {
  --hx-ink: #fff; --hx-soft: #e3e7ff; --hx-mute: #c3cbff; --hx-rule: rgba(255, 255, 255, .22);
  position: relative; z-index: 3; color: var(--hx-ink); font-family: Inter, system-ui, sans-serif; text-align: left;
}
:root[data-lab~="herox"] .dclab-herox :where(p, ul, figure, blockquote) { margin: 0; padding: 0; }
:root[data-lab~="herox"] .dclab-herox ul { list-style: none; }
:root[data-lab~="herox"] .dclab-herox-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* 1100px and up: the right column, its foot level with the foot of the copy (the stats line), so the headline
   sits top left and the alternative bottom right, on the same diagonal as the sail's edge between them */
:root[data-lab~="herox"] .hero-row > .dclab-herox { width: 340px; flex-shrink: 0; margin-left: auto; align-self: flex-end; }
:root[data-lab~="herox"] .hero-row > .dclab-herox-people { width: 336px; }
:root[data-lab~="herox"] .hero-row > .dclab-herox-industries { width: 350px; }
/* below: after the hero buttons, inside the copy column */
:root[data-lab~="herox"] .hero-content > .dclab-herox { margin: 6px 0 34px; }

:root[data-lab~="herox"] .dclab-herox-kicker {
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hx-mute); margin-bottom: 14px;
}
:root[data-lab~="herox"] .dclab-herox-line { font-size: .98rem; line-height: 1.55; color: var(--hx-soft); text-wrap: pretty; }
:root[data-lab~="herox"] .dclab-herox-link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .95rem; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: text-decoration-color .2s ease;
}
:root[data-lab~="herox"] .dclab-herox-link:hover { text-decoration-color: #fff; }
:root[data-lab~="herox"] .dclab-herox-quiet { font-weight: 500; color: var(--hx-soft); }
:root[data-lab~="herox"] .dclab-herox :is(a, .btn):focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* portraits: 4:5 with the top right corner cut on the sail's angle, toned like every portrait in the lab */
:root[data-lab~="herox"] .dclab-herox-face { display: block; overflow: hidden; background: #1a1f4d; clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 17px, 100% 100%, 0 100%); }
:root[data-lab~="herox"] .dclab-herox-face img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
:root[data-lab~="herox"][data-lab~="people"] .dclab-herox-face img { filter: url(#dclab-duo); }

/* ---------- Call card ---------- */
:root[data-lab~="herox"] .dclab-herox-number {
  display: block; width: fit-content; margin: 0 0 14px; color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 760;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
:root[data-lab~="herox"] .dclab-herox-number:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
:root[data-lab~="herox"] .dclab-herox-call .dclab-herox-line { max-width: 32ch; }
:root[data-lab~="herox"] .dclab-herox-who { display: flex; align-items: center; gap: 14px; margin: 26px 0 28px; padding: 18px 0; border-block: 1px solid var(--hx-rule); }
:root[data-lab~="herox"] .dclab-herox-faces { display: flex; gap: 6px; flex: none; }
:root[data-lab~="herox"] .dclab-herox-faces .dclab-herox-face { width: 44px; height: 55px; clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 12px, 100% 100%, 0 100%); }
:root[data-lab~="herox"] .dclab-herox-who-line { font-size: .88rem; line-height: 1.4; color: var(--hx-soft); }
:root[data-lab~="herox"] .dclab-herox-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
:root[data-lab~="herox"] .dclab-herox-btn.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px; border-radius: var(--radius, 10px);
  background: #fff !important; color: #010ed0 !important; border: 2px solid #fff !important; font-weight: 700; font-size: 1rem; box-shadow: none !important;
}
:root[data-lab~="herox"] .dclab-herox-btn.btn:hover { background: #e9ecff !important; border-color: #e9ecff !important; }

/* ---------- The people ---------- */
:root[data-lab~="herox"] .dclab-herox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; margin-bottom: 24px; }
:root[data-lab~="herox"] .dclab-herox-grid li { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
:root[data-lab~="herox"] .dclab-herox-grid .dclab-herox-face { width: 100%; aspect-ratio: 4 / 5; margin-bottom: 7px; }
:root[data-lab~="herox"] .dclab-herox-grid b { font-size: .8rem; font-weight: 600; line-height: 1.25; color: #fff; }
:root[data-lab~="herox"] .dclab-herox-role { font-size: .72rem; line-height: 1.3; color: var(--hx-mute); }
:root[data-lab~="herox"] .dclab-herox-people .dclab-herox-line { font-size: .92rem; }
:root[data-lab~="herox"] .dclab-herox-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 8px; }

/* ---------- Client words ---------- */
:root[data-lab~="herox"] .hero-row > .dclab-herox-quote { width: 360px; }
:root[data-lab~="herox"] .dclab-herox-big {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 700;
  font-size: 1.8rem; line-height: 1.14; letter-spacing: -.012em; color: #fff; text-indent: -.42em; text-wrap: balance;
}
:root[data-lab~="herox"] .dclab-herox-rest { margin-top: 16px !important; font-size: 1rem; line-height: 1.6; color: var(--hx-soft); text-wrap: pretty; }
:root[data-lab~="herox"] .dclab-herox-sc { font-variant-caps: all-small-caps; letter-spacing: .04em; }
:root[data-lab~="herox"] .dclab-herox-figure figcaption { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hx-rule); }
:root[data-lab~="herox"] .dclab-herox-figure figcaption img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
:root[data-lab~="herox"][data-lab~="people"] .dclab-herox-figure figcaption img { filter: url(#dclab-duo); }
:root[data-lab~="herox"] .dclab-herox-figure figcaption b { display: block; font-size: .95rem; color: #fff; }
:root[data-lab~="herox"] .dclab-herox-figure figcaption span span { display: block; font-size: .82rem; color: var(--hx-mute); }

/* ---------- Your industry ---------- */
:root[data-lab~="herox"] .dclab-herox-list { border-top: 1px solid var(--hx-rule); }
:root[data-lab~="herox"] .dclab-herox-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) 18px; column-gap: 12px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--hx-rule); color: #fff; text-decoration: none;
}
:root[data-lab~="herox"] .dclab-herox-list b { font-size: .98rem; font-weight: 600; line-height: 1.3; }
:root[data-lab~="herox"] .dclab-herox-list span { grid-column: 1; font-size: .82rem; line-height: 1.35; color: var(--hx-mute); }
:root[data-lab~="herox"] .dclab-herox-arrow { grid-column: 2; grid-row: 1 / 3; width: 16px; height: 16px; color: var(--hx-mute); transition: transform .2s ease, color .2s ease; }
:root[data-lab~="herox"] .dclab-herox-list a:hover .dclab-herox-arrow,
:root[data-lab~="herox"] .dclab-herox-list a:focus-visible .dclab-herox-arrow { color: #fff; transform: translateX(3px); }
:root[data-lab~="herox"] .dclab-herox-list a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Five pillars, alive ----------
   Plan, build, run. A technical drawing of the structure draws itself (with the slab's 22.6 degree cut marked); the
   solid structure rises into it: "Your business", a navy slab cut on the sail's angle, lifted by five flat columns on
   a navy foundation, each wearing its slash glyph and a cap in its pillar color. Then it runs: a pulse of light climbs
   each column at that pillar's own pace and the slab's light for it blinks on arrival, while a spotlight steps through
   the pillars and says what each one holds. The five rise together (one after another reads as a bar chart). */
:root[data-lab~="herox"] .hero-row > .dclab-herox-pillars { width: 360px; }
:root[data-lab~="herox"] .dclab-herox-build {
  --cut: 23.3px; --shaft-h: 250px; --over: 1.012; --name-h: 42px; --run: calc(var(--shaft-h) - 88px);
  position: relative;
}
:root[data-lab~="herox"] .dclab-herox-slab {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; height: 56px; padding-bottom: 8px;
  background: #0a0d31; color: #fff; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 720;
  font-size: 1.12rem; letter-spacing: -.005em;
}
/* the business's five status lights, one over each column */
:root[data-lab~="herox"] .dclab-herox-dots {
  position: absolute; left: 0; right: var(--cut); bottom: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center;
}
:root[data-lab~="herox"] .dclab-herox-dots i {
  position: relative; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--pc); opacity: .35;
  transition: opacity .25s ease, transform .25s ease;
}
:root[data-lab~="herox"] .dclab-herox-dots i::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--pc); opacity: 0;
}
:root[data-lab~="herox"] .dclab-herox-dots i.is-on { opacity: 1; transform: scale(1.35); }
:root[data-lab~="herox"] .dclab-herox-cols {
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-right: var(--cut) !important;
}
/* the foundation: a navy plinth under the columns, its ends cut on the same lean as the slab */
:root[data-lab~="herox"] .dclab-herox-cols::after {
  content: ''; position: absolute; z-index: 1; left: -6px; right: -6px; top: var(--shaft-h); height: 10px;
  background: #0a0d31; clip-path: polygon(4.2px 0, 100% 0, calc(100% - 4.2px) 100%, 0 100%); pointer-events: none;
}
:root[data-lab~="herox"] .dclab-herox-cols li { min-width: 0; }
:root[data-lab~="herox"] .dclab-herox-cols button {
  display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
:root[data-lab~="herox"] .dclab-herox-shaft {
  position: relative; display: flex; align-items: flex-end; justify-content: center; width: 36px; height: var(--shaft-h); padding-bottom: 12px;
  background: #fff; transform-origin: 50% 100%; transition: background-color .25s ease;
}
:root[data-lab~="herox"] .dclab-herox-cap-color {
  position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--pc); transform-origin: 0 50%; transition: height .25s ease;
}
/* the conduit each pulse climbs: a hairline from above the glyph to under the cap */
:root[data-lab~="herox"] .dclab-herox-track {
  position: absolute; left: 50%; bottom: 52px; top: 10px; width: 1px; margin-left: -.5px; background: rgba(1, 14, 208, .1);
  transition: background-color .25s ease;
}
:root[data-lab~="herox"] .dclab-herox-pulse {
  position: absolute; left: 50%; bottom: 52px; width: 3px; height: 30px; margin-left: -1.5px; border-radius: 3px; opacity: 0;
  background: linear-gradient(to top, transparent, var(--pi, var(--pc)) 65%, var(--pi, var(--pc)));
  box-shadow: 0 -4px 10px -2px var(--pi, var(--pc));
}
/* when the spotlight lands on a pillar, one bright pulse races up its column (the light above it flares on arrival) */
:root[data-lab~="herox"] .dclab-herox-burst {
  position: absolute; left: 50%; bottom: 52px; width: 4px; height: 40px; margin-left: -2px; border-radius: 4px; opacity: 0;
  background: linear-gradient(to top, transparent, var(--pi, var(--pc)) 55%, #fff);
  box-shadow: 0 -6px 14px -2px var(--pi, var(--pc));
}
:root[data-lab~="herox"] .dclab-herox-shaft svg { position: relative; width: 24px; height: 24px; fill: #010ed0; transition: transform .25s ease; }
:root[data-lab~="herox"] .dclab-herox-pname {
  display: flex; align-items: flex-end; justify-content: center; height: var(--name-h); padding-bottom: 2px;
  font-size: .78rem; font-weight: 600; line-height: 1; color: #fff; white-space: nowrap;
}
/* the spotlight: the pillar being described stays solid white, the other four step back */
:root[data-lab~="herox"] .dclab-herox-shaft { transition: background-color .25s ease, opacity .35s ease; }
:root[data-lab~="herox"] .dclab-herox-pillars.has-spot .dclab-herox-cols button:not(.is-on) .dclab-herox-shaft { opacity: .72; }
:root[data-lab~="herox"] .dclab-herox-pillars.has-spot .dclab-herox-cols button:not(.is-on) .dclab-herox-pname { opacity: .7; }
:root[data-lab~="herox"] .dclab-herox-pname { transition: opacity .35s ease; }
:root[data-lab~="herox"] .dclab-herox-cols button.is-on .dclab-herox-cap-color { height: 14px; }
:root[data-lab~="herox"] .dclab-herox-cols button.is-on .dclab-herox-track { background: rgba(1, 14, 208, .24); }
:root[data-lab~="herox"] .dclab-herox-cols button.is-on svg { transform: translateY(-4px); }
:root[data-lab~="herox"] .dclab-herox-cols button.is-on .dclab-herox-pname { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:root[data-lab~="herox"] .dclab-herox-cols button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 2px; }

/* the plan: drawn once, then gone */
:root[data-lab~="herox"] .dclab-herox-plan { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
:root[data-lab~="herox"] .dclab-herox-plan path { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
:root[data-lab~="herox"] .dclab-herox-plan text { fill: rgba(255, 255, 255, .9); font: 600 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; opacity: 0; }

/* what the spotlight says */
:root[data-lab~="herox"] .dclab-herox-say { position: relative; margin-top: 16px; }
:root[data-lab~="herox"] .dclab-herox-prog { display: block; height: 2px; margin-bottom: 12px; background: rgba(255, 255, 255, .16); overflow: hidden; }
:root[data-lab~="herox"] .dclab-herox-prog i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: 0 50%; }
:root[data-lab~="herox"] .dclab-herox-pillars.is-timing .dclab-herox-prog i { animation: dclabHxProg 4600ms linear forwards; }
:root[data-lab~="herox"] .dclab-herox-say-title {
  height: 2.8em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: .98rem; line-height: 1.4; color: #fff; text-wrap: balance;
}
:root[data-lab~="herox"] .dclab-herox-say-title b { font-weight: 700; }
:root[data-lab~="herox"] .dclab-herox-say-items {
  margin-top: 4px !important; height: 2.9em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  font-size: .84rem; line-height: 1.45; color: var(--hx-soft);
}
/* link and pause sit together on the left, clear of the chat button that lives in the bottom right corner */
:root[data-lab~="herox"] .dclab-herox-say-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin-top: 2px; }
:root[data-lab~="herox"] .dclab-herox-pause {
  min-height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 .76rem/1 Inter, system-ui, sans-serif; color: var(--hx-mute);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
:root[data-lab~="herox"] .dclab-herox-pause:hover { color: #fff; text-decoration-color: currentColor; }
:root[data-lab~="herox"] .dclab-herox-pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 3px; }

@media (prefers-reduced-motion: no-preference) {
  /* plan (0 to 1.2s), then the build (from 1.25s), then it runs (from 3.3s) */
  :root[data-lab~="herox"] .dclab-herox-plan path { animation: dclabHxDraw .55s cubic-bezier(.3, .6, .3, 1) var(--pd) forwards; }
  :root[data-lab~="herox"] .dclab-herox-plan text { animation: dclabHxShow .4s ease-out 1.1s forwards; }
  :root[data-lab~="herox"] .dclab-herox-plan { animation: dclabHxPlanOut .5s ease 2.55s forwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-slab { animation: dclabHxLift 1.15s cubic-bezier(.55, 0, .25, 1) 1.25s backwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-shaft { animation: dclabHxRise 1.15s cubic-bezier(.55, 0, .25, 1) 1.25s backwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-shaft svg { animation: dclabHxPop .35s ease-out calc(2.35s + var(--i) * .11s) backwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-pname { animation: dclabHxFade .35s ease-out calc(2.3s + var(--i) * .11s) backwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-cap-color { animation: dclabHxCap .4s ease-out calc(2.8s + var(--i) * .07s) backwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-say { animation: dclabHxFade .45s ease-out 2.6s backwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-pulse { animation: dclabHxPulse var(--d) cubic-bezier(.45, 0, .55, 1) calc(3.3s + var(--o)) infinite; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-dots i:not(.is-on) { animation: dclabHxBlink var(--d) ease-out calc(3.3s + var(--o)) infinite; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-dots i:not(.is-on)::after { animation: dclabHxRing var(--d) ease-out calc(3.3s + var(--o)) infinite; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-say.is-fresh :is(.dclab-herox-say-title, .dclab-herox-say-items) { animation: dclabHxUp .4s cubic-bezier(.2, .8, .2, 1); }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-cols button.is-on .dclab-herox-burst { animation: dclabHxBurst .9s cubic-bezier(.4, 0, .2, 1) .1s both; }
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-dots i.is-on::after { animation: dclabHxRing 1.6s ease-out 0s both; }
  /* paused by the visitor, or offscreen: everything holds still */
  :root[data-lab~="herox"] .dclab-herox-pillars:is(.is-paused, .is-offscreen) :is(.dclab-herox-pulse, .dclab-herox-burst, .dclab-herox-dots i, .dclab-herox-dots i::after) { animation-play-state: paused !important; }
}
@keyframes dclabHxDraw { to { stroke-dashoffset: 0; } }
@keyframes dclabHxShow { to { opacity: 1; } }
@keyframes dclabHxPlanOut { to { opacity: 0; visibility: hidden; } }
/* the slab starts on the foundation (one column height down) and the columns grow under it on the same curve,
   so its underside always meets their tops; both overshoot 3px and settle, which reads as locking into place */
@keyframes dclabHxLift {
  0% { opacity: 0; transform: translateY(var(--shaft-h)); }
  15% { opacity: 1; transform: translateY(var(--shaft-h)); }
  88% { transform: translateY(-3px); }
  100% { transform: none; }
}
@keyframes dclabHxRise {
  0%, 15% { transform: scaleY(0); }
  88% { transform: scaleY(var(--over)); }
  100% { transform: none; }
}
@keyframes dclabHxPop { from { opacity: 0; transform: translateY(8px); } }
@keyframes dclabHxFade { from { opacity: 0; } }
@keyframes dclabHxUp { from { opacity: 0; transform: translateY(5px); } }
@keyframes dclabHxCap { from { transform: scaleX(0); } }
@keyframes dclabHxProg { to { transform: scaleX(1); } }
/* a pulse climbs for half its cycle and rests for the other half, so each column is quiet as often as it is busy */
@keyframes dclabHxPulse {
  0% { transform: translateY(0); opacity: 0; }
  7% { opacity: 1; }
  50% { transform: translateY(calc(-1 * var(--run))); opacity: 1; }
  56%, 100% { transform: translateY(calc(-1 * var(--run))); opacity: 0; }
}
/* the light for that pillar flares as the pulse arrives (50% of the same cycle) */
@keyframes dclabHxBlink {
  0%, 48% { opacity: .35; transform: scale(1); }
  53% { opacity: 1; transform: scale(1.5); }
  70% { opacity: .7; transform: scale(1); }
  100% { opacity: .35; transform: scale(1); }
}
@keyframes dclabHxBurst {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  80% { transform: translateY(calc(-1 * var(--run))); opacity: 1; }
  100% { transform: translateY(calc(-1 * var(--run))); opacity: 0; }
}
@keyframes dclabHxRing {
  0%, 49% { opacity: 0; transform: scale(1); }
  52% { opacity: .9; transform: scale(1); }
  72%, 100% { opacity: 0; transform: scale(3); }
}

/* ---------- Above the pillars (hxtop) ----------
   The pillars column spans the hero row, so a block can sit at its top, level with the headline's top line, while the
   build stays at the foot. The block is right aligned and narrower than the build: higher up, the blue field's edge
   leans further right, so the block steps in along the same diagonal. */
:root[data-lab~="herox"] .hero-row > .dclab-herox-pillars { align-self: stretch; display: flex; flex-direction: column; }
:root[data-lab~="herox"] .dclab-herox-pillars > .dclab-herox-build { margin-top: auto; }
:root[data-lab~="herox"] .hero-row > .dclab-herox-pillars > .dclab-herox-top { align-self: flex-end; width: 268px; padding-bottom: 32px; }
:root[data-lab~="herox"] .hero-content > .dclab-herox-pillars > .dclab-herox-top { padding-bottom: 26px; }
:root[data-lab~="herox"] .dclab-herox-top :where(p, ul, figure, blockquote) { margin: 0; padding: 0; }

/* Who picks up */
:root[data-lab~="herox"] .dclab-herox-top-label { font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hx-mute); }
:root[data-lab~="herox"] .dclab-herox-top-faces { display: flex; gap: 8px; margin-top: 12px !important; list-style: none; }
:root[data-lab~="herox"] .dclab-herox-top-faces .dclab-herox-face { width: 48px; height: 60px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 14px, 100% 100%, 0 100%); }
:root[data-lab~="herox"] .dclab-herox-top-line { margin-top: 12px !important; font-size: .9rem; line-height: 1.45; color: var(--hx-soft); text-wrap: pretty; }
:root[data-lab~="herox"] .dclab-herox-top-call { margin-top: 2px; }

/* Client words */
:root[data-lab~="herox"] .dclab-herox-top-figure blockquote p {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 700;
  font-size: 1.32rem; line-height: 1.2; letter-spacing: -.01em; color: #fff; text-indent: -.42em; text-wrap: balance;
}
:root[data-lab~="herox"] .dclab-herox-top-figure figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
:root[data-lab~="herox"] .dclab-herox-top-figure figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
:root[data-lab~="herox"][data-lab~="people"] .dclab-herox-top-figure figcaption img { filter: url(#dclab-duo); }
:root[data-lab~="herox"] .dclab-herox-top-figure figcaption b { display: block; font-size: .86rem; color: #fff; }
:root[data-lab~="herox"] .dclab-herox-top-figure figcaption span span { display: block; font-size: .76rem; color: var(--hx-mute); }

/* The sail, in the plan's fine line */
:root[data-lab~="herox"] .hero-row > .dclab-herox-pillars > .dclab-herox-top-sail { width: 190px; }
:root[data-lab~="herox"] .dclab-herox-top-sail svg { display: block; width: 100%; height: auto; overflow: visible; }
:root[data-lab~="herox"] .dclab-herox-sl { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
:root[data-lab~="herox"] .dclab-herox-top-sail text { fill: rgba(255, 255, 255, .85); font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: .02em; }
:root[data-lab~="herox"] .dclab-herox-top-sail .dclab-herox-sl-note { opacity: .9; }
@media (max-width: 1099px) { :root[data-lab~="herox"] .dclab-herox-top-sail { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* the people and the quote arrive once the structure has locked; switched on later, they appear at once */
  :root[data-lab~="herox"] .dclab-herox-top:is(.dclab-herox-top-people, .dclab-herox-top-quote) { animation: dclabHxUp .6s cubic-bezier(.2, .8, .2, 1) 2.95s backwards; }
  :root[data-lab~="herox"] .dclab-herox-top-people .dclab-herox-top-faces li { animation: dclabHxPop .4s ease-out calc(3.05s + var(--n, 0) * .08s) backwards; }
  :root[data-lab~="herox"] .dclab-herox-top-people .dclab-herox-top-faces li:nth-child(2) { --n: 1; }
  :root[data-lab~="herox"] .dclab-herox-top-people .dclab-herox-top-faces li:nth-child(3) { --n: 2; }
  :root[data-lab~="herox"] .dclab-herox-top-people .dclab-herox-top-faces li:nth-child(4) { --n: 3; }
  /* the sail draws with the plan, keeps its outline, and its angle note leaves with the plan */
  :root[data-lab~="herox"] .dclab-herox-sl { stroke-dasharray: 1; stroke-dashoffset: 1; animation: dclabHxDraw .7s cubic-bezier(.3, .6, .3, 1) var(--pd) forwards; }
  :root[data-lab~="herox"] .dclab-herox-top-sail text { opacity: 0; animation: dclabHxShow .4s ease-out 1.1s forwards; }
  :root[data-lab~="herox"] .dclab-herox-top-sail .dclab-herox-sl-note { animation: dclabHxDraw .55s cubic-bezier(.3, .6, .3, 1) var(--pd) forwards, dclabHxPlanOut .5s ease 2.55s forwards; }
  :root[data-lab~="herox"] .dclab-herox-top-sail text.dclab-herox-sl-note { animation: dclabHxShow .4s ease-out 1.1s forwards, dclabHxPlanOut .5s ease 2.55s forwards; }
  :root[data-lab~="herox"] .dclab-herox-top.is-late,
  :root[data-lab~="herox"] .dclab-herox-top.is-late * { animation-delay: 0s !important; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="herox"] .dclab-herox-top-sail .dclab-herox-sl-note { display: none; }
}

/* ---------- A business on the platform (hxtop-building) ----------
   A modern office in the plan's fine line, standing on the slab, its front leaning at the sail's 22.6 degrees. It rides
   up with the slab, lights its windows from the ground floor up once it stands, then a window flickers above whichever
   pillar's pulse just arrived. */
:root[data-lab~="herox"] .dclab-herox-build { --biz-h: 190px; }
@media (max-width: 1099px) { :root[data-lab~="herox"] .dclab-herox-build { --biz-h: 150px; } }
@media (max-width: 760px) { :root[data-lab~="herox"] .dclab-herox-build { --biz-h: 130px; } }
:root[data-lab~="herox"] .dclab-herox-biz { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 1; pointer-events: none; }
:root[data-lab~="herox"] .dclab-herox-biz-svg { display: block; overflow: visible; }
:root[data-lab~="herox"] .dclab-herox-biz-line { fill: none; stroke: rgba(255, 255, 255, .86); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
:root[data-lab~="herox"] .dclab-herox-biz-mull path { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 1; }
:root[data-lab~="herox"] .dclab-herox-biz-floors path { fill: none; stroke: rgba(255, 255, 255, .32); stroke-width: 1; }
:root[data-lab~="herox"] .dclab-herox-biz-win rect { fill: rgba(255, 255, 255, .06); transition: fill .5s ease var(--wd, 0s); }
:root[data-lab~="herox"] .dclab-herox-biz.is-on .dclab-herox-biz-win rect.is-lit { fill: #f7eedb; }
:root[data-lab~="herox"] .dclab-herox-biz.is-settled .dclab-herox-biz-win rect { transition-delay: 0s; transition-duration: .35s; }
:root[data-lab~="herox"] .dclab-herox-biz .dclab-herox-biz-win rect.is-flash { fill: #fff; transition-duration: .12s; }
:root[data-lab~="herox"] .dclab-herox-biz-door rect { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .55); stroke-width: 1; transition: fill .5s ease .3s; }
:root[data-lab~="herox"] .dclab-herox-biz.is-on .dclab-herox-biz-door rect { fill: #f7eedb; }
/* below 1100px the build sits in the copy column, so it keeps room above itself for the building */
@media (max-width: 1099px) { :root[data-lab~="herox"] .dclab-herox-pillars.has-biz > .dclab-herox-build { margin-top: calc(var(--biz-h) + 10px); } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="herox"] .dclab-herox-pillars .dclab-herox-biz:not(.is-late) { animation: dclabHxLift 1.15s cubic-bezier(.55, 0, .25, 1) 1.25s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="herox"] .dclab-herox-biz-win rect, :root[data-lab~="herox"] .dclab-herox-biz-door rect { transition: none; }
}

/* shorter laptop screens: shorter columns, so the build's top stays clear of the blue field's leaning edge */
@media (min-width: 1100px) and (max-height: 860px) {
  :root[data-lab~="herox"] .dclab-herox-build { --shaft-h: 190px; --over: 1.016; --biz-h: 140px; }
  /* the chat button floats in the bottom right corner, where the caption ends on these screens */
  :root[data-lab~="herox"] .dclab-herox-say :is(.dclab-herox-say-title, .dclab-herox-say-items) { padding-right: 56px; }
  :root[data-lab~="herox"] .dclab-herox-say-items { height: 4.35em; -webkit-line-clamp: 3; }
}

/* without the blue cut the column sits on navy: same type, softer rules */
:root[data-lab~="herox"]:not([data-lab~="heroart-cut"]):not([data-lab~="heroart-both"]) .dclab-herox { --hx-rule: rgba(255, 255, 255, .14); --hx-mute: #aab4f0; }
:root[data-lab~="herox"]:not([data-lab~="heroart-cut"]):not([data-lab~="heroart-both"]) .dclab-herox-btn.btn { background: #010ed0 !important; color: #fff !important; border-color: #010ed0 !important; }

/* the people grid already shows the six from the homepage strip, so the strip steps aside */
:root[data-lab~="hx-people"] #crew { display: none !important; }

/* phones */
@media (max-width: 760px) {
  :root[data-lab~="herox"] .dclab-herox-build { --shaft-h: 150px; --over: 1.02; }
  :root[data-lab~="herox"] .dclab-herox-say-items { height: 4.35em; -webkit-line-clamp: 3; }
  :root[data-lab~="herox"] .dclab-herox-number { font-size: 2.1rem; }
  :root[data-lab~="herox"] .dclab-herox-big { font-size: 1.6rem; }
  :root[data-lab~="herox"] .hero-row > .dclab-herox-quote { width: auto; }
  :root[data-lab~="herox"] .dclab-herox-btn.btn { flex: 1 1 100%; }
  :root[data-lab~="herox"] .dclab-herox-grid { gap: 14px 12px; }
}
@media (max-width: 399px) { :root[data-lab~="herox"] .dclab-herox-number { font-size: 1.85rem; } }
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="herox"] .hero-row > .dclab-herox { animation: dclabHeroxIn .7s cubic-bezier(.16, 1, .3, 1) .2s backwards; }
}
@keyframes dclabHeroxIn { from { opacity: 0; translate: 0 12px; } }

/* ---------- Taller pillars (hxtop-tall) ----------
   Nothing above the build: the build fills the column (js sets --shaft-h from the copy beside it). Wider columns, a
   deeper slab and a two step plinth keep the proportions of a real structure at that height. 1100px and up. */
@media (min-width: 1100px) {
  :root[data-lab~="herox"] .hero-row > .dclab-herox-pillars.is-tall { width: 392px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-build { --cut: 26.6px; --name-h: 46px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-slab { height: 64px; padding-bottom: 10px; font-size: 1.3rem; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-dots { bottom: 9px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-dots i { width: 7px; height: 7px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-shaft { width: var(--shaft-w, 46px); padding-bottom: 14px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-shaft svg { width: 28px; height: 28px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-cap-color { height: 8px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-cols button.is-on .dclab-herox-cap-color { height: 16px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-pname { font-size: .82rem; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-cols::after { height: 12px; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-tall .dclab-herox-cols::before {
    content: ''; position: absolute; z-index: 1; left: -16px; right: -16px; top: calc(var(--shaft-h) + 12px); height: 8px;
    background: #0a0d31; opacity: .55; clip-path: polygon(3.3px 0, 100% 0, calc(100% - 3.3px) 100%, 0 100%); pointer-events: none;
  }
}

/* ---------- What lands on it (hxtop-loads) ----------
   The room above the business: one everyday problem at a time drops onto the slab above the pillar that carries it.
   A tag, a fine line and an arrowhead in the plan's drawing style; a short mark where it hits; then a faint trace. */
:root[data-lab~="herox"] .dclab-herox-loads { display: none; }
@media (min-width: 1100px) {
  :root[data-lab~="herox"] .hero-row > .dclab-herox-pillars > .dclab-herox-loads { display: block; position: relative; flex: 1 1 auto; min-height: 140px; }
}
:root[data-lab~="herox"] .dclab-herox-loads-title { margin: 0; white-space: nowrap; font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hx-mute); }
:root[data-lab~="herox"] .dclab-herox-load { position: absolute; inset: 0; pointer-events: none; transition: opacity .6s ease; }
:root[data-lab~="herox"] .dclab-herox-load.is-trace { opacity: .3; }
:root[data-lab~="herox"] .dclab-herox-load.is-gone { opacity: 0; transition-duration: .4s; }
:root[data-lab~="herox"] .dclab-herox-load-tag {
  position: absolute; left: 0; top: 0; z-index: 1; color: #fff; font: 600 .9rem/1.2 Inter, system-ui, sans-serif; white-space: nowrap;
}
:root[data-lab~="herox"] .dclab-herox-load-svg { position: absolute; left: 0; top: 0; overflow: visible; }
:root[data-lab~="herox"] .dclab-herox-load-line { fill: none; stroke: #fff; stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 1; }
:root[data-lab~="herox"] .dclab-herox-load-head { fill: #fff; opacity: 0; }
:root[data-lab~="herox"] .dclab-herox-load-hit { fill: none; stroke: #fff; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
:root[data-lab~="herox"] .dclab-herox-load.is-still .dclab-herox-load-line { stroke-dashoffset: 0; }
:root[data-lab~="herox"] .dclab-herox-load.is-landed .dclab-herox-load-head { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* the tag appears, the line falls to the slab (speeding up, like a weight), the head lands, a short mark spreads */
  :root[data-lab~="herox"] .dclab-herox-load.is-dropping .dclab-herox-load-tag { animation: dclabHxTagIn .3s cubic-bezier(.2, .8, .2, 1) both; }
  :root[data-lab~="herox"] .dclab-herox-load.is-dropping .dclab-herox-load-line { animation: dclabHxDraw .62s cubic-bezier(.5, 0, .85, .5) .14s forwards; }
  :root[data-lab~="herox"] .dclab-herox-load.is-dropping.is-landed .dclab-herox-load-hit { animation: dclabHxHit .65s ease-out both; }
  :root[data-lab~="herox"] .dclab-herox-loads-title { animation: dclabHxFade .45s ease-out 2.6s backwards; }
  :root[data-lab~="herox"] .dclab-herox-loads.is-late .dclab-herox-loads-title { animation-delay: 0s; }
}
@keyframes dclabHxTagIn { from { opacity: 0; translate: 0 -6px; } }
@keyframes dclabHxHit { 0% { opacity: .95; transform: scaleX(.25); } 100% { opacity: 0; transform: scaleX(1.25); } }

/* lab-hxsky.css */
/* Design Lab, "Above the pillars": Skyline (hxtop-skyline). See js/lab-hxsky.js.
   Every rule is scoped to the herox token and to the column's is-top-skyline class. 1100px and up only. */
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky { display: none; }
@media (min-width: 1100px) {
  :root[data-lab~="herox"] .hero-row > .dclab-herox-pillars.is-top-skyline > .dclab-hxsky {
    display: block; position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  }
}
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-plan { position: absolute; left: 0; top: 0; z-index: 2; overflow: visible; pointer-events: none; }
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-plan path { fill: none; stroke: rgba(255, 255, 255, .78); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-lift { position: absolute; inset: 0; }
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-list { margin: 0; padding: 0; list-style: none; }

/* each building is a link: its box is its slot in the row (44px or more each way); the drawing fills the whole sky */
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-a {
  position: absolute; bottom: 0; display: block; pointer-events: auto; color: #fff; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-a > svg {
  position: absolute; bottom: 0; display: block; overflow: visible; pointer-events: none;
  clip-path: inset(-800px -800px 0 -800px);   /* only the slab's top cuts it: the feet of the buildings stand on it */
}
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-a:focus { outline: none; }
/* the ring sits inside the link's box, so it never reaches the field's edge */
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
:root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-a:is(:hover, :focus-visible) { z-index: 3; }

/* the drawing: navy masses in a fine white line, faint detail, white columns, windows */
:root[data-lab~="herox"] .dclab-hxsky-m { fill: #0a0d31; stroke: rgba(255, 255, 255, .86); stroke-width: 1.2; stroke-linejoin: round; }
:root[data-lab~="herox"] .dclab-hxsky-s { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1; }
:root[data-lab~="herox"] .dclab-hxsky-d { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 1; }
:root[data-lab~="herox"] .dclab-hxsky-c { fill: rgba(255, 255, 255, .9); }
:root[data-lab~="herox"] :is(.dclab-hxsky-w, .dclab-hxsky-l) { fill: rgba(255, 255, 255, .09); transition: fill .5s ease var(--wd, 0s); }
:root[data-lab~="herox"] .dclab-hxsky.is-on :is(.dclab-hxsky-w.is-lit, .dclab-hxsky-l) { fill: #f7eedb; }
:root[data-lab~="herox"] .dclab-hxsky.is-settled :is(.dclab-hxsky-w, .dclab-hxsky-l) { transition-delay: 0s; transition-duration: .35s; }
:root[data-lab~="herox"] .dclab-hxsky .dclab-hxsky-w.is-flash { fill: #fff; transition-duration: .12s; }

/* hover or focus: that building's lights all come on and it says its name */
:root[data-lab~="herox"] .dclab-hxsky-a:is(:hover, :focus-visible) :is(.dclab-hxsky-w, .dclab-hxsky-l) { fill: #f7eedb; transition-delay: 0s; transition-duration: .2s; }
:root[data-lab~="herox"] .dclab-hxsky-a:is(:hover, :focus-visible) .dclab-hxsky-m { stroke: #fff; }
/* the rest of the skyline steps back, like the pillars do for the spotlight, so the name reads with its building */
:root[data-lab~="herox"] .dclab-hxsky-a > svg { transition: opacity .25s ease; }
:root[data-lab~="herox"] .dclab-hxsky-list:has(.dclab-hxsky-a:is(:hover, :focus-visible)) .dclab-hxsky-a:not(:hover, :focus-visible) > svg { opacity: .42; }
:root[data-lab~="herox"] .dclab-hxsky-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2; display: block; width: max-content; padding: 5px 8px 5px 9px;
  background: #0a0d31; border: 1px solid rgba(255, 255, 255, .5); color: #fff; text-wrap: balance; pointer-events: none;
  font: 600 .75rem/1.15 Inter, system-ui, sans-serif; letter-spacing: .005em;
  opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease;
}
:root[data-lab~="herox"] .dclab-hxsky-tag::after {
  content: ''; position: absolute; left: var(--lx, 50%); top: 100%; width: 1px; height: 8px; margin-left: -.5px; background: rgba(255, 255, 255, .7);
}
:root[data-lab~="herox"] .dclab-hxsky-tag svg { display: inline-block; margin-left: 5px; vertical-align: -1px; }
:root[data-lab~="herox"] .dclab-hxsky-a:is(:hover, :focus-visible) .dclab-hxsky-tag { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* the outline draws with the plan (from about .8s) and leaves with it; the skyline rides up with the slab */
  :root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-plan path { animation: dclabHxDraw .5s cubic-bezier(.3, .6, .3, 1) calc(var(--pd) + var(--sk, 0s)) forwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-plan { animation: dclabHxPlanOut .5s ease 2.55s forwards; }
  :root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky:not(.is-late) .dclab-hxsky-lift { animation: dclabHxLift 1.15s cubic-bezier(.55, 0, .25, 1) 1.25s backwards; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="herox"] .dclab-hxsky-plan { display: none; }
  :root[data-lab~="herox"] :is(.dclab-hxsky-w, .dclab-hxsky-l, .dclab-hxsky-tag, .dclab-hxsky-a > svg) { transition: none; }
}
@media (forced-colors: active) {
  :root[data-lab~="herox"] .dclab-herox-pillars.is-top-skyline .dclab-hxsky-a:focus-visible { outline-color: Highlight; }
}

/* lab-light.css */
/* Design Lab, Round 2 + 3: "The number, lit" (token: light).
   Every closing band, and the contact hero, closes the same way: deck line, "Call us" with a lamp,
   the number, the promise, one button, the page's own line. The lamp is Egmont Key Light, Fl W 15s.
   Doubled classes + !important beat Round 1 "blue", which forces paragraph and link colors in .cta-section. */

:root[data-lab~="light"] {
  --dclab-light-face: 'Mona Sans', 'Inter Tight', system-ui, sans-serif;
  --dclab-light-body: 'Inter', system-ui, -apple-system, sans-serif;
  --dclab-light-soft: rgba(255, 255, 255, .86);
  --dclab-light-quiet: rgba(255, 255, 255, .82);
  --dclab-light-glow: rgba(255, 255, 255, .55);
  --dclab-light-warm: rgba(255, 214, 150, .55);
}

:root[data-lab~="light"] .dclab-light-hide.dclab-light-hide { display: none !important; }

/* ---------- the band ---------- */
:root[data-lab~="light"] .dclab-light-band .cta-inner { max-width: 880px; }

/* deck: the page's line as a quiet lead-in */
:root[data-lab~="light"] .dclab-light-band .cta-inner > h2.dclab-light-deck.dclab-light-deck {
  font-family: var(--dclab-light-body) !important;
  font-stretch: 100% !important;
  font-weight: 600 !important;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.4 !important;
  letter-spacing: -.003em !important;
  color: var(--dclab-light-soft) !important;
  margin: 0 auto 26px !important;
  max-width: 34em;
  text-wrap: balance;
}

/* "Call us." first, the number clearly second */
:root[data-lab~="light"] .cta-inner > p.dclab-light-call.dclab-light-call {
  font-family: var(--dclab-light-face);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 8rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: #fff !important;
  margin: 0 !important;
}
@supports (text-box: trim-both cap alphabetic) {
  :root[data-lab~="light"] .cta-inner > p.dclab-light-call.dclab-light-call { text-box: trim-both cap alphabetic; }
}
:root[data-lab~="light"] .cta-inner > p.dclab-light-numrow.dclab-light-numrow {
  container-type: inline-size;
  margin: clamp(22px, 3vw, 40px) 0 0 !important;
  font-size: 1rem;
  line-height: 1;
  color: #fff !important;
}
:root[data-lab~="light"] .dclab-light-numrow .dclab-light-num {
  display: inline-block;
  font-family: var(--dclab-light-face);
  font-stretch: 112.5%;
  font-weight: 600;
  font-variant-numeric: lining-nums; /* not tabular: its zero is slashed */
  font-size: clamp(2rem, 6vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  white-space: nowrap;
  border-radius: 2px;
}
@supports (container-type: inline-size) {
  :root[data-lab~="light"] .dclab-light-numrow .dclab-light-num { font-size: min(4.6rem, 8.6cqi); }
}

/* the number is white everywhere, including over Round 1 "blue" */
:root[data-lab~="light"] a.dclab-light-num,
:root[data-lab~="light"] main p a.dclab-light-num.dclab-light-num.dclab-light-num { color: #fff !important; text-decoration: none; }
:root[data-lab~="light"] a.dclab-light-num:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-decoration-thickness: max(2px, .035em);
  text-underline-offset: .12em;
}
:root[data-lab~="light"] a.dclab-light-num:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

/* copy button only where there's a mouse */
:root[data-lab~="light"] .dclab-light-copy { display: none; }
@media (hover: hover) and (pointer: fine) {
  :root[data-lab~="light"] .dclab-light-copy:not([hidden]) {
    display: block;
    width: fit-content;
    margin: 12px auto 0;
    padding: 4px 2px;
    background: none;
    border: 0;
    font: 500 .9rem/1.3 var(--dclab-light-body);
    color: var(--dclab-light-soft);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-underline-offset: .22em;
    cursor: pointer;
  }
  :root[data-lab~="light"] .dclab-light-copy:hover { color: #fff; text-decoration-color: #fff; }
}

:root[data-lab~="light"] p.dclab-light-promise.dclab-light-promise {
  font: 400 1.05rem/1.5 var(--dclab-light-body);
  color: var(--dclab-light-soft) !important;
  margin: 14px 0 28px !important;
}
:root[data-lab~="light"] .dclab-light-band p.dclab-light-promise.dclab-light-promise { margin: 18px auto 36px !important; }

/* one button: a secondary link to a tool reads as a quiet underlined link (text, href and order untouched).
   A secondary /contact link keeps its outline button: talking to a person never gets demoted. */
:root[data-lab~="light"] .dclab-light-band .cta-actions { align-items: center; column-gap: 28px; }
:root[data-lab~="light"] .dclab-light-band .cta-actions > a.btn:not(.btn-primary):is([href^="/assessment"], [href^="/estimator"], [href^="/cyber-insurance-readiness"]) {
  --u: rgba(255, 255, 255, .5);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 10px 2px !important;
  min-height: 44px;
  border-radius: 3px;
  font: 600 1rem/1.3 var(--dclab-light-body);
  color: #fff !important;
  text-decoration: underline 1px var(--u);
  text-underline-offset: .28em;
}
:root[data-lab~="light"] .dclab-light-band .cta-actions > a.btn:not(.btn-primary):is([href^="/assessment"], [href^="/estimator"], [href^="/cyber-insurance-readiness"]):hover { --u: #fff; text-decoration-thickness: 2px; }
:root[data-lab~="light"] .dclab-light-band .cta-actions > a.btn:not(.btn-primary):is([href^="/assessment"], [href^="/estimator"], [href^="/cyber-insurance-readiness"]):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* the page's description, moved under the button as one quiet line */
:root[data-lab~="light"] .dclab-light-band .cta-inner > p.dclab-light-desc.dclab-light-desc {
  font: 400 1rem/1.6 var(--dclab-light-body) !important;
  font-stretch: 100% !important;
  letter-spacing: 0 !important;
  color: var(--dclab-light-quiet) !important;
  max-width: 62ch;
  margin: 26px auto 0 !important;
  text-align: center;
  text-wrap: balance;
}
/* what's left of a "Prefer to call?" line */
:root[data-lab~="light"] .dclab-light-band .cta-inner > p.text-sm {
  margin: 10px auto 0 !important;
  max-width: 62ch;
  font-size: .9rem;
  color: rgba(255, 255, 255, .72) !important;
  opacity: 1 !important;
}
:root[data-lab~="light"] .dclab-light-band .cta-inner > .cta-trust { margin-top: 36px; }

/* ---------- chart note (index, about, tampa) ---------- */
:root[data-lab~="light"] .dclab-light-chart {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 8px 18px;
  max-width: 720px;
  margin: 44px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  text-align: left;
}
:root[data-lab~="light"] .dclab-light-band .cta-trust + .dclab-light-chart { margin-top: 26px; padding-top: 0; border-top: 0; }
:root[data-lab~="light"] span.dclab-light-fl.dclab-light-fl {
  font-family: var(--dclab-light-face) !important;
  font-stretch: 87.5% !important;
  font-weight: 600 !important;
  font-style: normal !important;
  font-size: 1.2rem !important;
  line-height: 1.1 !important;
  font-variant-caps: all-small-caps;
  font-variant-numeric: lining-nums;
  letter-spacing: .04em !important;
  white-space: nowrap;
  color: #fff !important;
}
:root[data-lab~="light"] .dclab-light-chart > p {
  font: 400 .88rem/1.5 var(--dclab-light-body) !important;
  color: rgba(255, 255, 255, .8) !important;
  max-width: 46ch;
  margin: 0 !important;
  text-align: left;
}
:root[data-lab~="light"] .dclab-light-pause {
  padding: 4px 2px;
  background: none;
  border: 0;
  font: 600 .88rem/1.3 var(--dclab-light-body);
  color: #fff;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
  text-underline-offset: .22em;
  cursor: pointer;
}
:root[data-lab~="light"] .dclab-light-pause:is(:hover, [aria-pressed="true"]) { text-decoration-color: #fff; }
/* the label stays "Pause the light"; aria-pressed carries the state and this box shows it */
:root[data-lab~="light"] .dclab-light-pause::before {
  content: '';
  display: inline-block;
  width: .82em; height: .82em;
  margin-right: .5em;
  vertical-align: -.1em;
  border: 1.5px solid rgba(255, 255, 255, .8);
  border-radius: 3px;
  box-sizing: border-box;
}
:root[data-lab~="light"] .dclab-light-pause[aria-pressed="true"]::before {
  background: #fff no-repeat center / 78% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%230a0d31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: #fff;
}
:root[data-lab~="light"] :is(.dclab-light-pause, .dclab-light-copy):focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
:root[data-lab~="light"] .dclab-light-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- contact hero: "Or call 1-833-705-6669." in the h1's face ---------- */
:root[data-lab~="light"] p.dclab-light-or.dclab-light-or {
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: #fff;
  margin: 28px 0 6px;
}
:root[data-lab~="light"]:not([data-lab~="type"]) p.dclab-light-or.dclab-light-or {
  /* Inter Tight's full stop is smaller and lower than Mona Sans's */
  --dclab-light-size: .17em;
  --dclab-light-dot: .221em;
}
:root[data-lab~="light"][data-lab~="type"] p.dclab-light-or.dclab-light-or { font-family: var(--lab-face, 'Inter Tight', system-ui, sans-serif); }
:root[data-lab~="light"][data-lab~="type-mona"] p.dclab-light-or.dclab-light-or { font-stretch: 125%; font-weight: 750; letter-spacing: -.012em; }
:root[data-lab~="light"] p.dclab-light-or .dclab-light-num { white-space: nowrap; }

/* ---------- the lamp ----------
   The real "." stays (transparent) for copy and screen readers. ::before is the white disc with its
   resting glow, ::after the warm flash. Only opacity and transform animate. */
:root[data-lab~="light"] .dclab-light-lamp.dclab-light-lamp {
  position: relative;
  color: transparent !important;
  forced-color-adjust: none;
}
:root[data-lab~="light"] .dclab-light-lamp::before,
:root[data-lab~="light"] .dclab-light-lamp::after {
  content: '';
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}
:root[data-lab~="light"] .dclab-light-lamp::before {
  width: var(--dclab-light-size, .2em); height: var(--dclab-light-size, .2em);
  bottom: var(--dclab-light-dot, .305em);
  margin-left: calc(var(--dclab-light-size, .2em) / -2);
  background: #fff;
  box-shadow: 0 0 .1em .015em var(--dclab-light-glow);
}
:root[data-lab~="light"] .dclab-light-lamp::after {
  width: 1.1em; height: 1.1em;
  margin-left: -.55em;
  bottom: calc(var(--dclab-light-dot, .305em) + var(--dclab-light-size, .2em) / 2 - .55em);
  background: radial-gradient(circle, rgba(255, 244, 222, .95) 0 9%, var(--dclab-light-warm) 22%, rgba(255, 214, 150, .18) 45%, rgba(255, 214, 150, 0) 70%);
  opacity: 0;
  transform: scale(.5);
}
@supports (mix-blend-mode: screen) {
  :root[data-lab~="light"] .dclab-light-lamp::after { mix-blend-mode: screen; }
}

@keyframes dclab-light-disc {
  0% { transform: scale(1); }
  .6%, 3% { transform: scale(1.18); }
  4.4%, 100% { transform: scale(1); }
}
@keyframes dclab-light-halo {
  0% { opacity: 0; transform: scale(.5); }
  .6%, 3% { opacity: 1; transform: scale(1); }
  5%, 100% { opacity: 0; transform: scale(1.12); }
}
@keyframes dclab-light-disc-once {
  0% { transform: scale(1); }
  10%, 42% { transform: scale(1.18); }
  70%, 100% { transform: scale(1); }
}
@keyframes dclab-light-halo-once {
  0% { opacity: 0; transform: scale(.5); }
  10%, 42% { opacity: 1; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(1.12); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="light"] .dclab-light-repeat .dclab-light-lamp::before { animation: dclab-light-disc 15s linear infinite paused; }
  :root[data-lab~="light"] .dclab-light-repeat .dclab-light-lamp::after { animation: dclab-light-halo 15s linear infinite paused; }
  :root[data-lab~="light"] .dclab-light-repeat.dclab-light-run .dclab-light-lamp::before,
  :root[data-lab~="light"] .dclab-light-repeat.dclab-light-run .dclab-light-lamp::after { animation-play-state: running; }
  :root[data-lab~="light"] .dclab-light-repeat.dclab-light-still .dclab-light-lamp::before,
  :root[data-lab~="light"] .dclab-light-repeat.dclab-light-still .dclab-light-lamp::after { animation: none; }
  :root[data-lab~="light"] .dclab-light-once.dclab-light-go .dclab-light-lamp::before { animation: dclab-light-disc-once 1.1s ease-out 1 forwards; }
  :root[data-lab~="light"] .dclab-light-once.dclab-light-go .dclab-light-lamp::after { animation: dclab-light-halo-once 1.1s ease-out 1 forwards; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="light"] .dclab-light-lamp::before { animation: none !important; }
  :root[data-lab~="light"] .dclab-light-lamp::after { display: none; }
  :root[data-lab~="light"] .dclab-light-pause { display: none; }
}
@media (forced-colors: active) {
  :root[data-lab~="light"] .dclab-light-lamp::before { background: CanvasText; box-shadow: none; animation: none; }
  :root[data-lab~="light"] .dclab-light-lamp::after { display: none; }
  :root[data-lab~="light"] .dclab-light-pause::before { border-color: ButtonText; }
  :root[data-lab~="light"] .dclab-light-pause[aria-pressed="true"]::before { background: ButtonText; forced-color-adjust: none; }
}

/* ---------- touch: 44px targets without moving the type ---------- */
@media (pointer: coarse), (max-width: 600px) {
  :root[data-lab~="light"] .dclab-light-numrow .dclab-light-num { padding-block: 6px; margin-block: -6px; }
  :root[data-lab~="light"] p.dclab-light-or .dclab-light-num { padding-block: .3em; }
  :root[data-lab~="light"] .dclab-light-pause:not(#x) { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 4px; }
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce), (max-width: 600px) and (prefers-reduced-motion: reduce) {
  :root[data-lab~="light"] .dclab-light-pause:not(#x) { display: none; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  :root[data-lab~="light"] .dclab-light-band .cta-inner > h2.dclab-light-deck.dclab-light-deck { margin-bottom: 20px !important; }
  :root[data-lab~="light"] .dclab-light-band p.dclab-light-promise.dclab-light-promise { margin-bottom: 28px !important; }
  :root[data-lab~="light"] .dclab-light-band .cta-actions { flex-direction: column; row-gap: 8px; }
  /* a footnote under the action, not a block of body copy */
  :root[data-lab~="light"] .dclab-light-band .cta-inner > p.dclab-light-desc.dclab-light-desc { margin-top: 18px !important; font-size: .9rem !important; line-height: 1.5 !important; max-width: 34ch; }
  :root[data-lab~="light"] .dclab-light-band .cta-inner > p.text-sm { margin-top: 8px !important; font-size: .85rem; line-height: 1.5; max-width: 34ch; }
  :root[data-lab~="light"] .dclab-light-band .dclab-light-chart { flex-direction: column; align-items: center; gap: 4px; }
  :root[data-lab~="light"] .dclab-light-band .dclab-light-chart > p { text-align: center; max-width: 34ch; }
}
/* the number stays on one line at 360px */
@media (max-width: 479.98px) {
  :root[data-lab~="light"] .dclab-light-numrow .dclab-light-num.dclab-light-num { font-stretch: 100%; font-size: clamp(2rem, 9vw, 3rem); }
}

/* ---------- the sail watermark keeps clear of the words ----------
   Below 1280px the production sail sits under the last lines. Here it gets smaller and tucks into a
   short bottom margin. Geometry only: Round 1 "blue" still owns its color and opacity. */
@media (max-width: 1279.98px) {
  :root[data-lab~="light"] .cta-section.dclab-light-band::after { width: 380px; height: 353px; right: -64px; bottom: -92px; }
  :root[data-lab~="light"] .cta-section.dclab-light-band .dclab-light-chart { max-width: 600px; }
}
@media (max-width: 900px) {
  :root[data-lab~="light"] .cta-section.dclab-light-band::after { width: 170px; height: 158px; right: 4px; bottom: -16px; }
  :root[data-lab~="light"] .cta-section.dclab-light-band { padding-bottom: 150px; }
}
@media (max-width: 600px) {
  :root[data-lab~="light"] .cta-section.dclab-light-band::after { width: 120px; height: 111px; right: -2px; bottom: -10px; }
  :root[data-lab~="light"] .cta-section.dclab-light-band { padding-bottom: 112px; }
}

/* ---------- Round 3 QA ---------- */
/* the "Headquartered in Tampa. Staff in four states." line is already in the hero and in the colophon */
:root[data-lab~="light"][data-lab~="colophon"] .dclab-light-band .cta-inner > p.dclab-light-hq { display: none !important; }
:root[data-lab~="light"] .dclab-light-band .cta-inner > p:not([class]) { text-wrap: balance; }
@media (max-width: 600px) {
  /* phones: the page's line reads before the buttons, so the action comes last instead of a footnote under it */
  :root[data-lab~="light"] .dclab-light-band .cta-inner { display: flex; flex-direction: column; }
  :root[data-lab~="light"] .dclab-light-band .cta-inner > .cta-actions { order: 1; }
  :root[data-lab~="light"] .dclab-light-band .cta-inner > .cta-actions ~ :not(.dclab-light-desc) { order: 2; }
  :root[data-lab~="light"] .dclab-light-band .cta-inner > p.dclab-light-desc.dclab-light-desc { order: 0; margin: -8px auto 24px !important; }
  /* the trust ticks: one left-set column, each icon on its line's first row */
  :root[data-lab~="light"] .dclab-light-band .cta-inner > .cta-trust {
    flex-direction: column !important; align-items: flex-start !important; align-self: center; width: fit-content; max-width: 100%;
    row-gap: 10px !important; text-align: left;
  }
  :root[data-lab~="light"] .dclab-light-band .cta-inner > .cta-trust > span { display: flex; align-items: flex-start; gap: 8px; white-space: normal; }
  :root[data-lab~="light"] .dclab-light-band .cta-inner > .cta-trust > span > svg { flex-shrink: 0; margin-top: .2em; }
}

/* lab-moves.css */
/* Design Lab, Round 4: "What moves where" (moves). See js/lab-moves.js. Every rule is scoped to the token.
   One grid draws the whole plate. Wide: the office in plan (desks, a closet with a rack), routes out through the wall,
   and four destination frames, each tile level with where it goes. Below 1100px the office drawing drops away: the
   closet and the destinations sit side by side, the Monday line beside each tile down to 900px and under it below that
   (phones too, narrower). Line language: dashed = not in use yet (or vacated), solid = in use. Every tile has a numbered
   dashed spot on both sides, so the plan reads before the move. The step bar is sticky, so Back and Next stay in reach. */

:root[data-lab~="moves"] .dclab-mv {
  --mv-ink: #0a0d31;
  --mv-ultra: #010ed0;
  --mv-cyan: #00d4ff;
  --mv-text: #3f4462;
  --mv-muted: #555b7a;
  --mv-hair: rgba(10, 13, 49, .3);
  --mv-ghost: rgba(10, 13, 49, .34);
  --mv-bg: #f8f9fc;
  --mv-tile: 210px;
  --mv-tile-h: 46px;
  --mv-pad: 16px;
  --mv-cw: calc(var(--mv-tile) + 2 * var(--mv-pad));
  --mv-rw: 40px;
  --mv-gap: 38px;
  --mv-floor: 250px;
  position: relative;
  margin: 0 0 88px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--mv-ink);
  text-align: left;
}
:root[data-lab~="moves"] .dclab-mv p { margin: 0; }
/* the plate: every frame and lane on one grid */
:root[data-lab~="moves"] .dclab-mv-plan {
  position: relative; display: grid;
  grid-template-columns: [floor-s] var(--mv-floor) [closet-s] var(--mv-cw) [closet-e] var(--mv-rw) [zone-s] var(--mv-cw) [text-s] minmax(0, 1fr) [zone-e];
  grid-template-rows: [g1] var(--mv-gap) [l1] auto [s12] 14px [l2] auto [g2] var(--mv-gap) [l3] auto [g3] var(--mv-gap)
    [l4] auto [g4] var(--mv-gap) [l5] auto [g5] var(--mv-gap) [l6] auto [l7] auto [end];
}

/* ---------- head: the title, one line of why, and the three buttons ---------- */
:root[data-lab~="moves"] .dclab-mv-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end;
  margin-bottom: 22px;
}
:root[data-lab~="moves"] .dclab-mv-title {
  margin: 0 0 8px;
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%;
  font-size: clamp(1.4rem, 2.1vw, 1.8rem); font-weight: 700; line-height: 1.12; letter-spacing: -.012em; color: var(--mv-ink);
}
:root[data-lab~="moves"] .dclab-mv-deck { max-width: 54ch; font-size: 1.02rem; line-height: 1.55; color: var(--mv-text); }

:root[data-lab~="moves"] .dclab-mv-ctl {
  display: inline-flex; border: 1px solid var(--mv-ink); border-radius: 6px; background: #fff; overflow: hidden;
}
:root[data-lab~="moves"] .dclab-mv button {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  font: 600 14.5px/1.1 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--mv-ink);
}
:root[data-lab~="moves"] .dclab-mv-ctl button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: transparent; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
:root[data-lab~="moves"] .dclab-mv-ctl button + button { border-left: 1px solid var(--mv-ink); }
@media (hover: hover) {
  :root[data-lab~="moves"] .dclab-mv-ctl button:hover { background: rgba(10, 13, 49, .06); }
  :root[data-lab~="moves"] .dclab-mv-stepbtns button:hover { background: rgba(10, 13, 49, .06); }
  :root[data-lab~="moves"] .dclab-mv-stepbtns button[data-step="1"]:hover { background: #1a26e6; }
  :root[data-lab~="moves"] .dclab-mv-stepbtns button[aria-disabled="true"]:hover { background: #fff; }
  :root[data-lab~="moves"] .dclab-mv-stepbtns button[data-step="1"][aria-disabled="true"]:hover { background: var(--mv-ultra); }
}
:root[data-lab~="moves"] .dclab-mv-ctl button[aria-pressed="true"] { background: var(--mv-ink); color: #fff; }
:root[data-lab~="moves"] .dclab-mv button:focus-visible,
:root[data-lab~="moves"] .dclab-mv a:focus-visible { outline: 2px solid var(--mv-ultra); outline-offset: 2px; border-radius: 4px; }
:root[data-lab~="moves"] .dclab-mv-ctl button:focus-visible { outline-offset: -5px; border-radius: 3px; }
:root[data-lab~="moves"] .dclab-mv-ctl button[aria-pressed="true"]:focus-visible { outline-color: #fff; }

/* step through: a narrator line and Back / Next move, kept in reach (sticky) while a taller plate scrolls under it */
:root[data-lab~="moves"] .dclab-mv-stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  position: sticky; top: calc(var(--header-h, 72px) + 10px); z-index: 4;
  margin: 0 0 14px; padding: 8px 8px 8px 18px; border: 1px solid var(--mv-hair); border-radius: 6px; background: #fff;
  box-shadow: 0 10px 22px -16px rgba(10, 13, 49, .55);
}
:root[data-lab~="moves"] .dclab-mv-stepper[hidden] { display: none; }
:root[data-lab~="moves"] .dclab-mv-now { font-size: 1rem; line-height: 1.45; color: var(--mv-ink); }
:root[data-lab~="moves"] .dclab-mv-now b { margin-right: 8px; font-weight: 700; color: var(--mv-ultra); font-variant-numeric: tabular-nums; white-space: nowrap; }
:root[data-lab~="moves"] .dclab-mv-stepbtns { display: flex; gap: 8px; }
:root[data-lab~="moves"] .dclab-mv-stepbtns button {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--mv-ink); border-radius: 4px; background: #fff;
}
:root[data-lab~="moves"] .dclab-mv-stepbtns button[data-step="1"] { background: var(--mv-ultra); border-color: var(--mv-ultra); color: #fff; }
:root[data-lab~="moves"] .dclab-mv-stepbtns button[aria-disabled="true"] { opacity: .38; cursor: default; }

:root[data-lab~="moves"] .dclab-mv-live {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- legends: a plain name above each frame, never an eyebrow ---------- */
:root[data-lab~="moves"] .dclab-mv-legend {
  position: absolute; left: 0; bottom: calc(100% + 10px);
  font-size: .86rem; font-weight: 600; line-height: 1.2; letter-spacing: .005em; white-space: nowrap; color: var(--mv-ink);
}
/* legends sit on one line and start on their wall, whatever its thickness */
:root[data-lab~="moves"] .dclab-mv-office > .dclab-mv-legend { left: -2px; bottom: calc(100% + 12px); }
:root[data-lab~="moves"] .dclab-mv-closet > .dclab-mv-legend { left: -1.5px; }
:root[data-lab~="moves"] .dclab-mv-zone .dclab-mv-legend { color: var(--mv-muted); }
:root[data-lab~="moves"] .dclab-mv-zone.is-on .dclab-mv-legend { color: var(--mv-ink); }
/* Ascend's cyan, once: a small mark cut at the sail's 22.6 degrees beside the hosted server */
:root[data-lab~="moves"] .dclab-mv-zone[data-z="host"] .dclab-mv-legend::before {
  content: ''; display: inline-block; width: 9px; height: 10px; margin: 0 9px -1px 2px; background: var(--mv-cyan); transform: skewX(-22.6deg);
}

/* ---------- the office (wide only): outer walls, a front door, desks ---------- */
:root[data-lab~="moves"] .dclab-mv-office {
  grid-column: floor-s / closet-e; grid-row: l1 / end; position: relative;
  border: 2px solid var(--mv-ink); border-radius: 1px;
}
/* the front door, in the bottom wall under the closet: an opening, the leaf standing open, its swing */
:root[data-lab~="moves"] .dclab-mv-office::before {
  content: ''; position: absolute; right: 64px; bottom: -2px; width: 44px; height: 2px; background: var(--mv-bg);
}
:root[data-lab~="moves"] .dclab-mv-office::after {
  content: ''; position: absolute; right: 64px; bottom: 0; width: 44px; height: 44px;
  border-right: 1.5px solid var(--mv-ink); border-top: 1px solid var(--mv-hair); border-left: 1px solid var(--mv-hair);
  border-top-left-radius: 100%;
}
:root[data-lab~="moves"] .dclab-mv-desks {
  grid-column: floor-s / closet-s; grid-row: l1 / l6; align-self: stretch; justify-self: stretch;
  width: 100%; height: 100%; padding: 14px 18px 4px; overflow: visible;
}
:root[data-lab~="moves"] .dclab-mv-desks * { fill: none; stroke: rgba(10, 13, 49, .38); stroke-width: 1; vector-effect: non-scaling-stroke; }
:root[data-lab~="moves"] .dclab-mv-desks .dclab-mv-mon { stroke: rgba(10, 13, 49, .6); stroke-width: 2.5; stroke-linecap: round; }

/* ---------- the server closet: an inside wall with its own door, a rack's two rails ---------- */
:root[data-lab~="moves"] .dclab-mv-closet {
  grid-column: closet-s / closet-e; grid-row: l1 / l7; position: relative;
  border-left: 1.5px solid var(--mv-ink); border-bottom: 1.5px solid var(--mv-ink);
}
:root[data-lab~="moves"] .dclab-mv-rail {
  position: absolute; top: 8px; bottom: 8px; left: 5px; width: 5px;
  border-left: 1px solid var(--mv-hair);
  background: repeating-linear-gradient(to bottom, var(--mv-hair) 0 1px, transparent 1px 8px) left top / 4px 100% no-repeat;
}
:root[data-lab~="moves"] .dclab-mv-rail-r { left: auto; right: 5px; border-left: 0; border-right: 1px solid var(--mv-hair); background-position: right top; }
/* the closet door, high in its inside wall, swinging into the office */
:root[data-lab~="moves"] .dclab-mv-door {
  position: absolute; right: 100%; top: 10px; width: 34px; height: 34px; margin-right: .75px;
  border-top: 1.5px solid var(--mv-ink); border-bottom: 1px solid var(--mv-hair); border-left: 1px solid var(--mv-hair);
  border-bottom-left-radius: 100%;
}
:root[data-lab~="moves"] .dclab-mv-door::after {
  content: ''; position: absolute; right: -2.5px; top: -1.5px; width: 3px; height: 35px; background: var(--mv-bg);
}

/* ---------- destinations: dashed until something lands, then solid on paper ---------- */
:root[data-lab~="moves"] .dclab-mv-zone { grid-column: zone-s / zone-e; position: relative; border-radius: 6px; }
:root[data-lab~="moves"] .dclab-mv-zone[data-z="m365"] { grid-row: l1 / g2; }
:root[data-lab~="moves"] .dclab-mv-zone[data-z="host"] { grid-row: l3 / g3; }
:root[data-lab~="moves"] .dclab-mv-zone[data-z="bk"] { grid-row: l4 / g4; }
:root[data-lab~="moves"] .dclab-mv-zone[data-z="sign"] { grid-row: l5 / g5; }
:root[data-lab~="moves"] .dclab-mv-zone[data-z="stay"] { display: none; }
:root[data-lab~="moves"] .dclab-mv-zone::before,
:root[data-lab~="moves"] .dclab-mv-zone::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
:root[data-lab~="moves"] .dclab-mv-zone::before { border: 1px dashed rgba(10, 13, 49, .26); }
:root[data-lab~="moves"] .dclab-mv-zone::after { border: 1px solid rgba(10, 13, 49, .5); background: #fff; opacity: 0; }
:root[data-lab~="moves"] .dclab-mv-zone.is-on::before { opacity: 0; }
:root[data-lab~="moves"] .dclab-mv-zone.is-on::after { opacity: 1; }

/* ---------- lanes: one row per tile, every column shared with the plate ---------- */
:root[data-lab~="moves"] .dclab-mv-lane {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start;
  position: relative; z-index: 1; padding: 9px 0;
}
:root[data-lab~="moves"] .dclab-mv-lane[data-i="1"] { grid-row: l1; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="2"] { grid-row: l2; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="3"] { grid-row: l3; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="4"] { grid-row: l4; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="5"] { grid-row: l5; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] { grid-row: l6 / end; grid-template-rows: subgrid; }

:root[data-lab~="moves"] .dclab-mv-from,
:root[data-lab~="moves"] .dclab-mv-to { display: grid; width: var(--mv-tile); justify-self: center; }
:root[data-lab~="moves"] .dclab-mv-from { grid-column: closet-s / closet-e; grid-row: 1; }
:root[data-lab~="moves"] .dclab-mv-to { grid-column: zone-s / text-s; grid-row: 1; }
:root[data-lab~="moves"] .dclab-mv-from > *,
:root[data-lab~="moves"] .dclab-mv-to > * { grid-area: 1 / 1; }

/* the tile: one thing the office runs, with its callout number. The ghost is the same box, dashed, and stays put. */
:root[data-lab~="moves"] .dclab-mv-tile,
:root[data-lab~="moves"] .dclab-mv-ghost {
  display: flex; align-items: center; gap: 11px; min-height: var(--mv-tile-h);
  padding: 9px 12px 9px 10px; border-radius: 4px;
  font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.002em;
}
:root[data-lab~="moves"] .dclab-mv-tile { position: relative; z-index: 1; background: #fff; border: 1px solid var(--mv-ink); color: var(--mv-ink); }
:root[data-lab~="moves"] .dclab-mv-n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--mv-ultra); border-radius: 50%;
  font-size: 12px; font-weight: 600; line-height: 1; color: var(--mv-ultra); font-variant-numeric: tabular-nums;
}
:root[data-lab~="moves"] .dclab-mv-name { min-width: 0; }
:root[data-lab~="moves"] .dclab-mv-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 450; line-height: 1.3; color: var(--mv-muted); }
:root[data-lab~="moves"] .dclab-mv-lane.is-moved .dclab-mv-tile .dclab-mv-n { background: var(--mv-ultra); color: #fff; }
:root[data-lab~="moves"] .dclab-mv-lane.is-now .dclab-mv-tile { border-color: var(--mv-ultra); box-shadow: 0 0 0 1px var(--mv-ultra); }

:root[data-lab~="moves"] .dclab-mv-ghost { border: 1px dashed var(--mv-ghost); color: rgba(10, 13, 49, .5); }
:root[data-lab~="moves"] .dclab-mv-ghost .dclab-mv-n { border: 1px dashed var(--mv-ghost); color: rgba(10, 13, 49, .55); background: none; }
:root[data-lab~="moves"] .dclab-mv-ghost .dclab-mv-name { visibility: hidden; }

/* routes: out through the closet wall to each destination */
:root[data-lab~="moves"] .dclab-mv-route {
  grid-column: closet-e / zone-s; grid-row: 1; position: relative; height: 1px; margin-top: calc(var(--mv-tile-h) / 2 - .5px);
}
:root[data-lab~="moves"] .dclab-mv-route::before {
  content: ''; position: absolute; left: 0; right: 2px; top: 0; border-top: 1px dashed var(--mv-ghost); transform-origin: 0 50%;
}
:root[data-lab~="moves"] .dclab-mv-route::after {
  content: ''; position: absolute; right: 1px; top: -3.5px; width: 7px; height: 7px;
  border-top: 1px solid var(--mv-ghost); border-right: 1px solid var(--mv-ghost); transform: rotate(45deg);
}
:root[data-lab~="moves"] .dclab-mv-lane.is-moved .dclab-mv-route::before { border-top: 1.5px solid var(--mv-ultra); top: -.25px; }
:root[data-lab~="moves"] .dclab-mv-lane.is-moved .dclab-mv-route::after { border-color: var(--mv-ultra); border-width: 1.5px; }

/* where exactly (always), and what your team notices on Monday (once the tile has landed) */
:root[data-lab~="moves"] .dclab-mv-say { grid-column: text-s / zone-e; grid-row: 1; align-self: center; padding: 0 14px 0 0; }
:root[data-lab~="moves"] .dclab-mv-where { display: block; font-size: .8rem; font-weight: 500; line-height: 1.35; letter-spacing: .005em; color: var(--mv-muted); }
:root[data-lab~="moves"] .dclab-mv-mon { display: block; margin-top: 3px; font-size: .95rem; line-height: 1.42; color: var(--mv-ink); text-wrap: pretty; visibility: hidden; }
:root[data-lab~="moves"] .dclab-mv-lane.is-moved .dclab-mv-mon { visibility: visible; }

/* the printers stay in the office: out of the closet onto the floor, the Monday line under them */
:root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-to { grid-column: floor-s / closet-s; grid-row: 1; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-from { margin-bottom: 9px; }
:root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-say {
  grid-column: floor-s / closet-s; grid-row: 2; align-self: start; justify-self: center; width: var(--mv-tile); padding: 0 0 26px;
}
:root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-mon { margin-top: 0; }

/* the caption sits in the plate's empty corner, under the destinations, level with the office's bottom wall */
:root[data-lab~="moves"] .dclab-mv-cap {
  position: absolute; left: calc(var(--mv-floor) + var(--mv-cw) + var(--mv-rw)); right: 0; bottom: 0; padding: 0 0 0 2px;
  font-size: .84rem; line-height: 1.55; color: var(--mv-muted);
}
:root[data-lab~="moves"] .dclab-mv-cap a { color: var(--mv-ultra); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:root[data-lab~="moves"] .dclab-mv-cap a:hover { text-decoration-thickness: 2px; }

/* ---------- motion: only while a move is animated (data-motion), never with reduced motion ---------- */
:root[data-lab~="moves"].dclab-mv-vt { view-transition-name: none; }
:root[data-lab~="moves"].dclab-mv-vt::view-transition { pointer-events: none; }
:root[data-lab~="moves"].dclab-mv-vt .dclab-mv-tile[data-i="1"] { view-transition-name: dclab-mv-t1; }
:root[data-lab~="moves"].dclab-mv-vt .dclab-mv-tile[data-i="2"] { view-transition-name: dclab-mv-t2; }
:root[data-lab~="moves"].dclab-mv-vt .dclab-mv-tile[data-i="3"] { view-transition-name: dclab-mv-t3; }
:root[data-lab~="moves"].dclab-mv-vt .dclab-mv-tile[data-i="4"] { view-transition-name: dclab-mv-t4; }
:root[data-lab~="moves"].dclab-mv-vt .dclab-mv-tile[data-i="5"] { view-transition-name: dclab-mv-t5; }
:root[data-lab~="moves"].dclab-mv-vt .dclab-mv-tile[data-i="6"] { view-transition-name: dclab-mv-t6; }
:root[data-lab~="moves"]::view-transition-group(dclab-mv-t1),
:root[data-lab~="moves"]::view-transition-group(dclab-mv-t2),
:root[data-lab~="moves"]::view-transition-group(dclab-mv-t3),
:root[data-lab~="moves"]::view-transition-group(dclab-mv-t4),
:root[data-lab~="moves"]::view-transition-group(dclab-mv-t5),
:root[data-lab~="moves"]::view-transition-group(dclab-mv-t6) { animation-duration: .58s; animation-timing-function: cubic-bezier(.25, .7, .2, 1); }
:root[data-lab~="moves"].dclab-mv-all::view-transition-group(dclab-mv-t2) { animation-delay: 70ms; }
:root[data-lab~="moves"].dclab-mv-all::view-transition-group(dclab-mv-t3) { animation-delay: 140ms; }
:root[data-lab~="moves"].dclab-mv-all::view-transition-group(dclab-mv-t4) { animation-delay: 210ms; }
:root[data-lab~="moves"].dclab-mv-all::view-transition-group(dclab-mv-t5) { animation-delay: 280ms; }
:root[data-lab~="moves"].dclab-mv-all::view-transition-group(dclab-mv-t6) { animation-delay: 350ms; }

:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-zone::before,
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-zone::after { transition: opacity .3s ease var(--zd, .34s); }
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-zone .dclab-mv-legend { transition: color .3s ease var(--zd, .34s); }
:root[data-lab~="moves"] .dclab-mv[data-motion="all"] .dclab-mv-zone { --zd: calc(var(--zi) * 70ms + .34s); }
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-zone:not(.is-on) { --zd: .14s; }
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-mon { opacity: 0; transition: opacity .18s ease, visibility 0s linear .18s; }
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-lane.is-moved .dclab-mv-mon { opacity: 1; transition: none; }
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-lane.is-moved .dclab-mv-mon { animation: dclabMvSay .42s cubic-bezier(.2, .7, .2, 1) var(--sd, .42s) both; }
:root[data-lab~="moves"] .dclab-mv[data-motion="all"] .dclab-mv-lane { --sd: calc(var(--i) * 70ms + .44s); }
:root[data-lab~="moves"] .dclab-mv[data-motion] .dclab-mv-lane.is-moved .dclab-mv-route::before { animation: dclabMvDraw .5s cubic-bezier(.25, .7, .2, 1) var(--rd, 0s) both; }
:root[data-lab~="moves"] .dclab-mv[data-motion="all"] .dclab-mv-lane { --rd: calc(var(--i) * 70ms); }
@keyframes dclabMvSay { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes dclabMvDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="moves"] .dclab-mv *,
  :root[data-lab~="moves"] .dclab-mv *::before,
  :root[data-lab~="moves"] .dclab-mv *::after { animation: none !important; transition: none !important; }
}

/* ---------- below 1100px: closet and destinations side by side, the Monday line under each tile ---------- */
@media (max-width: 1099px) {
  :root[data-lab~="moves"] .dclab-mv {
    --mv-tile: 236px; --mv-pad: 14px; --mv-rw: 30px; --mv-gap: 40px;
  }
  :root[data-lab~="moves"] .dclab-mv-plan { grid-template-columns: [floor-s closet-s] var(--mv-cw) [closet-e] var(--mv-rw) [zone-s text-s] minmax(0, 1fr) [zone-e]; }
  :root[data-lab~="moves"] .dclab-mv-head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  :root[data-lab~="moves"] .dclab-mv-ctl { justify-self: start; }
  :root[data-lab~="moves"] .dclab-mv-office,
  :root[data-lab~="moves"] .dclab-mv-desks,
  :root[data-lab~="moves"] .dclab-mv-door { display: none; }
  :root[data-lab~="moves"] .dclab-mv-closet { border: 1.5px solid var(--mv-ink); border-radius: 2px; }
  :root[data-lab~="moves"] .dclab-mv-closet > .dclab-mv-legend { bottom: calc(100% + 11.5px); }
  :root[data-lab~="moves"] .dclab-mv-zone[data-z="stay"] { display: block; grid-row: l6 / l7; }
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] { grid-row: l6; grid-template-rows: none; }
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-from { margin-bottom: 0; }
  :root[data-lab~="moves"] .dclab-mv-to,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-to { grid-column: zone-s / zone-e; grid-row: 1; justify-self: start; margin-left: var(--mv-pad); }
  :root[data-lab~="moves"] .dclab-mv-say,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-say {
    grid-column: zone-s / zone-e; grid-row: 2; align-self: start; justify-self: stretch; width: auto; padding: 9px var(--mv-pad) 3px;
  }
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-say:not(:has(.dclab-mv-where)) { padding-top: 0; }
  :root[data-lab~="moves"] .dclab-mv-mon,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-mon { display: none; margin-top: 4px; }
  :root[data-lab~="moves"] .dclab-mv-lane.is-moved .dclab-mv-mon { display: block; }
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"].is-moved .dclab-mv-mon { margin-top: 9px; }
  :root[data-lab~="moves"] .dclab-mv-cap { position: static; margin-top: 28px; padding: 0; }
}

/* ---------- 900 to 1099px: no drawn office, but room for the Monday line beside each tile again ---------- */
@media (min-width: 900px) and (max-width: 1099px) {
  :root[data-lab~="moves"] .dclab-mv-plan { grid-template-columns: [floor-s closet-s] var(--mv-cw) [closet-e] var(--mv-rw) [zone-s] var(--mv-cw) [text-s] minmax(0, 1fr) [zone-e]; }
  :root[data-lab~="moves"] .dclab-mv-to,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-to { grid-column: zone-s / text-s; justify-self: center; margin: 0; }
  :root[data-lab~="moves"] .dclab-mv-say,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-say { grid-column: text-s / zone-e; grid-row: 1; align-self: center; padding: 0 14px 0 0; }
  :root[data-lab~="moves"] .dclab-mv-mon,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-mon { display: block; margin-top: 3px; visibility: hidden; }
  :root[data-lab~="moves"] .dclab-mv-lane.is-moved .dclab-mv-mon,
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"].is-moved .dclab-mv-mon { visibility: visible; margin-top: 3px; }
  :root[data-lab~="moves"] .dclab-mv-lane[data-i="6"] .dclab-mv-say:not(:has(.dclab-mv-where)) .dclab-mv-mon { margin-top: 0; }
}

/* ---------- phones: the same two columns, narrower ---------- */
@media (max-width: 699px) {
  :root[data-lab~="moves"] .dclab-mv {
    --mv-tile: clamp(116px, 35vw, 160px); --mv-tile-h: 44px; --mv-pad: 7px; --mv-rw: 10px; --mv-gap: 36px;
    margin-bottom: 64px;
  }
  :root[data-lab~="moves"] .dclab-mv-title { font-size: 1.32rem; }
  :root[data-lab~="moves"] .dclab-mv-deck { font-size: .97rem; }
  :root[data-lab~="moves"] .dclab-mv-ctl { display: grid; grid-template-columns: repeat(3, auto); justify-self: stretch; }
  :root[data-lab~="moves"] .dclab-mv-ctl button { padding: 0 8px; font-size: 14px; }
  :root[data-lab~="moves"] .dclab-mv-stepper { gap: 10px; padding: 10px; }
  :root[data-lab~="moves"] .dclab-mv-now { padding: 0 4px; font-size: .93rem; line-height: 1.4; }
  :root[data-lab~="moves"] .dclab-mv-now b { margin-right: 4px; }
  :root[data-lab~="moves"] .dclab-mv-stepbtns { flex: 1 1 100%; }
  :root[data-lab~="moves"] .dclab-mv-stepbtns button { flex: 1 1 0; }
  :root[data-lab~="moves"] .dclab-mv-route { display: none; }
  :root[data-lab~="moves"] .dclab-mv-lane { padding: 7px 0; }
  :root[data-lab~="moves"] .dclab-mv-tile,
  :root[data-lab~="moves"] .dclab-mv-ghost { gap: 7px; padding: 8px 8px 8px 7px; font-size: 13.5px; line-height: 1.2; }
  :root[data-lab~="moves"] .dclab-mv-n { width: 21px; height: 21px; font-size: 11px; }
  :root[data-lab~="moves"] .dclab-mv-sub { display: none; }
  :root[data-lab~="moves"] .dclab-mv-rail { display: none; }
  :root[data-lab~="moves"] .dclab-mv-legend { font-size: .8rem; }
  :root[data-lab~="moves"] .dclab-mv-zone[data-z="host"] .dclab-mv-legend::before { width: 8px; height: 9px; margin-right: 7px; }
  :root[data-lab~="moves"] .dclab-mv-say { padding-top: 7px; }
  :root[data-lab~="moves"] .dclab-mv-where { font-size: .74rem; }
  :root[data-lab~="moves"] .dclab-mv-mon { font-size: .9rem; line-height: 1.42; }
}
@media (max-width: 359px) {
  :root[data-lab~="moves"] .dclab-mv-ctl button { padding: 0 6px; font-size: 13px; }
}
@media (forced-colors: active) {
  :root[data-lab~="moves"] .dclab-mv-ctl button[aria-pressed="true"] { background: Highlight; color: HighlightText; forced-color-adjust: none; }
  :root[data-lab~="moves"] .dclab-mv-lane.is-now .dclab-mv-tile { outline: 2px solid Highlight; }
}

/* lab-pillar-sails.css */
/* Design Lab, Round 2: "Pillar icons" (pillar-sails), two glyph sets: 'pillar-slash' and 'pillar-sail'. See js/lab-pillar-sails.js.
   Every rule is scoped to the token, and every glyph is inserted by the script only while it is on. */

:root[data-lab~="pillar-sails"] .dclab-pillar-sails-g {
  display: inline-block; flex-shrink: 0; overflow: visible;
  fill: currentColor; stroke: none;
  transform-origin: 35% 89%;           /* the main's tack: the glyph trims around it like a real sail */
}
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-hidden { display: none !important; }

/* 1. Homepage pillar explorer: same 42px box (nothing moves), no pastel tile, navy sail; brand blue when selected */
:root[data-lab~="pillar-sails"] .px-ico.dclab-pillar-sails-pxico { background: transparent; color: #0a0d31; }
:root[data-lab~="pillar-sails"] .px-ico .dclab-pillar-sails-px { width: 28px; height: 28px; transition: color .2s ease-out; }
:root[data-lab~="pillar-sails"] .px-tab[aria-selected="true"] .px-ico.dclab-pillar-sails-pxico { color: #010ed0; }

/* 1b. The explorer panel (sails only): its pillar's sail, large and quiet, in the bottom right corner behind the content.
   isolation keeps the watermark above the panel's own background and below everything in it. */
:root[data-lab~="pillar-sails"] .px-panel.dclab-pillar-sails-panel { position: relative; isolation: isolate; }
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-big {
  position: absolute; right: 30px; bottom: 26px; z-index: -1;
  width: 176px; height: 164px; color: var(--pc, #4d7aff); opacity: .22; pointer-events: none;
}
/* Below 900px the panel stacks into one column with text right to the corner, so the watermark steps out. */
@media (max-width: 900px) {
  :root[data-lab~="pillar-sails"] .dclab-pillar-sails-big { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* each time a panel is shown, its sail settles from the same 5 degree re-trim as the tabs */
  :root[data-lab~="pillar-sails"] .px-panel.on > .dclab-pillar-sails-big { animation: dclab-pillar-sails-trim .9s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes dclab-pillar-sails-trim {
  from { transform: rotate(-5deg) translateY(8px); opacity: 0; }
  to { transform: none; opacity: .22; }
}

/* 2. Solutions menu: a small sail before each pillar name, in the label's own pillar color */
:root[data-lab~="pillar-sails"] .nav-dd-label .dclab-pillar-sails-nav {
  width: 13px; height: 13px; vertical-align: -1px; margin: -2px 6px -2px 0;   /* negative block margins: the label keeps its line height */
}

/* 3. Pillar link cards (Tampa, Pittsburgh, Healthcare): white cards, so the sail is navy tinted by its pillar
   (the pale pillar greens and cyans wash out on white); the word keeps its pillar color. */
:root[data-lab~="pillar-sails"] .pillar-eyebrow.dclab-pillar-sails-eb { display: inline-flex; align-items: center; gap: 8px; }
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-eyebrow { width: 18px; height: 18px; color: #0a0d31; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-lab~="pillar-sails"] .dclab-pillar-sails-eyebrow { color: color-mix(in srgb, var(--pc, #010ed0) 40%, #0a0d31); }
}

/* 4. Industry pillar maps: tile-free with or without Round 1 "Quieter icons". The box keeps its 56px height so
   nothing below moves; the sail sits beside its pillar word as a quiet label. */
:root[data-lab~="pillar-sails"] .service-icon.dclab-pillar-sails-mapico {
  background: transparent; color: #0a0d31; width: auto; justify-content: flex-start; gap: 10px;
}
:root[data-lab~="pillar-sails"] .service-icon .dclab-pillar-sails-map { width: 24px; height: 24px; }
:root[data-lab~="pillar-sails"][data-lab~="icons"] .service-icon .dclab-pillar-sails-map { width: 26px; height: 26px; }
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-mapword {
  font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #0a0d31; line-height: 1;
}
:root[data-lab~="pillar-sails"] .section-dark .service-icon.dclab-pillar-sails-mapico,
:root[data-lab~="pillar-sails"] .section-dark .dclab-pillar-sails-mapword { color: #e6e9ff; }

/* 5. Pillar and service hero labels. On the service pages the pillar word leads, split from the service by a hairline. */
:root[data-lab~="pillar-sails"] .tag.dclab-pillar-sails-tag { gap: 6px; }
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-gw { display: inline; line-height: inherit; }
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-gw > .dclab-pillar-sails-g { width: 14px; height: 14px; vertical-align: middle; }
:root[data-lab~="pillar-sails"] .dclab-pillar-sails-tagword {
  font-weight: 800; padding-right: 8px; margin-right: 2px;
  border-right: 1px solid currentColor; border-right-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* The slash set is drawn for 16px and up, so the menu and hero-tag glyphs step up from the sails' 13 and 14px.
   The negative block margins still keep each label's line height, so nothing below moves. */
:root[data-lab~="pillar-slash"] .nav-dd-label .dclab-pillar-sails-nav { width: 16px; height: 16px; vertical-align: -3px; margin: -4px 7px -4px 0; }
:root[data-lab~="pillar-slash"] .dclab-pillar-sails-gw > .dclab-pillar-sails-g { width: 16px; height: 16px; }

/* Sails only: re-trim on hover and keyboard focus, easing 5 degrees around the tack. Pointer devices with motion only. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :root[data-lab~="pillar-sail"] :is(.px-tab, .pillar-link-card) .dclab-pillar-sails-g {
    transition: transform .18s ease-out, color .2s ease-out;
  }
  :root[data-lab~="pillar-sail"] :is(.px-tab, .pillar-link-card):is(:hover, :focus-visible) .dclab-pillar-sails-g {
    transform: rotate(-5deg);
  }
}

/* Forced colors: glyphs paint with currentColor, so they follow CanvasText and LinkText. The watermark steps aside. */
@media (forced-colors: active) {
  :root[data-lab~="pillar-sails"] .dclab-pillar-sails-g { fill: currentColor; }
  :root[data-lab~="pillar-sails"] .dclab-pillar-sails-eyebrow { color: inherit; }
  :root[data-lab~="pillar-sails"] .dclab-pillar-sails-big { display: none; }
  :root[data-lab~="pillar-sails"] .dclab-pillar-sails-tagword { border-right-color: currentColor; }
}

/* Round 3 QA: on the navy heroes the blue and green hero chips read below AA (3.7:1 at 11px). Lighter tints of the
   same pillar colors clear 4.5:1 on navy; purple, cyan and gold already do. */
:root[data-lab~="pillar-sails"] .section-dark .tag.tag-blue.dclab-pillar-sails-tag { color: #a9bcff; }
:root[data-lab~="pillar-sails"] .section-dark .tag.tag-green.dclab-pillar-sails-tag { color: #4fe3a8; }

/* lab-plate.css */
/* Design Lab, Round 3: "Honest page heroes" (id 'plate'). See js/lab-plate.js.
   Three kinds share one slot, the 330px column the pretend dashboard card used:
   - panel: a flat navy plate holding the first beat of the page's own demo, or the people who usually answer
   - note: no box, a hairline and one plain sentence set large, like a margin note
   Everything is scoped to the token, so with it off the page is exactly the live site. */

/* belt and braces: the JS removes every plate when off, and nothing shows without the token */
:root:not([data-lab~="plate"]) .dclab-plate { display: none; }

:root[data-lab~="plate"] .dclab-plate-hidden { display: none !important; }
/* The sail line would run behind the plate; with a real thing in the slot it's one picture too many. */
:root[data-lab~="plate"] section:has(.dclab-plate) > .dclab-sail { display: none !important; }

:root[data-lab~="plate"] .dclab-plate {
  --plate-face: var(--lab-face, 'Mona Sans', 'Inter Tight', system-ui, sans-serif);
  --plate-ink: #cfd6ff;
  --plate-soft: rgba(255, 255, 255, .75);
  --plate-rule: rgba(176, 190, 255, .14);
  display: block; position: relative; z-index: 1; box-sizing: border-box;
  width: 330px; flex: none; margin: 0 0 0 auto; /* right edge on the container line, under the nav CTA */
  font-family: Inter, system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: #fff;
  text-align: left;
}
:root[data-lab~="plate"] .dclab-plate * { box-sizing: border-box; }
:root[data-lab~="plate"] .dclab-plate p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }

/* ---------- panel ---------- */
:root[data-lab~="plate"] .dclab-plate--panel {
  background: #10163f; border: 1px solid var(--plate-rule); border-radius: 14px; padding: 22px 22px 12px;
}
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-t {
  font: 600 13px/1.4 Inter, system-ui, sans-serif; color: var(--plate-ink); letter-spacing: .005em;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--plate-rule);
}

/* Spot the Fake: the subject line as the inbox shows it, then the question the demo asks */
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-subj { font-weight: 600; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-from { margin-top: 6px; font-size: 13px; color: var(--plate-soft); }

/* Contained and the deadline calendar: a time or a date set large, the step under it */
:root[data-lab~="plate"] .dclab-plate p:is(.dclab-plate-time, .dclab-plate-date) {
  font-family: var(--plate-face); font-stretch: 110%; font-weight: 700; font-size: 1.7rem; line-height: 1.1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff;
}
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-beat { margin-top: 8px; color: var(--plate-soft); text-wrap: pretty; }

/* the demo's own label (a document request, a license review), small, above its first item */
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-kick { margin-bottom: 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .7); }

/* AI workflow: the demo's own five steps in order; the one a person does is set in white */
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-flow {
  list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0;
  font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7);
}
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-flow li { margin: 0; white-space: nowrap; }
/* the arrow trails its step, so a wrapped line ends on an arrow and starts on a step */
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-flow li:not(:last-child)::after { content: "\2192"; content: "\2192" / ""; margin: 0 8px; color: rgba(176, 190, 255, .55); font-weight: 400; }
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-flow li.dclab-plate-human { color: #fff; font-weight: 600; }

/* the hook: the demo's own question or claim, in the headline face */
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-q {
  font-family: var(--plate-face); font-stretch: 110%; font-weight: 650; font-size: 1.3rem; line-height: 1.25;
  letter-spacing: -.005em; color: #fff; text-wrap: balance;
}
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-from + p.dclab-plate-q { margin-top: 20px; }

/* the one link: a real 44px target, underlined like every link on navy */
:root[data-lab~="plate"] .dclab-plate a {
  color: var(--plate-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color .15s ease;
}
:root[data-lab~="plate"] .dclab-plate a:hover { color: #fff; }
:root[data-lab~="plate"] .dclab-plate a:focus-visible { outline: 3px solid var(--plate-ink); outline-offset: 2px; border-radius: 2px; }
:root[data-lab~="plate"] .dclab-plate a.dclab-plate-go {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px;
  font-weight: 600; font-size: 14px; line-height: 1.3;
}

/* ---------- note: no box, a hairline and one sentence ---------- */
:root[data-lab~="plate"] .dclab-plate--note { border-top: 1px solid rgba(176, 190, 255, .3); padding-top: 22px; }
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-say {
  font-family: var(--plate-face); font-stretch: 110%; font-weight: 600; font-size: 1.35rem; line-height: 1.3;
  letter-spacing: -.005em; color: #fff; text-wrap: pretty;
}
:root[data-lab~="plate"] .dclab-plate--note a.dclab-plate-go { margin-top: 12px; }

/* Forge: a real sequence, so it's numbered */
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: plate; }
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-steps li {
  counter-increment: plate; display: flex; align-items: baseline; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--plate-rule); color: #fff; font-size: 15px; line-height: 1.4;
}
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-steps li:last-child { border-bottom: 1px solid var(--plate-rule); }
:root[data-lab~="plate"] .dclab-plate ol.dclab-plate-steps li::before {
  content: counter(plate); flex: none; width: 1.1em;
  font-family: var(--plate-face); font-stretch: 110%; font-weight: 700; font-size: 15px; color: var(--plate-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- people ---------- */
:root[data-lab~="plate"] .dclab-plate--people { padding-bottom: 20px; }
:root[data-lab~="plate"] .dclab-plate ul.dclab-plate-crew {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px;
}
:root[data-lab~="plate"] .dclab-plate ul.dclab-plate-crew li { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; }
:root[data-lab~="plate"] .dclab-plate-face {
  --s: 64px;
  position: relative; display: block; width: var(--s); height: var(--s); margin-bottom: 10px; overflow: hidden;
  border-radius: 2px; background: #1c2457;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 24px, 100% 100%, 0 100%);
}
:root[data-lab~="plate"] .dclab-plate-face img[hidden] { display: none; }
:root[data-lab~="plate"] .dclab-plate-face img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%;
}
:root[data-lab~="plate"] .dclab-plate-ini {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 600 18px/1 var(--plate-face); color: var(--plate-ink);
}
:root[data-lab~="plate"] .dclab-plate-name { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; color: #fff; }
:root[data-lab~="plate"] .dclab-plate-role { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .7); text-wrap: pretty; }
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-cap {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--plate-rule);
  font-family: var(--plate-face); font-stretch: 110%; font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: #fff; text-wrap: balance;
}
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-same { margin-top: 6px; font-size: 14px; color: var(--plate-soft); }
:root[data-lab~="plate"] .dclab-plate p.dclab-plate-same a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; white-space: nowrap; }

/* ---------- the proof line, matching the ones already on the industry pages ---------- */
:root[data-lab~="plate"] .dclab-plate-proof {
  color: var(--gray-300, #cbd5e1); font-size: .92rem; font-weight: 600; letter-spacing: .01em; line-height: 1.6; margin: 18px 0 0;
}

/* in a hero that already has a proof line above its buttons (tampa, pittsburgh), the sentence joins that line */
:root[data-lab~="plate"] .dclab-plate-proof-in { display: block; margin-top: 4px; }

/* ---------- below the hero's stacking breakpoint (enhance.css stacks it at 980px) ---------- */
@media (max-width: 980px) {
  :root[data-lab~="plate"] .dclab-plate { width: 100%; max-width: 420px; margin: 40px 0 0; }
}
@media (max-width: 400px) {
  :root[data-lab~="plate"] .dclab-plate--panel { padding: 20px 18px 10px; }
  :root[data-lab~="plate"] .dclab-plate--people { padding-bottom: 18px; }
  :root[data-lab~="plate"] .dclab-plate-face { --s: 56px; }
  :root[data-lab~="plate"] .dclab-plate ul.dclab-plate-crew { gap: 18px 12px; }
}

@media (forced-colors: active) {
  :root[data-lab~="plate"] .dclab-plate--panel { border-color: CanvasText; }
  :root[data-lab~="plate"] .dclab-plate a { color: LinkText; }
}

/* lab-price.css */
/* Design Lab, Round 3: "Price, plainly" (token: price). Every rule is scoped to the token; js/lab-price.js
   inserts the nodes. House style: ink #0a0d31, muted #5b6185, 1px rules #e3e6f0, ultramarine #010ED0,
   headings in the lab face (Mona Sans by default), prices in Mona with proportional figures, body in Inter. */
:root[data-lab~="price"] {
  --dclab-price-ink: #0a0d31;
  --dclab-price-muted: #5b6185;
  --dclab-price-rule: #e3e6f0;
  --dclab-price-edge: #8a90ab;      /* control borders, about 3.2:1 on white */
  --dclab-price-ultra: #010ed0;
  --dclab-price-ultra-hover: #1a26e6;
  --dclab-price-face: var(--lab-face, 'Mona Sans', 'Inter Tight', system-ui, sans-serif);
}
:root[data-lab~="price"] .dclab-price-fig {
  font-family: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; font-weight: 700; font-stretch: 112%;
  font-variant-numeric: proportional-nums; letter-spacing: -0.005em;
}

/* ---------- A. the menu makes room for "Pricing" on small laptops, where the row was already full ---------- */
@media (min-width: 901px) and (max-width: 1099px) {
  :root[data-lab~="price"] .nav-links { gap: 16px; margin-left: 16px; }
}

/* ---------- B1. estimator opener ---------- */
:root[data-lab~="price"] .est-section.dclab-price-opener { border-color: var(--dclab-price-ink); padding-bottom: 20px; }
:root[data-lab~="price"] .dclab-price-opener h3 { font-family: var(--dclab-price-face); font-size: 1.3rem; line-height: 1.2; color: var(--dclab-price-ink); margin-bottom: 14px; }
:root[data-lab~="price"] .dclab-price-q {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px;
  padding: 14px 0; border-top: 1px solid var(--dclab-price-rule);
}
:root[data-lab~="price"] .dclab-price-ql { font: 500 15px/1.4 Inter, system-ui, sans-serif; color: var(--dclab-price-ink); }
:root[data-lab~="price"] .dclab-price-qh { display: block; margin-top: 3px; max-width: 30em; font: 400 13px/1.45 Inter, system-ui, sans-serif; color: var(--dclab-price-muted); }
:root[data-lab~="price"] .dclab-price-qnote {
  grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 6px; background: #f3f4f9;
  font: 400 13px/1.45 Inter, system-ui, sans-serif; color: var(--dclab-price-ink);
}
:root[data-lab~="price"] .dclab-price-qnote[hidden] { display: none; }
/* the remaining production sections, under one quiet subhead */
:root[data-lab~="price"] .dclab-price-sub {
  margin: 36px 0 14px; padding-top: 14px; border-top: 1px solid var(--dclab-price-rule);
  font: 600 15px/1.3 var(--dclab-price-face); font-stretch: 105%; color: var(--dclab-price-ink);
}
:root[data-lab~="price"] .dclab-price-step {
  display: inline-flex; border: 1px solid var(--dclab-price-edge); border-radius: 6px; overflow: hidden; background: #fff;
}
:root[data-lab~="price"] .dclab-price-step button {
  width: 44px; height: 44px; border: 0; background: #fff; color: var(--dclab-price-ink); cursor: pointer;
  display: grid; place-items: center; padding: 0; touch-action: manipulation;
}
:root[data-lab~="price"] .dclab-price-step button:hover { background: #f3f4f9; }
:root[data-lab~="price"] .dclab-price-step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
:root[data-lab~="price"] .dclab-price-step input {
  width: 64px; height: 44px; border: 0; border-inline: 1px solid var(--dclab-price-edge); border-radius: 0; padding: 0;
  text-align: center; font: 600 16px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums;
  color: var(--dclab-price-ink); background: #fff; -moz-appearance: textfield; appearance: textfield;
}
:root[data-lab~="price"] .dclab-price-step input::-webkit-inner-spin-button,
:root[data-lab~="price"] .dclab-price-step input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:root[data-lab~="price"] .dclab-price-step :is(button, input):focus-visible { outline: 2px solid var(--dclab-price-ultra); outline-offset: -2px; }
:root[data-lab~="price"] .dclab-price-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
:root[data-lab~="price"] .dclab-price-chips label { position: relative; display: inline-flex; cursor: pointer; }
:root[data-lab~="price"] .dclab-price-chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
:root[data-lab~="price"] .dclab-price-chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--dclab-price-edge);
  border-radius: 6px; background: #fff; color: var(--dclab-price-ink); font: 600 14px/1.2 Inter, system-ui, sans-serif;
  transition: background-color .15s, border-color .15s, color .15s;
}
:root[data-lab~="price"] .dclab-price-chips label:hover span { border-color: var(--dclab-price-ink); }
/* checked chips match the page's own toggles (production blue; ultramarine when the blue idea is on) */
:root[data-lab~="price"] .dclab-price-chips input:checked + span { background: var(--blue, #2b5cff); border-color: var(--blue, #2b5cff); color: #fff; }
:root[data-lab~="price"][data-lab~="blue"] .dclab-price-chips input:checked + span { background: var(--dclab-price-ultra); border-color: var(--dclab-price-ultra); }
:root[data-lab~="price"] .dclab-price-chips input:focus-visible + span { outline: 2px solid var(--dclab-price-ultra); outline-offset: 2px; }
@media (max-width: 640px) {
  :root[data-lab~="price"] .dclab-price-q { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  :root[data-lab~="price"] .dclab-price-chips { justify-content: flex-start; }
  :root[data-lab~="price"] .dclab-price-step { justify-self: start; }
}

:root[data-lab~="price"] .est-toggle-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--dclab-price-edge);
  border-radius: 6px; font: 600 14px/1.2 Inter, system-ui, sans-serif; color: var(--dclab-price-ink); touch-action: manipulation;
}
:root[data-lab~="price"] .est-toggle-btn:hover { border-color: var(--dclab-price-ink); }
:root[data-lab~="price"] .est-toggle-btn.active { border-color: var(--blue, #2b5cff); color: #fff; }
:root[data-lab~="price"] .est-toggle-btn:focus-visible { outline: 2px solid var(--dclab-price-ultra); outline-offset: 2px; }
@media (max-width: 640px) {
  /* phones: the label sits over its choices, as in the opener, so the larger toggles stay on one row */
  @supports selector(:has(a)) {
    :root[data-lab~="price"] .est-row:has(> .est-toggle) { flex-direction: column; align-items: stretch; gap: 10px; }
  }
  /* the opener's choices become equal segments (a two-word answer wraps inside its button); the page's own
     toggles fill each row, since one-word names like RapidRestore cannot wrap */
  :root[data-lab~="price"] .dclab-price-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
  :root[data-lab~="price"] .est-toggle { gap: 6px; }
  :root[data-lab~="price"] .est-toggle-btn { flex: 1 1 auto; justify-content: center; padding: 0 12px; }
  :root[data-lab~="price"] .dclab-price-chips span { justify-content: center; width: 100%; text-align: center; padding: 6px 8px; }
}

/* ---------- B2-B6. inside and beside the result card ---------- */
:root[data-lab~="price"] .result-card.dclab-price-result { position: static; } /* the ledger now sits under it in the same column */
:root[data-lab~="price"] .dclab-price-label {
  margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12);
  font: 600 15px/1.4 Inter, system-ui, sans-serif; color: #fff;
}
:root[data-lab~="price"] .dclab-price-label:focus { outline: none; }
:root[data-lab~="price"] .dclab-price-share { margin-top: 10px; }
:root[data-lab~="price"] .dclab-price-share-row { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 20px; }
:root[data-lab~="price"] .dclab-price-share button {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13px/1.3 Inter, system-ui, sans-serif; color: rgba(255,255,255,.88);
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.38); text-underline-offset: 4px;
}
:root[data-lab~="price"] .dclab-price-share button:hover { color: #fff; text-decoration-color: #fff; }
:root[data-lab~="price"] .dclab-price-share button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
:root[data-lab~="price"] .dclab-price-share-msg { margin: 0; text-align: center; font: 500 13px/1.4 Inter, system-ui, sans-serif; color: #b9f6cf; }
:root[data-lab~="price"] .dclab-price-share-msg:empty { display: none; }
:root[data-lab~="price"] .dclab-price-hide { display: none !important; }
:root[data-lab~="price"] .dclab-price-talk {
  margin: 14px 0 0; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.1); text-align: center;
  font: 500 14px/1.6 Inter, system-ui, sans-serif; color: rgba(255,255,255,.86);
}
:root[data-lab~="price"] .dclab-price-talk-l { display: block; margin-top: 10px; line-height: 1.4; }
:root[data-lab~="price"] .dclab-price-talk a {
  display: inline-block; min-height: 44px; line-height: 44px; color: #fff; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--cyan, #00d4ff); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
:root[data-lab~="price"] .dclab-price-talk a:hover { color: var(--cyan, #00d4ff); }
:root[data-lab~="price"] .dclab-price-talk a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 2px; }
:root[data-lab~="price"] #est-email-msg { line-height: 1.45; }

/* ---------- B3 / C. the ledger: what is in and out of the monthly ---------- */
:root[data-lab~="price"] .dclab-price-ledger {
  margin: 0; border-top: 1px solid var(--dclab-price-ink);
  font: 400 14px/1.55 Inter, system-ui, sans-serif; color: var(--dclab-price-ink);
}
:root[data-lab~="price"] .dclab-price-ledger > div { padding: 14px 0 15px; border-bottom: 1px solid var(--dclab-price-rule); }
:root[data-lab~="price"] .dclab-price-ledger dt { margin: 0 0 3px; font-weight: 600; color: var(--dclab-price-ink); }
:root[data-lab~="price"] .dclab-price-ledger dd { margin: 0; color: var(--dclab-price-muted); }
:root[data-lab~="price"] #dclab-price-ledger { margin-top: 32px; }
/* Integration: on a wide screen the ledger moves under the configurator (the left column ended about 700px
   above the right one), set as a two-column ledger; the card and any quote keep the right column. */
@media (min-width: 1000px) {
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) { grid-template-rows: auto auto auto; row-gap: 0; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) > div:last-child { display: contents; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) > div:first-child { grid-column: 1; grid-row: 1; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) .result-card { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) #dclab-price-ledger { grid-column: 1; grid-row: 2 / span 2; align-self: start; margin-top: 40px; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) #dclab-price-ledger ~ * { grid-column: 2; grid-row: 3; align-self: start; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) #dclab-price-ledger > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 24px; padding: 16px 0 17px; }
  :root[data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) #dclab-price-ledger dt { margin: 0; }
}

/* ---------- C. "What a typical setup costs" on industry pages ---------- */
:root[data-lab~="price"] section.dclab-price {
  background: #fff; padding: 88px 0; color: var(--dclab-price-ink);
  border-top: 1px solid var(--dclab-price-rule); border-bottom: 1px solid var(--dclab-price-rule);
}
:root[data-lab~="price"] .dclab-price-grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 1000px) {
  :root[data-lab~="price"] .dclab-price-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 6vw, 96px); }
  :root[data-lab~="price"] section.dclab-price .dclab-price-ledger { margin-top: 6px; }
}
:root[data-lab~="price"] section.dclab-price h2 {
  font-family: var(--dclab-price-face); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1;
  color: var(--dclab-price-ink); margin: 0 0 16px; text-wrap: balance;
}
:root[data-lab~="price"] .dclab-price-ex { margin: 0; max-width: 34em; font: 400 16px/1.6 Inter, system-ui, sans-serif; color: var(--dclab-price-muted); }
:root[data-lab~="price"] .dclab-price-amt {
  margin: 32px 0 8px; font-family: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.015em; font-variant-numeric: proportional-nums;
  color: var(--dclab-price-ink);
}
:root[data-lab~="price"] .dclab-price-about { display: block; margin-bottom: 6px; font: 500 16px/1.3 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--dclab-price-muted); }
:root[data-lab~="price"] .dclab-price-amt .dclab-price-big { white-space: nowrap; }
:root[data-lab~="price"] .dclab-price-per { font: 500 18px/1 Inter, system-ui, sans-serif; letter-spacing: 0; color: var(--dclab-price-muted); white-space: nowrap; }
:root[data-lab~="price"] .dclab-price-onb { margin: 0; font: 500 16px/1.5 Inter, system-ui, sans-serif; color: var(--dclab-price-ink); }
:root[data-lab~="price"] .dclab-price-note {
  margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--dclab-price-rule); max-width: 30em;
  font: 400 13px/1.5 Inter, system-ui, sans-serif; color: var(--dclab-price-muted);
}
:root[data-lab~="price"] a.dclab-price-go {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 24px; padding: 0 22px; border-radius: 6px;
  background: var(--dclab-price-ultra); color: #fff; font: 600 15px/1.2 Inter, system-ui, sans-serif; text-decoration: none;
  transition: background-color .15s;
}
:root[data-lab~="price"] a.dclab-price-go:hover { background: var(--dclab-price-ultra-hover); color: #fff; }
:root[data-lab~="price"] a.dclab-price-go:focus-visible { outline: 2px solid var(--dclab-price-ultra); outline-offset: 3px; }
@media (min-width: 640px) {
  :root[data-lab~="price"] section.dclab-price .dclab-price-ledger > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 24px; padding: 18px 0 19px; }
  :root[data-lab~="price"] section.dclab-price .dclab-price-ledger dt { margin: 0; }
  :root[data-lab~="price"] section.dclab-price .dclab-price-ledger dd { color: var(--dclab-price-ink); }
}
@media (max-width: 640px) { :root[data-lab~="price"] section.dclab-price { padding: 64px 0; } }

/* ---------- D. one price line on service pages ---------- */
:root[data-lab~="price"] section.dclab-price-line {
  background: #fff; padding: 36px 0; border-top: 1px solid var(--dclab-price-rule); border-bottom: 1px solid var(--dclab-price-rule);
}
:root[data-lab~="price"] .dclab-price-line .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 40px; }
:root[data-lab~="price"] .dclab-price-line p { margin: 0; max-width: 44em; font: 500 clamp(1.05rem, 1.5vw, 1.2rem)/1.5 Inter, system-ui, sans-serif; color: var(--dclab-price-ink); }
:root[data-lab~="price"] .dclab-price-line a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--dclab-price-ultra); font: 600 15px/1.2 Inter, system-ui, sans-serif;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; white-space: nowrap;
}
:root[data-lab~="price"] .dclab-price-line a:hover { color: var(--dclab-price-ink); }
:root[data-lab~="price"] .dclab-price-line a:focus-visible { outline: 2px solid var(--dclab-price-ultra); outline-offset: 2px; }

/* ---------- E. managed IT pricing card ---------- */
:root[data-lab~="price"] .pricing-card .price { font-variant-numeric: proportional-nums; }
:root[data-lab~="price"] .dclab-price-typical {
  margin: -6px 0 24px; padding-top: 16px; border-top: 1px solid var(--dclab-price-rule); text-align: left;
  font: 500 14px/1.55 Inter, system-ui, sans-serif; color: var(--dclab-price-ink);
}

/* ---------- B8. sticky total: a white bar over the call bar, 900px and below only ---------- */
:root[data-lab~="price"] .dclab-price-bar { display: none; }
@media (max-width: 900px) {
  :root[data-lab~="price"] .dclab-price-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 89; box-sizing: border-box;
    align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px;
    background: #fff; border-top: 1px solid var(--dclab-price-rule); color: var(--dclab-price-ink);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  :root[data-lab~="price"] .dclab-price-bar.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
  :root[data-lab~="price"] .dclab-price-bar p { margin: 0; font: 500 14px/1.2 Inter, system-ui, sans-serif; color: var(--dclab-price-muted); }
  :root[data-lab~="price"] .dclab-price-bar b {
    font-family: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 700; font-size: 20px;
    font-variant-numeric: proportional-nums; color: var(--dclab-price-ink); margin: 0 2px;
  }
  /* a quiet link, so the call bar's button stays the one action */
  :root[data-lab~="price"] .dclab-price-bar button {
    min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--dclab-price-ink); cursor: pointer; white-space: nowrap; touch-action: manipulation;
    font: 600 14px/1.2 Inter, system-ui, sans-serif; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }
  :root[data-lab~="price"] .dclab-price-bar button:hover { color: var(--dclab-price-ultra); }
  :root[data-lab~="price"] .dclab-price-bar button:focus-visible { outline: 2px solid var(--dclab-price-ultra); outline-offset: 0; border-radius: 4px; }
  /* one layer at the bottom: while the total shows, it replaces the call bar and carries the call as a 44px icon */
  :root[data-lab~="price"].dclab-price-lift .mobile-cta-bar { display: none !important; }
  :root[data-lab~="price"] .dclab-price-bar { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); }
  :root[data-lab~="price"] .dclab-price-bar button { margin-left: auto; }
  :root[data-lab~="price"] .dclab-price-bar-call {
    display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 10px;
    background: var(--dclab-price-ultra, #010ed0); color: #fff;
  }
  :root[data-lab~="price"] .dclab-price-bar-call:focus-visible { outline: 2px solid var(--dclab-price-ultra, #010ed0); outline-offset: 2px; }
  /* the chat button rides above the bar while it shows */
  :root[data-lab~="price"].dclab-price-lift #aria-toggle { bottom: var(--dclab-price-lift, 140px) !important; transition: bottom .18s ease; }
  :root[data-lab~="price"].dclab-price-lift #aria-badge { bottom: calc(var(--dclab-price-lift, 140px) + 40px) !important; }
}
/* staging only: the review panel rides above the bar wherever they would overlap */
:root[data-lab~="price"].dclab-price-lift .dclab { bottom: var(--dclab-price-lift, 140px); }
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="price"] .dclab-price-bar,
  :root[data-lab~="price"] .dclab-price-bar.is-on { transition: none; transform: none; }
  :root[data-lab~="price"].dclab-price-lift #aria-toggle { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="price"] .dclab-price-chips span, :root[data-lab~="price"] a.dclab-price-go, :root[data-lab~="price"] .est-toggle-btn { transition: none; }
}

/* ---------- B4. one-page print of the estimate ---------- */
:root[data-lab~="price"] .dclab-price-print { display: none; }
@media print {
  :root[data-lab~="price"].dclab-price-est body > :not(.dclab-price-print) { display: none !important; }
  :root[data-lab~="price"].dclab-price-est,
  :root[data-lab~="price"].dclab-price-est body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print {
    display: block !important; color: #0a0d31; font: 10.5pt/1.45 Inter, system-ui, sans-serif;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12pt; border-bottom: 1pt solid #0a0d31; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-mark { display: inline-flex; align-items: center; gap: 8pt; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-mark img { height: 26pt; width: auto; filter: brightness(0); } /* the site's white sail, in ink */
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-mark b { font-family: 'Mona Sans', 'Inter Tight', sans-serif; font-stretch: 112%; font-weight: 700; font-size: 17pt; letter-spacing: -0.01em; color: #0a0d31; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-date { font-size: 9.5pt; color: #5b6185; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print h1 {
    margin: 22pt 0 2pt; font-family: 'Mona Sans', 'Inter Tight', sans-serif; font-stretch: 112%; font-weight: 700;
    font-size: 22pt; line-height: 1.1; color: #0a0d31;
  }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-for { margin: 0 0 14pt; color: #5b6185; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines { margin: 0; border-top: 1pt solid #0a0d31; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines > div { display: flex; justify-content: space-between; gap: 24pt; padding: 6pt 0; border-bottom: .5pt solid #d5d9e6; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines dt { margin: 0; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines .is-total { padding: 9pt 0; border-bottom: 1pt solid #0a0d31; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines .is-total :is(dt, dd) { font-family: 'Mona Sans', 'Inter Tight', sans-serif; font-stretch: 112%; font-weight: 700; font-size: 14pt; font-variant-numeric: proportional-nums; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-lines .is-onb { border-bottom: 0; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print .dclab-price-ledger { margin-top: 22pt; border-top: 1pt solid #0a0d31; font-size: 9.5pt; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print .dclab-price-ledger > div { display: grid; grid-template-columns: 34% 1fr; gap: 12pt; padding: 6pt 0; border-bottom: .5pt solid #d5d9e6; break-inside: avoid; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print .dclab-price-ledger dt { margin: 0; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print .dclab-price-ledger dd { color: #0a0d31; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-foot { margin: 22pt 0 0; font-size: 9.5pt; color: #5b6185; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-foot b { display: inline-block; margin-top: 4pt; color: #0a0d31; font-weight: 600; }
  :root[data-lab~="price"].dclab-price-est .dclab-price-print-foot span { margin-left: 14pt; color: #0a0d31; }
}

/* Round 3 QA: the result card's two small notes reach AA on the navy card (4.0:1 was below it) */
:root[data-lab~="price"] .result-card :is(div, p)[style*="color:var(--gray-500)"][style*="font-size:.7rem"] { color: #a3a9c8 !important; font-size: .76rem !important; }

/* lab-proof.css */
/* Design Lab, Round 3: "In their words" (see js/lab-proof.js).
   One editorial quote component, in three sizes: the full slip before the closing band, the compact quote
   on contact and the estimator, and the homepage testimonials. Plus the LWVI spread (proof-story).
   House style: ink #0a0d31, muted #5b6185, 1px rules #e3e6f0 (rgba(255,255,255,.18) on navy),
   ultramarine links (#cfd6ff on dark). No stars, cards, shadows, gradients, side borders or arrows.
   Every rule is scoped to the 'proof' token or a variant token, so with it off nothing here applies. */

:root[data-lab~="proof"] {
  --dclab-proof-ink: #0a0d31;
  --dclab-proof-muted: #5b6185;
  --dclab-proof-rule: #e3e6f0;
  --dclab-proof-link: #010ed0;
  --dclab-proof-face: var(--lab-face, 'Mona Sans', 'Inter Tight', system-ui, sans-serif);
}

/* ---------- the shared quote: hanging opening mark ---------- */
:root[data-lab~="proof"] :is(.dclab-proof-q, .dclab-proof-compact, .dclab-proof-lwvi-quote) blockquote,
:root[data-lab~="proof"] blockquote.dclab-proof-q { margin: 0; padding: 0; border: 0; quotes: none; }
:root[data-lab~="proof"] :is(.dclab-proof-q, .dclab-proof-compact blockquote, .dclab-proof-lwvi-quote blockquote) > p,
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-text.testimonial-text {
  text-indent: calc(-1 * var(--dclab-proof-hang, .42em));
  hanging-punctuation: none;
  text-wrap: pretty;
  font-variant-numeric: proportional-nums lining-nums;
  overflow-wrap: break-word;
}
@supports (hanging-punctuation: first) {
  :root[data-lab~="proof"] :is(.dclab-proof-q, .dclab-proof-compact blockquote, .dclab-proof-lwvi-quote blockquote) > p,
  :root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-text.testimonial-text {
    text-indent: 0; hanging-punctuation: first;
  }
}
/* the client's own all-caps word, kept as written but set in small caps so it doesn't shout */
:root[data-lab~="proof"] .dclab-proof-caps { font-variant-caps: all-small-caps; letter-spacing: .01em; }

/* the portrait: a small square with its top-right corner cut, the sail's angle */
:root[data-lab~="proof"] .dclab-proof-photo {
  display: block; flex: none; object-fit: cover; border-radius: 2px; background: #eef0f6;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 24px, 100% 100%, 0 100%);
}
:root[data-lab~="proof"] .dclab-proof-who { display: block; }
:root[data-lab~="proof"] .dclab-proof-name { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; color: var(--dclab-proof-ink); }
:root[data-lab~="proof"] .dclab-proof-role { color: var(--dclab-proof-muted); }
/* "Name, role" for screen readers; on screen the comma is a space */
:root[data-lab~="proof"] .dclab-proof-sep {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Full slip ---------- */
:root[data-lab~="proof"] section.dclab-proof { background: #fff; padding: 72px 0; color: var(--dclab-proof-ink); position: relative; }
:root[data-lab~="proof"] section.dclab-proof.dclab-proof-tight { padding-top: 0; }
:root[data-lab~="proof"] .dclab-proof-fig { margin: 0; }
/* a top rule only where nothing else divides this from the section above (set by the script) */
:root[data-lab~="proof"] .dclab-proof-ruled .dclab-proof-fig { border-top: 1px solid var(--dclab-proof-rule); padding-top: 44px; }
:root[data-lab~="proof"] .dclab-proof-tight:not(.dclab-proof-ruled) .dclab-proof-fig { padding-top: 24px; }
:root[data-lab~="proof"] .dclab-proof-q > p {
  margin: 0; max-width: 34em;
  font-family: var(--dclab-proof-face); font-stretch: 106%; font-weight: 500; font-style: normal;
  font-size: clamp(1.35rem, 2.3vw, 1.95rem); line-height: 1.32; letter-spacing: -.008em;
  color: var(--dclab-proof-ink);
}
:root[data-lab~="proof"] .dclab-proof-cap {
  display: flex; align-items: center; gap: 16px; margin-top: 28px;
  font-family: 'Inter', system-ui, sans-serif; font-size: .95rem; line-height: 1.45;
}
:root[data-lab~="proof"] .dclab-proof-cap .dclab-proof-photo { width: 56px; height: 56px; }
:root[data-lab~="proof"] .dclab-proof-meta { display: block; min-width: 0; }
:root[data-lab~="proof"] .dclab-proof-cap .dclab-proof-role { display: block; }
:root[data-lab~="proof"] .dclab-proof-note { display: block; color: var(--dclab-proof-muted); }
/* a short role ("CEO") stays on the name's line when a note line follows */
:root[data-lab~="proof"] .dclab-proof-noted .dclab-proof-role { display: inline; margin-left: .45em; }
:root[data-lab~="proof"] .dclab-proof-link {
  display: inline-block; margin-top: 2px; color: var(--dclab-proof-link); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  text-decoration-color: rgba(1, 14, 208, .35);
  border-radius: 2px;
}
:root[data-lab~="proof"] .dclab-proof-link:hover { text-decoration-color: currentColor; }
:root[data-lab~="proof"] :is(.dclab-proof-link, .dclab-proof-lwvi-more, .dclab-proof-lwvi-tel):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (min-width: 700px) {
  :root[data-lab~="proof"] .dclab-proof-cap .dclab-proof-role { display: inline; margin-left: .55em; }
}
@media (min-width: 1000px) {
  /* the quote sits one column in from the rule, so the hanging mark has a margin to hang into */
  :root[data-lab~="proof"] .dclab-proof-fig { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  :root[data-lab~="proof"] .dclab-proof-ruled .dclab-proof-fig { padding-top: 56px; }
  :root[data-lab~="proof"] .dclab-proof-fig > * { grid-column: 2 / -1; }
  /* a set pull quote, 3 to 5 lines, not stretched body text */
  :root[data-lab~="proof"] .dclab-proof-q > p { max-width: 26em; }
}
@media (max-width: 640px) {
  :root[data-lab~="proof"] section.dclab-proof { padding: 56px 0; }
  :root[data-lab~="proof"] .dclab-proof-ruled .dclab-proof-fig { padding-top: 32px; }
  :root[data-lab~="proof"] .dclab-proof-cap { align-items: flex-start; gap: 14px; margin-top: 22px; }
  /* phones: the story link is a 44px tap target */
  :root[data-lab~="proof"] .dclab-proof-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0; }
}

/* ---------- 4. Compact quote ---------- */
:root[data-lab~="proof"] figure.dclab-proof-compact {
  margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--dclab-proof-rule); background: transparent;
}
:root[data-lab~="proof"] .dclab-proof-compact blockquote > p {
  margin: 0; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.55; font-weight: 400;
  font-style: normal; color: var(--text, #1a1a2e);
}
:root[data-lab~="proof"] .dclab-proof-compact figcaption {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  font-family: 'Inter', system-ui, sans-serif; font-size: .85rem; line-height: 1.35;
}
:root[data-lab~="proof"] .dclab-proof-compact .dclab-proof-photo { width: 40px; height: 40px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 18px, 100% 100%, 0 100%); }
:root[data-lab~="proof"] .dclab-proof-compact .dclab-proof-role { margin-left: .45em; }
/* the estimator: the quote sits under the result column, on the white page */
:root[data-lab~="proof"] .dclab-proof-estcol > figure.dclab-proof-compact { margin: 28px 0 0; padding-top: 18px; }
/* narrower screens: price's ledger stacks above the quote and already ends on a rule */
@media (max-width: 999px) {
  :root[data-lab~="proof"] .dclab-proof-estcol > .dclab-price-ledger + figure.dclab-proof-compact { border-top: 0; padding-top: 0; }
}
/* wide screens with price's two-column ledger: the quote is its own grid item in the card's column,
   held 28px under the card by the offset the script measures, with its own rule */
@media (min-width: 1000px) {
  :root[data-lab~="proof"][data-lab~="price"] .est-layout:has(> div > #dclab-price-ledger) #dclab-price-ledger ~ figure.dclab-proof-compact {
    grid-column: 2; grid-row: 1 / span 3; align-self: start;
    margin: calc(var(--dclab-proof-under, 0px) + 28px) 0 0; padding-top: 18px; border-top: 1px solid var(--dclab-proof-rule);
  }
}
/* contact: one verbatim line beside a 40px portrait, so the button stays close to the last field */
:root[data-lab~="proof"] figure.dclab-proof-compact.dclab-proof-line {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center;
  margin: 0 0 16px; padding: 0; border: 0;
}
:root[data-lab~="proof"] .dclab-proof-line > .dclab-proof-photo { grid-row: 1 / span 2; grid-column: 1; }
:root[data-lab~="proof"] .dclab-proof-line > :not(img) { grid-column: 2; }
:root[data-lab~="proof"] .dclab-proof-line blockquote > p { font-size: .95rem; line-height: 1.4; font-weight: 500; color: var(--dclab-proof-ink); }
:root[data-lab~="proof"] .dclab-proof-line figcaption { display: block; margin: 2px 0 0; font-size: .8rem; line-height: 1.35; }
/* the result card's sticky had no room to travel in its own column; with the quote below it, it would slide over it */
:root[data-lab~="proof"] .dclab-proof-estcol > .result-card { position: relative; top: auto; }

/* ---------- 5. Homepage testimonials: one ruled row of three ---------- */
:root[data-lab~="proof"] .dclab-proof-tm .section-header > p,
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-stars,
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.dclab-proof-tm-hide { display: none !important; }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-grid.testimonial-grid { grid-template-columns: minmax(0, 1fr); gap: 40px !important; max-width: 40em; }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card {
  display: flex; flex-direction: column;
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--dclab-proof-rule) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
  padding: 28px 0 0 !important;
}
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card:hover { box-shadow: none !important; transform: none !important; }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card { transition: none !important; }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-text.testimonial-text {
  flex: 1 0 auto; margin: 0 0 28px;
  font-family: var(--dclab-proof-face); font-stretch: 106%; font-weight: 500; font-style: normal !important;
  font-size: 1.15rem !important; line-height: 1.45; letter-spacing: -.004em; color: var(--dclab-proof-ink) !important;
}
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-avatar {
  width: 48px; height: 48px; border-radius: 2px; background: #eef0f6;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 21px, 100% 100%, 0 100%);
}
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-avatar img { border-radius: 0; }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-author { gap: 14px; }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-name { font-family: 'Inter', system-ui, sans-serif; font-size: .95rem; color: var(--dclab-proof-ink); }
:root[data-lab~="proof"] .dclab-proof-tm .testimonial-card.testimonial-card .testimonial-role { font-size: .875rem; color: var(--dclab-proof-muted); }
@media (min-width: 1000px) {
  /* with the intro line hidden, the headline takes the header's full width instead of leaving its right half empty */
  :root[data-lab~="proof"] .dclab-proof-tm .section-header > :is(h2, .section-label) { grid-column: 1 / -1; }
  :root[data-lab~="proof"] .dclab-proof-tm .section-header { margin-bottom: 56px; }
  /* one row of quotes needs less air under it than the card grid did */
  :root[data-lab~="proof"] section.dclab-proof-tm { padding-bottom: 60px; }
  :root[data-lab~="proof"] .dclab-proof-tm .testimonial-grid.testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px !important; column-gap: 48px !important; max-width: none;
  }
}
@media (min-width: 641px) and (max-width: 999px) {
  :root[data-lab~="proof"] .dclab-proof-tm .testimonial-grid.testimonial-grid { margin-inline: auto; }
}

/* ---------- 6. The LWVI spread (proof-story) ---------- */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-sec { scroll-margin-top: 24px; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 48px;
  font-family: 'Inter', system-ui, sans-serif; color: rgba(255, 255, 255, .86);
  --dclab-proof-rule-d: rgba(255, 255, 255, .18);
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-h {
  margin: 0 0 28px; color: #fff; text-wrap: balance;
  font-size: clamp(2rem, 4.2vw, 3.6rem); line-height: 1.04;
}
/* with no headline typeface chosen, the spread still sets its headline in Mona Sans */
:root[data-lab~="proof-story"]:not([data-lab~="type"]) .dclab-proof-lwvi-h {
  font-family: 'Mona Sans', 'Inter Tight', system-ui, sans-serif; font-stretch: 125%; font-weight: 750; letter-spacing: -.012em;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-deck {
  margin: 0 0 40px; max-width: 34em; font-size: clamp(1.08rem, 1.3vw, 1.22rem); line-height: 1.6; color: rgba(255, 255, 255, .86);
}
/* (c) three chapters on one vertical hairline */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-ch {
  list-style: none; margin: 0; padding: 4px 0 4px 28px; border-left: 1px solid var(--dclab-proof-rule-d);
  display: grid; gap: 26px; max-width: 34em;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-ch li { position: relative; margin: 0; padding: 0; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-ch li::before {
  content: ''; position: absolute; left: -28px; top: .62em; width: 12px; height: 1px; background: rgba(255, 255, 255, .55);
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-when { display: block; margin-bottom: 4px; font-weight: 600; font-size: .9rem; color: #cfd6ff; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-what { display: block; font-size: 1.05rem; line-height: 1.55; color: rgba(255, 255, 255, .86); }
/* (d) two figures */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-figs p { margin: 0; padding-top: 16px; border-top: 1px solid var(--dclab-proof-rule-d); }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-fn {
  display: block; color: #fff;
  font-family: var(--dclab-proof-face); font-stretch: 80%; font-weight: 700;
  font-size: clamp(3rem, 6vw, 5rem); line-height: .95; letter-spacing: -.02em; font-variant-numeric: lining-nums;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-fl { display: block; margin-top: 10px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .66); }
/* (e) the pull quote */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-quote { margin: 48px 0 0; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-quote blockquote > p {
  margin: 0; color: #fff;
  font-family: var(--dclab-proof-face); font-stretch: 106%; font-weight: 500; font-style: normal;
  font-size: 1.6rem; line-height: 1.32; letter-spacing: -.008em;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: 24px; font-size: .95rem; line-height: 1.45; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-quote .dclab-proof-photo { width: 72px; height: 72px; background: #141937; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 29px, 100% 100%, 0 100%); }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-quote .dclab-proof-name { color: #fff; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-quote .dclab-proof-role { display: block; color: rgba(255, 255, 255, .66); }
/* (f) what we delivered: two plain columns of short lines */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-del { border-top: 1px solid var(--dclab-proof-rule-d); padding-top: 28px; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-delh {
  margin: 0 0 14px; font-family: 'Inter', system-ui, sans-serif !important; font-size: 1rem; font-weight: 600;
  font-stretch: 100% !important; letter-spacing: 0 !important; line-height: 1.4; color: #cfd6ff;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-del ul { list-style: none; margin: 0; padding: 0; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-del li {
  margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, .86); break-inside: avoid;
}
/* the close draws the next rule */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-del li:last-child { border-bottom: 0; }
/* (g) the close */
:root[data-lab~="proof-story"] .dclab-proof-lwvi-close { border-top: 1px solid var(--dclab-proof-rule-d); padding-top: 32px; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-ask {
  margin: 0 0 18px; color: #fff; max-width: 22em;
  font-family: var(--dclab-proof-face); font-stretch: 106%; font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.25;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-acts { margin: 0; color: #fff; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 28px; row-gap: 4px; }
:root[data-lab~="proof-story"] .dclab-proof-lwvi-tel {
  display: inline-flex; align-items: center; min-height: 44px; color: #fff; white-space: nowrap;
  font-family: var(--dclab-proof-face); font-stretch: 112%; font-weight: 650; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.2;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: rgba(255, 255, 255, .35);
  border-radius: 2px; font-variant-numeric: lining-nums;
}
:root[data-lab~="proof-story"] .dclab-proof-lwvi-more {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #cfd6ff; font-weight: 600; font-size: 1rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(207, 214, 255, .45);
  border-radius: 2px;
}
:root[data-lab~="proof-story"] :is(.dclab-proof-lwvi-tel, .dclab-proof-lwvi-more):hover { text-decoration-color: currentColor; }

@media (min-width: 700px) {
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-del ul { columns: 2; column-gap: 48px; }
  /* two columns: both end on a line, so they match */
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-del li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
}
@media (min-width: 1000px) {
  :root[data-lab~="proof-story"] .dclab-proof-lwvi { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; }
  /* story left (7 columns), figures and quote right (5), both from the top: the figures sit beside the headline */
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-main { grid-column: 1 / 8; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-side { grid-column: 8 / -1; padding-left: 40px; padding-top: 10px; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-h { margin-bottom: 32px; }
  /* the delivered list and the close each run the full width: label or line left, content right */
  :root[data-lab~="proof-story"] :is(.dclab-proof-lwvi-del, .dclab-proof-lwvi-close) {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-del { align-items: start; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-delh { grid-column: 1 / 4; margin: 12px 0 0; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-del ul { grid-column: 4 / -1; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-ask { grid-column: 1 / 8; margin: 0; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-acts { grid-column: 8 / -1; padding-left: 40px; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  :root[data-lab~="proof-story"] .dclab-proof-lwvi { row-gap: 40px; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-deck { margin-bottom: 32px; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-ch { padding-left: 22px; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-ch li::before { left: -22px; width: 10px; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-quote { margin-top: 40px; }
  :root[data-lab~="proof-story"] .dclab-proof-lwvi-quote blockquote > p { font-size: 1.4rem; }
}

/* lab-redline.css */
/* Design Lab, Round 3: "Plain words" (token: redline). The edited copy (redline-clean) needs no CSS at all:
   it only changes text. Everything below draws the marked view (redline-marked): struck live text, the
   underlined proposal, the reason popover and the review bar. JS: js/lab-redline.js. */
:root[data-lab~="redline-marked"] {
  --dclab-rl-ink: #010ed0;          /* the logo's ultramarine */
  --dclab-rl-amber: #9a4b00;        /* waiting on Josh; 6.1:1 on white */
  --dclab-rl-rule: #e3e6f0;
  --dclab-rl-text: #1a1a2e;
  --dclab-rl-muted: #5b6185;
}

/* ---------- the pair ---------- */
/* the wrappers are plain inline runs: a page rule aimed at its own spans (.px-proof span) must not restyle them */
:root[data-lab~="redline-marked"] .dclab-redline-pair,
:root[data-lab~="redline-marked"] .dclab-redline-run { all: unset; }
:root[data-lab~="redline-marked"] .dclab-redline-del {
  color: inherit;
  text-decoration-line: line-through; text-decoration-color: currentColor; text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  font-weight: inherit;
}
/* struck text keeps the sentence's full ink, so a label that is already muted never drops below AA;
   the line-through alone says it is going */
:root[data-lab~="redline-marked"] .dclab-redline-del + .dclab-redline-ins { margin-left: .28em; }
/* a struck dash can't show a line-through, so punctuation gets the proofreader's delete stroke instead */
:root[data-lab~="redline-marked"] .dclab-redline-pair[data-kind="auto"] .dclab-redline-del {
  text-decoration: none;
  padding: 0 .04em;
  background: linear-gradient(to top right, transparent calc(50% - .6px), currentColor calc(50% - .6px), currentColor calc(50% + .6px), transparent calc(50% + .6px)) no-repeat;
}
:root[data-lab~="redline-marked"] .dclab-redline-pair[data-kind="auto"] .dclab-redline-del + .dclab-redline-ins { margin-left: .08em; padding: 0 .06em; }
:root[data-lab~="redline-marked"] .dclab-redline-ins,
:root[data-lab~="redline-marked"] .dclab-redline-flag {
  color: inherit;
  background: none;
  text-decoration-line: underline; text-decoration-color: var(--dclab-rl-ink); text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-skip-ink: auto;
  cursor: help;
  border-radius: 2px;
}
:root[data-lab~="redline-marked"] .dclab-redline-ins[data-auto] { text-decoration-style: dotted; text-decoration-thickness: 2px; }
:root[data-lab~="redline-marked"] .dclab-redline-ins[data-status="pending"],
:root[data-lab~="redline-marked"] .dclab-redline-flag { text-decoration-style: dashed; text-decoration-color: var(--dclab-rl-amber); }
:root[data-lab~="redline-marked"] .dclab-redline-ins:hover,
:root[data-lab~="redline-marked"] .dclab-redline-flag:hover { text-decoration-thickness: 2px; }
:root[data-lab~="redline-marked"] .dclab-redline-ins:focus-visible,
:root[data-lab~="redline-marked"] .dclab-redline-flag:focus-visible {
  outline: 2px solid var(--dclab-rl-ink);
  outline-offset: 2px;
  text-decoration-thickness: 2px;
}
/* a cut: the struck text plus a small "cut" note in the proposal's place */
:root[data-lab~="redline-marked"] .dclab-redline-cut {
  font: 600 .72em/1 Inter, system-ui, sans-serif;
  letter-spacing: .02em;
  color: var(--dclab-rl-ink);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding: 0 .1em;
  vertical-align: .12em;
}
:root[data-lab~="redline-marked"] .dclab-redline-cut[data-status="pending"] { color: var(--dclab-rl-amber); border-bottom-style: dashed; }

/* a dash-rule mark is often a single comma or colon: an invisible frame around it makes it easy to hover and tap */
:root[data-lab~="redline-marked"] .dclab-redline-ins[data-auto] { position: relative; }
:root[data-lab~="redline-marked"] .dclab-redline-ins[data-auto]::after { content: ''; position: absolute; inset: -6px -8px; }
@media (pointer: coarse) {
  :root[data-lab~="redline-marked"] .dclab-redline-ins[data-auto]::after { inset: -12px -19px; }
}

/* a production-only row (a button, a form line, the pricing card): a small tag beside it, the text untouched */
:root[data-lab~="redline-marked"] .dclab-redline-xflag {
  display: inline-block;
  margin: 0 .4em;
  padding: 3px 6px;
  font: 700 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--dclab-rl-amber);
  background: #fff;
  border: 1px dashed var(--dclab-rl-amber);
  border-radius: 4px;
  vertical-align: .1em;
  cursor: help;
  white-space: nowrap;
  text-decoration: none;
}
:root[data-lab~="redline-marked"] .dclab-redline-xflag:focus-visible { outline: 2px solid var(--dclab-rl-ink); outline-offset: 2px; }
@media (pointer: coarse) {
  :root[data-lab~="redline-marked"] .dclab-redline-xflag { position: relative; }
  :root[data-lab~="redline-marked"] .dclab-redline-xflag::after { content: ''; position: absolute; inset: -12px -6px; }
}

/* light or dark ground: the inks mix with the sentence's own color, so they lighten on navy and stay deep on white */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root[data-lab~="redline-marked"] .dclab-redline-ins,
  :root[data-lab~="redline-marked"] .dclab-redline-flag {
    --dclab-rl-u: color-mix(in srgb, var(--dclab-rl-ink) 68%, currentColor);
    --dclab-rl-a: color-mix(in srgb, var(--dclab-rl-amber) 60%, currentColor);
    text-decoration-color: var(--dclab-rl-u);
  }
  :root[data-lab~="redline-marked"] .dclab-redline-ins[data-status="pending"],
  :root[data-lab~="redline-marked"] .dclab-redline-flag { text-decoration-color: var(--dclab-rl-a); }
  :root[data-lab~="redline-marked"] .dclab-redline-cut { color: var(--dclab-rl-u); }
  :root[data-lab~="redline-marked"] .dclab-redline-cut[data-status="pending"] { color: var(--dclab-rl-a); }
  :root[data-lab~="redline-marked"] .dclab-redline-ins:focus-visible,
  :root[data-lab~="redline-marked"] .dclab-redline-flag:focus-visible { outline-color: var(--dclab-rl-u); }
}

/* ---------- the review bar: a proof sheet's header, pinned under the site header ---------- */
:root[data-lab~="redline-marked"] .dclab-redline-bar {
  position: sticky;
  top: var(--dclab-redline-top, 0px);
  height: 52px;
  margin-bottom: -52px;            /* floats over the first section, which grows by the same 52px below */
  z-index: 99;
  background: #fff;
  color: var(--dclab-rl-text);
  border-bottom: 1px solid var(--dclab-rl-rule);
  font: 400 13.5px/1.45 Inter, system-ui, sans-serif;
  letter-spacing: 0;
  text-align: left;
}
:root[data-lab~="redline-marked"] .dclab-redline-bar-in {
  max-width: 1200px;
  height: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
:root[data-lab~="redline-marked"] .dclab-redline-bar-copy { margin: 0; color: var(--dclab-rl-muted); max-width: none; font-size: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-copy b { color: var(--dclab-rl-text); font-weight: 600; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-copy s { color: #6b7194; text-decoration-line: line-through; text-decoration-thickness: 1px; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-copy u { color: var(--dclab-rl-text); text-decoration-line: underline; text-decoration-color: var(--dclab-rl-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-n i { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--dclab-rl-text); }
:root[data-lab~="redline-marked"] .dclab-redline-k-n { text-decoration-line: underline; text-decoration-color: var(--dclab-rl-ink); text-decoration-thickness: 1px; text-underline-offset: .22em; }
:root[data-lab~="redline-marked"] .dclab-redline-k-p { text-decoration-line: underline; text-decoration-style: dashed; text-decoration-color: var(--dclab-rl-amber); text-decoration-thickness: 1px; text-underline-offset: .22em; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-act { display: flex; align-items: center; gap: 12px; flex: none; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-msg { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-btn {
  appearance: none;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  color: var(--dclab-rl-ink);
  background: #fff;
  border: 1px solid var(--dclab-rl-ink);
  border-radius: 6px;
  padding: 0 14px;
  min-height: 34px;
  cursor: pointer;
  white-space: nowrap;
}
:root[data-lab~="redline-marked"] .dclab-redline-bar-btn:hover { background: var(--dclab-rl-ink); color: #fff; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-btn:focus-visible { outline: 2px solid var(--dclab-rl-ink); outline-offset: 2px; }
:root[data-lab~="redline-marked"] .dclab-redline-k-x { text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--dclab-rl-amber); text-decoration-thickness: 1px; text-underline-offset: .22em; }
:root[data-lab~="redline-marked"] .dclab-redline-bar-key {
  display: none;
  appearance: none;
  font: 600 13px/1 Inter, system-ui, sans-serif;
  color: var(--dclab-rl-text);
  background: #fff;
  border: 1px solid var(--dclab-rl-rule);
  border-radius: 6px;
  padding: 0 12px;
  min-height: 34px;
  cursor: pointer;
}
:root[data-lab~="redline-marked"] .dclab-redline-bar-key[aria-expanded="true"] { border-color: var(--dclab-rl-ink); color: var(--dclab-rl-ink); }
:root[data-lab~="redline-marked"] .dclab-redline-bar-key:focus-visible { outline: 2px solid var(--dclab-rl-ink); outline-offset: 2px; }
@media (max-width: 1100px) {
  /* narrower screens keep one row: the counts stay, and the legend sentence opens from the Key button (it is
     read out either way) */
  :root[data-lab~="redline-marked"] .dclab-redline-bar-key { display: inline-block; }
  :root[data-lab~="redline-marked"] .dclab-redline-bar:not(.dclab-redline-open) .dclab-redline-bar-legend {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  :root[data-lab~="redline-marked"] .dclab-redline-open .dclab-redline-bar-legend {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 10px 16px 12px;
    background: #fff;
    border-bottom: 1px solid var(--dclab-rl-rule);
    white-space: normal;
    color: var(--dclab-rl-muted);
  }
}
@media (max-width: 720px) {
  :root[data-lab~="redline-marked"] .dclab-redline-bar { font-size: 13px; height: 56px; margin-bottom: -56px; }
  :root[data-lab~="redline-marked"] .dclab-redline-bar-in { padding: 0 16px; gap: 12px; }
  :root[data-lab~="redline-marked"] .dclab-redline-bar-btn,
  :root[data-lab~="redline-marked"] .dclab-redline-bar-key { min-height: 44px; padding: 0 14px; }
  :root[data-lab~="redline-marked"] .dclab-redline-bar-act { gap: 8px; }
  :root[data-lab~="redline-marked"] .dclab-redline-long { display: none; }
}

/* ---------- the reason popover ---------- */
:root[data-lab~="redline-marked"] .dclab-redline-pop {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 2147483000;              /* the fallback; a real popover sits in the top layer */
  box-sizing: border-box;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 11px 14px 12px;
  background: #fff;
  color: #1a1a2e;
  border: 1px solid #e3e6f0;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(10, 13, 49, .14), 0 1px 3px rgba(10, 13, 49, .08);
  font: 400 14px/1.5 Inter, system-ui, sans-serif;
  text-align: left;
  pointer-events: none;
  overflow: visible;
}
:root[data-lab~="redline-marked"] .dclab-redline-pop[hidden] { display: none; }
:root[data-lab~="redline-marked"] .dclab-redline-pop p { margin: 0; max-width: none; font: inherit; color: inherit; }
:root[data-lab~="redline-marked"] .dclab-redline-pop-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px !important; }
:root[data-lab~="redline-marked"] .dclab-redline-pop-id { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #0a0d31; }
:root[data-lab~="redline-marked"] .dclab-redline-pop-st { font-size: 12.5px; font-weight: 600; color: #010ed0; }
:root[data-lab~="redline-marked"] .dclab-redline-pop[data-status="pending"] .dclab-redline-pop-st { color: #9a4b00; }
:root[data-lab~="redline-marked"] .dclab-redline-pop[data-status="auto"] .dclab-redline-pop-st { color: #5b6185; }
:root[data-lab~="redline-marked"] .dclab-redline-pop-why { color: #3b4060 !important; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="redline-marked"] .dclab-redline-pop:popover-open { animation: dclab-redline-in .12s ease-out; }
  @keyframes dclab-redline-in { from { opacity: 0; transform: translateY(-2px); } }
}

/* lab-scan.css */
/* Design Lab, Round 3 follow-up: "Reading your answers" (scan). See js/lab-scan.js.
   Inspired by useLayouts' Scan Document (MIT, Urvish Mali). Every rule is scoped to the token. */

:root[data-lab~="scan"] .dclab-scan-host { position: relative; }
:root[data-lab~="scan"] .dclab-scan {
  position: absolute; inset: 0; z-index: 20; padding: 24px; border-radius: 16px; background: rgba(255, 255, 255, .94); text-align: center;
  animation: dclabScanIn .18s ease-out both;
}
:root[data-lab~="scan"] .dclab-scan-in {
  position: sticky; top: calc(50vh - 110px); display: flex; flex-direction: column; align-items: center; gap: 6px;
}
@keyframes dclabScanIn { from { opacity: 0; } }

/* the page being read: typed lines, and a brand blue bar that sweeps down it twice */
:root[data-lab~="scan"] .dclab-scan-page {
  position: relative; display: flex; flex-direction: column; gap: 8px; width: 104px; height: 134px; margin-bottom: 16px; padding: 16px 13px;
  overflow: hidden; border-radius: 6px; background: #fff;
  box-shadow: 0 18px 34px -18px rgba(10, 13, 49, .45), inset 0 0 0 1px rgba(10, 13, 49, .08);
  animation: dclabScanPage .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes dclabScanPage { from { opacity: 0; transform: translateY(10px) rotate(-3deg) scale(.94); } }
:root[data-lab~="scan"] .dclab-scan-page i { display: block; height: 5px; border-radius: 3px; background: rgba(10, 13, 49, .14); }
:root[data-lab~="scan"] .dclab-scan-page i:first-child { width: 60%; height: 7px; background: #0a0d31; opacity: .8; margin-bottom: 3px; }
:root[data-lab~="scan"] .dclab-scan-page i:nth-child(3) { width: 82%; }
:root[data-lab~="scan"] .dclab-scan-page i:nth-child(5) { width: 68%; }
:root[data-lab~="scan"] .dclab-scan-page i:nth-child(7) { width: 44%; }
:root[data-lab~="scan"] .dclab-scan-bar {
  position: absolute; left: -6px; right: -6px; top: 0; height: 3px; border-radius: 3px; background: #010ed0;
  box-shadow: 0 0 12px 2px rgba(1, 14, 208, .45), 0 -16px 22px -10px rgba(1, 14, 208, .22);
  animation: dclabScanBar 1.1s cubic-bezier(.45, 0, .55, 1) .2s both;
}
@keyframes dclabScanBar {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  50% { transform: translateY(131px); }
  100% { transform: translateY(0); opacity: .9; }
}
:root[data-lab~="scan"] .dclab-scan-title {
  margin: 0; font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%; font-weight: 720;
  font-size: 1.2rem; color: #0a0d31;
}
:root[data-lab~="scan"] .dclab-scan-sub { margin: 0; max-width: 34ch; font-size: .88rem; line-height: 1.5; color: #5a6080; }

/* lab-sendstate.css */
/* Design Lab, Round 4: "Honest send buttons" (token: sendstate). See js/lab-sendstate.js.
   The button keeps its own box and colors; while a send is out (or after it really arrived) a face is laid over its label. */

/* ---------- the button: Sending, then Sent ---------- */
:root[data-lab~="sendstate"] :is(.dclab-ss-busy, .dclab-ss-done) {
  position: relative; -webkit-text-fill-color: transparent;
  opacity: 1 !important; /* production dims a disabled .btn to .5: a send in progress is not an unavailable button */
}
:root[data-lab~="sendstate"] .dclab-ss-busy { cursor: progress; }
:root[data-lab~="sendstate"] :is(.dclab-ss-busy, .dclab-ss-done) > :not(.dclab-ss-face) { visibility: hidden; }
:root[data-lab~="sendstate"] .dclab-ss-face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  -webkit-text-fill-color: currentColor; white-space: nowrap; pointer-events: none;
}

/* ---------- marks: thin line drawings, 1.5px ---------- */
:root[data-lab~="sendstate"] .dclab-ss-mark { flex: none; width: 14px; height: 14px; overflow: visible; }
:root[data-lab~="sendstate"] .dclab-ss-spin { animation: dclab-ss-spin .9s linear infinite; }
@keyframes dclab-ss-spin { to { transform: rotate(360deg); } }
:root[data-lab~="sendstate"] .dclab-ss-check path { stroke-dasharray: 1; animation: dclab-ss-draw .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dclab-ss-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- the line under a button (failure only shows; Sending and Sent are spoken) ---------- */
:root[data-lab~="sendstate"] .dclab-ss-line { position: relative; margin: 0; font: 500 13.5px/1.45 Inter, system-ui, sans-serif; }
:root[data-lab~="sendstate"] .dclab-ss-line[data-state="failed"] { text-align: center; text-wrap: balance; color: #b91c1c; }
:root[data-lab~="sendstate"] .dclab-ss-line .dclab-ss-mark { display: inline-block; vertical-align: -2px; margin-right: 7px; }
:root[data-lab~="sendstate"] .dclab-ss-rail[data-state="failed"] { margin-top: 12px; }
:root[data-lab~="sendstate"] .dclab-ss-rail.dclab-ss-dark[data-state="failed"] { color: #fca5a5; }
:root[data-lab~="sendstate"] .dclab-ss-tel {
  position: relative; color: inherit; font-weight: 600; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:root[data-lab~="sendstate"] .dclab-ss-tel::after { content: ''; position: absolute; inset: -12px -6px; } /* a 44px tap target, no layout change */
:root[data-lab~="sendstate"] .dclab-ss-tel:hover { text-decoration-thickness: 2px; }
:root[data-lab~="sendstate"] .dclab-ss-tel:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
:root[data-lab~="sendstate"] .dclab-ss-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- the receipt above the results (health check, insurance check) ---------- */
:root[data-lab~="sendstate"] .dclab-ss-receipt:not(:empty) { margin: 0 0 20px; color: var(--text-muted, #5b6478); text-align: center; text-wrap: balance; }
:root[data-lab~="sendstate"] .dclab-ss-receipt[data-state="sent"] .dclab-ss-mark { color: #047857; }
:root[data-lab~="sendstate"] .dclab-ss-receipt[data-state="failed"] { color: #b91c1c; }

/* ---------- the page's own line for the same send ---------- */
/* hidden in place while sending (nothing jumps), gone while our failure line speaks; it comes back with the next answer */
:root[data-lab~="sendstate"] .dclab-ss-q-sending #est-email-msg { visibility: hidden; }
:root[data-lab~="sendstate"] :is(.dclab-ss-q-sending, .dclab-ss-q-failed) .form-submit-error,
:root[data-lab~="sendstate"] .dclab-ss-q-failed #est-email-msg { display: none !important; }
/* "The contact desk" adds "Need us sooner? Call ..." under the button: one phone line at a time */
:root[data-lab~="sendstate"] .dclab-ss-rail[data-state="failed"] ~ .dclab-desk-sooner { display: none; }

@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="sendstate"] :is(.dclab-ss-spin, .dclab-ss-check path) { animation: none; }
}
@media (forced-colors: active) {
  :root[data-lab~="sendstate"] :is(.dclab-ss-busy, .dclab-ss-done) { -webkit-text-fill-color: initial; }
  :root[data-lab~="sendstate"] :is(.dclab-ss-busy, .dclab-ss-done) .dclab-ss-face { background: ButtonFace; color: ButtonText; }
}

/* lab-slices.css */
/* Design Lab, Round 2: "Break the layers" (id: slices). Navy ink on paper; scoped to the token. */
:root[data-lab~="slices"] .dclab-slices-hidden { display: none !important; }

/* ---------- the explorable ---------- */
:root[data-lab~="slices"] .dclab-slices {
  margin: 0 0 42px; padding: 28px; background: #f6f7fb; border: 1px solid #e3e6f0; border-radius: 10px;
  color: #1a1a2e; font-family: 'Inter', system-ui, sans-serif; scroll-margin-top: 110px;
}
:root[data-lab~="slices"] .dclab-slices-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
:root[data-lab~="slices"] .dclab-slices-head h3 { margin: 0; color: #0a0d31; }
:root[data-lab~="slices"] .dclab-slices-tag { margin: 0; font-size: .82rem; line-height: 1.45; color: #4a4f6a; }
:root[data-lab~="slices"] .dclab-slices-intro { margin: 10px 0 22px; max-width: 62ch; font-size: .95rem; line-height: 1.6; color: #4a4f6a; }
:root[data-lab~="slices"] .dclab-slices-canvas { display: block; width: 100%; height: 300px; }

:root[data-lab~="slices"] .dclab-slices-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid #e3e6f0;
}
:root[data-lab~="slices"] .dclab-slices-layers { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; border: 0; min-width: 0; }
:root[data-lab~="slices"] .dclab-slices-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* switches: a native checkbox (role=switch) laid over a 36x20 track */
:root[data-lab~="slices"] .dclab-slices-sw { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 32px; cursor: pointer; font-size: .9rem; font-weight: 500; color: #1a1a2e; user-select: none; }
:root[data-lab~="slices"] .dclab-slices-sw input { position: absolute; left: 0; top: 50%; width: 36px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
:root[data-lab~="slices"] .dclab-slices-track {
  position: relative; flex: none; width: 36px; height: 20px; border-radius: 10px; box-sizing: border-box;
  background: #fff; border: 1.5px solid #6b7190; transition: background-color .18s ease, border-color .18s ease;
}
:root[data-lab~="slices"] .dclab-slices-track::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 12px; height: 12px; border-radius: 50%;
  background: #6b7190; transition: transform .18s ease, background-color .18s ease;
}
:root[data-lab~="slices"] .dclab-slices-sw input:checked + .dclab-slices-track { background: #0a0d31; border-color: #0a0d31; }
:root[data-lab~="slices"] .dclab-slices-sw input:checked + .dclab-slices-track::after { background: #fff; transform: translateX(16px); }
:root[data-lab~="slices"] .dclab-slices-sw input:not(:checked) ~ .dclab-slices-name { color: #4a4f6a; text-decoration: line-through; text-decoration-color: #b8bdd1; text-decoration-thickness: 1px; }
:root[data-lab~="slices"] .dclab-slices-sw input:focus-visible + .dclab-slices-track { outline: 2px solid #010ed0; outline-offset: 2px; }
:root[data-lab~="slices"] .dclab-slices-sw:hover .dclab-slices-track { border-color: #0a0d31; }

:root[data-lab~="slices"] .dclab-slices-go {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px; border: 1px solid transparent; border-radius: 8px;
  background: #0a0d31; color: #fff; font: 600 .95rem/1.2 'Inter', system-ui, sans-serif; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background-color .15s ease;
}
:root[data-lab~="slices"] .dclab-slices-go:hover { background: #010ed0; }
:root[data-lab~="slices"] .dclab-slices-go:focus-visible { outline: 2px solid #010ed0; outline-offset: 2px; }
:root[data-lab~="slices"] .dclab-slices-go[aria-disabled="true"] { background: #6b7190; cursor: progress; }

:root[data-lab~="slices"] .dclab-slices-result { margin: 18px 0 0; min-height: 3.2em; max-width: 72ch; font-size: 1rem; line-height: 1.6; color: #1a1a2e; font-variant-numeric: tabular-nums; }
/* before the first run the empty status takes no room; after it, the room stays so the page does not jump between runs */
:root[data-lab~="slices"] .dclab-slices:not(.dclab-slices-ran) .dclab-slices-result:empty { min-height: 0; margin: 0; }
:root[data-lab~="slices"] .dclab-slices-lesson { margin: 14px 0 0; max-width: 72ch; font-size: 1rem; line-height: 1.6; font-weight: 600; color: #0a0d31; }
:root[data-lab~="slices"] .dclab-slices-lesson[hidden] { display: none; }
:root[data-lab~="slices"] .dclab-slices-lesson a { color: #010ed0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
:root[data-lab~="slices"] .dclab-slices-lesson a:hover { text-decoration-thickness: 2px; }
:root[data-lab~="slices"] .dclab-slices-lesson a:focus-visible { outline: 2px solid #010ed0; outline-offset: 2px; border-radius: 2px; }

@media (max-width: 639.98px) {
  :root[data-lab~="slices"] .dclab-slices { padding: 20px; }
  :root[data-lab~="slices"] .dclab-slices-canvas { height: 440px; }
  :root[data-lab~="slices"] .dclab-slices-layers { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; }
  /* each whole row is the switch's tap target: 44px tall, five rows in about 220px */
  :root[data-lab~="slices"] .dclab-slices-sw { display: flex; min-height: 44px; }
  :root[data-lab~="slices"] .dclab-slices-go { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="slices"] :is(.dclab-slices-track, .dclab-slices-track::after, .dclab-slices-go) { transition: none; }
}
@media (forced-colors: active) {
  :root[data-lab~="slices"] .dclab-slices { border-color: CanvasText; }
  :root[data-lab~="slices"] .dclab-slices-track { border-color: CanvasText; background: Canvas; }
  :root[data-lab~="slices"] .dclab-slices-track::after { background: CanvasText; }
  :root[data-lab~="slices"] .dclab-slices-sw input:checked + .dclab-slices-track { background: Highlight; border-color: Highlight; }
  :root[data-lab~="slices"] .dclab-slices-sw input:checked + .dclab-slices-track::after { background: HighlightText; }
}

/* ---------- hero peek: no card, no glow ---------- */
:root[data-lab~="slices"] .dclab-slices-peek { position: relative; z-index: 1; width: 330px; flex-shrink: 0; color: #aab1cc; }
:root[data-lab~="slices"] .dclab-slices-peek svg { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 300 / 160; overflow: visible; }
:root[data-lab~="slices"] .dclab-slices-peek-sl path { fill: none; stroke: #cfd6ff; stroke-width: 1.5; stroke-linecap: round; }
:root[data-lab~="slices"] .dclab-slices-peek-trail { fill: none; stroke: #cfd6ff; stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
:root[data-lab~="slices"] .dclab-slices-peek-dot { fill: #ff8a6b; }
:root[data-lab~="slices"] .dclab-slices-peek p { margin: 18px 0 0; max-width: 300px; font-family: 'Inter', system-ui, sans-serif; font-size: .92rem; line-height: 1.55; color: #aab1cc;
  text-shadow: 0 0 4px #0a0d31, 0 0 8px #0a0d31, 0 0 12px #0a0d31; } /* a navy halo, so the Round 1 sail line passes behind the caption */
:root[data-lab~="slices"] .dclab-slices-peek a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: #cfd6ff; text-underline-offset: 3px; text-decoration-thickness: 1px; white-space: nowrap; }
:root[data-lab~="slices"] .dclab-slices-peek a:hover { text-decoration-thickness: 2px; }
:root[data-lab~="slices"] .dclab-slices-peek a:focus-visible { outline: 2px solid #cfd6ff; outline-offset: 3px; border-radius: 2px; }
@media (max-width: 980px) {
  :root[data-lab~="slices"] .dclab-slices-peek { width: 100%; max-width: 420px; margin-top: 36px; }
}
@media (forced-colors: active) {
  :root[data-lab~="slices"] .dclab-slices-peek p { text-shadow: none; }
  :root[data-lab~="slices"] :is(.dclab-slices-peek-sl path, .dclab-slices-peek-trail) { stroke: CanvasText; }
  :root[data-lab~="slices"] .dclab-slices-peek-dot { fill: CanvasText; }
}

/* lab-switch.css */
/* Design Lab, Round 3 follow-up: "The switch, week by week" (switch). See js/lab-switch.js.
   Inspired by useLayouts' Scroll Stack Deck (MIT, Urvish Mali). Every rule is scoped to the token. */

:root[data-lab~="switch"] #onboarding.dclab-wks-host .ob-track { display: none !important; }

:root[data-lab~="switch"] .dclab-wks {
  --card-h: 300px; --tab-h: 44px; --step: 34px; --tab-step: 168px; --pin-top: 120px;
  --stage-h: calc(var(--card-h) + var(--tab-h) + (var(--n, 4) - 1) * var(--step));
  position: relative; height: calc(var(--stage-h) + (var(--n, 4) - 1) * 62vh + 40px);
  max-width: 920px; margin: 40px auto 0;
}
:root[data-lab~="switch"] .dclab-wks-pin { position: sticky; top: var(--pin-top); }
:root[data-lab~="switch"] .dclab-wks-stage { position: relative; height: var(--stage-h); margin: 0; padding: 0; list-style: none; }

/* each week is a folder: a tab, then the card. Tabs step along, so a stack shows every week before it */
:root[data-lab~="switch"] .dclab-wks-card {
  position: absolute; left: 0; right: 0; top: calc((var(--n, 4) - 1) * var(--step));
  transform-origin: 50% 0; will-change: transform; color: #0a0d31;
}
:root[data-lab~="switch"] .dclab-wks-card::after {
  content: ''; position: absolute; inset: var(--tab-h) 0 0; border-radius: 18px; background: #0a0d31;
  opacity: calc(var(--depth, 0) * .16); pointer-events: none;
}
:root[data-lab~="switch"] .dclab-wks-tab {
  display: flex; align-items: center; gap: 10px; width: fit-content; height: var(--tab-h); margin: 0 0 -1px calc(var(--i) * var(--tab-step));
  padding: 0 22px; border-radius: 14px 14px 0 0; background: #fff;
  font: 700 .86rem/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
}
:root[data-lab~="switch"] .dclab-wks-tab b {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
:root[data-lab~="switch"] .dclab-wks-tab b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00e68a; }
:root[data-lab~="switch"] .dclab-wks-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 34px;
  height: var(--card-h); padding: 34px 40px 28px; border-radius: 18px; background: #fff;
  box-shadow: 0 34px 60px -34px rgba(0, 0, 0, .65);
}
:root[data-lab~="switch"] .dclab-wks-num {
  font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 125%; font-weight: 800;
  font-size: 4.4rem; line-height: .86; letter-spacing: -.03em; color: #010ed0;
}
:root[data-lab~="switch"] .dclab-wks-copy h3 {
  margin: 2px 0 10px; font-family: var(--lab-face, 'Mona Sans'), 'Inter Tight', system-ui, sans-serif; font-stretch: 112%;
  font-weight: 720; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; color: inherit;
}
:root[data-lab~="switch"] .dclab-wks-copy p { margin: 0; max-width: 54ch; font-size: 1.02rem; line-height: 1.6; color: #4b5170; }

/* the 30 day ruler: this week's days lit, the weeks before it done, the rest ahead */
:root[data-lab~="switch"] .dclab-wks-ruler { grid-column: 1 / -1; align-self: end; }
:root[data-lab~="switch"] .dclab-wks-days { margin: 0 0 9px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #010ed0; }
:root[data-lab~="switch"] .dclab-wks-ticks { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; align-items: end; height: 22px; }
:root[data-lab~="switch"] .dclab-wks-ticks i { display: block; height: 12px; border-radius: 2px; background: rgba(10, 13, 49, .1); }
:root[data-lab~="switch"] .dclab-wks-ticks i.is-done { background: rgba(10, 13, 49, .32); }
:root[data-lab~="switch"] .dclab-wks-ticks i.is-now { height: 22px; background: #010ed0; }
:root[data-lab~="switch"] .dclab-wks-ticks i.is-wk { margin-right: 5px; }
:root[data-lab~="switch"] .dclab-wks-ends { display: flex; justify-content: space-between; margin: 7px 0 0; font-size: .74rem; color: #7c829f; }

/* Week 4, Live: the brand blue card the stack arrives at */
:root[data-lab~="switch"] .dclab-wks-card.is-live { color: #fff; }
:root[data-lab~="switch"] .dclab-wks-card.is-live :is(.dclab-wks-tab, .dclab-wks-body) { background: #010ed0; }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-num { color: #fff; }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-copy p { color: #dfe3ff; }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-days { color: #fff; }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-ticks i { background: rgba(255, 255, 255, .2); }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-ticks i.is-done { background: rgba(255, 255, 255, .55); }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-ticks i.is-now { background: #fff; }
:root[data-lab~="switch"] .dclab-wks-card.is-live .dclab-wks-ends { color: #c9d0ff; }

/* tablets and phones: taller cards for the wrapped copy, tighter tab steps */
@media (max-width: 900px) {
  :root[data-lab~="switch"] .dclab-wks { --card-h: 330px; --tab-step: 112px; }
}
@media (max-width: 600px) {
  :root[data-lab~="switch"] .dclab-wks { --card-h: 364px; --tab-h: 40px; --step: 26px; --tab-step: 74px; --pin-top: 96px; margin-top: 28px; }
  :root[data-lab~="switch"] .dclab-wks-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 24px 22px 22px; }
  :root[data-lab~="switch"] .dclab-wks-num { font-size: 2.8rem; margin-bottom: 12px; }
  :root[data-lab~="switch"] .dclab-wks-copy h3 { font-size: 1.32rem; }
  :root[data-lab~="switch"] .dclab-wks-copy p { font-size: .95rem; }
  :root[data-lab~="switch"] .dclab-wks-tab { padding: 0 14px; font-size: .78rem; }
  :root[data-lab~="switch"] .dclab-wks-ticks { gap: 3px; }
  :root[data-lab~="switch"] .dclab-wks-ticks i.is-wk { margin-right: 3px; }
}

/* reduced motion: the four weeks as a plain list, nothing pins or moves */
@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="switch"] .dclab-wks { height: auto; }
  :root[data-lab~="switch"] .dclab-wks-pin { position: static; }
  :root[data-lab~="switch"] .dclab-wks-stage { display: grid; gap: 26px; height: auto; }
  :root[data-lab~="switch"] .dclab-wks-card { position: relative; top: auto; transform: none !important; }
  :root[data-lab~="switch"] .dclab-wks-card::after { display: none; }
  :root[data-lab~="switch"] .dclab-wks-body { height: auto; min-height: var(--card-h); }
  :root[data-lab~="switch"] .dclab-wks-tab { margin-left: 0; }
}

/* lab-terms.css */
/* Design Lab, Round 2: "Say it plainly" (token: terms). Every rule is scoped to the token.
   The term: a dotted underline and a superscript sail mark (the logo as a reference mark).
   The note: a native popover, anchored to the term, a bottom sheet on phones. */

:root[data-lab~="terms"] .dclab-terms-btn {
  --dclab-terms-ink: #010ed0;          /* 9.6:1 on white */
  --dclab-terms-line: #010ed0;
  --dclab-terms-wash: rgba(1, 14, 208, .07);
  all: unset;                          /* a button that reads as the word it wraps */
  display: inline;
  font: inherit;
  font-stretch: inherit;
  letter-spacing: inherit;
  font-variant-numeric: inherit;
  color: inherit;
  padding: 0 1px;
  margin: 0;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: underline dotted 1.5px;
  text-decoration-color: var(--dclab-terms-line);
  text-underline-offset: .2em;
  text-decoration-skip-ink: auto;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
:root[data-lab~="terms"] .dclab-terms-btn[data-tone="dark"] {
  --dclab-terms-ink: #b9c3ff;          /* 9:1 or better on the navy hero and pillar panels */
  --dclab-terms-line: rgba(255, 255, 255, .7);
  --dclab-terms-wash: rgba(255, 255, 255, .09);
}
:root[data-lab~="terms"] .dclab-terms-btn:hover,
:root[data-lab~="terms"] .dclab-terms-btn:has(+ .dclab-terms-pop:popover-open) {
  text-decoration-style: solid;
}
:root[data-lab~="terms"] .dclab-terms-btn:has(+ .dclab-terms-pop:popover-open) { background: var(--dclab-terms-wash); }
:root[data-lab~="terms"] .dclab-terms-btn:focus-visible {
  outline: 2px solid var(--dclab-terms-ink);
  outline-offset: 2px;
}

/* the reference mark: the sail, small and raised like a footnote dagger */
:root[data-lab~="terms"] .dclab-terms-mark {
  display: inline-block;
  height: .62em;
  width: auto;
  aspect-ratio: 300 / 280;
  vertical-align: .55em;
  margin: -.62em 0 0 .1em;             /* keeps the raised mark from opening up the line */
  fill: var(--dclab-terms-ink);
  overflow: visible;
  transform-origin: 40% 90%;
  pointer-events: none;
}
/* below about 1rem the sail needs a little more size to read as a sail, not a fleck */
:root[data-lab~="terms"] .dclab-terms-btn[data-size="s"] .dclab-terms-mark { height: .78em; vertical-align: .45em; margin-top: -.78em; }
/* hero stats: the mark hangs into the gutter, so the numeral stays centered over its label */
:root[data-lab~="terms"] .dclab-terms-btn[data-at="hero"] { position: relative; }
:root[data-lab~="terms"] .dclab-terms-btn[data-at="hero"] .dclab-terms-mark {
  position: absolute; left: 100%; top: .08em; margin: 0 0 0 .1em; vertical-align: baseline;
}
:root[data-lab~="terms"] .dclab-terms-nw { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="terms"] .dclab-terms-mark { transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
  :root[data-lab~="terms"] .dclab-terms-btn:is(:hover, :focus-visible) .dclab-terms-mark,
  :root[data-lab~="terms"] .dclab-terms-btn:has(+ .dclab-terms-pop:popover-open) .dclab-terms-mark { transform: rotate(-9deg) scale(1.08); }
}

/* ---------- the note ---------- */
:root[data-lab~="terms"] .dclab-terms-pop {
  /* reset whatever the host line passes down (hero numerals, centered sections, wide headline faces) */
  font: 400 .92rem/1.55 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-stretch: 100%;
  font-variant-numeric: normal;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-align: left;
  text-shadow: none;
  white-space: normal;
  font-style: normal;
  color: #1a1a2e;
  margin: 0;
  inset: auto;
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 14px 16px;
  background: #fbfbfd;
  border: 1px solid #dfe3f2;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(10, 13, 49, .18), 0 1px 2px rgba(10, 13, 49, .06);
  overflow: visible;
}
:root[data-lab~="terms"] .dclab-terms-pop:popover-open { display: block; }
:root[data-lab~="terms"] .dclab-terms-pop:not([data-pos="js"]) {
  position-area: block-end span-inline-end;
  position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
  margin-block-start: 8px;
}
:root[data-lab~="terms"] .dclab-terms-pop[data-at="hero"]:not([data-pos="js"]) {
  position-area: block-end center;
  position-try-fallbacks: block-end span-inline-end, block-end span-inline-start, flip-block;
}
:root[data-lab~="terms"] .dclab-terms-pop[data-pos="js"] {
  position: fixed;
  top: var(--dclab-terms-y, 16px);
  left: var(--dclab-terms-x, 16px);
}
:root[data-lab~="terms"] .dclab-terms-body { display: block; }
:root[data-lab~="terms"] .dclab-terms-body b { font-weight: 650; color: #0a0d31; }
:root[data-lab~="terms"] .dclab-terms-x { display: none; }

/* 99.9%: the month to scale, then its last day zoomed thirty times */
:root[data-lab~="terms"] .dclab-terms-up { display: block; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6e9f3; }
:root[data-lab~="terms"] .dclab-terms-seg {
  display: inline-flex; padding: 2px; gap: 2px; border-radius: 7px; background: #eef0f7;
}
:root[data-lab~="terms"] .dclab-terms-seg button {
  all: unset;
  font: 600 .8rem/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  padding: 7px 10px;
  border-radius: 5px;
  color: #3d4260;
  cursor: pointer;
}
:root[data-lab~="terms"] .dclab-terms-seg button:hover { color: #0a0d31; background: rgba(255, 255, 255, .7); }
:root[data-lab~="terms"] .dclab-terms-seg button[aria-pressed="true"] { background: #010ed0; color: #fff; }
:root[data-lab~="terms"] .dclab-terms-seg button:focus-visible { outline: 2px solid #010ed0; outline-offset: 2px; }
:root[data-lab~="terms"] .dclab-terms-fig { display: block; margin-top: 14px; }
:root[data-lab~="terms"] .dclab-terms-scale {
  display: flex; justify-content: space-between; margin-bottom: 4px;
  font-size: .7rem; line-height: 1.2; color: #5b6080;
}
:root[data-lab~="terms"] .dclab-terms-bar {
  position: relative; display: block; height: 10px; border-radius: 2px; overflow: hidden; background: #e3e6f0;
}
/* the month's last day: the slice the zoom row below opens up */
:root[data-lab~="terms"] .dclab-terms-day {
  position: absolute; top: 0; right: 0; bottom: 0; width: calc(100% / 30);
  background: #cdd2ea; box-shadow: inset 1px 0 0 #8e97cc;
}
:root[data-lab~="terms"] .dclab-terms-sliver {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: max(2px, var(--dclab-terms-w, .1%));
  background: #010ed0;
}
:root[data-lab~="terms"] .dclab-terms-zoom { display: block; width: 100%; height: 16px; overflow: visible; }
:root[data-lab~="terms"] .dclab-terms-fan { fill: rgba(1, 14, 208, .08); }
:root[data-lab~="terms"] .dclab-terms-edge { fill: none; stroke: #8e97cc; stroke-width: 1; vector-effect: non-scaling-stroke; }
:root[data-lab~="terms"] .dclab-terms-zlabel { display: block; margin-top: 5px; font-size: .7rem; line-height: 1.2; color: #5b6080; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="terms"] .dclab-terms-sliver { transition: width .45s cubic-bezier(.2, .8, .2, 1); }
}
:root[data-lab~="terms"] .dclab-terms-cap {
  display: block; margin-top: 10px; font-size: .84rem; line-height: 1.45; color: #2a2f4a;
}

/* Windows high contrast: keep the chosen level, the bars and the slivers visible */
@media (forced-colors: active) {
  :root[data-lab~="terms"] .dclab-terms-seg button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  :root[data-lab~="terms"] .dclab-terms-bar { border: 1px solid CanvasText; }
  :root[data-lab~="terms"] .dclab-terms-sliver { forced-color-adjust: none; background: Highlight; }
  :root[data-lab~="terms"] .dclab-terms-day { forced-color-adjust: none; background: GrayText; }
  :root[data-lab~="terms"] .dclab-terms-edge { stroke: CanvasText; }
  :root[data-lab~="terms"] .dclab-terms-fan { fill: none; }
  :root[data-lab~="terms"] .dclab-terms-mark { fill: LinkText; }
}

/* motion: a short fade and lift in, nothing on reduced motion */
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="terms"] .dclab-terms-pop {
    opacity: 0;
    translate: 0 4px;
    transition: opacity 140ms ease-out, translate 140ms ease-out, display 140ms allow-discrete, overlay 140ms allow-discrete;
  }
  :root[data-lab~="terms"] .dclab-terms-pop:popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    :root[data-lab~="terms"] .dclab-terms-pop:popover-open { opacity: 0; translate: 0 4px; }
  }
}

/* ---------- phones: a bottom sheet ---------- */
@media (max-width: 479px) {
  :root[data-lab~="terms"] .dclab-terms-pop,
  :root[data-lab~="terms"] .dclab-terms-pop:not([data-pos="js"]),
  :root[data-lab~="terms"] .dclab-terms-pop[data-at="hero"]:not([data-pos="js"]),
  :root[data-lab~="terms"] .dclab-terms-pop[data-pos="js"] {
    position: fixed;
    position-area: none;
    inset: auto 12px 12px 12px;
    margin: 0;
    width: auto;
    max-width: none;
    padding: 18px 20px 20px;
    border-radius: 14px;
    font-size: 1rem;
    box-shadow: 0 -2px 0 rgba(10, 13, 49, .02), 0 18px 60px rgba(10, 13, 49, .32);
  }
  :root[data-lab~="terms"] .dclab-terms-body { padding-right: 30px; }
  :root[data-lab~="terms"] .dclab-terms-x {
    all: unset;
    position: absolute; top: 8px; right: 8px;
    display: grid; place-items: center;
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; color: #3d4260;
  }
  :root[data-lab~="terms"] .dclab-terms-x svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
  :root[data-lab~="terms"] .dclab-terms-x:focus-visible { outline: 2px solid #010ed0; outline-offset: 0; }
  /* no dim behind the sheet: it isn't modal, so a tap outside does just what it does on desktop */
  :root[data-lab~="terms"] .dclab-terms-seg button { padding: 10px 13px; font-size: .86rem; }
}
@media (max-width: 479px) and (prefers-reduced-motion: no-preference) {
  :root[data-lab~="terms"] .dclab-terms-pop { translate: 0 14px; }
  @starting-style {
    :root[data-lab~="terms"] .dclab-terms-pop:popover-open { opacity: 0; translate: 0 14px; }
  }
}

/* lab-who-picks.css */
/* Design Lab: "Who picks up" (Round 2, refined in Round 3; staging only).
   Every rule is scoped to the who-picks token; the nodes it styles only exist while the token is on. */

:root[data-lab~="who-picks"] {
  --wp-ultra: #010ed0;
  --wp-navy: #0a0d31;
  --wp-line: #dde1eb;
  --wp-muted: #5f6589; /* 5.3:1 on About's #f8f9fc, with margin for the background ideas */
  --wp-edge: #c3c8ee; /* the frame's hairline, so the leech cut reads on light backgrounds too */
}

/* ---------- Shared: the choice buttons ---------- */
:root[data-lab~="who-picks"] .dclab-who-picks-choice {
  min-height: 44px; margin: 0; padding: 10px 14px;
  font: 600 .9rem/1.25 Inter, system-ui, sans-serif; letter-spacing: 0; text-align: left; color: var(--wp-navy);
  background: #fff; border: 1px solid var(--wp-line); border-radius: 8px; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
:root[data-lab~="who-picks"] .dclab-who-picks-choice:hover { border-color: #aab2ec; background: #f6f7ff; }
:root[data-lab~="who-picks"] .dclab-who-picks-choice[aria-pressed="true"] { background: var(--wp-ultra); border-color: var(--wp-ultra); color: #fff; cursor: default; }
:root[data-lab~="who-picks"] .dclab-who-picks-choice:focus { outline: none; }
:root[data-lab~="who-picks"] .dclab-who-picks-choice:focus-visible { outline: 2px solid var(--wp-ultra); outline-offset: 2px; }
:root[data-lab~="who-picks"] :is(.dclab-who-picks-sr, .dclab-who-picks-vh) {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- The portrait frame (Contact faces and About chips) ----------
   The top right corner is cut on the sail's angle. The outer span is the hairline edge,
   the inner span (inset 1px, same cut) holds the photo. The lab portraits are already framed and levelled,
   so there is no per-face transform and no tint: what you see is the photo. */
:root[data-lab~="who-picks"] .dclab-who-picks-face {
  --cut: polygon(0 0, calc(100% - 10px) 0, 100% 24px, 100% 100%, 0 100%);
  position: relative; display: block; flex: none; width: 96px; height: 120px;
  background: var(--wp-edge); clip-path: var(--cut);
}
:root[data-lab~="who-picks"] .dclab-who-picks-face-in {
  position: absolute; inset: 1px; display: block; overflow: hidden; background: #dfe3f2; clip-path: var(--cut);
}
:root[data-lab~="who-picks"] .dclab-who-picks-face img {
  display: block; width: 100%; height: 100%; max-width: none; object-fit: cover;
}
:root[data-lab~="who-picks"] .dclab-who-picks-face-sm { --cut: polygon(0 0, calc(100% - 5px) 0, 100% 11px, 100% 100%, 0 100%); width: 30px; height: 30px; }

/* ---------- Contact: the picker under "Call Us" ---------- */
:root[data-lab~="who-picks"] .dclab-who-picks {
  position: relative; margin: -4px 0 36px var(--wp-indent, 64px); /* hangs off the Call Us text column (measured in JS) */
}
:root[data-lab~="who-picks"] .dclab-who-picks > h3 {
  margin: 0 0 4px; font-size: 1.05rem; line-height: 1.25; color: var(--wp-navy);
}
:root[data-lab~="who-picks"] .dclab-who-picks-lede { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: var(--wp-muted); }
:root[data-lab~="who-picks"] .dclab-who-picks-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
:root[data-lab~="who-picks"] .dclab-who-picks .dclab-who-picks-choice { display: flex; align-items: center; }

/* All four sets share one grid cell, so the stage is always as tall as the tallest set. Switching never moves the page. */
:root[data-lab~="who-picks"] .dclab-who-picks-stage { display: grid; margin-top: 22px; }
@supports (container-type: inline-size) {
  :root[data-lab~="who-picks"] .dclab-who-picks-stage { container: dclab-wp / inline-size; }
}
:root[data-lab~="who-picks"] .dclab-who-picks-set { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; }
:root[data-lab~="who-picks"] .dclab-who-picks-set[hidden] { display: flex; visibility: hidden; }
:root[data-lab~="who-picks"] .dclab-who-picks-people {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; align-items: start;
  margin: 0; padding: 0; list-style: none;
}
:root[data-lab~="who-picks"] .dclab-who-picks-person { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; }
:root[data-lab~="who-picks"] .dclab-who-picks-person::before { content: none; }
:root[data-lab~="who-picks"] .dclab-who-picks-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* The name follows the headline face in use (Round 1 type), so the block never mixes two display faces. One line, always. */
:root[data-lab~="who-picks"] .dclab-who-picks-name {
  font-family: var(--lab-face, 'Inter Tight', system-ui, sans-serif); font-weight: 650;
  font-size: .98rem; line-height: 1.2; letter-spacing: -.005em; color: var(--wp-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* a backstop: no name can ever paint under its neighbour */
}
:root[data-lab~="who-picks"][data-lab~="type-mona"] .dclab-who-picks-name { font-stretch: 105%; }
:root[data-lab~="who-picks"] .dclab-who-picks-role { font: 400 13px/1.35 Inter, system-ui, sans-serif; color: var(--wp-muted); }
/* Wide enough for a portrait and the widest name side by side (Jhonny Gonzalez in the widest lab face):
   the face sits left, name and role hang from its top edge, so every name shares one line whatever the role does. */
@container dclab-wp (min-width: 470px) {
  :root[data-lab~="who-picks"] .dclab-who-picks-people { gap: 20px 12px; }
  :root[data-lab~="who-picks"] .dclab-who-picks-person { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 12px; }
  :root[data-lab~="who-picks"] .dclab-who-picks-who { padding-top: 6px; }
  :root[data-lab~="who-picks"] .dclab-who-picks-name { font-size: .92rem; }
  :root[data-lab~="who-picks"][data-lab~="type-mona"] .dclab-who-picks-name { font-stretch: 100%; }
}
:root[data-lab~="who-picks"] .dclab-who-picks-note {
  margin: 18px 0 0; font-size: .92rem; line-height: 1.5; color: var(--wp-navy); text-wrap: pretty;
}
/* Under the faces: the planning line, then one quiet line with the other way in, then (planning only) the two tools.
   Everything follows the content; the room the tallest set reserves falls below the block. */
:root[data-lab~="who-picks"] .dclab-who-picks-set > .dclab-who-picks-people { margin-bottom: 16px; }
:root[data-lab~="who-picks"] .dclab-who-picks-set > .dclab-who-picks-note { margin: 2px 0 4px; }
:root[data-lab~="who-picks"] .dclab-who-picks-next { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--wp-muted); }
:root[data-lab~="who-picks"] .dclab-who-picks-next a { color: var(--blue, #2b5cff); font-weight: 600; text-underline-offset: 3px; padding-block: 12px; } /* inline padding: a 44px tap area, no layout change */
:root[data-lab~="who-picks"] .dclab-who-picks-next a:hover { text-decoration: underline; }
:root[data-lab~="who-picks"] .dclab-who-picks-next a:focus-visible { outline: 2px solid var(--wp-ultra); outline-offset: 2px; border-radius: 2px; }
:root[data-lab~="who-picks"] .dclab-who-picks-ext { display: inline-block; margin: 0 1px 0 4px; vertical-align: -1px; }
:root[data-lab~="who-picks"] .dclab-who-picks-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin: 8px 0 0; font-size: .88rem; line-height: 1.4; color: var(--wp-muted);
}
:root[data-lab~="who-picks"] .dclab-who-picks-tools span { flex-basis: 100%; }
:root[data-lab~="who-picks"] .dclab-who-picks-tools a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--wp-navy); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(1, 14, 208, .35); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
:root[data-lab~="who-picks"] .dclab-who-picks-tools a:hover { text-decoration-color: var(--wp-ultra); }
:root[data-lab~="who-picks"] .dclab-who-picks-tools a:focus-visible { outline: 2px solid var(--wp-ultra); outline-offset: 2px; border-radius: 2px; }

/* Incoming faces settle in, one after another. */
@keyframes dclab-who-picks-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
:root[data-lab~="who-picks"] .dclab-who-picks-in :is(.dclab-who-picks-person, .dclab-who-picks-note, .dclab-who-picks-next, .dclab-who-picks-tools) {
  animation: dclab-who-picks-in .38s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms);
}
:root[data-lab~="who-picks"] .dclab-who-picks-in .dclab-who-picks-note { --i: 2; }
:root[data-lab~="who-picks"] .dclab-who-picks-in .dclab-who-picks-next { --i: 2; }
:root[data-lab~="who-picks"] .dclab-who-picks-in .dclab-who-picks-tools { --i: 3; }

@media (max-width: 560px) {
  :root[data-lab~="who-picks"] .dclab-who-picks { margin-left: 0; }
  :root[data-lab~="who-picks"] .dclab-who-picks-people { gap: 20px 12px; }
}
@media (max-width: 399px) {
  :root[data-lab~="who-picks"] .dclab-who-picks-choices { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* ---------- About: filter the team grid in place ---------- */
:root[data-lab~="who-picks"] .dclab-who-picks-filter { margin: -16px auto 44px; text-align: center; }
:root[data-lab~="who-picks"] .dclab-who-picks-ask { margin: 0 0 12px; font-weight: 600; font-size: .95rem; color: var(--wp-navy); }
:root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
:root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-choice { padding: 10px 16px; text-align: center; }

/* The visible result line. All five states share one grid cell, so it never changes height. */
:root[data-lab~="who-picks"] .dclab-who-picks-result { display: grid; margin-top: 12px; }
:root[data-lab~="who-picks"] .dclab-who-picks-res {
  grid-area: 1 / 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px;
  margin: 0; min-height: 44px; font-size: .9rem; line-height: 1.4; color: var(--wp-muted);
}
:root[data-lab~="who-picks"] .dclab-who-picks-res[hidden] { display: flex; visibility: hidden; }
:root[data-lab~="who-picks"] .dclab-who-picks-res-lead { margin-right: 2px; }
:root[data-lab~="who-picks"] .dclab-who-picks-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 4px 10px 4px 4px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; font: 600 .9rem/1.3 Inter, system-ui, sans-serif; color: var(--wp-navy); text-decoration: underline; text-decoration-color: rgba(1, 14, 208, .35);
  text-decoration-thickness: 1px; text-underline-offset: 3px; transition: background-color .16s ease, text-decoration-color .16s ease;
}
:root[data-lab~="who-picks"] .dclab-who-picks-chip:hover { background: #eef0ff; text-decoration-color: var(--wp-ultra); }
:root[data-lab~="who-picks"] .dclab-who-picks-chip:focus { outline: none; }
:root[data-lab~="who-picks"] .dclab-who-picks-chip:focus-visible { outline: 2px solid var(--wp-ultra); outline-offset: 1px; }
/* The number closes each result state, so a visitor who just found their person can call them. */
:root[data-lab~="who-picks"] .dclab-who-picks-same { flex-basis: 100%; margin: 6px 0 0; font-size: .9rem; line-height: 1.5; color: var(--wp-muted); }
:root[data-lab~="who-picks"] .dclab-who-picks-same a { color: var(--blue, #2b5cff); font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
:root[data-lab~="who-picks"] .dclab-who-picks-same a:hover { text-decoration: underline; }
:root[data-lab~="who-picks"] .dclab-who-picks-same a:focus-visible { outline: 2px solid var(--wp-ultra); outline-offset: 2px; border-radius: 2px; }
@media (max-width: 560px) { /* the number is the block's main phone action: give it a full tap target */
  :root[data-lab~="who-picks"] .dclab-who-picks-same a { display: inline-flex; align-items: center; min-height: 44px; }
  :root[data-lab~="who-picks"] .dclab-who-picks-same { grid-column: 1 / -1; justify-self: center; margin-top: 2px; }
}

@media (min-width: 1000px) {
  :root[data-lab~="who-picks"][data-lab~="editorial"] .dclab-who-picks-filter { margin-top: -32px; text-align: left; }
  :root[data-lab~="who-picks"][data-lab~="editorial"] .dclab-who-picks-filter :is(.dclab-who-picks-choices, .dclab-who-picks-res) { justify-content: flex-start; }
}
@media (max-width: 560px) { /* Everyone on its own row, then the same 2 x 2 as Contact */
  :root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  :root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-choice { padding: 10px 12px; }
  :root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-choice[data-need="all"] { grid-column: 1 / -1; }
  /* "Usually" on its own line, then the names two by two */
  :root[data-lab~="who-picks"] :is(.dclab-who-picks-res, .dclab-who-picks-res[hidden]) {
    display: grid; grid-template-columns: repeat(2, auto); justify-content: center; justify-items: start; align-content: start; gap: 2px 6px;
  }
  :root[data-lab~="who-picks"] .dclab-who-picks-res-lead { grid-column: 1 / -1; justify-self: center; margin: 0; }
  /* One person (the bill): one column, so the row hugs its chip instead of leaving an empty cell beside it. */
  :root[data-lab~="who-picks"] :is(.dclab-who-picks-res-1, .dclab-who-picks-res-1[hidden]) { grid-template-columns: auto; justify-items: center; }
}
@media (max-width: 339px) {
  :root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-choices { grid-template-columns: 1fr; }
}
/* Integration: whenever Round 1 sets the About team heading left (editorial at every width, or boxes or people),
   the picker under it sets left too, so heading, picker and team list share one edge on phones. */
:root[data-lab~="who-picks"]:is([data-lab~="editorial"], [data-lab~="boxes"], [data-lab~="people"]) .dclab-who-picks-filter { text-align: left; }
:root[data-lab~="who-picks"]:is([data-lab~="editorial"], [data-lab~="boxes"], [data-lab~="people"]) .dclab-who-picks-filter :is(.dclab-who-picks-choices, .dclab-who-picks-res) { justify-content: flex-start; }
@media (max-width: 560px) {
  :root[data-lab~="who-picks"]:is([data-lab~="editorial"], [data-lab~="boxes"], [data-lab~="people"]) .dclab-who-picks-filter :is(.dclab-who-picks-res, .dclab-who-picks-res[hidden]) { justify-content: start; }
  :root[data-lab~="who-picks"]:is([data-lab~="editorial"], [data-lab~="boxes"], [data-lab~="people"]) .dclab-who-picks-filter :is(.dclab-who-picks-res-lead, .dclab-who-picks-same) { justify-self: start; }
  :root[data-lab~="who-picks"]:is([data-lab~="editorial"], [data-lab~="boxes"], [data-lab~="people"]) .dclab-who-picks-filter .dclab-who-picks-res-1 { justify-items: start; }
}

/* Dimming works on the card's contents, never the card, so the page's own reveal and hover transitions stay intact.
   Dimmed text drops to the site's muted colour (4.8:1 on white), so it recedes but stays readable. */
:root[data-lab~="who-picks"] #team .team-card :is(.team-avatar, .team-name, .team-title, .team-bio) {
  transition: opacity .16s ease, filter .16s ease, color .16s ease;
}
:root[data-lab~="who-picks"] #team.dclab-who-picks-filtering .team-card.dclab-who-picks-dim .team-avatar { opacity: .3; filter: grayscale(1); }
:root[data-lab~="who-picks"] #team.dclab-who-picks-filtering .team-card.dclab-who-picks-dim :is(.team-name, .team-title, .team-bio) { color: var(--wp-muted); }
:root[data-lab~="who-picks"] #team.dclab-who-picks-filtering .team-card.dclab-who-picks-match { outline: 2px solid var(--wp-ultra); outline-offset: 4px; }
:root[data-lab~="who-picks"] #team .team-card[tabindex="-1"]:focus { outline: 2px solid var(--wp-ultra); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  :root[data-lab~="who-picks"] :is(.dclab-who-picks-choice, .dclab-who-picks-chip) { transition: none; }
  :root[data-lab~="who-picks"] .dclab-who-picks-in :is(.dclab-who-picks-person, .dclab-who-picks-note, .dclab-who-picks-next, .dclab-who-picks-tools) { animation: none; }
  :root[data-lab~="who-picks"] #team .team-card :is(.team-avatar, .team-name, .team-title, .team-bio) { transition: none; }
}

/* Windows High Contrast and other forced colours: the pressed choice keeps a visible state without colour. */
@media (forced-colors: active) {
  :root[data-lab~="who-picks"] .dclab-who-picks-choice[aria-pressed="true"] {
    border: 3px solid Highlight; outline: 2px solid Highlight; outline-offset: -6px; forced-color-adjust: none;
    background: Highlight; color: HighlightText;
  }
  :root[data-lab~="who-picks"] .dclab-who-picks-face { forced-color-adjust: none; }
  :root[data-lab~="who-picks"] #team.dclab-who-picks-filtering .team-card.dclab-who-picks-match { outline: 3px solid Highlight; }
}

/* Round 3 QA: on phones the About picker no longer reserves room for its tallest answer (about 110px of blank space
   before Leadership). Only the shown answer takes space; a tap grows it, which is a change the visitor asked for. */
@media (max-width: 600px) {
  :root[data-lab~="who-picks"] .dclab-who-picks-filter { margin-bottom: 40px; }
  :root[data-lab~="who-picks"] .dclab-who-picks-filter .dclab-who-picks-res[hidden] { display: none !important; }
}

/* lab-wind.css */
/* Design Lab, Round 2: "wind" (Wind around the sail). Every rule is scoped to the wind token.
   Nodes come from js/lab-wind.js; the plate art comes from tools/lab-wind-gen.mjs.
   Structure: .dclab-wind > .dclab-wind-field (the lines, masked at the edges) + .dclab-wind-sail (the mark,
   never masked, so no fade ever touches the logo). All three images share one box and one crop. */

/* ---------- shared: the plate ---------- */
:root[data-lab~="wind"] .dclab-wind {
  position: relative; pointer-events: none; user-select: none; -webkit-user-select: none;
  --dclab-wind-x: 62%;
}
:root[data-lab~="wind"] .dclab-wind-field { position: absolute; inset: 0; }
:root[data-lab~="wind"] .dclab-wind img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--dclab-wind-x) 50%;
}
:root[data-lab~="wind"] .dclab-wind-gust { opacity: 0; }

/* Layout changes stand down in forced colors, so that mode gets the original page back intact. */
@media not all and (forced-colors: active) {

  /* ---------- About: "Why a sail?" ---------- */
  :root[data-lab~="wind"] .dclab-wind-on > div[aria-hidden="true"]:not(.dclab-wind),
  :root[data-lab~="wind"] .dclab-wind-on img[src*="logo-mark-only"] { display: none !important; }

  :root[data-lab~="wind"] .dclab-wind-cap {
    margin: 0; font: 400 12px/1.45 Inter, system-ui, sans-serif; letter-spacing: .01em;
    color: rgba(255, 255, 255, .62);
    text-shadow: 0 0 2px #0a0e27, 0 0 8px #0a0e27; /* lifts the words off the lines they sit on */
  }

  /* side by side only where the plate is wide enough to hold the whole sail */
  @media (min-width: 1200px) {
    :root[data-lab~="wind"] .dclab-wind-on {
      /* where the text column ends: the container's left edge plus 34rem, plus a breath */
      --dclab-wind-gutter: max(24px, calc((100% - var(--max-w, 1200px)) / 2 + 24px));
      --dclab-wind-left: calc(var(--dclab-wind-gutter) + 34rem + 28px);
    }
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind {
      position: absolute; top: 0; bottom: 0; right: 0; z-index: 0; left: var(--dclab-wind-left);
    }
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind > .dclab-wind-field {
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
              mask-image: linear-gradient(90deg, transparent 0%, #000 26%);
    }
    :root[data-lab~="wind"] .dclab-wind-on > .container > .reveal {
      margin-left: 0 !important; margin-right: auto !important; text-align: left !important;
      max-width: 34rem !important; position: relative; z-index: 1;
    }
    :root[data-lab~="wind"] .dclab-wind-on > .container > .reveal > h2 {
      font-size: clamp(2.1rem, 3.3vw, 2.75rem) !important; margin-top: 6px !important;
    }
    /* bottom left of the plate, just past the fade: clear of the chat button in the bottom right corner */
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind-cap {
      position: absolute; bottom: 20px; z-index: 1; max-width: 23rem; text-align: left;
      left: calc(var(--dclab-wind-left) + (100% - var(--dclab-wind-left)) * .2);
    }
  }

  @media (max-width: 1199.98px) {
    :root[data-lab~="wind"] .dclab-wind-on { display: flex; flex-direction: column; }
    :root[data-lab~="wind"] .dclab-wind-on > .container { width: 100%; }
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind {
      order: -2; width: 100%; max-width: 760px; margin: -28px auto 6px; aspect-ratio: 900 / 560;
    }
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind > .dclab-wind-field {
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
              mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
    }
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind-cap { order: -1; margin: 0 24px 34px; text-align: center; }
  }
  /* stacked plates that stop short of the screen edges also fade at the sides, so no line ends on a hard edge */
  @media (min-width: 761px) and (max-width: 1199.98px) {
    :root[data-lab~="wind"] .dclab-wind-on > .dclab-wind > .dclab-wind-field {
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
              mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      -webkit-mask-composite: source-in; mask-composite: intersect;
    }
  }

  /* ---------- 404 ---------- */
  :root[data-lab~="wind"] .dclab-wind-404 > .hero-bg { display: none !important; }
  :root[data-lab~="wind"] .dclab-wind-404 .nf-code {
    background: none; color: #fff; -webkit-text-fill-color: #fff;
  }
  /* one headline at display size (the 404), even with the Round 1 display face on */
  :root[data-lab~="wind"] .dclab-wind-404 .nf-inner h1 {
    font-size: clamp(1.45rem, 2.3vw, 2.1rem); line-height: 1.15; text-wrap: balance;
  }
  :root[data-lab~="wind"] .dclab-wind-404 > .dclab-wind { z-index: 0; --dclab-wind-x: 70%; }
  :root[data-lab~="wind"] .dclab-wind-404 > .dclab-wind > .dclab-wind-field { opacity: .85; } /* the lines, not the mark */
  :root[data-lab~="wind"] .dclab-wind-404 .nf-inner .dclab-wind-line {
    font: 400 1rem/1.6 Inter, system-ui, sans-serif; color: #b8bdd1; margin: 22px 0 0;
  }

  /* wide screens: text on the left; the plate starts where the text column ends, so no line runs behind
     words. Its height is capped by its own width, so the sail always fits whole and never scales past ~1.3x. */
  @media (min-width: 960px) and (min-aspect-ratio: 7 / 5) {
    :root[data-lab~="wind"] .dclab-wind-404 {
      justify-content: flex-start; text-align: left; padding-left: max(24px, 8vw);
      --dclab-wind-tx: calc(max(24px, 8vw) + 30rem + 28px);
    }
    :root[data-lab~="wind"] .dclab-wind-404 .nf-inner { max-width: 30rem; }
    :root[data-lab~="wind"] .dclab-wind-404 .nf-actions { justify-content: flex-start; }
    :root[data-lab~="wind"] .dclab-wind-404 > .dclab-wind {
      position: absolute; right: 0; top: 0; bottom: 0; margin: auto 0;
      width: min(calc(100vw - var(--dclab-wind-tx)), 1080px);
      height: min(100%, 820px, calc((100vw - var(--dclab-wind-tx)) * .95));
    }
    :root[data-lab~="wind"] .dclab-wind-404 > .dclab-wind > .dclab-wind-field {
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 22%), linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
      -webkit-mask-composite: source-in; mask-composite: intersect;
    }
  }
  /* everything else: the plate is a band above the words, sized by the screen's height so the way home
     (both buttons) stays above the fold on short landscape windows and small phones */
  @media not all and (min-width: 960px) and (min-aspect-ratio: 7 / 5) {
    :root[data-lab~="wind"] .dclab-wind-404 { flex-direction: column; justify-content: center; }
    :root[data-lab~="wind"] .dclab-wind-404 > .dclab-wind {
      flex: 0 0 auto; align-self: center; margin: -16px 0 0;
      height: clamp(120px, 30vh, 448px); height: clamp(120px, 30dvh, 448px);
      width: auto; max-width: 100%; aspect-ratio: 900 / 560;
      --dclab-wind-x: 62%;
    }
    :root[data-lab~="wind"] .dclab-wind-404 > .dclab-wind > .dclab-wind-field {
      -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
              mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      -webkit-mask-composite: source-in; mask-composite: intersect;
    }
  }
}

/* ---------- the gust: one bright band crosses right to left, with the wind ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root[data-lab~="wind"] .dclab-wind-gust {
    -webkit-mask-image: linear-gradient(270deg, transparent 0 40%, #000 47%, #000 53%, transparent 60% 100%);
            mask-image: linear-gradient(270deg, transparent 0 40%, #000 47%, #000 53%, transparent 60% 100%);
    -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0% 0; mask-position: 0% 0;
  }
  :root[data-lab~="wind"] .dclab-wind-gust.dclab-wind-gusting {
    animation: dclab-wind-gust 2.2s cubic-bezier(.4, .1, .6, .9) .15s both;
  }
  :root[data-lab~="wind"] .dclab-wind-404 .dclab-wind-gust.dclab-wind-gusting { animation-delay: .45s; }
}
@keyframes dclab-wind-gust {
  0%   { opacity: 0;   -webkit-mask-position: 0% 0;   mask-position: 0% 0; }
  24%  { opacity: .55; }
  76%  { opacity: .55; }
  100% { opacity: 0;   -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}

/* ---------- forced colors: the plate is decoration, so it steps aside and the original layout returns ---------- */
@media (forced-colors: active) {
  :root[data-lab~="wind"] :is(.dclab-wind, .dclab-wind-cap) { display: none !important; }
  :root[data-lab~="wind"] .dclab-wind-404 .nf-code { -webkit-text-fill-color: CanvasText; color: CanvasText; }
}