/* =========================================================================
   dx-* port adjustments.

   Hand maintained, unlike dx-core.css and the per-page files, which are
   generated from the exports and get overwritten. Everything here exists
   because the React source expressed it as an inline style or a runtime
   value, which does not survive the move to PHP partials.

   Keep this file small. A rule belongs here only if it has no home in the
   export's own stylesheet; anything else should be fixed in the generator.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tightened vertical rhythm.

   This is a deliberate departure from the approved design, asked for directly
   after reviewing the built page, then tightened again on a second pass. The
   export runs sections at clamp(64px, 8.4vw, 148px), which is 296px between
   two sections on a wide screen.

   The second pass went past section padding, which on its own was only about a
   third of the problem. On a 1920px screen the page was 18,291px, of which
   3,200px was section padding, 320px the closing band alone, and a good slice
   the repeated ruled rows: the disconnect has four at 76px of padding each,
   the shift three, the FAQ six. So the rows, the inner gaps and the card
   interiors come down here too, in proportion, rather than the bands taking
   the whole cut and leaving the inside of each section as loose as before.

   Small-screen floors are left roughly alone throughout, since the complaint
   was about desktop.

   Kept here rather than in dx-core.css so a re-export does not silently undo
   it, and so it is obvious this is ours and not the design's.
   ------------------------------------------------------------------------- */

/* Band rhythm. */
.dx .dx-sec { padding-block: clamp(36px, 4vw, 72px); }
.dx .dx-hero { padding-top: clamp(44px, 6.5vw, 104px); }
.dx .dx-close { padding-block: clamp(48px, 6vw, 108px); }
.dx .dx-sechead { padding-bottom: clamp(18px, 2vw, 30px); }
.dx .dxm-viewport { margin-top: clamp(20px, 2.4vw, 36px); }

/* Gaps between the blocks inside a section. */
.dx .dx-cost { gap: clamp(28px, 3.5vw, 56px); }
.dx .dxmet-grid { gap: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 48px); }
.dx .dx-record-kpis { gap: clamp(20px, 2.2vw, 32px); }

/* Ruled rows. These repeat enough that their padding is a real share of the
   page: four in the disconnect, three in the shift, six in the FAQ. */
.dx .dx-dis-row,
.dx .dx-ledger-row { padding-block: clamp(20px, 2vw, 28px); }
.dx .dx-faq-item summary { padding-block: clamp(14px, 1.6vw, 20px); }

/* Card interiors. */
.dx .dx-pers-card { padding: clamp(20px, 2.2vw, 30px); }
.dx .dx-slab { padding: clamp(22px, 2.4vw, 32px); }
.dx .dxmet-card { padding: clamp(20px, 2vw, 26px); }

/* -------------------------------------------------------------------------
   Headings on the site scale.

   Also a deliberate departure from the export, asked for so these pages sit
   with the rest of the site rather than running their own type scale. At
   1920px the site renders h1 at 56px and h2 at 54px; the export was giving
   49.9px and 40.9px, and two of its h2s ran away to 73.6px (the methodology
   heading) and 84px (the closing CTA).

   The clamps below are the site's own, taken from .rv-display and .rv-h2 in
   rv-core.css, so the two systems stay in step if that scale ever moves.
   Only the size is overridden; the dx tracking and leading stay, because that
   is what makes these headings look like this design rather than the old one.
   ------------------------------------------------------------------------- */

.dx .dx-h1 {
	font-size: clamp(36px, 4vw, 56px);
}

/* Measured off devrix.com/revenue-operations/, which the review named as the
   reference: 54px / 52.92px / 700 / -1.512px, i.e. line-height 0.98 and
   tracking -0.028em. dx-core ships 800 at 0.94 and -0.035em, and several
   headings were landing at four different combinations on one page. The whole
   set is pinned here so they cannot drift apart again. */
.dx .dx-h2,
.dx .dxm-title,
.dx .dxs-title,
.dx .dxm7-h,
.dx .dx-record-title,
.dx .dxj-sec .dx-h2,
.dx .dx-dis-title,
.dx .dx-close h2 {
	font-size: clamp(30px, 3.6vw, 54px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.028em;
}

/* The hero lede is the site's paragraph size, not a display size:
   devrix.com/revenue-operations/auditing/ sets 17px / 26.35px / 400. */
.dx .dx-hero .dx-lede,
.dx .pmi-hero2-lede {
	font-size: 17px;
	line-height: 1.55;
}

/* The hero strip's supporting line is style={{ fontSize: 13.5 }} in the
   export, the only inline type size in the page. */
.dx-strip-desc { font-size: 13.5px; }

/* Stage panels are swapped by dx-core.js. Without JS every panel would stack,
   so the markup ships them hidden except the default and the script manages
   `hidden` from there. */
[data-dx-stage-panel][hidden] { display: none; }

/* The rx tab panels are all in the markup so the page reads with JS off, with
   the inactive ones carrying [hidden]. Their own layout rule sets a display,
   which outranks the browser's default for [hidden], so the attribute needs a
   selector of its own. It has to carry the .rx scope as well: the design's
   rule is .rx .rx-who-panel, and the page stylesheet loads after this one, so
   an equal-specificity selector here would lose on source order. */
.rx [data-rx-method-panel][hidden],
.rx [data-rx-who-panel][hidden] { display: none; }

/* The active role tab disappears on hover.

   The design sets the active tab dark with light text, then, further down the
   stylesheet, gives every tab a light hover background without restoring the
   text colour. Both selectors carry the same specificity, so the later hover
   rule wins and leaves light text on a light fill. This keeps the active tab
   looking active while the pointer is over it. Yovo reported it; it is in the
   Lovable design too, so this is a deliberate departure rather than a porting
   fix. */
.rx .rx-who-tab.is-on:hover,
.rx .rx-who-tab.is-on:focus-visible {
	background: var(--rx-ink);
	color: var(--rx-paper);
}

.rx .rx-who-tab.is-on:hover .rx-mono,
.rx .rx-who-tab.is-on:focus-visible .rx-mono { color: var(--rx-green); }

/* The leak list's two lines are inline styles in the export, so they only
   need laying out as blocks. Their fonts used to be set here by hand: the
   block inherits JetBrains Mono, which left the leak heading mono while the
   ladder names beside it were Inter. The September dx.css fixes that at
   source with .dx-leak b and .dx-leak .dx-body, and sizes the heading to
   match "Record Created" exactly, so only the layout is left here. */
.dx-leak-t { display: block; }
.dx-leak-d { display: block; margin-top: 6px; }


/* The stack slab's eyebrow is an inline rgba in the export. */
.dx-slab-eyebrow { color: rgba(255, 255, 255, 0.5); }

/* Case panel and persona labels, all inline colours in the export. */
.dx-case-tag { color: var(--dx-gold-deep); }
.dx-case-foot { color: var(--dx-mute); }
.dx-pers-lbl { color: var(--dx-mute-2); }
.dx-pers-lbl--get { color: var(--dx-green); }

/* The FAQ head is an inline grid in the export. */
.dx-faq-head { display: grid; gap: 18px; }

/* A single testimonial runs full width instead of in the three-up grid, and
   carries a closing figure. Both are inline styles in the export. */
.dx .dx-stories--single { grid-template-columns: 1fr; }
.dx .dx-story-metrics,
.dx .pmi-cs-feat-metrics { margin-top: 22px; }

/* Web Development's stack slabs space their spec list the same way. */
.dx .wd-specs { margin-top: 18px; }

/* The deliverable card's D-0N marker. */
.dx .dxmet-card-code { color: var(--dx-mute); }

/* The methodology "related service" pill is a link, so the theme's default
   underline reaches it where the export's own reset did not, and on the gold
   hover fill that reads as muddy rather than as the design's flat black on
   gold. Yovo asked for plain black text on hover. Scoped tightly because these
   are the only two links inside .dx-main that pick the underline up. */
.dx a.dxm7-more,
.dx a.dxm7-more:hover,
.dx a.dxm7-more:focus-visible {
	color: var(--dx-ink);
	text-decoration: none;
}

/* The Gap's eyebrow already carries a 30px margin-bottom, and the new callout
   adds another 28px on top of it. Because the eyebrow is inline-flex the two
   do not collapse, so the space under "The Gap" came out at nearly 60px,
   against the 38px the rest of the page puts between an eyebrow and its
   heading. The review flagged it on both Data Normalization and Integration
   Engineering; dropping the callout's own top margin leaves the eyebrow's. */
.dx .dx-dis-callout { margin-top: 0; }

/* Web Design runs the reworked Gap with outlined numerals where the other
   pages carry a glyph. The shared row reserves 64px for the marker, which is
   the glyph's size; the numeral is set at up to 96px and would spill out of
   it, so the marker column widens on this page only. */
.dx-aw .dx-dis.aw-dark .dx-dis-row {
	grid-template-columns: clamp(64px, 7vw, 110px) minmax(0, 1fr);
}

/* Web Design's chapter rail is pinned 22px from the top in the export, where
   the page draws its own header inside the same wrapper. Here the theme's
   fixed header owns that strip, so the rail landed on top of the nav. It
   drops below the header instead, and again by the admin bar's height when a
   logged-in editor is looking at the page.

   It also sat at the header's own z-index of 50. Equal values fall back to
   DOM order, and the rail is inside .dx which comes after the header, so it
   punched through the About us dropdown. Below 50 the dropdown covers it. */
.dx.byo .byo-chapters { top: 95px; z-index: 40; }
.admin-bar .dx.byo .byo-chapters { top: 127px; }

/* Hero top spacing, every dx page.
   Measured against /revenue-operations/, the page Yovo uses as the reference:
   79px from the bottom of the header to the top of the eyebrow. The nine dx
   pages were nowhere near it and nowhere near each other, because they do not
   share a hero. Three families are in play and each had its own padding:
   .dx-hero on six pages, .pmi-hero2 on M&A Web and Web Development, .rx-hero
   on WordPress Retainers, which measured 39px, 138px and 87px to the eyebrow.

   Targeting the first section of .dx-main covers all three without naming any
   of them, so a page that later swaps its hero still lands in the same place.
   It needs to outrank `.pmi .pmi-hero2` and `.rx .rx-hero`, which are two
   classes each and load after this file, hence the :first-child. */
.dx .dx-main > section:first-child {
	padding-top: clamp(48px, 5vw, 80px);
}

/* Web Design's hero CTAs, on Yovo's instruction rather than the export's.
   The byo layer flattens everything matching [class*="btn"] into one mint
   outline pill, so the primary and secondary read identically. They go back
   to the site pattern: a solid green block with a black label, and the ghost
   the other dx pages use beside it. The hover keeps the export's behaviour,
   the label's arrow still sliding right, and follows the site rule for a
   green button on a dark band: white ground, black label.

   These have to out-specify `.dx.byo a[class*="btn"]`, which carries
   !important on every line and loads after this file. */
.dx.dx-aw.byo a.dx-btn,
.dx.dx-aw.byo button.dx-btn {
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	padding: 18px 30px !important;
	border-radius: 0 !important;
	background: var(--rv-green) !important;
	border: 1.5px solid var(--rv-green) !important;
	color: var(--rv-black) !important;
}

/* The primary keeps its green ground on hover. Flipping the whole button to
   white reads fine anywhere else on the site, but not against this page's
   ink, so Yovo asked for the spotlight below instead. The ghost beside it
   still takes the white, which is its rule further down. */
.dx.dx-aw.byo a.dx-btn:hover,
.dx.dx-aw.byo a.dx-btn:focus-visible,
.dx.dx-aw.byo button.dx-btn:hover,
.dx.dx-aw.byo button.dx-btn:focus-visible {
	background: var(--rv-green) !important;
	border-color: var(--rv-green) !important;
	color: var(--rv-black) !important;
}

/* The secondary takes the same shape as on the other eight pages: a mono
   uppercase link sitting on a hairline, no box. dx-core draws it that way for
   every dx page, but the aw and byo layers boxed it back up here, so each
   property it changed has to be named again. Only the colours differ from
   dx-core's version, because this hero is ink rather than paper; the rule's
   alpha is the one the design itself picked for this button on this ground. */
.dx.dx-aw.byo a.dx-btn--ghost,
.dx.dx-aw.byo button.dx-btn--ghost {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 0 !important;
	padding: 12px 2px !important;
	gap: 12px !important;
	color: var(--rv-white) !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-weight: 500 !important;
	font-size: 12.5px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
}

.dx.dx-aw.byo a.dx-btn--ghost:hover,
.dx.dx-aw.byo a.dx-btn--ghost:focus-visible,
.dx.dx-aw.byo button.dx-btn--ghost:hover,
.dx.dx-aw.byo button.dx-btn--ghost:focus-visible {
	background: transparent !important;
	border-bottom-color: var(--rv-green) !important;
	color: var(--rv-green) !important;
}

.dx.dx-aw.byo a.dx-btn span {
	transition: transform 0.3s var(--dx-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
}

.dx.dx-aw.byo a.dx-btn:hover span {
	transform: translateX(5px);
}

/* Web Design's hero was the one page the rule above could not bring into
   line. Its export makes the section a full-viewport flex box that centres
   its content (`min-height: calc(100vh - 68px)`, `align-items: center`), so
   the eyebrow floated 125px below the header however the padding was set,
   against 79px everywhere else. The 68px is also the export's own header
   height, not this theme's.

   Letting the hero size to its content puts it on the same footing as the
   other eight. The trade-off is that the hero no longer fills the viewport,
   which was the export's intent rather than a stated requirement.

   Two rules set this, `.dx-aw .aw-hero` and `.dx.byo .aw-hero`. The second
   ties a three-class selector and loads after this file, so all three classes
   are needed here to take it. */
.dx.dx-aw.byo .aw-hero {
	min-height: 0;
	display: block;
	align-items: initial;
}

/* The two pmi heroes sat 7px lower than the other seven, for two reasons.
   Their grid centres its columns, so the copy column rode below the top of
   the hero; align-self puts it back without moving the panel beside it,
   which is centred by design. And their copy column is a block, so the
   eyebrow stays inline-flex and picks up the line box's leading. Everywhere
   else the column is a grid, which blockifies the eyebrow and drops the
   leading, so it is set to match rather than left to the container. Both
   root classes are needed on that last selector to take `.pmi .pmi-hero3
   .dx-eyebrow`, which ties on specificity and loads later. The two pages put
   the eyebrow at different depths, one inside the copy column and one
   directly in the wrap, so the rule reaches for it anywhere in the hero
   rather than naming a parent. It is scoped to .pmi because the other seven
   already blockify it by making the column a grid. */
.dx .wd-hero-copy,
.dx .pmi-hero2-copy {
	align-self: start;
}

.dx.pmi .dx-main > section:first-child .dx-eyebrow {
	display: flex;
	width: fit-content;
}

/* Web Design tops out lower than the other eight, on Yovo's instruction.
   It is the only page carrying a meta strip above the hero copy, and the
   export pinned that 28px down because its own header sat inside the hero.
   With this theme's header above it instead, the strip landed against the
   nav and the top of the page read as having no spacing at all, even though
   the eyebrow was on the same 79px as everywhere else.

   So the strip clears the header and the copy moves down behind it. This
   deliberately breaks the shared 79px on this one page; the strip is the
   thing being aligned to, not the eyebrow. Both selectors take all three
   root classes to outrank the shared rule above and the export's own. */
.dx.dx-aw.byo .aw-hero {
	padding-top: clamp(76px, 7.9vw, 126px);
}

.dx.dx-aw.byo .aw-hero-meta {
	top: clamp(30px, 3vw, 48px);
}

/* Cursor spotlight on Web Design's primary hero CTA.
   A black disc tracks the pointer across the button and the label inverts to
   white inside it, the rest staying green on black. The inversion cannot be
   done with a blend mode, because no single blend takes green-ground/black-
   text to black-ground/white-text, so web-design.js stacks a second copy of
   the button's own children on top and clip-paths it to a circle. Cloning
   the markup rather than reprinting the text through content: attr() is what
   keeps the arrow in the same place, gap and all.

   Pointer-only: the script binds nothing on a coarse pointer, so a touch
   device never gets a disc stranded mid-button. */
a.dx-spot {
	overflow: hidden;
}

/* The overlay needs a positioned ancestor, but the button may already be one:
   the sticky CTA is fixed, and setting position here turned it relative and
   dropped it into normal flow at the top of the body. The script adds this
   only where the button computes to static. */
a.dx-spot--anchor {
	position: relative;
}

/* The overlay inherits its box from the button it sits in rather than naming
   any of it, so the same rule serves buttons with different padding: the hero
   CTA is 18px/30px with a 14px gap, the sticky one 14px/22px with 10px. An
   absolutely positioned child resolves inset against its parent's padding
   box, so inset:0 plus inherited padding lands the copy exactly on the
   original, which is what keeps the letterforms aligned where the disc's edge
   cuts through a word. */
a.dx-spot .dx-spot-lit {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	gap: inherit;
	padding: inherit;
	border-radius: inherit;
	background: var(--rv-black);
	color: var(--rv-white);
	pointer-events: none;
	transform: none !important;
	clip-path: circle(var(--dx-spot-r, 0px) at var(--dx-spot-x, 50%) var(--dx-spot-y, 50%));
	transition: clip-path 90ms linear;
}

/* Every spotlight button holds its green ground while the disc does the work.
   Two selectors, because the buttons sit in different places and each has a
   different rule to beat: the sticky CTA is outside .dx and takes its hover
   from rv-core, while the closing CTA is matched inside the page stylesheet
   by `.dx-aw [class*="-cta"]:is(a,button):hover`, which turns it gold and
   outranks a bare class selector. */
a.dx-spot:hover,
a.dx-spot:focus-visible,
.dx.dx-aw a.dx-spot:hover,
.dx.dx-aw a.dx-spot:focus-visible {
	background: var(--rv-green) !important;
	border-color: var(--rv-green) !important;
	color: var(--rv-black) !important;
}

@media (prefers-reduced-motion: reduce) {
	a.dx-spot .dx-spot-lit {
		transition: none;
	}
}

/* The decorative cursor blob stands down over a spotlight button only. It
   grows to 56px over anything clickable otherwise, which Yovo wants kept, but
   on those three it lands within a few pixels of the spotlight disc and its
   difference blend turned the inverted label purple. The real pointer is
   untouched, since this page never hides it. */
.dx.dx-aw.byo .aw-cursor.is-off {
	opacity: 0;
}

/* The closing CTA's label came out underlined on all eight pages carrying it.
   The export leaves .dxc-cta's decoration alone because Tailwind's preflight
   already neutralises it; this theme's chrome sets `a { text-decoration:
   underline }` instead, so the button inherited it and no rule in the
   generated core took it back off. The sublink beside it keeps its underline,
   which the design does draw. */
.dx .dxc-cta {
	text-decoration: none;
}

/* The closing CTA's sublink takes the same shape as the hero's secondary, on
   Yovo's instruction: mono uppercase on a hairline rather than a gold
   underline, so the page has one secondary treatment rather than two.

   It also fixes a genuine bug on this page. .dxc-sublink colours itself with
   var(--dx-paper), and the byo layer redefines --dx-paper to transparent for
   its own backgrounds, so the label rendered invisible here and only the gold
   underline showed. The other seven pages are unaffected, since none of them
   reassigns that token. */
.dx.dx-aw.byo a.dxc-sublink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--rv-white) !important;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.dx.dx-aw.byo a.dxc-sublink:hover,
.dx.dx-aw.byo a.dxc-sublink:focus-visible {
	border-bottom-color: var(--rv-green);
	color: var(--rv-green) !important;
}

/* Same cause as the sublink above, found while checking for others: the byo
   layer sets --dx-paper to transparent, and .dxwho-tab.is-on colours its
   label with that token. The selected persona tab therefore had an invisible
   label on its light ground, both the R-01 code and the role name. It takes
   the page's own ink instead, which is the colour that pairs with the ground
   byo gives the tab. */
.dx.dx-aw.byo .dxwho-tab.is-on {
	color: var(--byo-bg);
}

/* The hero strip's first card is the only one dx-core leaves without left
   padding, so its text lines up with the gutter and the hero copy above it.
   That works on the other pages, where the cards have no background and there
   is no edge for the text to touch. Web Design's aw layer fills every card,
   and on this one the fill and the gold hover underline both began at the
   first letter, which read as a card sliced down its left side.

   So this page insets the first card like the other three. It costs 22px of
   alignment against the lede above, which is the lesser of the two: inside a
   band of filled cards, matching the other three reads as the deliberate
   edge. Scoped here because the other pages have no fill to butt against. */
.dx.dx-aw.byo .dx-hero-strip--sell > div:first-child {
	padding-left: 22px;
}

.dx.dx-aw.byo .dx-hero-strip--sell > div:first-child::after {
	left: 22px;
}

/* The Gap's body copy reads as prose, not as code.
   Its markup carries dx-mono, which is how the export writes it, and dx-core
   then corrects that element back to Inter along with the rest of the body
   copy. The byo layer re-monospaces anything whose class merely contains
   "mono", with !important, so on this page alone those four paragraphs came
   out in JetBrains Mono at 17px while the same section reads as Inter
   everywhere else. Checked the rest of dx-core's correction list against this
   page: .dx-dis-p is the only element the blanket rule catches. */
.dx.dx-aw.byo p.dx-dis-p {
	font-family: "Inter", ui-sans-serif, system-ui, sans-serif !important;
	font-feature-settings: "ss01", "cv11", "tnum";
	letter-spacing: 0 !important;
}

/* Labels that the byo layer turned into bordered boxes.
   Its `button[class*="btn"]` rule gives any such button a green border, and
   these two carry no padding of their own, so the text sat flush against that
   border: the operating layer's step labels and the maturity rail's tabs.
   This puts roughly one space either side, which at JetBrains Mono 13px is
   8px. Horizontal only, because what touches the box is the start and end of
   the label; padding on the block axis just makes the box taller.

   Checked every bordered a/button on the page for the same state. The only
   others are the chapter rail's letters and the footer's social icons, and
   both centre their contents, so neither needs it. */
.dx.dx-aw.byo .dxs-step-btn,
.dx.dx-aw.byo .dxm-rail-btn {
	padding-inline: 8px;
}

/* The methodology numerals, inverted for this page's ink ground.
   dx-core draws them for paper: the resting numeral and its dashed border are
   rgba(16,16,16,.22), and the open one takes var(--dx-ink) on the gold badge.
   Both are right on the other pages. Here the byo layer reassigns --dx-ink to
   its light value, so the open badge came out light-on-gold at 1.29:1 and the
   resting numerals were black on black at 1.03:1, which is what made them
   look absent rather than quiet.

   Resting numerals now carry the page's own ink at 40%, which lands near 3.4:1
   against the ground: clearly secondary to the titles at 14.7:1, but legible
   at this size. The open one takes the dark ground against its gold badge.

   Their dashed outline is dropped on Yovo's instruction, on the resting and
   hovered states alike, so the numeral reads as a numeral rather than a chip.
   The border is made transparent rather than removed, because the open state
   draws its own and a missing one would resize the badge as it opens. The
   numeral still brightens on hover, which dx-core drives, so the row has not
   lost its affordance. */
.dx.dx-aw.byo .dxm7-num,
.dx.dx-aw.byo .dxm7-head:hover .dxm7-num {
	color: rgba(233, 239, 233, 0.4);
	border-color: transparent;
}

.dx.dx-aw.byo .dxm7-item.is-open .dxm7-num {
	color: var(--byo-bg);
	border-color: var(--dx-gold);
}

/* The methodology rows sit on the page, not on a slab.
   The byo layer fills anything whose class contains "card", "tile", "-row",
   "-panel" or "-item" with rgba(26,27,31,.55) and a 6px backdrop blur. It is
   meant for the card-shaped sections; .dxm7-item and .dxm7-panel are caught by
   substring alone, and because both match, the open row painted that fill
   twice and blurred the field behind it, which is the dark block under the
   heading. It also overrode the 6% gold wash dx-core uses to mark the open
   row, so opening one lost its only soft cue.

   The fill and the blur come off, letting the hero's glow run through the
   list unbroken, and the gold wash goes back on the open row. Its left bar
   and gold numeral still carry the state. */
.dx.dx-aw.byo main .dxm7-item,
.dx.dx-aw.byo main .dxm7-panel {
	background-color: transparent !important;
	backdrop-filter: none;
}

.dx.dx-aw.byo main .dxm7-item.is-open {
	background-color: rgba(254, 205, 47, 0.06) !important;
}

/* The journey cards' numerals are watermarks, not headings.
   .dxj-ghost is drawn at rgba(255,255,255,.08) so the heading can run across
   it. The byo layer's `[class*="card"] * { color: inherit }` overrode that and
   gave it the card's full-strength text colour, so it came forward as solid
   white and collided with the heading instead of sitting behind it. Its own
   colour goes back, for the plain card and the highlighted one. */
.dx.dx-aw.byo main .dxj-ghost {
	color: rgba(255, 255, 255, 0.08);
}

.dx.dx-aw.byo main .dxj-card--hi .dxj-ghost {
	color: rgba(10, 20, 36, 0.14);
}

/* --dx-ink-3 is the muted ink the design system uses for secondary copy, and
   the byo layer remaps --dx-ink, --dx-mute, --dx-paper, --dx-line and --dx-bg
   for its ground but leaves this one at its paper value of #2a2a2a. Anything
   still reading it therefore renders near-black on near-black: on this page
   that is the stack belt's chip descriptors, 24 of them at 1.2:1, which is
   why the labels beside WordPress, Figma and the rest were not there.

   Remapped rather than patched at .dx-chip span, because every one of the
   token's nine consumers in dx-core uses it for colour and nothing else, so
   there is no background or border to break, and a consumer that appears
   later inherits the fix. */
.dx.dx-aw.byo {
	--dx-ink-3: var(--byo-mute);
}

/* The deliverables' Output tag is ink on gold, and the byo layer's remap of
   --dx-ink to its light value turned it light on gold, the same way it did to
   the methodology badge. It takes the page's own ground instead. */
.dx.dx-aw.byo .dxmet-out-tag {
	color: var(--byo-bg);
}

/* The deliverables' D-0N marker is muted in the export, which sets it inline
   and so left .dxmet-card-code with no rule of its own. Unstyled it inherits
   the card's text colour and reads at the same strength as the title it sits
   above. Not scoped to a page: the marker is muted wherever it appears, and
   --dx-mute already resolves per ground. */
.dx .dxmet-card-code {
	color: var(--dx-mute);
}

/* The outcome figures read in the page's mono, on Yovo's instruction, rather
   than the Instrument Serif the byo layer gives them. That serif is the third
   family on the page and is wanted on the display ems ("not the org chart."),
   not on numbers. Both the figure and its suffix are named, because the export
   pins the suffix to the serif on its own line. */
.dx.dx-aw.byo .aw-out-n,
.dx.dx-aw.byo .aw-out-row:first-child .aw-out-n,
.dx.dx-aw.byo .aw-out-n em {
	font-family: var(--byo-mono) !important;
	font-style: normal !important;
}

/* And smaller with it. The serif carried 220px because its digits are narrow;
   every glyph in a monospace is one advance wide, so the same size ran the
   longest figure, "14 wks", to 735px against a 747px column and wrapped it.
   140px puts it at 468px, which leaves the column real margin and keeps the
   row to one line. */
.dx.dx-aw.byo .aw-out-n {
	font-size: clamp(56px, 8vw, 140px) !important;
}

/* The gap before a word suffix is a measurement, not a space character. The
   data carried " wks" with a leading space, which in a monospace is a full
   advance: 84px at this size, against none at all for "%". Setting it here
   makes the two read the same and keeps it steady whatever the face. */
.dx.dx-aw.byo .aw-out-n em {
	margin-left: 0.12em;
}

/* The two marked heading phrases read in Inter, on Yovo's instruction, so
   Instrument Serif leaves the page entirely. The byo layer sets them in its
   serif; only these two match, the hero's "not the org chart." and the
   closing CTA's "deserve a better site." They take the heading's own 700 as
   well: the 400 they carried was chosen for a serif, which holds a line at
   that weight, and in the heading's own family it read as the line thinning
   rather than as an accent. Their gold is what marks them now. */
.dx.dx-aw.byo h1 em,
.dx.dx-aw.byo h2 em,
.dx.dx-aw.byo .aw-h1 em {
	font-family: var(--byo-sans) !important;
	font-weight: 700 !important;
}

/* The maturity cards swipe on a touch viewport.
   The track is positioned by a transform driven from --dxm-i, which works on
   a pointer because the rail and the cards' hover set it. On a phone there is
   no hover, and the next card peeks in from the edge looking draggable when
   it is not, so the only way through the set is the rail beneath.

   Below the breakpoint the viewport becomes a snap scroller instead: the
   transform comes off, the cards snap to centre, and the browser handles the
   momentum. dx-core.js keeps the rail in step in both directions, marking the
   card you land on and scrolling to the one you tap.

   Applies to all eight pages carrying this section, not just Web Design; the
   component behaves the same everywhere and the gap is the same. */
@media (max-width: 760px) {
	.dx .dxm-viewport {
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--dx-pad);
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}

	.dx .dxm-viewport::-webkit-scrollbar {
		display: none;
	}

	.dx .dxm-track {
		transform: none;
	}

	/* The gutter after the last card is a flex item, not padding. A flex
	   container's end padding is not part of its scrollable overflow, so the
	   track's padding-inline-end applied but added no scroll width and the
	   last card still ended flush against the screen edge while the first
	   kept its 25px. A zero-width item with a basis does contribute. */
	.dx .dxm-track::after {
		content: "";
		flex: 0 0 var(--dx-pad);
	}

	.dx .dxm-card {
		scroll-snap-align: center;
	}
}

/* Persona tabs stack their code above the label on a phone.
   The tab is a three-column grid, code then label then arrow, and the list
   itself goes two-up below 900px. That pairing holds at tablet width but not
   at 440px, where each tab gets about 100px of content and a role like
   "CMOs & VPs of marketing" breaks over three or four lines beside its code.

   Below 600px the code takes a row of its own and the label runs full width
   under it, with the arrow still on the label's line. The list stays two-up:
   the roles read as a set of four, and stacking the code is what buys back
   the width rather than halving the number of columns.

   Applies to the five pages with this section, since the markup and the
   squeeze are the same on each. */
@media (max-width: 600px) {
	.dx .dxwho-tab {
		grid-template-columns: 1fr auto;
		gap: 6px 10px;
		align-items: baseline;
		padding: 16px 14px;
	}

	.dx .dxwho-tab .dx-mono {
		grid-column: 1 / -1;
	}
}

/* The architecture's edge nodes stack on a phone.
   dx-core already sets the row to wrap below 1000px, but each item is
   `flex: 1 1 0` with `min-width: 0`, so they shrink without limit and the
   wrap never fires: three nodes shared a 402px row and each card came out
   86px wide, which broke "Enterprise buyer" over two lines in a box narrower
   than the words. Giving the items a full-width basis lets the wrap do its
   job and each node take a row of its own.

   Applies to the five pages with this section. */
@media (max-width: 700px) {
	.dx .dxarch-edge-row {
		flex-wrap: wrap;
	}

	.dx .dxarch-edge-item {
		flex: 1 1 100%;
	}
}

/* The Shift band follows the dx rhythm, not the rv one.
   It is an rv-* section embedded in a dx page, so it kept rv's spacing while
   everything around it took the tightened dx rhythm: 130px of padding against
   its neighbours' 63px at desktop and 36px on a phone, and 48px of inline
   padding where the dx wrap gives 25px. Sat among dx sections it reads as the
   one with air around it.

   Both axes are matched to the section and wrap either side of it, so the
   band keeps step vertically and its content starts on the same line as the
   copy above and below. The case carousel further down has the same 48px
   inline padding and is left alone: its slide geometry is measured off it.

   The selector carries .rv-ins as well because the page stylesheet sets this
   with `.rv-root .rv-shift.rv-ins` and loads after this file, so three
   classes would tie and lose. */
.dx .rv-root--shift .rv-shift.rv-ins {
	padding-block: clamp(36px, 4vw, 72px);
	padding-inline: var(--dx-pad);
}

/* The Shift's featured item lines up with the ones under it.
   Its panel carries 40px of inline padding, which is right on desktop where
   the panel is an inset card floated beside the media. Stacked on a phone it
   only pushed the copy 40px in while every card below sits at the section
   gutter, so the first item read as indented from the rest.

   The padding comes off the inline axis below the component's own breakpoint.
   Nothing visible is lost: the byo layer fills the panel with
   rgba(26,27,31,.55) over a #1a1b1f ground, which is the same colour, and the
   cards below carry that same fill with no padding at all. The vertical
   padding stays, since that is what separates the item from its neighbours.

   The selector takes .dx because the page stylesheet sets this padding with
   three classes and loads after this file. */
@media (max-width: 900px) {
	.dx .rv-root--shift .rv-ins-feature--textonly .rv-ins-feature-panel {
		padding-inline: 0;
	}
}

/* No backdrop blur on a phone.
   The byo layer puts `backdrop-filter: blur(6px)` on anything whose class
   contains "card", "tile", "-row", "-panel" or "-item". Matching on substring
   catches the children too, so dxarch-card-name, dxarch-card-detail and
   dxarch-card-top each get their own blurred layer inside an already blurred
   card: 246 of them on this page. Every one re-samples its backdrop on every
   frame, which is what made scrolling crawl.

   Nothing is lost by dropping it. The fill behind it is rgba(26,27,31,.55)
   over a #1a1b1f ground, the same colour, so the blur only softened the
   starfield behind each card by a few pixels.

   All three root classes are named because the byo rule matches on the same
   count and loads after this file. */
@media (max-width: 900px) {
	.dx.dx-aw.byo main [class*="card"],
	.dx.dx-aw.byo main [class*="-panel"],
	.dx.dx-aw.byo main [class*="-row"],
	.dx.dx-aw.byo main [class*="tile"],
	.dx.dx-aw.byo main [class*="slab"],
	.dx.dx-aw.byo main [class*="-item"],
	.dx.dx-aw.byo main .dx-faq-list > *,
	.dx.dx-aw.byo main .dx-core,
	.dx.dx-aw.byo .dxexec {
		backdrop-filter: none;
	}
}

/* Buttons in the core panel size to their label.
   .dx-core is a centred grid, and a grid item stretches to its column unless
   told otherwise, so "Download the checklist" came out 449px wide against the
   hero button's 256px and read as a slab rather than a button. dx-core.css
   already does this for the audit card with `.dx-audit .dx-btn`; the core
   panel was the one it missed. Centred rather than start-aligned, because
   this panel centres its own text. Every page renders this panel. */
.dx .dx-core .dx-btn {
	justify-self: center;
}