/* Polish pass from the 13 Oct 2026 seven-judge review. One rule block per finding, each naming its judge.
   Loaded last on every page by concepts/polish9.py. Everything is scoped to body.p9. */
:root { --p9-ink: #0B0D0E; --p9-chalk: #F5F2EC; --p9-ember: #E16324; --p9-edge: #7F837F; --p9-ease: cubic-bezier(.16, 1, .3, 1); }

/* 1. ONE CONTENT EDGE (graphic design). At 1440 the text edge sat at 60, 80, 110, 116 and 120 px on different
      pages and sections. The home page's column wins everywhere: 1208 px wide, never closer than 44 px to the edge. */
@media (min-width: 1000px) {
  body.p9 :is(.hero-in, .de-wrap, .np-wrap, .ni-wrap, .wap-wrap, .ns-wrap, .ow-wrap, .fp-wrap, .wrap.narrow) {
    width: min(1208px, calc(100% - 88px)) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important;
  }
}

/* 2. ONE BUTTON SYSTEM (Apple-style designer). Primary and secondary actions were 45 to 57 px tall, 12 to 15 px
      type, weight 500 to 750, radius 0 or 2. Now: 48 px, 14 px, 600, radius 2, everywhere. */
body.p9 :is(header.hero .cta, .closing .button, .closing a.button, .eform button.cta, .site-header .button.nav-contact) {
  min-height: 48px !important; height: auto !important; padding-block: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important; border-radius: 2px !important; letter-spacing: 0 !important;
}
body.p9 :is(header.hero .cta, .closing .button, .eform button.cta) > span { font-size: inherit; font-weight: inherit; }

/* 3. FOOTER (colour theory). Pure white was a fourth ground, cooler and brighter than anything else on the page. */
body.p9 footer.footer { background: var(--p9-chalk); }

/* 4. CONTACT FORM (colour contrast). Field edges measured 1.72 to 1 on a fill equal to the page. Now 3.5 to 1. */
body.p9 .eform :is(input:not([type=hidden]), textarea, select) { background-color: #FFFDF8; border-color: var(--p9-edge); }

/* 5. BRANDING (Mark, 13 Oct). Credit beside every real recording; "by SOLVA" under each product name. */
body.p9 .cm-controls .p9-credit { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 12px 0 0; width: auto !important; padding: 5px 10px 5px 11px; border-radius: 2px;
  background: var(--p9-chalk); border: 1px solid rgb(11 13 14 / .16); color: var(--p9-ink); font-size: 12px; line-height: 1; white-space: nowrap; vertical-align: middle; }
body.p9 .cm-controls .p9-credit b { display: inline !important; font-weight: 650; letter-spacing: -.01em; }
body.p9 .cm-controls .p9-credit i { display: inline !important; font-style: normal; color: #535956; }
body.p9 .cm-controls .p9-wm { display: block !important; width: auto !important; height: 11px !important; min-width: 37px; aspect-ratio: 1071 / 318; flex: 0 0 auto; object-fit: contain; max-width: none; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }
body.p9 .p9-by { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgb(245 242 236 / .86); }
body.p9 .p9-wm-hero { display: block; width: auto; height: 17px; }
body.p9 .p9-lori-mark { display: inline-block; width: .82em; height: .82em; margin-right: .16em; vertical-align: -.08em; border-radius: 22%; }

/* 6. LORI ON A PHONE (awards juror). Desktop keeps the download as the main action. */
body.p9 header.hero .p9-mail-link { display: none !important; }
@media (max-width: 760px) {
  body.p9 header.hero .p9-mail-link { display: inline-flex !important; }
  body.p9 header.hero .cta.solid.p9-download { background: transparent; border: 1px solid rgb(245 242 236 / .7); color: var(--p9-chalk); }
}

/* 7. PHONE PHOTO PAGES (colour contrast). MENU measured 3.2 to 1 on pale sky and the product name 3.7. A dark
      veil now sits behind the top of the header and the top of every photograph, phone only. */
@media (max-width: 760px) {
  body.p9 .site-header { background: linear-gradient(180deg, rgb(6 8 9 / .86), rgb(6 8 9 / .62) 62%, rgb(6 8 9 / 0)); }
  body.p9 header.hero.ws-photo-opening::after { content: ""; position: absolute; inset: 0 0 auto; height: 58%; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgb(6 8 9 / .74), rgb(6 8 9 / .42) 55%, rgb(6 8 9 / 0)); }
}

/* 8. ONE CAPTION, ONE QUIET CONTROL under every stylised screen (typography, Apple-style designer, colour contrast).
      The caption was 9, 11 or 14 px depending on the page; the pause control was a 10 px boxed button. */
body.p9 :is(.ar-scene, .ra-scene, .de-screen) > figcaption > span { font-size: 12px !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
body.p9 .ar-pause { min-height: 44px !important; padding: 0 2px !important; border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: inherit !important; opacity: .82;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
body.p9 .ar-pause:is(:hover, :focus-visible) { opacity: 1; }

/* 9. TWELVE PIXEL FLOOR for site copy (colour contrast, typography). */
body.p9 :is(.de-jobs a > span, .co-sheet > span, .ni-about figcaption > span, .fp-person figcaption span) { font-size: 12px !important; }

/* 10. FORTY-FOUR PIXEL TAP TARGETS on phone (Apple-style designer, awards juror). */
@media (max-width: 760px) {
  body.p9 .nh-proof > a { min-height: 44px !important; display: flex; align-items: center; }
  body.p9 .de-jobs a { min-height: 44px; }
}

/* 11. TAB ROWS ON PHONE (graphic design, Apple-style designer). Five tabs wrapped 2, 2, 1 with an orphan, and one row
       ran off the screen. Every tab row is now one line that scrolls sideways, with a fade where more is hidden. */
@media (max-width: 760px) {
  body.p9 :is(.np-tabs, .ns-tabs, .de-tabs) { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 0 4px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  body.p9 :is(.np-tabs, .ns-tabs, .de-tabs)::-webkit-scrollbar { display: none; }
  body.p9 :is(.np-tabs, .ns-tabs, .de-tabs) > [role=tab] { flex: 0 0 auto !important; width: auto !important; min-height: 48px; padding-inline: 14px !important; white-space: nowrap; scroll-snap-align: start; }
  body.p9 :is(.np-tabs, .ns-tabs, .de-tabs).p9-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  body.p9 :is(.np-tabs, .ns-tabs, .de-tabs).p9-more.p9-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
}

/* 12. ORANGE STAYS SCARCE (colour theory). The header button is an outline while an orange button in the page is on
       screen (always on phones), and selected-tab underlines take the text colour instead of the accent. */
body.p9 .site-header .button.nav-contact { transition: background-color .3s var(--p9-ease), color .3s var(--p9-ease), border-color .3s var(--p9-ease); border: 1px solid var(--p9-ember); }
body.p9 .site-header .button.nav-contact:not(:hover):not(:focus-visible) { background-color: transparent !important; color: var(--p9-chalk) !important; border-color: rgb(245 242 236 / .72) !important; }
body.p9 .site-header:has(.suite-menu[open]) .button.nav-contact { background-color: var(--p9-ember) !important; color: #0B0D0E !important; border-color: var(--p9-ember) !important; }
body.p9 [role=tab][aria-selected=true] { border-bottom-color: currentColor !important; }

/* 13. MENU BUTTON STAYS PUT (awards juror). It shrank from 188 to 60 px when it became Close, so a second click in
       the same place landed on About. */
@media (min-width: 1000px) { body.p9 .suite-menu > summary { min-width: 188px; justify-content: flex-end; text-align: right; } }

/* 14. THE OPENING HAS AN ARRIVAL (motion, awards juror). The headline and buttons were fully lit and still from the
       first frame, so the beam had nothing to find. They now start dim and come up with the beam itself (the same
       0 to 1 value that draws it), so the light visibly reaches them. No script, no extra timing. */
body.p9 .lx-hero.lx-running .hero-h { opacity: calc(.55 + .45 * var(--lx-beam-draw, 1)); }
@media (max-width: 760px) { body.p9 .lx-hero.lx-running .hero-h { opacity: calc(.78 + .22 * var(--lx-beam-draw, 1)); } }

/* 15. SOFT SUNS (motion). The daybreak disc had a hard flat top where the band cut it, and the dusk shape was a
       hard-edged sliver. Both now fade at their edges, and the dusk band is tall enough to hold a disc. */
/* Only the top arc of the disc ever shows, rising a little as the page scrolls, and it fades out at the horizon. */
body.p9.nine-home #lx-lights .nh-interlude .lx-sun-window { inset: 0 0 46% !important; -webkit-mask-image: linear-gradient(#000 0, #000 58%, transparent 100%); mask-image: linear-gradient(#000 0, #000 58%, transparent 100%); }
body.p9.nine-home #lx-lights .nh-interlude .lx-sun { transform: translate(-50%, clamp(64%, var(--lx-sun-rise, 72%), 84%)) !important; }
body.p9.nine-home #lx-lights .lx-dusk { height: 150px; }
body.p9.nine-home #lx-lights .lx-dusk-window { inset: 0 0 22%; -webkit-mask-image: linear-gradient(#000 0, #000 55%, transparent 100%); mask-image: linear-gradient(#000 0, #000 55%, transparent 100%); }
body.p9.nine-home #lx-lights .lx-dusk-sun { transform: translate(-50%, clamp(58%, var(--lx-dusk-set, 70%), 86%)) !important; }
body.p9.nine-home #lx-lights .lx-dusk-sun { width: clamp(110px, 11vw, 160px); }
@media (max-width: 760px) { body.p9.nine-home #lx-lights .lx-dusk { height: 96px; } body.p9.nine-home #lx-lights .lx-dusk-sun { width: 84px; } }

/* 16. AUTHORED SMALL INTERACTIONS (motion). Header links, the menu panel and tab changes all cut in one frame beside
       a carefully eased beam. Each now has a short move on the house curve. Skipped when motion is reduced or paused. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-solva-motion=paused]) body.p9 .site-header .desktop-nav .text-link { background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 9px) / 0 1px; transition: background-size .18s var(--p9-ease), color .18s var(--p9-ease); }
  html:not([data-solva-motion=paused]) body.p9 .site-header .desktop-nav .text-link:is(:hover, :focus-visible, [aria-current]) { background-size: 100% 1px; }
  html:not([data-solva-motion=paused]) body.p9 .site-header .suite-menu[open] > .menu-panel { animation: p9-menu .22s var(--p9-ease) both; }
  html:not([data-solva-motion=paused]) body.p9 main [role=tabpanel]:not([hidden]) { animation: p9-fade .18s ease-out both; }
}
@keyframes p9-menu { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes p9-fade { from { opacity: 0; } to { opacity: 1; } }

/* 17. TWO FRAME RECIPES (Apple-style designer, graphic design). Product frames used about nine corner radii and six
       shadows. Every real recording now sits in one of two frames: a desktop window or a phone. */
body.p9 .p9-frame .cm-stage { overflow: hidden; box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5); }
body.p9 .p9-frame.p9-desk .cm-stage { border-radius: 8px; outline: 1px solid rgb(199 203 195 / .9); outline-offset: -1px; }
body.p9 .p9-frame.p9-phone .cm-stage { border-radius: 22px; }
body.p9 .p9-frame .cm-stage :is(img, video) { border-radius: 0 !important; box-shadow: none !important; }

/* 18. THE DAY READS AS A DAY (motion, colour theory). Straight after daybreak the page went back to night for WriteUp
       and Shotgun: two dark screens on a dark ground over a dim photograph, three darks of the same value. That block
       now sits on the pale ground, so daybreak is followed by day and the dark screens read as rich colour. */
body.p9.nine-home #lx-lights .nh-floor { background: var(--p9-chalk); color: #080B0C; }
body.p9.nine-home #lx-lights .nh-floor .lx-backdrop { display: none; }
body.p9.nine-home #lx-lights .nh-floor .lx-scene { background: transparent !important; }
body.p9.nine-home #lx-lights .nh-floor :is(h2, .lx-name, .lx-label, .lx-link, .lx-row-link, .ar-pause) { color: #080B0C !important; }
body.p9.nine-home #lx-lights .nh-floor :is(.lx-copy, .lx-status, figcaption > span) { color: #535956 !important; }
body.p9.nine-home #lx-lights .nh-floor-pair > .lx-scene + section { border-left-color: rgb(11 13 14 / .16); }
body.p9.nine-home #lx-lights .nh-floor .lx-link { border-color: #080B0C; }
@media (max-width: 760px) {
  body.p9.nine-home #lx-lights .nh-floor-ready .nh-floor-tabs { border-bottom-color: rgb(11 13 14 / .28); }
  body.p9.nine-home #lx-lights .nh-floor-tabs button { color: #080B0C; }
}

/* 19. HEADLINE CRAFT (typography). The 121 px home headline was tracked so tightly that letters touched; on a phone
       it was the same size as the section headings under it. Product names were tighter still. */
body.p9 .lx-hero h1.hero-h { letter-spacing: -.035em !important; line-height: 1.04 !important; }
body.p9 header.hero .studio-product-name { letter-spacing: -.035em !important; }
body.p9 .closing p, body.p9 .se-enquiry-copy p { letter-spacing: 0 !important; }
@media (max-width: 760px) {
  body.p9 .lx-hero h1.hero-h { font-size: clamp(42px, 12.3vw, 50px) !important; }
  html body.p9.np-page.np-product header.hero h1.hero-h.hero-h { font-size: clamp(29px, 8.4vw, 33px) !important; }
  body.p9 header.hero h1.hero-h .ln, body.p9 main h2, body.p9 .closing h2 { text-wrap: balance; }
}

/* 20. ONE DARK (colour theory). "Before you start" sat on a lifted slate that was a near miss against the true dark
       of the closing block beside it. */
body.p9 .np-section.np-dark { background: #0B0D0E !important; }

/* 21. PHONE MARGIN (Apple-style designer). Text started 20 px from the edge on most pages and 22 px on the home page
       and the product pages. It is 20 px everywhere. */
@media (max-width: 760px) {
  body.p9 #lx-lights .lx-wrap, body.p9 .np-wrap { width: calc(100% - 40px) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; }
}

/* 22. NO EMPTY HALVES (graphic design). Beside a tall product screen the short text block floated in the middle of
       its column, which read as leftover space. It now starts level with the top of the screen. */
@media (min-width: 1000px) {
  body.p9 .np-proof { align-items: start !important; }
  body.p9 .np-proof > .np-copy { padding-top: 6px; }
}

/* 23. DEALERSHIPS HERO LINK ROW (colour contrast). The fourth link and its arrow sat on bright cloud (arrow 1.04 to 1,
       label 4.0 on its worst pixels). A dark veil now runs under the whole row to the right edge. */
body.p9 header.hero.dc-dealer-opening::after { content: ""; position: absolute; inset: auto 0 0; height: 36%; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, rgb(6 8 9 / .82), rgb(6 8 9 / .5) 55%, rgb(6 8 9 / 0)); }
body.p9 header.hero.dc-dealer-opening .hero-in { position: relative; z-index: 3; }

/* 24. QUESTION ROW PLUS SIGNS (colour contrast). The orange plus was 3.13 to 1 on the pale ground; it now uses the
       darker burnt orange the links on pale already use (5.7 to 1). */
body.p9 .ni-page main summary > span { color: #A73C12 !important; border-color: #A73C12 !important; }

/* ================= ROUND 3, 14 Oct 2026: what the seven judges still marked as code-only ================= */

/* 25. CONTACT FIELD EDGES, properly this time (colour contrast). Block 4 lost to an older rule, so the edge was still
       1.72 to 1 on the published page. Now 3.4 to 1 on a fill lighter than the page. */
html body.p9 main .eform :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]), select, textarea) { background: #FFFDF8 !important; border: 1px solid var(--p9-edge) !important; }

/* 26. MENU (awards juror, motion). Block 13 and the panel fade both lost to older rules: the trigger still shrank to
       60 px and the panel still cut in. The close now fades too (polish9.js holds the panel for 140 ms). */
@media (min-width: 1000px) { html body.p9 .site-header .suite-menu > summary { min-width: 188px !important; justify-content: flex-end; text-align: right; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-solva-motion=paused]) body.p9 .site-header .suite-menu[open] > .menu-panel.menu-panel { animation: p9-menu .22s var(--p9-ease) both !important; }
  html:not([data-solva-motion=paused]) body.p9 .site-header .suite-menu.p9-closing[open] > .menu-panel.menu-panel { animation: p9-menu-out .14s ease-in both !important; }
}
@keyframes p9-menu-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }

/* 27. THE SLEEPING SCREEN IS NOT A BLANK SLAB (colour theory, graphic design, awards juror, motion). Before it wakes
       the Rooftop screen now shows its own frame and layout dimly through the glass, with a pale edge. */
body.p9 .wk-glass { background: linear-gradient(180deg, rgb(27 32 34 / .78), rgb(15 19 20 / .84)); box-shadow: inset 0 0 0 1px rgb(245 242 236 / .22); }

/* 28. CAPTIONS (graphic design, Apple-style designer, typography). The name tag sits on its own line, so the caption
       never wraps beside it. */
body.p9 .cm-controls .p9-credit { display: flex !important; width: max-content !important; margin: 0 0 6px !important; }

/* 29. LORI ON A PHONE: one button, two text links (Apple-style designer). */
@media (max-width: 760px) {
  body.p9 header.hero .hero-actions:has(.p9-mail-link) { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 4px 28px !important; }
  body.p9 header.hero .hero-actions:has(.p9-mail-link) > .p9-mail-link { flex: 1 0 100%; }
  body.p9 header.hero .hero-actions:has(.p9-mail-link) > a:not(.p9-mail-link) { flex: 0 0 auto; width: auto !important; min-height: 44px !important; padding: 0 !important; border: 0 !important; background: none !important;
    color: var(--p9-chalk) !important; font-weight: 500 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
}

/* 30. PHONE RECORDINGS ALL TAKE THE PHONE FRAME (Apple-style designer). On a narrow screen the desktop frames swap to
       a phone-shaped recording but kept the 8 px window corner. */
@media (max-width: 600px) { body.p9 .p9-frame .cm-stage[data-cm-phone] { border-radius: 22px !important; outline: 0 !important; } }
@media (max-width: 700px) { body.p9 .p9-frame .cm-stage.cm-mobile-700[data-cm-phone] { border-radius: 22px !important; outline: 0 !important; } }

/* 31. LAST HEADINGS OFF THE EDGE (graphic design, Apple-style designer). */
@media (min-width: 1000px) {
  body.p9.nine-home #lx-lights .nh-floor-pair { width: min(1208px, calc(100% - 88px)) !important; margin-inline: auto !important; }
  body.p9.nine-home #lx-lights .nh-floor-pair > .lx-scene:first-child .lx-wrap { margin-left: 0 !important; width: calc(100% - 32px) !important; }
  body.p9 .wi-handover .chapter-grid > .wrap { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  body.p9 #original-apps.fp-originals { padding-inline: 0 !important; }
}

/* 32. ONE DARK, EVERYWHERE (colour theory). The lifted slate survived on Work, Small business and Dealerships. */
body.p9 :is(.ni-section.ni-dark, .de-section.de-products) { background: #0B0D0E !important; }

/* 33. EMBER ONLY ON ACTIONS (colour theory, colour contrast). Tab underlines, question plus signs and hero link
       arrows were still orange. They take the text colour. */
body.p9 [role=tab][aria-selected=true]::after { background: currentColor !important; }
body.p9 header.hero .de-jobs a > b { color: var(--p9-chalk) !important; }

/* 34. SITE PAUSE REACHES THE INNER-PAGE HERO LIGHT (motion). */
html[data-solva-motion=paused] body.p9 .sl2-ray { animation-duration: 0s !important; animation-delay: 0s !important; }
body.p9 .ar-pause:disabled { visibility: hidden; }

/* 35. TWO WEIGHTS, NOT ONE (typography). Every heading was 500. Headlines are now regular and product names
       semibold, so a name reads as a name and a sentence as a sentence. */
body.p9 :is(header.hero h1, main h1, main h2, .closing h2) { font-weight: 400 !important; }
body.p9 :is(header.hero .studio-product-name, #lx-lights .lx-name, .de-section-top h2) { font-weight: 600 !important; }

/* 36. NO EMPTY HALVES on Work, Small business and Construction (graphic design). */
@media (min-width: 1000px) { body.p9 .ni-proof-grid { align-items: start !important; } }

/* 37. STYLISED SCREENS SIT WARM ON THE WARM GROUND (colour theory). The Construction canvas was a cool grey that
       made the chalk beside it look yellowed. */
body.p9 .cd-scene .ar-canvas { background: #ECE8DF !important; }

/* 38. CONTACT: "Common questions." stays on one line (typography). */
@media (min-width: 1000px) { body.p9 #faq > .wrap { grid-template-columns: minmax(440px, 1fr) minmax(0, 2fr) !important; } }

/* 39. PHONE HEADLINES BREAK WHERE THE SENTENCE BREAKS (typography, Apple-style designer, graphic design). Inner-page
       headlines were 42 px on a 350 px column, so "From spoken thought" and "Operations software" each split in two. */
@media (max-width: 760px) {
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):not(.lx-hero) h1.hero-h.hero-h { font-size: 36px !important; line-height: 1.08 !important; }
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):not(.lx-hero) h1.hero-h.hero-h .ln { text-wrap: balance; }
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h .studio-product-name > span { font-size: 28px !important; }
  html body.p9.page-rooftop :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h.hero-h, html body.p9.np-contact :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h.hero-h, html body.p9.page-inner-d :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h.long { font-size: 32px !important; }
}
@media (min-width: 1000px) { html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h .studio-product-name > span { font-size: 56px !important; } }

/* 40. LAST SITE COPY UNDER 12 PX (colour contrast, typography). */
body.p9 :is(#p9-a, .sv-seye, .sv-sbar span, .de-product-status):is(#p9-b, .sv-seye, .sv-sbar span, .de-product-status):is(#p9-c, .sv-seye, .sv-sbar span, .de-product-status) { font-size: 12px !important; }

/* 41. THE DEALERSHIP REPORTING HEADING KEEPS ITS TWO LINES (typography). */
@media (min-width: 1100px) {
  body.p9 .de-proof-grid { grid-template-columns: minmax(500px, .8fr) minmax(0, 1.2fr) !important; }
}

/* 42. QUESTION PLUS SIGNS TAKE THE TEXT COLOUR (colour theory, colour contrast: 3.13 to 1 on Work). */
body.p9 :is(.ni-faq, .de-questions, .faq-section, #questions, #faq) details > summary > span[aria-hidden] { color: #0B0D0E !important; border-color: #0B0D0E !important; }

/* 43. THE OPEN PHONE MENU KEEPS ONE FILLED ACTION (awards juror). */
body.p9 .site-header .menu-panel a.button { background-color: var(--p9-ember) !important; color: #0B0D0E !important; border-color: var(--p9-ember) !important; min-height: 48px; font-size: 14px !important; font-weight: 600 !important; border-radius: 2px !important; }

/* 44. PHONE MARGIN, THE LAST BLOCKS AT 22 PX (Apple-style designer). */
@media (max-width: 760px) {
  body.p9 .lx-hero .lx-hero-copy > .sub { margin-left: -2px !important; }
  body.p9 #original-apps.fp-originals { padding-inline: 20px !important; }
  body.p9 #original-apps.fp-originals .fp-wrap { margin-inline: 0 !important; width: auto !important; }
}

/* 45. THE PHONE MENU FITS ONE SCREEN (graphic design, Apple-style designer). The last row (Our work, About, Guides)
       was cut off behind the button bar and read as an empty ruled row. Rows are a little tighter; every target is
       still 44 px or more. */
@media (max-width: 760px) {
  body.p9 .site-header .menu-panel .menu-group > summary { min-height: 52px !important; padding-block: 0 !important; }
  body.p9 .site-header .menu-panel .menu-group[open] > div { padding-block: 6px 10px !important; }
  body.p9 .site-header .menu-panel .menu-group[open] > div > a { min-height: 44px !important; padding-block: 0 !important; }
  body.p9 .site-header .menu-panel .menu-company { padding-top: 4px !important; margin-top: 0 !important; border-top: 0 !important; }
  body.p9 header.hero .hero-actions:has(.p9-mail-link) > a:not(.p9-mail-link) { justify-content: flex-start !important; text-align: left; }
}

/* 46. A HEADING NEVER TOUCHES THE PARAGRAPH UNDER IT (graphic design). */
body.p9 .ni-proof-copy > h2 + p { margin-top: 20px !important; }

/* ================= After round 3: the small faults the judges still found, 14 Oct 2026 ================= */

/* 47. STATEMENT HEADINGS ALL TAKE THE REGULAR WEIGHT (typography). The third-level statements on Dealerships and Lori
       were still 500, so on a phone they read louder than the page headline. */
body.p9 main :is(.de-proof-copy, .de-wall-copy, .de-product-copy, .de-support-copy, .np-copy, [role=tabpanel], .ni-proof-copy, .ns-project-copy, .co-bp) h3 { font-weight: 400 !important; }

/* 48. THE OPEN MENU HAS ONE ORANGE (colour theory, graphic design). Close takes the text colour. */
body.p9 .site-header .suite-menu[open] > summary { color: var(--p9-chalk) !important; }

/* 49. "Customer follow-up" stays whole on a phone (typography, Apple-style designer). */
@media (max-width: 760px) { body.p9 header.hero .de-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 16px !important; } body.p9 header.hero .de-jobs a { min-width: 0; } body.p9 header.hero .de-jobs a > b { margin-left: 12px; } }

/* ================= ROUND 4, 14 Oct 2026 (Mark: "fix the ones you found and not fixed and bring the site to 9") ================= */

/* 50. A SECOND VOICE FOR HEADLINES (typography; Mark approved 14 Oct, "unique, fits our style, not AI slop").
       Newsreader, chosen first by the typography, graphic design and Apple-style judges out of six candidates: it has
       true optical sizes, and it is already the heading face inside Lori, so site and product share a voice.
       Headline SENTENCES only. Product names, eyebrows, navigation, buttons, tabs, question rows, captions, body
       copy and everything inside product screens stay Manrope. No italics. Nothing under 28 px. */
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
body.p9 :is(
  header.hero h1.hero-h, .lx-hero h1.hero-h,
  main h2, .closing h2,
  main :is(.de-proof-copy, .de-wall-copy, .de-product-copy, .de-support-copy, .np-copy, [role=tabpanel], .ni-proof-copy, .ns-project-copy, .co-bp) > h3
) { font-family: "Newsreader", Georgia, "Times New Roman", serif !important; font-weight: 400 !important; font-optical-sizing: auto; letter-spacing: -.015em !important; line-height: 1.08 !important; font-synthesis: none; }
body.p9 :is(.lx-hero h1.hero-h, header.hero h1.hero-h) { letter-spacing: -.025em !important; line-height: 1 !important; }
/* What stays in Manrope: names, small headings, anything inside a screen or a question row. */
body.p9 :is(
  header.hero h1 .studio-product-name, header.hero h1 .studio-product-name *,
  main h2 .lx-name, .de-section-top h2, .de-section-top h2 *, .co-who h2, .co-who h2 *,
  .nh-way-head h2, .side-card h2, .mail h2, main details h2, main details h3, .de-product-title h2, .de-product-title h2 *, h2.sv-qh, .page-inner h2,
  .ni-original-grid .ni-proof-copy > h3, .ni-original-grid .ni-proof-copy > h3 *,
  :is(.ar-scene, .ra-scene, .de-screen, .cm-stage, .ap-scene) :is(h2, h3)
) { font-family: Manrope, sans-serif !important; }
body.p9 :is(header.hero h1 .studio-product-name, .de-section-top h2, .co-who h2) { letter-spacing: -.035em !important; }
body.p9 :is(.nh-way-head h2, .side-card h2, .mail h2, .de-product-title h2, h2.sv-qh, .page-inner h2) { font-weight: 500 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; }
@media (max-width: 760px) {
  body.p9 :is(.lx-hero h1.hero-h, header.hero h1.hero-h) { letter-spacing: -.015em !important; line-height: 1.06 !important; }
  body.p9 :is(main h2, .closing h2) { letter-spacing: -.01em !important; line-height: 1.1 !important; }
}

/* 51. SITE PAUSE REACHES THE INNER-PAGE HERO LIGHT, properly (motion). Block 34 lost to an older rule, and the pause
       preference was only read at the end of the page. polish9.py now sets it in the head, before first paint. */
html[data-solva-motion=paused] body.p9 :is(#p9-a, .sl2-ray):is(#p9-b, .sl2-ray):is(#p9-c, .sl2-ray),
html[data-solva-motion=paused] body.p9 :is(#p9-a, .sl2-ray):is(#p9-b, .sl2-ray):is(#p9-c, .sl2-ray)::before { animation: none !important; }

/* 52. WEBSITE PICTURES TAKE THE WINDOW FRAME (Apple-style designer). Work used a 3 px corner and its own shadow,
       Website design a square corner. Both now use the one window recipe from block 17. */
body.p9 :is(.ni-screen-image, .wi-site-image) { display: block; overflow: hidden; border-radius: 8px !important; outline: 1px solid rgb(199 203 195 / .9); outline-offset: -1px; box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5) !important; }
body.p9 :is(.ni-screen-image, .wi-site-image) img { border-radius: 0 !important; box-shadow: none !important; display: block; }
body.p9 figure.wi-site { box-shadow: none !important; }

/* 53. FOUNDER NAMES SET ONE WAY (typography). Mixed case on the home page, tracked capitals elsewhere. */
body.p9 .fp-person figcaption b { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; font-weight: 600 !important; }

/* 54. THE DAY HOLDS FROM DAYBREAK TO DUSK (awards juror, motion). AI went back to night clouds and Steady to black
       between two pale sections. Both now sit on the day ground; the screens keep their own colours. */
body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) { background: var(--p9-chalk) !important; color: #080B0C; }
body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) > .lx-backdrop { display: none !important; }
body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) :is(.lx-ground, .lx-steady-text) :is(h2, .lx-name, .lx-label, .lx-link),
body.p9.nine-home #lx-lights #lx-ai :is(.lx-row-link, .lx-link-title, .lx-row-no),
body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) :is(.ar-pause, .ai-workshop-caption button) { color: #080B0C !important; }
body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) :is(.lx-ground, .lx-steady-text) :is(.lx-copy, .lx-status, p),
body.p9.nine-home #lx-lights #lx-ai :is(.os-service-example, .ai-workshop-steps, .ai-workshop-steps span),
body.p9.nine-home #lx-lights #lx-steady > .lx-wrap > figure > figcaption > span { color: #535956 !important; }
body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) .lx-link { border-color: #080B0C !important; }
body.p9.nine-home #lx-lights #lx-ai .lx-row-link { border-top-color: rgb(11 13 14 / .2) !important; }
body.p9.nine-home #lx-lights #lx-ai .lx-row-link:last-child { border-bottom-color: rgb(11 13 14 / .2) !important; }
body.p9.nine-home #lx-lights #lx-ai :is(.lx-row-link, .lx-row-no)::before { background-color: #080B0C !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop-caption button { border-color: rgb(11 13 14 / .4) !important; background: transparent !important; }

/* 55. A LEAD LEVEL, AND THE PHONE HEADLINE OUTRANKS ITS SUB-HEADINGS (typography). */
@media (min-width: 1000px) { body.p9 header.hero p.sub { font-size: 22px !important; line-height: 1.42 !important; letter-spacing: -.01em !important; max-width: 31em; } }
@media (max-width: 760px) {
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(#p9-d, header.hero):not(.lx-hero) h1.hero-h.hero-h { font-size: 36px !important; }
  html body.p9.page-rooftop :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(#p9-d, header.hero) h1.hero-h.hero-h,
  html body.p9.np-contact :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(#p9-d, header.hero) h1.hero-h.hero-h,
  html body.p9.page-inner-d :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(#p9-d, header.hero) h1.hero-h.long { font-size: 32px !important; }
  body.p9 main :is(#p9-a, .de-proof-copy, .de-wall-copy, .de-product-copy, .de-support-copy, .np-copy, [role=tabpanel], .ni-proof-copy, .ns-project-copy, .co-bp):is(#p9-b, .de-proof-copy, .de-wall-copy, .de-product-copy, .de-support-copy, .np-copy, [role=tabpanel], .ni-proof-copy, .ns-project-copy, .co-bp):is(#p9-c, .de-proof-copy, .de-wall-copy, .de-product-copy, .de-support-copy, .np-copy, [role=tabpanel], .ni-proof-copy, .ns-project-copy, .co-bp) > h3 { font-size: 28px !important; }
  body.p9 header.hero p.sub { font-size: 18px !important; line-height: 1.45 !important; }
}

/* 56. THE OPEN MENU OWNS THE SCREEN (typography). The tail of the headline behind it poked out under the panel. */
@media (min-width: 1000px) {
  body.p9 header.hero .hero-in, body.p9 .lx-hero .lx-hero-copy { transition: opacity .2s ease-out; }
  html.p9-menu-open body.p9 :is(header.hero .hero-in, .lx-hero .lx-hero-copy) { opacity: .08; }   /* a class, not :has() on the body: that made every style change on the page dearer */
}

/* 57. PHONE: closing headings flow as sentences, and photo openings carry no dead dark under their buttons
       (typography, Apple-style designer). The text sits low on the photograph instead of floating mid-way. */
@media (max-width: 760px) {
  body.p9 .closing h2 br { display: none; }
  body.p9 .closing h2 { text-wrap: balance; }
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):not(.lx-hero) { align-items: flex-end !important; align-content: end !important; }
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):not(.lx-hero) > .hero-in { align-self: end !important; margin-top: auto !important; margin-bottom: 0 !important; }
}

/* 58. LAST EMPTY HALVES AND STRAY INDENTS (graphic design). */
@media (min-width: 1000px) {
  body.p9 .de-wall-showcase { align-items: start !important; }
  body.p9 .ni-proof-grid.ni-original-grid.ni-phone-app { grid-template-columns: minmax(0, 440px) 300px !important; justify-content: start !important; column-gap: 136px !important; }
  body.p9 .ni-proof-grid.ni-original-grid.ni-phone-app > .ni-proof-copy { grid-column: 1; width: auto !important; margin: 0 !important; }
  body.p9 .ni-proof-grid.ni-original-grid.ni-phone-app > figure { grid-column: 2; width: 300px !important; }
}
body.p9 .wi-handover .chapter-grid > .wrap { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }

/* 59. FOCUS RING READS ON ANY PHOTOGRAPH (colour contrast: 3.84 to 1 at its lowest over the home photograph). */
body.p9 .site-header :is(a, summary, button):focus-visible { outline: 2px solid var(--p9-chalk) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgb(6 8 9 / .85) !important; }

/* 60. THE PHONE OPENING KEEPS AN ARRIVAL (motion): the headline starts lower, buttons stay at full strength. */
@media (max-width: 760px) { body.p9 .lx-hero.lx-running .hero-h { opacity: calc(.6 + .4 * var(--lx-beam-draw, 1)); } }

/* 61. SAFARI: THE OUR WORK PAGE SCROLLED SIDEWAYS (found 14 Oct in the Safari-engine check, never seen in Chrome).
       In Safari the second product in a side-by-side pair grew to about 45,000 px wide, because a grid item may not
       shrink below its content unless told it can. Every two-column item is now told. */
body.p9 :is(.ni-product-pair, .ni-proof-grid, .np-proof, .de-proof-grid, .de-product-pair, .de-wall-showcase, .nh-floor-pair, .fp-heading) > * { min-width: 0 !important; }

/* 62. LAST EMBER FURNITURE AND STRAY SIZES (colour theory, Apple-style designer). Directory arrows and the form's
       plus sign take the text colour; three computed sizes that fell between steps are put on the scale. */
body.p9 .nh-routes a::after { color: var(--p9-chalk) !important; }
body.p9 .eform summary::before { color: #0B0D0E !important; }
@media (max-width: 480px) {
  body.p9 :is(#p9-a, .lx-hero):is(#p9-b, .lx-hero):is(#p9-c, .lx-hero) h1.hero-h { font-size: 48px !important; }
  body.p9 :is(#p9-a, .sv-ask-side):is(#p9-b, .sv-ask-side):is(#p9-c, .sv-ask-side) p.lead { font-size: 18px !important; }
  body.p9 .os-next-category strong { font-size: 22px !important; }
}

/* 63. THE AI ILLUSTRATION STAYS IN THE PALETTE (colour theory). Its teal part is now warm stone (lights/ai-workshop.js),
       and its step row and progress line take the text colour on the day ground. */
body.p9.nine-home #lx-lights #lx-ai .ai-workshop-caption::before { background: rgb(11 13 14 / .16) !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop-caption::after { background: #0B0D0E !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop-steps span, body.p9.nine-home #lx-lights #lx-ai .ai-workshop-steps span::before { color: #5F6661 !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop[data-step="read"] [data-step-label="read"], body.p9.nine-home #lx-lights #lx-ai .ai-workshop[data-step="connect"] [data-step-label="connect"], body.p9.nine-home #lx-lights #lx-ai .ai-workshop[data-step="build"] [data-step-label="build"],
body.p9.nine-home #lx-lights #lx-ai .ai-workshop[data-step="read"] [data-step-label="read"]::before, body.p9.nine-home #lx-lights #lx-ai .ai-workshop[data-step="connect"] [data-step-label="connect"]::before, body.p9.nine-home #lx-lights #lx-ai .ai-workshop[data-step="build"] [data-step-label="build"]::before { color: #0B0D0E !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop-steps span::before { font-size: 12px !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop button { color: #0B0D0E !important; border-color: rgb(11 13 14 / .4) !important; }
body.p9.nine-home #lx-lights #lx-ai .ai-workshop button:hover { background: rgb(11 13 14 / .05) !important; border-color: #0B0D0E !important; }

/* ================= ROUND 5, 14 Oct 2026: round 4 verdicts, Astra 6 and Sol 6.1 ================= */

/* 64. CLOSING HEADLINES TAKE THE SERIF'S TRACKING (typography, graphic design, Apple-style, awards juror). They kept
       the old sans tracking of -.045em, so letters touched. polish9.py also restores the word space at each break. */
body.p9 :is(#p9-a, .closing):is(#p9-b, .closing):is(#p9-c, .closing) h2 { letter-spacing: -.015em !important; }
body.p9 .closing .se-enquiry-copy > p + .actions, body.p9 .closing .se-enquiry-copy > .actions { margin-top: 24px !important; }
body.p9 :is(#p9-a, .ni-original-grid):is(#p9-b, .ni-original-grid) .ni-proof-copy > h3 { font-weight: 600 !important; letter-spacing: -.035em !important; }

/* 65. A PRODUCT NAME STANDS CLEAR OF THE HEADLINE UNDER IT (graphic design, Apple-style). */
body.p9 header.hero h1.hero-h .studio-product-name { display: block; margin-bottom: .22em !important; }

/* 66. THE DAYBREAK LINE CARRIES ITS WEIGHT (typography): the line that turns night into day was 32 px. */
@media (min-width: 1000px) { body.p9 :is(#p9-a, .lx-dawn-title):is(#p9-b, .lx-dawn-title):is(#p9-c, .lx-dawn-title) h2 { font-size: 44px !important; } }

/* 67. THE DAY AGES (colour theory, graphic design, awards juror). Daybreak to dusk had become one long run of the
       same chalk, and the pale AI and Steady pictures barely separated from it. The afternoon ground deepens a step
       at a time, so the day visibly moves and each section has its own floor. Steady's status reads as a status. */
body.p9.nine-home #lx-lights #lx-ai { background: #F0ECE3 !important; }
body.p9.nine-home #lx-lights #lx-builders { background: #ECE7DC !important; }
body.p9.nine-home #lx-lights #lx-steady { background: #E7E1D4 !important; }
body.p9.nine-home #lx-lights #original-apps { background: #E2DBCD !important; }
body.p9.nine-home #lx-lights #lx-services { background: #DDD6C7 !important; }
body.p9.nine-home #lx-lights .lx-dusk { background-image: linear-gradient(#DDD6C7 0, #C2BBAD 26%, #8E897E 46%, #4E4C47 64%, #0B0D0E 88%, #0B0D0E 100%) !important; }   /* dusk begins from the late-afternoon ground, in warm greys */
body.p9.nine-home #lx-lights #lx-steady .lx-status { color: #0B0D0E !important; font-weight: 600 !important; }

/* 68. PHONE EDGES AND OPENINGS (graphic design, Apple-style, Astra 6). About and Contact opened 40 px in; the AI and
       Dealerships openings were a full screen tall, so their headline started more than half-way down. */
@media (max-width: 760px) {
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero).co-h64 > .hero-in { padding-left: 0 !important; padding-right: 0 !important; margin-left: 20px !important; margin-right: 20px !important; width: auto !important; }
  html body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(.ai-h64, .dc-dealer-opening) { min-height: 700px !important; height: auto !important; }
}

/* 69. ONE FOCUS RING ON DARK GROUND (colour contrast): chalk with a dark halo, wherever the ground is dark. */
body.p9 :is(.lx-hero, header.hero, .closing, .np-dark, .ni-dark, .de-products, .hr-band) :is(a, button, summary, [role=tab]):focus-visible { outline: 2px solid var(--p9-chalk) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgb(6 8 9 / .85) !important; }

/* 70. CONTACT SPENDS EMBER ONLY ON SEND (colour theory). Question signs and contact links take the text colour. */
body.p9 :is(.prose-section, .ni-faq, .de-questions, .faq-section) summary::after { color: #0B0D0E !important; }
body.p9.np-contact main :is(.mail a, p.consent a, .side-card a, p > a):not(.cta):not(.button) { color: #0B0D0E !important; text-decoration-color: rgb(11 13 14 / .55) !important; }

/* 71. INNER PAGES OPEN WITH THE LIGHT TOO (motion): the headline rises as the ray settles, as on the home page.
       One pause control for the site (in the footer): the stylised screens wake once and rest, so they need none. */
@media (prefers-reduced-motion: no-preference) {
  html:not([data-solva-motion=paused]) body.p9 header.hero:not(.lx-hero) h1.hero-h { animation: p9-rise 1.9s var(--p9-ease) both; }
}
@keyframes p9-rise { from { opacity: .6; } to { opacity: 1; } }
body.p9 [data-wake] .ar-pause { display: none !important; }

/* 72. EMBER IS FOR ACTIONS, EVERYWHERE (colour theory, Astra 6, Sol 6.1). The live-status square, the closing block's
       assurance marks and the AI illustration's arm (lights/ai-workshop.js) no longer use it. Eyebrow tracking eases
       from .2em so short labels stop sprawling on a phone. */
body.p9 .lx-status-dot::before { background-color: var(--p9-chalk) !important; }
body.p9.nine-home #lx-lights .nh-floor .lx-status-dot::before, body.p9.nine-home #lx-lights :is(#lx-ai, #lx-steady) .lx-status-dot::before { background-color: #0B0D0E !important; }
body.p9 .close-assure span::before { background-color: var(--p9-chalk) !important; color: var(--p9-chalk) !important; }
body.p9 :is(.p9-by, #lx-lights .lx-label, header.hero .eyebrow) { letter-spacing: .14em !important; }

/* ================= ROUND 6, 14 Oct 2026: round 5 verdicts ================= */

/* 73. A PRODUCT NAME IS SET AS A NAME ON EVERY PRODUCT PAGE (typography). "WriteUp." and "Shotgun." were 90 px serif,
       the same as the sentence under them; polish9.py now marks them like "Lori." so they take Manrope 600.
       Lori's two instruction headings read as labels, and the last two 32 px phone headlines join the rest at 36. */
body.p9 main [id=install] h3 { font-weight: 600 !important; letter-spacing: -.02em !important; }
@media (max-width: 760px) {
  html body.p9.page-rooftop :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(#p9-d, header.hero):is(#p9-e, header.hero) h1.hero-h.hero-h,
  html body.p9.np-contact :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero):is(#p9-d, header.hero):is(#p9-e, header.hero) h1.hero-h.hero-h { font-size: 36px !important; }
  html body.p9.page-rooftop header.hero h1.hero-h .ln, html body.p9.np-contact header.hero h1.hero-h .ln { text-wrap: balance; }
}

/* 74. NO EMPTY HALF BESIDE THE FIRST SCREEN on WriteUp, Shotgun and the other product pages (graphic design). */
@media (min-width: 1000px) { body.p9 .np-private { align-items: start !important; } body.p9 .np-private > .np-copy { padding-top: 6px; } }

/* 75. CAPTIONS HOLD 4.5 TO 1 WHERE A SCREEN'S SHADOW FALLS (colour contrast), and the home directory links take the
       same chalk focus ring as everything else on dark ground. */
body.p9 :is(.ar-scene, .ra-scene, .de-screen) > figcaption > span { color: #474A49 !important; }
body.p9 :is(.lx-dark, .np-dark, .ni-dark, .de-products, .closing, #lx-rooftop, .lx-hero) :is(.ar-scene, .ra-scene, .de-screen) > figcaption > span { color: #C6CBC7 !important; }
body.p9 #lx-lights :is(.nh-routes, .nh-proof, .nh-way-head) a:focus-visible { outline: 2px solid var(--p9-chalk) !important; outline-offset: 3px; box-shadow: 0 0 0 5px rgb(6 8 9 / .85) !important; }

/* 76. THE ROOFTOP WAKE STAYS SMOOTH WHILE SCROLLING (motion). When the wake met a scroll, lifting the glass repainted
       the whole screen each frame. The glass and the drawing get their own layers, so the wake only fades them. */
body.p9 [data-wake="full"] :is(.wk-glass, .ar-art) { will-change: opacity, transform; }

/* ================= ROUND 7, 14 Oct 2026: round 6 verdicts ================= */

/* 77. TWO TYPEFACES, EVERYWHERE (typography). The "Construction" wordmark inside the stylised screen was Georgia. */
body.p9 .cd-top strong { font-family: "Newsreader", Georgia, serif !important; font-weight: 500 !important; letter-spacing: -.01em !important; }

/* 78. LAST EMBER FURNITURE (colour theory): the "Installed at a Melbourne dealership" and "In pilot" status lines. */
body.p9 .np-status { color: #0B0D0E !important; border-color: #0B0D0E !important; }
body.p9 .np-status::before, body.p9 .np-status > i { background-color: #0B0D0E !important; border-color: #0B0D0E !important; }

/* 79. THE SLEEPING ROOFTOP SCREEN GLOWS WARM (colour theory: "the outlines are there but I see no cream"). */
body.p9 .ar-scene.wk-rooftop .wk-glass { background: radial-gradient(90% 50% at 50% 0, rgb(247 238 221 / .3), rgb(247 238 221 / 0) 74%), linear-gradient(180deg, rgb(247 238 221 / .09), rgb(247 238 221 / 0) 42%) !important; }

/* 80. WORK PAGE LEFTOVERS (graphic design, three rounds running; Apple-style). The "Choose a product" hint sat
       25 px in; the headline kept the old tighter tracking. Website wall screens take the window frame. */
body.p9 .os-tab-hint { margin-left: 0 !important; padding-left: 0 !important; text-indent: 0 !important; justify-self: start !important; grid-column: 1 / -1; }
body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h { letter-spacing: -.025em !important; }
@media (max-width: 760px) { body.p9 :is(#p9-a, header.hero):is(#p9-b, header.hero):is(#p9-c, header.hero) h1.hero-h { letter-spacing: -.015em !important; } }
body.p9 .de-wall .de-screen-link { display: block; overflow: hidden; border-radius: 8px !important; outline: 1px solid rgb(199 203 195 / .35); outline-offset: -1px; box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5) !important; }
body.p9 .de-wall .de-screen-link img { border-radius: 0 !important; }

/* 81. THE APP TABS HOLD THEIR CONTRAST ON THE DEEPER AFTERNOON GROUND (colour contrast: 5.42 to 1 was the lowest). */
body.p9 #original-apps [role=tab][aria-selected=false] { color: #3F4A3E !important; }

/* ================= ROUND 8, 14 Oct 2026: round 7 verdicts ================= */

/* 82. ONE PAUSE CONTROL (Apple-style designer). The AI workshop and the app rotation both stop with the site-wide
       "Pause site motion" in the footer, so their own pause buttons go. */
body.p9 :is(.ai-workshop-caption button, .ni-rotation) { display: none !important; }

/* 83. LAST SIZES AND INKS (typography, colour contrast, colour theory). */
body.p9 .os-next-category strong { font-size: 22px !important; }
body.p9.nine-home #lx-lights #lx-steady :is(.lx-steady-text, .lx-ground) p { color: #474A49 !important; }
body.p9 .ar-scene.wk-rooftop .wk-glass { background: radial-gradient(92% 54% at 50% 0, rgb(248 234 208 / .42), rgb(248 234 208 / 0) 76%), linear-gradient(180deg, rgb(248 234 208 / .12), rgb(248 234 208 / 0) 44%) !important; }

/* 84. LAST EMPTY SPACE (graphic design). The SliceCo phone sits in the middle of the remaining width, not against
       an empty right third; the home Construction section closes on the standard gap. */
@media (min-width: 1000px) {
  body.p9 .ni-proof-grid.ni-original-grid.ni-phone-app { grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important; column-gap: 72px !important; }
  body.p9 .ni-proof-grid.ni-original-grid.ni-phone-app > figure { justify-self: center !important; width: 320px !important; }
  body.p9.nine-home #lx-lights #lx-builders { padding-bottom: 24px !important; }
}

/* 85. LORI'S OPENING PHOTOGRAPH ON A PHONE (Mark, 14 Oct: birds over a palm). The palm sits to the right of the
       words instead of behind the paragraph. */
@media (max-width: 760px) { html body.p9.page-lori :is(#p9-a, header.hero):is(#p9-b, header.hero) .bleed img { object-position: 49% 55% !important; } }

/* ================= NOTES ROUND, 14 Oct 2026 night: Jordan's notes relayed by Mark ================= */

/* 86. WRITEUP AND SHOTGUN ARE ONE PAIR (Jordan: "Make the Shotgun block the same height as the WriteUp block").
       Home and the Dealerships page set the two side by side. Each column's rows (words, then the screen) are a
       subgrid of the pair, so the two screens start on one line and end on one line, and the shorter screen's frame
       grows to match (nothing is cut). The two columns are also the same width either side of the dividing line. */
@media (min-width: 761px) {
  body.p9.nine-home #lx-lights .nh-floor-pair { grid-template-rows: auto auto; }
  body.p9.nine-home #lx-lights .nh-floor-pair > .lx-scene { display: grid !important; grid-row: span 2; grid-template-rows: subgrid; }
  body.p9.nine-home #lx-lights .nh-floor-pair .lx-wrap { display: grid !important; grid-row: 1 / -1; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr) !important; row-gap: 20px; }
  body.p9.nine-home #lx-lights .nh-floor-pair .ar-scene { display: flex !important; flex-direction: column; }
  body.p9.nine-home #lx-lights .nh-floor-pair .ar-scene > .ar-canvas { flex: 1 1 auto; }
}
/* The frame itself grows: canvas, art and the screen take the height, and the shorter screen spreads its own rows
   (its side bar runs to the foot, its last row sits on the foot) instead of leaving a gap under the frame. */
@media (min-width: 701px) {
  body.p9 :is(#p9-a, .nh-floor-pair, .de-product-pair):is(#p9-b, .nh-floor-pair, .de-product-pair) :is(.ar-canvas, .ar-art) { display: flex !important; flex-direction: column; flex: 1 1 auto; }
  body.p9 :is(#p9-a, .nh-floor-pair, .de-product-pair):is(#p9-b, .nh-floor-pair, .de-product-pair) :is(.ap-shotgun, .ap-quote) { flex: 1 1 auto; }
  body.p9 :is(#p9-a, .nh-floor-pair, .de-product-pair):is(#p9-b, .nh-floor-pair, .de-product-pair) .ap-shotgun { display: flex !important; flex-direction: column; }
  body.p9 :is(#p9-a, .nh-floor-pair, .de-product-pair):is(#p9-b, .nh-floor-pair, .de-product-pair) .ap-shotgun > .ap-shot-body { flex: 1 1 auto; }
  body.p9 :is(#p9-a, .nh-floor-pair, .de-product-pair):is(#p9-b, .nh-floor-pair, .de-product-pair) .ap-shot-main { display: flex !important; flex-direction: column; justify-content: space-between; }
}
@media (min-width: 1000px) {
  body.p9.nine-home #lx-lights .nh-floor-pair > .lx-scene + .lx-scene .lx-wrap { margin-left: 32px !important; margin-right: 0 !important; width: calc(100% - 32px) !important; }
}
@media (min-width: 701px) {
  body.p9.dealer-editorial main .de-product-pair { grid-template-rows: auto auto auto; column-gap: 0 !important; }
  body.p9.dealer-editorial main .de-product-pair > .de-product { display: grid !important; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  body.p9.dealer-editorial main .de-product-pair > .de-product:first-child { padding-right: 50px; }
  body.p9.dealer-editorial main .de-product-pair .de-product-grid { grid-row: 2 / span 2; grid-template-rows: subgrid; row-gap: 12px; }
  body.p9.dealer-editorial main .de-product-pair .de-product-grid > figure { display: flex !important; flex-direction: column; }
  body.p9.dealer-editorial main .de-product-pair .de-product-grid > figure > .ar-canvas { flex: 1 1 auto; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  body.p9.dealer-editorial main .de-product-pair > .de-product:first-child { padding-right: 28px; }
}

/* 87. ONE BOX FOR THE TWO CLOSING BLOCKS ON AI SERVICES (Jordan: "the 'find the next customers' block and the 'useful
       questions' block are boxed differently. Separate them or box them the same"). Boxed the same: the page already
       speaks in ruled rows (the services list, the questions), so "Finding the next customer" takes the questions'
       grid (words in the narrow left column, ruled rows in the right) and its two links become ruled rows with the
       arrow where the questions keep their plus. The question list also closes on a rule, as the services list does. */
body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) { display: grid !important; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr) !important; column-gap: 70px !important; row-gap: 0 !important; align-items: stretch !important; align-content: start; }
body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > p { grid-column: 1; grid-row: 1 / span 3 !important; margin: 0 !important; max-width: 37ch !important; }
body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > .wap-link { grid-column: 2; justify-self: stretch !important; display: flex !important; justify-content: space-between; gap: 20px; min-height: 61px; margin: 0 !important; padding: 14px 0 !important;
  border-top: 1px solid var(--wap-line); font-size: 16px !important; font-weight: 500 !important; line-height: 1.45; text-decoration: none !important; }
body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > .wap-link:last-child { border-bottom: 1px solid var(--wap-line); }
body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > .wap-link svg { width: 22px !important; height: 20px !important; }
body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > .wap-link:hover { text-decoration: underline !important; text-decoration-color: var(--ember, #E16324) !important; text-underline-offset: 5px; }
body.p9 main > section.wap .wap-questions > .wap-detail:last-of-type { border-bottom: 1px solid var(--wap-line); }
@media (max-width: 1000px) { body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) { column-gap: 40px !important; } }
@media (max-width: 760px) {
  body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) { grid-template-columns: minmax(0, 1fr) !important; }
  body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > p { grid-row: auto !important; margin-bottom: 30px !important; }
  body.p9 main > section.wap :is(#p9-a, .wap-sales):is(#p9-b, .wap-sales) > .wap-link { grid-column: 1; }
}

/* 88. FITS A LAPTOP AT 100% ZOOM (Jordan: "On Jordan's screen, 100% and 90% zoom cut things off and 80% fits best").
       His window is about 1536 by 730 (1920 by 1080 at 125% scaling, less the browser's own bars). Measured on every
       menu page at 1280x720, 1366x768, 1440x900, 1536x730, 1536x864 and 1280x800: each block below was taller than
       the window under the 88 px header, or cut off, so its top and bottom were never on screen together. A 1440 by 900
       window (the size the design was drawn at) is not touched by any rule here except 88a. */

/* 88a. Products and Our work: the WriteUp and Shotgun screens in the dealership tabs were cut off at 380 px by a
        holder sized for an older, shorter illustration (225 px and 140 px of screen, and the caption, hidden at every
        size). The holder now shows the whole screen, and the two screens are one height, as on home. */
body.p9 :is(#p9-a, .ni-private-art):is(#p9-b, .ni-private-art):has(> .ra-scene) { max-height: none !important; overflow: visible !important; }
@media (min-width: 701px) {
  body.p9 :is(#p9-a, .ni-private-art):is(#p9-b, .ni-private-art) :is(.ar-canvas, .ar-art) { display: flex !important; flex-direction: column; flex: 1 1 auto; }
  body.p9 :is(#p9-a, .ni-private-art):is(#p9-b, .ni-private-art) :is(.ap-quote, .ap-shotgun) { flex: 1 1 auto; aspect-ratio: 739 / 558; }
  body.p9 :is(#p9-a, .ni-private-art):is(#p9-b, .ni-private-art) .ap-shotgun { display: flex !important; flex-direction: column; }
  body.p9 :is(#p9-a, .ni-private-art):is(#p9-b, .ni-private-art) .ap-shotgun > .ap-shot-body { flex: 1 1 auto; }
  body.p9 :is(#p9-a, .ni-private-art):is(#p9-b, .ni-private-art) .ap-shot-main { display: flex !important; flex-direction: column; justify-content: space-between; }
}

/* 88b. Lori's stage (home, the Lori page) was 800 to 820 px tall. On a short window it keeps 64 px above and below
        the recording, and the recording takes the width that lets the whole stage sit under the header. Where the
        window is tall enough the sizes come out as before. */
@media (min-width: 1100px) and (max-height: 880px) {
  body.p9 :is(#p9-a, .st-lori-home, .st-lori-page):is(#p9-b, .st-lori-home, .st-lori-page) { padding-top: 82px !important; padding-bottom: 64px !important; }
  body.p9 :is(#p9-a, .st-lori-home, .st-lori-page):is(#p9-b, .st-lori-home, .st-lori-page) > figure { width: min(100%, calc((100vh - 329px) / .7)) !important; margin-inline: auto !important; }
}
/* 88c. Lori's card on Products and Our work (673 px); Mailroom's stage on home and the Mailroom page (646 px). */
@media (min-width: 1000px) and (max-height: 800px) {
  body.p9 :is(#p9-a, .st-lori-card):is(#p9-b, .st-lori-card) { padding-top: 180px !important; padding-bottom: 60px !important; }
}
@media (min-width: 1180px) and (max-height: 800px) {
  body.p9 :is(#p9-a, .st-mailroom-wide):is(#p9-b, .st-mailroom-wide) { padding-top: 72px !important; }
}
/* 88d. Steady's screen (657 px on home, 728 px on the Steady page): the same rows, with less air between them and a
        shorter forecast line, on a short window. Nothing is removed and no text gets smaller. */
@media (min-width: 1000px) and (max-height: 800px) {
  body.p9 :is(#p9-a, .ap-steady):is(#p9-b, .ap-steady) .ap-steady-body { padding: 14px !important; }
  body.p9 :is(#p9-a, .ap-steady):is(#p9-b, .ap-steady) .ap-cash { padding-top: 14px !important; padding-bottom: 12px !important; }
  body.p9 :is(#p9-a, .ap-steady):is(#p9-b, .ap-steady) .ap-attention { margin-top: 14px !important; margin-bottom: 12px !important; }
  body.p9 :is(#p9-a, .ap-steady):is(#p9-b, .ap-steady) .ap-attention > div { padding-top: 8px !important; padding-bottom: 8px !important; }
  body.p9 :is(#p9-a, .ap-steady):is(#p9-b, .ap-steady) .ap-forecast { padding-top: 12px !important; padding-bottom: 10px !important; }
  body.p9 :is(#p9-a, .ap-steady):is(#p9-b, .ap-steady) .ap-forecast .wk-plotbox { height: 72px !important; margin-top: 10px !important; }
}
/* 88e. The Lori recording on AI in custom software (654 px): on a short window it takes the width whose height fits,
        and keeps its right edge on the column. */
@media (min-width: 1000px) and (max-height: 880px) {
  body.p9 :is(#p9-a, .ns-evidence.p9-desk):is(#p9-b, .ns-evidence.p9-desk) { max-width: calc((100vh - 200px) * 1.439) !important; margin-left: auto !important; }
}
/* 88f. Contact: the "What happens next" card stayed pinned while taller than the window, so its email lines were
        never on screen. It scrolls with the page when the window is too short to hold it. */
@media (max-height: 840px) { body.p9 :is(#p9-a, aside.co-card):is(#p9-b, aside.co-card) { position: static !important; } }

/* ================= ROUND 9, 14 Oct 2026 night: round 9 verdicts, general list ================= */

/* 89. STEADY'S WORDS AT #474A49 (colour contrast, two rounds). Block 83 never landed: the round 4 rule at line 357
       (":is(#lx-ai, #lx-steady) ... :is(.lx-copy, .lx-status, p)") weighs two ids and four classes, block 83 two ids
       and three. This one carries four ids. */
body.p9.nine-home #lx-lights #lx-steady:is(#p9-a, .lx-steady):is(#p9-b, .lx-steady) :is(.lx-steady-text, .lx-ground) :is(.lx-copy, .lx-status, p) { color: #474A49 !important; }

/* 90. STATUS LINES IN NEAR-BLACK (colour contrast): "Installed at ...", "In pilot", "Free download ...", "Live at ..."
       and "Demo available ..." on the pale grounds take #191D1E (15.9 to 1 on chalk). The dark-ground ones stay light. */
body.p9.nine-home #lx-lights :is(#p9-a, .lx-day):is(#p9-b, .lx-day) :is(.lx-writeup, .lx-shotgun, .lx-lori) .lx-status,
body.p9 main :is(#p9-a, .de-status, .de-stage):is(#p9-b, .de-status, .de-stage),
body.p9 main .ni-paper :is(#p9-a, .ni-status):is(#p9-b, .ni-status) { color: #191D1E !important; }

/* 91. WORK PAGE ON A PHONE: 48 PX ABOVE "NEXT IN OUR WORK" (graphic design). Every dealership panel was held at the
       tallest one's height (WriteUp's whole screen, since 88a), which left 119 px of empty paper under Rooftop. On a
       phone the panels take their own height; the tabs sit above them, so nothing above the reader moves. */
@media (max-width: 760px) {
  body.p9 .os-dealer-work :is(#p9-a, .ni-panel):is(#p9-b, .ni-panel) { min-height: 0 !important; height: auto !important; }
  body.p9 .os-dealer-work :is(#p9-a, .os-next-category):is(#p9-b, .os-next-category) { margin-top: 36px !important; }   /* + 12 px under the caption = 48 */
}

/* 92. LORI'S OPENING PHOTOGRAPH GETS ITS CARBON (colour theory: "flat mid-grey"). A carbon gradient over the bottom
       40%, under the birds (they are drawn above it) and light enough that the palm still reads. The round 9
       contrast sweep also found the header's "Tell us what you need" (2.37 to 1 at its worst pixel) and "Products &
       services" (3.54) over the bright sky at the top of the same photograph, so the same layer shades the top too.
       (The opening's ::before is its arrival curtain, so both shades live on ::after.) */
body.p9.page-lori :is(#p9-a, header.hero):is(#p9-b, header.hero) > .bleed::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(11 13 14 / .62), rgb(11 13 14 / .3) 12%, rgb(11 13 14 / 0) 24%),
              linear-gradient(to top, rgb(11 13 14 / .82), rgb(11 13 14 / .5) 20%, rgb(11 13 14 / 0) 40%); }

/* 93. ONE OPENING HEADLINE SIZE BETWEEN 1000 AND 1400 WIDE (typography): Rooftop's longer headline was set at
       5.83vw (74.6 px at 1280) while every other opening is 6.25vw (80 px). Above 1400 the type scale already pins it. */
@media (min-width: 1000px) {   /* round 10 (typography): not only below 1400; at 1536 it was 90 px against 92 */
  body.p9 main > :is(#p9-a, header.studio-long-title):is(#p9-b, header.studio-long-title) h1.hero-h { font-size: clamp(64px, 6.25vw, 92px) !important; }
}

/* ================= ROUND 10, 14 Oct 2026 night: round 10 verdicts, general ================= */

/* 95. ONE LEFT EDGE AND TWO HEADING SIZES AT LAPTOP WIDTHS (graphic design, typography). At 1280 the home opening, the
       WriteUp and Shotgun pair and "A round. A song." started 44 px in while every other home section starts 51 px in
       (the home page's own gutter); they take the home gutter. Section headings between 1000 and 1400 wide used five
       sizes (46.1 to 60.8 px); they are now 48 (section) and 56 (closing), as 1440 uses 44/56. */
@media (min-width: 1000px) {
  body.p9.nine-home :is(#p9-a, .lx-hero):is(#p9-b, .lx-hero) .hero-in,
  body.p9.nine-home #lx-lights :is(#p9-a, .nh-floor-pair):is(#p9-b, .nh-floor-pair),
  body.p9.nine-home :is(#p9-a, #original-apps):is(#p9-b, #original-apps) .fp-wrap { width: min(1208px, calc(100% - 2 * clamp(22px, 4vw, 56px))) !important; margin-inline: auto !important; }
}
@media (min-width: 1000px) and (max-width: 1399.98px) {
  body.p9:not(.page-index) main > :is(#p9-a, section):is(#p9-b, section) { --heading: 48px; --display: 56px; }
  body.p9.nine-home #lx-lights :is(#p9-a, .p9t-d56):is(#p9-b, .p9t-d56):is(h2, h3) { font-size: 48px !important; }
  body.p9 main > :is(#p9-a, section.closing):is(#p9-b, section.closing) h2 { font-size: 56px !important; }
}

/* 96. THE HOME OPENING ON THE 20 PX PHONE EDGE (graphic design): it sat 22 px in; every other line starts at 20. */
@media (max-width: 760px) {
  body.p9.nine-home :is(#p9-a, .lx-hero):is(#p9-b, .lx-hero) .hero-in { width: calc(100% - 40px) !important; margin-inline: 20px !important; }
}

/* ================= ROUND 11, 15 Oct 2026: round 11 verdicts, general ================= */

/* 98. THE 44 PX TIER IS 40 PX AT LAPTOP WIDTHS (typography): "Built around your working day.", the home WriteUp and
       Shotgun headings and Contact's "Common questions." take 40 px between 1000 and 1400 wide; the Dealerships
       product names "WriteUp." and "Shotgun." take 24 px. */
@media (min-width: 1000px) and (max-width: 1399.98px) {
  body.p9.nine-home #lx-lights :is(#p9-a, .lx-daybreak):is(#p9-b, .lx-daybreak) h2,
  body.p9 main :is(#p9-a, .p9t-d44):is(#p9-b, .p9t-d44):is(h2, h3) { font-size: 40px !important; }
  body.p9 main :is(#p9-a, .de-product-title):is(#p9-b, .de-product-title) h2 { font-size: 24px !important; }
}

/* 99. UNDER STEADY, THE STANDARD 96 PX (graphic design): from the Steady caption to the next heading ("A round. A song.")
       there were 156 px of empty ground (56 px in Steady's section, 100 px atop the next). Now 56 + 40 = 96. */
@media (min-width: 761px) {
  body.p9.nine-home #lx-lights #lx-steady + :is(#p9-a, #original-apps):is(#p9-b, #original-apps) { padding-top: 40px !important; }
}

/* ================= ROUND 12, 15 Oct 2026 ================= */

/* 101. "WHERE COULD YOUR DAY WORK BETTER?" AT 24 PX AT 1280 (typography; it was 26). */
@media (min-width: 1000px) and (max-width: 1399.98px) {
  body.p9.nine-home #lx-lights :is(#p9-a, .nh-way-head):is(#p9-b, .nh-way-head) h2 { font-size: 24px !important; }
}

/* ================= 15 Oct 2026: Mark, "are the landing page background photos too dark?" (final-jury-14, item 4) ===== */

/* 102. THE PHOTO SIDE OF THE OPENING IS GRADED UP; THE TEXT SIDE IS NOT. A grade layer (markup from polish9.py) sits
        in the photograph's own box above the photo and any living canvas drawn from it, so the photo and the canvases
        lift together and stay in register. It brightens what is behind it (blacks stay black: a multiply, not a
        wash) and is masked from no change at the text column (45% of the width) to the full lift at 72%. Lift per
        page from the judges' headroom; pages without a value are untouched. Phones are untouched (the words sit over
        the whole photograph there). */
.p9-grade { display: none; }
@media (min-width: 761px) {
  body.p9 main > header.hero > .bleed > .p9-grade { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    -webkit-backdrop-filter: brightness(var(--p9-lift, 1)); backdrop-filter: brightness(var(--p9-lift, 1));
    -webkit-mask-image: var(--p9-grade-mask, linear-gradient(90deg, transparent 45%, #000 72%)); mask-image: var(--p9-grade-mask, linear-gradient(90deg, transparent 45%, #000 72%)); }
}
/* Per page (photo-side grey before, measured under the scrims at 1440x900; the judges' targets in brackets). Shotgun
   16 to 30 [about 40: a stronger lift blows out the lamp and loses the night, so it stops here]; WriteUp 41 to 54
   [+10 to +15]; AI 57 to 66 [+10]; Rooftop: the lit ruins only, the storm sky above is masked out [about +10];
   Steady, Small business, Building & trades [+8 at most]. Home, Website design, About, Contact, CRM, Lori untouched. */
@media (min-width: 761px) {
  body.p9.page-shotgun { --p9-lift: 3.2; }
  body.p9.page-writeup { --p9-lift: 1.35; }
  body.p9.ns-ai:has(main > header.hero.has-reel) { --p9-lift: 1.3; }   /* the AI page only, not its four service pages (Mark, 15 Oct: washed out) */
  body.p9.page-steady, body.p9.page-small-business { --p9-lift: 1.15; }
  body.p9.ni-industries:has(main > header.hero.sv-hero) { --p9-lift: 1.15; }
  body.p9.page-rooftop { --p9-lift: 1.3; }
  body.p9.page-rooftop main > header.hero > .bleed > .p9-grade {
    -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 72%), linear-gradient(180deg, transparent 45%, #000 70%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 45%, #000 72%), linear-gradient(180deg, transparent 45%, #000 70%); mask-composite: intersect; }
}

/* 103. SERVICE OPENINGS FILL THE SCREEN, AND THEIR PHOTOGRAPHS SIT WITH THE OTHERS (Mark, 15 Oct: "these landing
        pages are short, the photo doesn't take up the whole landing page... they look way worse quality"). The four
        AI service pages, the custom software pages, the Workflow Blueprint and the trades page were held at 660 px
        with a lighter padding; they now open full height with the product pages' padding. Website design keeps its
        own opening. Two photographs had grey blacks (52 and 37 grey on screen, the polished openings sit at 4 to 16):
        their black point is set down so they read as deep as the rest, gently (the judges found a stronger push
        gritty); Automation gets a touch deeper blacks and Advice and setup lower highlights (judges, same day). */
body.sys-n.walkthrough-edition.nine-services.p9:not(.page-website-design) main > header.studio-opening.hero.ws-photo-opening {
  min-height: 100svh !important; padding: clamp(132px, 16vh, 190px) 0 clamp(72px, 10vh, 128px) !important; }
body.sys-n.walkthrough-edition.p9 main > header.hero.ws-photo-opening > .bleed > img[data-media-origin$="solva-svc-web-1920.webp"] {
  filter: grayscale(1) brightness(.96) contrast(1.25) !important; }
body.sys-n.walkthrough-edition.p9 main > header.hero.ws-photo-opening > .bleed > img[data-media-origin$="pick-36-1920.webp"] {
  filter: grayscale(1) brightness(1.06) contrast(1.18) !important; }

/* 104. FROM MARK AND JORDAN'S 15 OCT WALKTHROUGH. About: the two "on LinkedIn" links sit on one line whatever the
        length of each bio ("have Mark come down the same height as Jordan, so it's like a line"). Our work: the
        Mailroom and Lori demos are one size and start on one line ("Mailroom's off anchor... needs to be the same
        size"); each screen sits in the middle of its stage. */
.ni-bios > .person { display: flex; flex-direction: column; }
.ni-bios > .person > .co-bio { flex: 1; display: flex; flex-direction: column; }
.ni-bios > .person > .co-bio > :last-child { margin-top: auto; padding-top: 18px; }
@media (min-width: 1101px) {
  .ni-product-pair > .ni-product-entry { display: flex; flex-direction: column; }
  .ni-product-pair > .ni-product-entry > .st-stage.st-mailroom-work,
  .ni-product-pair > .ni-product-entry > .st-stage.st-lori-card { margin-top: auto; min-height: 694px; display: flex; flex-direction: column; justify-content: center; }
}

/* 105. MORE FROM THE 15 OCT WALKTHROUGH. "A few practical questions" sits in the middle beside its list, not at its
        top (Dealerships, Our work). The AI page's three products: the tabs and the screen they change fit on one
        screen together, so a click never leaves the screen half below the fold (Jordan: "I'm either clicking on it
        and not seeing it fully"). */
.de-question-grid, .ni-faq-grid { align-items: center; }
@media (min-width: 1101px) {
  .ns-gallery > .wap-exhibit { padding-top: 10px; }
  .ns-gallery > .wap-exhibit > figure.ns-evidence { width: 100%; max-width: 640px; justify-self: end; }
}
body.sys-n.walkthrough-edition.p9 main > header.hero.ws-photo-opening > .bleed > img[data-media-origin$="pick-345-1920.webp"] {
  filter: grayscale(1) brightness(.95) contrast(1.1) !important; }
body.sys-n.walkthrough-edition.p9 main > header.hero.ws-photo-opening > .bleed > img[data-media-origin$="pick-264-1920.webp"] {
  filter: grayscale(1) brightness(.86) !important; }

/* 106. THE TOP BAR (Mark, 15 Oct: "that black bar flashes whenever I step between the top tabs... it looks really bad").
        The bar's dark layer is on by default and the rule that clears it at the top of a page waits for the script's
        "enhanced" class, which can land after the first paint: every page opened with the black bar and faded it out
        over 250 ms. Until that class lands, the layer starts clear at the top too, so there is nothing to fade; once the
        script knows the page is scrolled it brings the bar in as before. The page you are on is marked in the brand
        orange, the same orange Products & services takes on hover (Mark, same message). */
html:not(.enhanced) body.sys-n .site-header:not(.is-solid):not(.past):not(:has(.suite-menu[open]))::before { opacity: 0; transition: none; }
body.sys-n .site-header .desktop-nav a[aria-current="page"] { color: #E16324 !important; transition-property: background-size !important; }   /* no colour fade on arrival */
body.sys-n .site-header .desktop-nav a[aria-current="page"]::after { background-color: #E16324 !important; border-color: #E16324 !important; }

/* 107. READING AND TAPPING, NO NEW WORDS (judges 15 Oct, fix 2; Mark: "only if it doesn't add heaps of text").
        Body text was already 16 to 18 px. The 12 px links, labels and status lines go to 13 px; on a phone the small
        links get a 44 px tap area; the AI page's unselected tabs step back so the chosen one reads at a glance; the
        apps tabs' marker matches the other tabs (3 px). Contrast was measured and already passes (5.7 to 17:1). */
main :is(.lx-link, .lx-label, .lx-name, .ns-eyebrow, .de-status, .ni-status, .de-product-status, .ft-eyebrow, .de-wall-note, .p9-by, .os-service-example, .opt),
main form label { font-size: 13px !important; }
@media (max-width: 760px) {
  main a.lx-link, main a.ni-link, main a.wap-link { min-height: 44px; display: inline-flex; align-items: center; }
}
main .ns-tabs > [aria-pressed="false"] { opacity: .62; transition: opacity .2s; }
main .ns-tabs > [aria-pressed="false"]:hover { opacity: .9; }
main .ni-tabs > [aria-selected="true"]::after, main .ni-tabs > [aria-pressed="true"]::after { height: 3px !important; }

/* 108. DEMOS ON A PHONE (judges 15 Oct, fix 4: "the phone inside the phone makes the demonstration unnecessarily
        small"). Each demo stage is 350 px wide on a phone but showed its screen at 222 to 248 px; the screen now takes
        the stage's full content width, so the recorded app reads at about the size it was recorded. */
@media (max-width: 760px) {
  .st-stage :is(.st-mailroom-home, .st-mailroom-page, .st-mailroom-work) > figure,
  .st-stage.st-mailroom > figure, .st-stage.st-lori > figure { width: 100% !important; max-width: none !important; }
  .st-stage.st-mailroom > figure > a, .st-stage.st-lori > figure > a,
  .st-mailroom-home > figure > a { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
  .st-stage.st-lori > figure > .lx-device { width: 100% !important; max-width: none !important; }
}

/* 109. HOME LIGHTS (Mark, 15 Oct: the Rooftop demo "super smooth"). Each backdrop photograph fades with the light on its
        own layer, so changing its opacity never repaints the photograph. */
#lx-lights .lx-backdrop { will-change: opacity; }

/* TYPE SCALE (typography). Generated by polish9.py from type_scale.cjs: do not edit by hand. */
@media (min-width: 1400px) and (max-width: 1699.98px) {body.p9 :is(#p9-a, .p9t-d12):is(#p9-b, .p9t-d12) { font-size: 12px !important; } body.p9 :is(#p9-a, .p9t-d14):is(#p9-b, .p9t-d14) { font-size: 14px !important; } body.p9 :is(#p9-a, .p9t-d16):is(#p9-b, .p9t-d16) { font-size: 16px !important; } body.p9 :is(#p9-a, .p9t-d17):is(#p9-b, .p9t-d17) { font-size: 17px !important; } body.p9 :is(#p9-a, .p9t-d18):is(#p9-b, .p9t-d18) { font-size: 18px !important; } body.p9 :is(#p9-a, .p9t-d24):is(#p9-b, .p9t-d24) { font-size: 24px !important; } body.p9 :is(#p9-a, .p9t-d32):is(#p9-b, .p9t-d32) { font-size: 32px !important; } body.p9 :is(#p9-a, .p9t-d44):is(#p9-b, .p9t-d44) { font-size: 44px !important; } body.p9 :is(#p9-a, .p9t-d56):is(#p9-b, .p9t-d56) { font-size: 56px !important; } body.p9 :is(#p9-a, .p9t-d90):is(#p9-b, .p9t-d90) { font-size: 90px !important; } body.p9 :is(#p9-a, .p9t-d121):is(#p9-b, .p9t-d121) { font-size: 121px !important; }}
@media (min-width: 1700px) {body.p9 :is(#p9-a, .p9t-w12):is(#p9-b, .p9t-w12) { font-size: 12px !important; } body.p9 :is(#p9-a, .p9t-w14):is(#p9-b, .p9t-w14) { font-size: 14px !important; } body.p9 :is(#p9-a, .p9t-w16):is(#p9-b, .p9t-w16) { font-size: 16px !important; } body.p9 :is(#p9-a, .p9t-w17):is(#p9-b, .p9t-w17) { font-size: 17px !important; } body.p9 :is(#p9-a, .p9t-w18):is(#p9-b, .p9t-w18) { font-size: 18px !important; } body.p9 :is(#p9-a, .p9t-w24):is(#p9-b, .p9t-w24) { font-size: 24px !important; } body.p9 :is(#p9-a, .p9t-w32):is(#p9-b, .p9t-w32) { font-size: 32px !important; } body.p9 :is(#p9-a, .p9t-w44):is(#p9-b, .p9t-w44) { font-size: 44px !important; } body.p9 :is(#p9-a, .p9t-w56):is(#p9-b, .p9t-w56) { font-size: 56px !important; } body.p9 :is(#p9-a, .p9t-w90):is(#p9-b, .p9t-w90) { font-size: 90px !important; } body.p9 :is(#p9-a, .p9t-w121):is(#p9-b, .p9t-w121) { font-size: 121px !important; }}
@media (max-width: 480px) {body.p9 :is(#p9-a, .p9t-m12):is(#p9-b, .p9t-m12) { font-size: 12px !important; } body.p9 :is(#p9-a, .p9t-m14):is(#p9-b, .p9t-m14) { font-size: 14px !important; } body.p9 :is(#p9-a, .p9t-m16):is(#p9-b, .p9t-m16) { font-size: 16px !important; } body.p9 :is(#p9-a, .p9t-m18):is(#p9-b, .p9t-m18) { font-size: 18px !important; } body.p9 :is(#p9-a, .p9t-m22):is(#p9-b, .p9t-m22) { font-size: 22px !important; } body.p9 :is(#p9-a, .p9t-m28):is(#p9-b, .p9t-m28) { font-size: 28px !important; } body.p9 :is(#p9-a, .p9t-m32):is(#p9-b, .p9t-m32) { font-size: 32px !important; } body.p9 :is(#p9-a, .p9t-m36):is(#p9-b, .p9t-m36) { font-size: 36px !important; } body.p9 :is(#p9-a, .p9t-m42):is(#p9-b, .p9t-m42) { font-size: 42px !important; } body.p9 :is(#p9-a, .p9t-m48):is(#p9-b, .p9t-m48) { font-size: 48px !important; }}

/* hx-meeting-1016 */
.st-lori .st-lori-trace-gold path { stroke: #4B83DC !important; }
.ni-route:empty { display: none; }