/* ==========================================================================
dmp — design system stylesheet
Rebuilt to match the live dmpservice.ai markup exactly: Outfit + IBM Plex
Mono, deep-space/radioactive/green-mist/pearl palette, flat elevation
(1px borders only, no shadows), 80px dot-grid, 8px radius.
========================================================================== */
/* Fonts (Outfit + IBM Plex Mono) are loaded via a as the element: [data-reveal] starts at
opacity:0 and is revealed by JavaScript after hydration, so the largest
text on the page did not count as painted until its fade finished. Hero
elements now start visible and keep only the upward slide; everything
below the fold still fades in as before. */
.page-hero [data-reveal],
.mp-hero [data-reveal],
.bl-hero [data-reveal],
.ct-hero [data-reveal],
.hm-copy [data-reveal],
.author-hero[data-reveal]{ opacity:1; }
/* =============================================================================
ICONS — 21 September 2026
-----------------------------------------------------------------------------
Arrows were characters: "→" and "›". Outfit has no arrow, so every one fell
back to whatever the visitor's system offered — thin on one machine, heavy
on the next, and never the same weight as the text beside it. They are now
Lucide icons (lucide-static 1.47.0, ISC; /assets/icons/).
Drawn in CSS, not in the markup. All 542 link and button arrows on the site
are the same thing — a lone "→" in — so the span
keeps its character and is painted over with the icon as a mask filled with
currentColor. The page structure does not change, the colour, the hover
slide and the transitions that already target these spans keep working, and
a browser without mask support still shows the character.
.gly is the same treatment for the few places a component adds the span
itself: the "›" before a nested menu entry or number, and two arrows that
were bare text.
========================================================================== */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
.btn > span[aria-hidden="true"],
.btn-underline > span[aria-hidden="true"],
.cta-final-alt > span[aria-hidden="true"],
.hm-alt > span[aria-hidden="true"],
.mc-head > span[aria-hidden="true"],
.ind-go > span[aria-hidden="true"],
.gly{
display:inline-block; flex:none;
width:1em; height:1em; font-size:1.2em; line-height:1;
overflow:hidden; white-space:nowrap; text-indent:110%;
/* Centre of the box on the label's x-height midline, which is where a
real arrow glyph sits. `middle` is defined as exactly that, so it
follows whatever font the label is set in; the first pass used a fixed
offset and landed on the capital-letter midline, 1.5-2px too high
beside lowercase text. The hair of lift is for the capitals and
ascenders a sentence-case label still carries. */
vertical-align:middle; position:relative; top:-.03em;
background-color:currentColor;
-webkit-mask:var(--ico, url("/assets/icons/arrow-right.svg")) center / contain no-repeat;
mask:var(--ico, url("/assets/icons/arrow-right.svg")) center / contain no-repeat;
}
.gly--chev{ --ico:url("/assets/icons/chevron-right.svg"); font-size:1.05em; }
/* Flex parents ignore vertical-align and centre the box on the line box,
which in Outfit sits well above the x-height midline. `top`, not a
transform: several of these spans already slide on hover with one. */
.btn > span[aria-hidden="true"],
.btn-underline > span[aria-hidden="true"],
.mc-head > span[aria-hidden="true"]{ top:.075em; }
/* "2 → 1" on the homepage: between bold lining figures, so the heavier
stroke, centred on the digits rather than on lowercase. */
.gly--stat{ --ico:url("/assets/icons/arrow-right-bold.svg"); }
.sp-statchip b .gly--stat{ font-size:.84em; margin:0 .22em; top:-.1em; }
/* The module hero's demo button carries its arrow in a filled circle, so the
circle keeps the background and the icon goes on a pseudo-element. */
.hv2-btn > i[aria-hidden="true"]{ font-size:0; }
/* On the module hero the circle is lime on a lime button — invisible — so
it only pushed the arrow 22px from the label and left it riding high.
There the arrow sits beside the label like the homepage's demo button. */
.mp-hero .hv2-btn{ padding:9px 26px; min-height:56px; gap:14px; }
.mp-hero .hv2-btn > i[aria-hidden="true"]{ width:20px; height:20px; background:none; position:relative; top:1.5px; }
.mp-hero .hv2-btn > i[aria-hidden="true"]::before{ width:20px; height:20px; }
.hv2-btn > i[aria-hidden="true"]::before{
content:""; width:18px; height:18px; background-color:currentColor;
-webkit-mask:url("/assets/icons/arrow-right.svg") center / contain no-repeat;
mask:url("/assets/icons/arrow-right.svg") center / contain no-repeat;
}
/* A mask is a background, and forced-colours mode removes backgrounds. */
@media (forced-colors:active){
.btn > span[aria-hidden="true"], .btn-underline > span[aria-hidden="true"],
.cta-final-alt > span[aria-hidden="true"], .hm-alt > span[aria-hidden="true"],
.mc-head > span[aria-hidden="true"], .ind-go > span[aria-hidden="true"], .gly,
.hv2-btn > i[aria-hidden="true"]::before{ forced-color-adjust:none; background-color:CanvasText; }
}
}
/* =============================================================================
MARKERS AND MENU HOVER — 21 September 2026 (Nihad)
========================================================================== */
/* --- The mark before a mono label -------------------------------------------
It was "▸", a character in `content` that no loaded font has, so it came
from a system fallback: a different size and height on every machine. Drawn
as a triangle it was at least consistent, but at 5 by 7 pixels a triangle is
a smudge, and Nihad asked for something else. It is a short bar now, in the
accent: crisp at any size because it is axis-aligned, and the same lime line
the header and the menu use for "this one". Where the label is already in
the accent (the hero, the stat cards) the bar takes the label's colour. */
.sp-mlabel::before,
.sp-spec .sp-lb::before,
.sp-field-label::before,
.sp-ipanel .sp-lbl::before,
.sp-ipanel .sp-lm::before,
.sp-proof .sp-see::before,
#sp-home .sp-flagship::before,
.cta-final-eyebrow::before,
.hm-eyebrow::before{
content:""; display:inline-block;
width:1.5em; height:2px; border-radius:1px; margin-right:.8em;
background:var(--c-lime-deep);
/* on the capitals' midline: `middle` is the x-height midline, so lift it */
vertical-align:middle; position:relative; top:-.1em;
}
.hm-eyebrow::before, .sp-proof .sp-see::before{ background:currentColor; }
/* Small labels inside the mock screens: a shorter bar, or it crowds the card. */
.sp-spec .sp-lb::before, .sp-field-label::before,
.sp-ipanel .sp-lbl::before, .sp-ipanel .sp-lm::before{ width:1em; margin-right:.6em; }
/* This one carries a word too ("STAT", on its own line), so the bar is a
background on that line rather than the whole pseudo-element. */
.sp-scard .sp-k::before{
content:"STAT"; display:block; white-space:normal;
padding-left:2.3em;
background:linear-gradient(currentColor,currentColor) left calc(50% - .02em) / 1.5em 2px no-repeat;
}
/* --- "2 → 1" on the homepage -------------------------------------------------
A prototype bug, visible since the first build: the chip's label rule is
`.sp-statchip span`, which also catches the two counters inside , so the
"2" and the "1" rendered at the label's 10.5px beside a 23px arrow. The
other chips keep their figure as bare text in and were never affected. */
.sp-statchip b span{ font-size:inherit; letter-spacing:0; text-transform:none; }
/* --- Mega menu hover, second pass -------------------------------------------
Two things were wrong underneath, both from the prototype. The panel's links
live inside `nav.desktop`, so its rule for the top-level links —
`nav.desktop a{ padding:8px 0; border-bottom:… }`, specificity 0,1,2 — has
always beaten the side padding designed for them (0,1,0): the label sat
flush against the hover box, and both review blocks' padding fixes never
took effect. And on hover they picked up the nav's bottom border, which
follows their rounded corners and reads as a smile under the row; the inset
box-shadow added for the module tabs did the same.
Now: the panel's links are scoped out of the top-level rule, rows have room
at the sides and hug their label, the wash fades in, and the lime line is a
straight bar that grows from the left under the label, clear of the corners. */
nav.desktop .mega-caps a{ border-bottom:0; }
nav.desktop .mc-head{ padding:9px 16px; width:fit-content; max-width:100%; }
nav.desktop .mc-link{ padding:9px 16px; width:fit-content; max-width:100%; }
nav.desktop .mc-link--sub{ padding-left:28px; }
/* The nested group's heading ("› Bid evaluation") is a link like the rest and
takes the same hover. It used to carry the group's divider as its own
border-top, which a hover box would have swallowed, so the divider is its
own element now (.mc-rule, rendered by MegaMenu before the heading). */
.mc-rule{ display:block; height:1px; background:var(--c-grey-lt); margin:14px 0 8px; }
nav.desktop .mc-subhead{
padding:9px 16px; margin-top:0; border-top:0; border-radius:8px;
width:fit-content; max-width:100%;
}
.mc-subhead:hover{ background:var(--c-wash); }
.mm-btn{ padding:12px 16px; }
.mm-btn:hover, .mm-btn.is-on, .mc-head:hover, .mc-link:hover{ box-shadow:none; }
.mm-btn, .mc-head, .mc-link, .mc-subhead{
position:relative;
transition:background-color .24s var(--ease), color .24s var(--ease);
}
.mm-btn::after, .mc-head::after, .mc-link::after, .mc-subhead::after{
content:""; position:absolute; left:16px; right:16px; bottom:5px;
height:2px; border-radius:1px; background:var(--c-lime-deep);
transform:scaleX(0); transform-origin:left center;
transition:transform .34s var(--ease-rise); pointer-events:none;
}
.mc-link--sub::after{ left:28px; }
.mm-btn:hover::after, .mm-btn.is-on::after,
.mc-head:hover::after, .mc-link:hover::after, .mc-subhead:hover::after{ transform:scaleX(1); }
/* The top-level links changed colour of their line with no transition at all. */
nav.desktop > a{ transition:border-bottom-color .24s var(--ease), color .24s var(--ease); }
@media (prefers-reduced-motion:reduce){
.mm-btn, .mc-head, .mc-link, .mc-subhead, nav.desktop > a,
.mm-btn::after, .mc-head::after, .mc-link::after, .mc-subhead::after{ transition:none; }
}
/* =============================================================================
HEADER ON A PHONE, AND THE HERO — 21 September 2026 (Nihad)
========================================================================== */
:root{ --hdr-h:81px; }
/* --- The header was 102px tall on a phone -------------------------------------
80px of bar, and 21px of nothing under it: the closed menu collapses with
grid-template-rows:0fr, but its inner box kept 20px of bottom padding and a
1px top border, and a grid row cannot shrink below its item's padding and
border. A prototype bug. The padding and the border now exist only while
the menu is open, and the bar itself is 64px where the hamburger shows. */
#dmp-mobile-nav .inner{ transition:padding-bottom 360ms var(--ease); }
#dmp-mobile-nav:not(.open) .inner{ padding-bottom:0; border-top-width:0; }
@media (max-width:1080px){
:root{ --hdr-h:65px; }
header.site .bar{ height:64px; }
}
/* --- The hamburger ------------------------------------------------------------
Its bars were 1.5px tall. Box backgrounds snap to device pixels, so a 1.5px
bar paints as 1px or as 2px depending on where it falls, and the middle one
came out thicker than its neighbours. 2px bars on whole-pixel offsets, a
little wider, and a quiet border so the icon reads before its box. */
.menubtn{ border-color:var(--c-grey-lt); gap:5px; transition:border-color .24s var(--ease); }
.menubtn:hover, .menubtn[aria-expanded="true"]{ border-color:var(--c-deep); }
.menubtn span{ width:20px; height:2px; border-radius:1px; }
.menubtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menubtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* --- The hero fills what is visible ---------------------------------------------
It was min(880px, 100dvh) tall under an 81px sticky header, with the dark
continuing into the next section: on a 1080px screen the copy sat 60px above
the middle of what looked like the hero, over 290px of nothing; on a 900px
one it ran under the fold. Now it is exactly the viewport less the header
(svh, so a phone's URL bar does not make it jump), capped for very tall
screens, and the copy is centred in what the visitor actually sees. */
.hero-mosaic{
min-height:min(1100px, calc(100vh - var(--hdr-h)));
min-height:min(1100px, calc(100svh - var(--hdr-h)));
}
.hm-copy{ padding-block:clamp(64px, min(10vw, 11vh), 140px); }
#after-hero{ scroll-margin-top:var(--hdr-h); }
/* --- "There is more below" --------------------------------------------------- */
.hm-scroll{
position:absolute; left:50%; bottom:clamp(20px,3.4vh,40px); z-index:3;
width:44px; height:44px; margin-left:-22px; border-radius:50%;
display:grid; place-items:center;
color:var(--c-ink-inv); border:1px solid rgba(255,255,255,.26);
background:rgba(18,18,18,.28); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
transition:border-color .24s var(--ease), color .24s var(--ease), background-color .24s var(--ease);
animation:hm-bob 2.6s var(--ease) infinite;
}
.hm-scroll:hover, .hm-scroll:focus-visible{ color:var(--c-radioactive); border-color:var(--c-radioactive); }
.hm-scroll:focus-visible{ outline:2px solid var(--c-radioactive); outline-offset:3px; }
.hm-scroll .gly{ --ico:url("/assets/icons/arrow-down.svg"); font-size:20px; top:0; vertical-align:top; }
@keyframes hm-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
/* Too short a window and it would sit on the caption above it. */
@media (max-height:800px){ .hm-scroll{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hm-scroll{ animation:none; } }
/* =============================================================================
OUTBOUND LINKS — 21 September 2026 (Nihad)
-----------------------------------------------------------------------------
Every link that leaves the site opens in a new tab (frontend/lib/links.ts).
A new tab should not be a surprise to someone who cannot see it open, so the
link says so to assistive technology: generated content is part of a link's
accessible name, and this is clipped to nothing on screen. No selector on
the site already used ::after on an outbound link. */
a[target="_blank"]::after{
content:" (opens in a new tab)";
position:absolute; width:1px; height:1px; margin:-1px; padding:0;
overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* =============================================================================
FOUR MODULES — 21 September 2026 (Nihad)
-----------------------------------------------------------------------------
"How it connects" lists all four modules on every module page, this page's
own included, so the numbers always run 01 to 04 and the heading's count
matches what is under it. The page's own card is marked rather than hidden. */
.bench-sec .mod-card[aria-current="page"]{
border-color:var(--c-lime-deep);
box-shadow:inset 3px 0 0 var(--c-lime-deep);
}
.bench-sec .mod-card[aria-current="page"] .tag{
background:var(--c-radioactive); border-color:var(--c-deep); color:var(--c-deep);
}
/* =============================================================================
HEROES THAT FIT THE SCREEN — 21 September 2026 (Nihad)
-----------------------------------------------------------------------------
"In some displays too big, while in some the white part is visible." The
page headings were sized from the window's width alone — 96px on anything
1500px wide — so on a 1080p laptop, where the browser leaves about 850px of
height, a module page's five- or six-line heading pushed its own button 100
to 330px under the fold. And the module hero was as tall as its content, so
on a tall display it ended early and the white section showed beneath it.
Headings now also answer to the window's height, everywhere. The module hero
(the dark one with the app screen) is exactly what is visible under the
header, like the homepage's: its breadcrumb stays at the top and the copy and
the screen are centred in the rest. On a phone the content is taller than
the screen, as it should be, and nothing here changes that. */
:root{ --h1:clamp(42px, min(6.4vw, 9.4vh), 96px); }
.page-hero--v2{
--h1:clamp(40px, min(5.4vw, 7.8vh), 88px);
padding-top:clamp(36px, 6vh, 96px); padding-bottom:clamp(32px, 5.5vh, 72px);
}
.page-hero--v2 .lede{ margin-top:clamp(14px, 2.4vh, 24px); }
@media (min-width:1081px){
.page-hero--v2{
display:flex;
min-height:calc(100vh - var(--hdr-h));
min-height:calc(100svh - var(--hdr-h));
}
.page-hero--v2 > .wrap{ display:flex; flex-direction:column; width:100%; }
.page-hero--v2 .ph-grid{ margin-block:auto; padding-block:clamp(8px, 2vh, 24px); }
}
/* =============================================================================
LEGAL LABELS — 21 September 2026 (Nihad)
The three legal entries in the footer are labels until counsel signs the
texts off (lib/navigation.ts, FOOTER_LEGAL). Quieter than a link, no pointer. */
.foot-legal-off{ color:var(--c-grey-lt); opacity:.5; cursor:default; }