wrapper, so the chrome above and below it keeps the site's own styling. Type: the prototype's serif and mono stacks are system fonts only — nothing is fetched — so they come across as-is. The sans stack is repointed at 'Ping AR + LT', the site's self-hosted face, which is also what covers Arabic (NFR-10). No Google Fonts. Palette: the prototype's own dark tokens, kept as local custom properties rather than leaking into the site's. Note for review: --dlp-gold is the prototype's #c7a348, which is NOT the BRD §9.1 Royce Gold (#D6A61C) nor the site token --brand-gold (#e6b328). This page therefore reads slightly warmer than the rest of the site by design of the source document. Theme: the prototype was dark only. The light set after the token block (September 2026) is the site's own, gated on html[data-bs-theme='light'] like every other page sheet. ========================================================================== */ .dlp { /* ---- tokens ---- */ --dlp-black: #05080b; --dlp-navy: #07161b; --dlp-panel: #0d1d22; --dlp-panel-light: #13282e; --dlp-gold: #c7a348; --dlp-gold-light: #e4c86e; --dlp-cream: #f6f2e8; --dlp-white: #ffffff; --dlp-grey: #9da8ad; --dlp-border: rgba(199, 163, 72, 0.25); --dlp-line-soft: rgba(255, 255, 255, 0.09); --dlp-row-alt: rgba(255, 255, 255, 0.028); --dlp-warn: #e0a58a; --dlp-warn-bg: rgba(224, 165, 138, 0.1); --dlp-warn-line: rgba(224, 165, 138, 0.34); /* Theme-dependent families. Every surface, wash and text colour below the two token blocks reads one of these; the light set is the only other place they are declared. The tranche bands (#efdcab … #b8913f) and the ink on a gold fill are the same in both themes. */ --dlp-ground-rgb: 5, 8, 11; /* --dlp-black as a triplet: the sticky sub-nav */ --dlp-panel-rgb: 13, 29, 34; /* --dlp-panel as a triplet: the tranche scroll fade */ --dlp-band: #0b1b20; /* .dlp-section--panel */ --dlp-hero-hi: #08161c; --dlp-hero-lo: #04070a; --dlp-card-hi: #0d1d22; --dlp-card-lo: #0a171b; --dlp-result-hi: #0f2229; --dlp-cta-hi: #0b1f26; /* Gold as a foreground. The prototype gold measures ~2.4:1 as text on the light surfaces, so the light set swaps these two for the deep golds its own print block already uses; fills and borders keep --dlp-gold. */ --dlp-gold-text: var(--dlp-gold); --dlp-gold-light-text: var(--dlp-gold-light); --dlp-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', 'Hoefler Text', Georgia, 'Times New Roman', serif; --dlp-sans: 'Ping AR + LT', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --dlp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --dlp-pad-x: clamp(18px, 5vw, 90px); --dlp-maxw: 1180px; --dlp-subnav-h: 52px; --dlp-r: 4px; --dlp-r-lg: 8px; display: block; background: var(--dlp-black); color: var(--dlp-grey); font-family: var(--dlp-sans); font-size: 16px; line-height: 1.72; -webkit-font-smoothing: antialiased; /* NOT overflow-x: hidden, which is what the prototype put on . `overflow-x: hidden` with `overflow-y: visible` computes overflow-y to `auto` (CSS Overflow 3 §3.2), which makes this element a scroll container. .dlp-subnav below is position: sticky, and a sticky element sticks inside its nearest scrolling ancestor — so that one line silently pinned the subnav to a box that never scrolls, and it just rode the page away. Nothing here needs to clip: every wide thing on this page scrolls inside its own container instead (.dlp-tablewrap--scroll, .dlp-tranche__viewport, .dlp-subnav__list), and max-width keeps the block itself in its column. */ max-width: 100%; } /* ========================================================================== Light theme. Gated on html[data-bs-theme='light'] like css/style.css and css/accounts.css. Ivory White ground, a warm off-white for the navy and panel bands, white cards, Royce Black headings on Editorial Grey body copy. The warm gold hairlines gain alpha to stay visible on ivory; the warning salmon deepens to a text-safe rust. The print block below the RTL rules is its own thing and untouched. ========================================================================== */ html[data-bs-theme='light'] .dlp { --dlp-black: #f8f8f8; --dlp-navy: #f1efea; --dlp-panel: #ffffff; --dlp-panel-light: #f6f4ef; --dlp-cream: #1c1c1c; --dlp-white: #111111; --dlp-grey: #4a4f55; --dlp-border: rgba(138, 112, 32, 0.38); --dlp-line-soft: rgba(17, 17, 17, 0.1); --dlp-row-alt: rgba(17, 17, 17, 0.03); --dlp-warn: #9a4a2a; --dlp-warn-bg: rgba(154, 74, 42, 0.08); --dlp-warn-line: rgba(154, 74, 42, 0.34); --dlp-ground-rgb: 248, 248, 248; --dlp-panel-rgb: 255, 255, 255; --dlp-band: #f1efea; --dlp-hero-hi: #f1efea; --dlp-hero-lo: #f4f2ed; --dlp-card-hi: #ffffff; --dlp-card-lo: #f6f4ef; --dlp-result-hi: #ffffff; --dlp-cta-hi: #ece9e1; --dlp-gold-text: #8a7020; --dlp-gold-light-text: #6f5a1a; } .dlp *, .dlp *::before, .dlp *::after { box-sizing: border-box; } .dlp img { display: block; max-width: 100%; } .dlp h1, .dlp h2, .dlp h3, .dlp h4 { font-family: var(--dlp-serif); color: var(--dlp-white); margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.14; } .dlp h1 { font-size: clamp(2.05rem, 5.2vw, 4rem); line-height: 1.04; letter-spacing: -0.032em; } .dlp h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.12; } .dlp h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.26; } .dlp h4 { font-size: 1.02rem; font-family: var(--dlp-sans); font-weight: 650; letter-spacing: -0.004em; } .dlp p { margin: 0 0 1.1em; } .dlp p:last-child { margin-bottom: 0; } .dlp ul, .dlp ol { margin: 0 0 1.1em; padding-inline-start: 1.2em; } .dlp li { margin-bottom: 0.5em; } .dlp li:last-child { margin-bottom: 0; } .dlp strong { color: var(--dlp-cream); font-weight: 650; } .dlp a { color: var(--dlp-gold-light-text); text-underline-offset: 0.18em; } .dlp a:hover { color: var(--dlp-gold-text); } .dlp :focus-visible { outline: 2px solid var(--dlp-gold-light-text); outline-offset: 3px; border-radius: 2px; } .dlp ::selection { background: rgba(199, 163, 72, 0.3); color: var(--dlp-white); } .dlp .dlp-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .dlp .dlp-wrap { width: min(var(--dlp-maxw), 100%); margin-inline: auto; padding-inline: var(--dlp-pad-x); } .dlp .dlp-section { padding-block: clamp(64px, 7vw, 104px); /* Clears both the site navbar and this page's own sticky subnav. */ scroll-margin-top: calc(var(--nav-h) + var(--dlp-subnav-h) + 16px); border-top: 1px solid rgba(199, 163, 72, 0.18); } .dlp .dlp-section--compact { padding-block: clamp(48px, 5vw, 72px); } .dlp .dlp-section--navy { background: var(--dlp-navy); } .dlp .dlp-section--panel { background: var(--dlp-band); } .dlp .dlp-lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); line-height: 1.68; color: var(--dlp-cream); max-width: 70ch; } .dlp .dlp-eyebrow { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; font-family: var(--dlp-sans); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; color: var(--dlp-gold-text); } .dlp .dlp-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--dlp-border); max-width: 110px; } .dlp .dlp-sec-head { position: relative; max-width: 74ch; margin-bottom: clamp(28px, 3.6vw, 44px); padding-bottom: clamp(20px, 2.4vw, 28px); border-bottom: 1px solid var(--dlp-line-soft); } .dlp .dlp-sec-head::after { content: ''; position: absolute; inset-inline-start: 0; bottom: -1px; width: 56px; height: 2px; background: var(--dlp-gold); } .dlp .dlp-sec-head p { margin-top: 1rem; max-width: 68ch; line-height: 1.7; } /* -------------------------------------------------------------------------- Sticky section navigation -------------------------------------------------------------------------- */ /* Sticks below the site navbar rather than at the viewport top — the fixed bar is --nav-h tall and would otherwise cover this. */ .dlp .dlp-subnav { position: sticky; top: var(--nav-h); z-index: 60; background: rgba(var(--dlp-ground-rgb), 0.94); -webkit-backdrop-filter: saturate(1.4) blur(9px); backdrop-filter: saturate(1.4) blur(9px); border-bottom: 1px solid rgba(199, 163, 72, 0.18); } .dlp .dlp-subnav__in { width: min(var(--dlp-maxw), 100%); margin-inline: auto; padding-inline: var(--dlp-pad-x); } .dlp .dlp-subnav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; height: var(--dlp-subnav-h); align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .dlp .dlp-subnav__list::-webkit-scrollbar { display: none; } .dlp .dlp-subnav__list li { margin: 0; flex: none; } .dlp .dlp-subnav__list a { display: flex; align-items: center; height: 100%; padding: 0 0.9rem; white-space: nowrap; font-size: 0.79rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--dlp-grey); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.16s ease, border-color 0.16s ease; } .dlp .dlp-subnav__list a:hover { color: var(--dlp-cream); } .dlp .dlp-subnav__list a.is-active { color: var(--dlp-gold-light-text); border-bottom-color: var(--dlp-gold-text); } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .dlp .dlp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 50px; padding: 0.72rem 1.4rem; border: 1px solid transparent; border-radius: var(--dlp-r); font-family: var(--dlp-sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .dlp .dlp-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .dlp .dlp-btn--gold { background: var(--dlp-gold); color: #1b1405; border-color: var(--dlp-gold-text); } .dlp .dlp-btn--gold:hover { background: var(--dlp-gold-light); border-color: var(--dlp-gold-light-text); color: #1b1405; } .dlp .dlp-btn--ghost { background: transparent; color: var(--dlp-cream); border-color: var(--dlp-border); } .dlp .dlp-btn--ghost:hover { border-color: var(--dlp-gold-text); color: var(--dlp-white); } .dlp .dlp-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .dlp .dlp-hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(168deg, var(--dlp-hero-hi) 0%, var(--dlp-black) 62%, var(--dlp-hero-lo) 100%); padding-block: clamp(52px, 7vw, 96px); margin-top: 25px; } .dlp .dlp-hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.85; } .dlp .dlp-hero__art svg { width: 100%; height: 100%; } .dlp .dlp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 72px); align-items: center; } .dlp .dlp-hero h1 { max-width: 15ch; text-wrap: balance; } .dlp .dlp-hero__sub { margin-top: 1.5rem; max-width: 62ch; font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.72; color: var(--dlp-cream); } .dlp .dlp-hero__notice { margin-top: 1.6rem; padding: 1rem 1.15rem; max-width: 66ch; background: rgba(199, 163, 72, 0.07); border: 1px solid var(--dlp-border); border-inline-start: 3px solid var(--dlp-gold); border-radius: var(--dlp-r); font-size: 0.92rem; line-height: 1.65; color: var(--dlp-grey); } .dlp .dlp-hero .dlp-btn-row { margin-top: 2rem; } .dlp .dlp-hero__card h2 { font-size: 1.16rem; margin-bottom: 1.1rem; } .dlp .dlp-hero__card .dlp-num-list li { font-size: 0.92rem; line-height: 1.55; } .dlp .dlp-hero__card .dlp-num-list li span:first-child { color: var(--dlp-gold-text); font-family: var(--dlp-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Panels, cards, callouts -------------------------------------------------------------------------- */ .dlp .dlp-panel, .dlp .dlp-sumcard, .dlp .dlp-callout, .dlp .dlp-hero__card, .dlp .dlp-result, .dlp .dlp-tablewrap, .dlp .dlp-acc { background: linear-gradient(145deg, var(--dlp-card-hi), var(--dlp-card-lo)); border: 1px solid rgba(199, 163, 72, 0.18); border-radius: 14px; } .dlp .dlp-panel, .dlp .dlp-sumcard, .dlp .dlp-callout, .dlp .dlp-hero__card, .dlp .dlp-result { padding: clamp(22px, 3vw, 32px); } .dlp .dlp-acc, .dlp .dlp-tablewrap { padding: 0; } .dlp .dlp-panel--gold { border-color: var(--dlp-border); background: linear-gradient(180deg, rgba(199, 163, 72, 0.08), rgba(199, 163, 72, 0.02)); } .dlp .dlp-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); } .dlp .dlp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .dlp .dlp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); } .dlp .dlp-sumcard { border-top: 2px solid var(--dlp-gold); display: flex; flex-direction: column; align-items: stretch; } .dlp .dlp-sumcard__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dlp-gold-text); margin: 0 0 0.9rem; } .dlp .dlp-sumcard__fig { font-family: var(--dlp-serif); font-size: clamp(1.75rem, 3.3vw, 2.3rem); line-height: 1.04; color: var(--dlp-white); letter-spacing: -0.025em; margin: 0; font-variant-numeric: tabular-nums; } .dlp .dlp-sumcard__fig small { display: block; font-family: var(--dlp-sans); font-size: 0.72rem; font-weight: 650; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dlp-gold-light-text); margin-bottom: 0.45rem; } .dlp .dlp-sumcard p { margin: 0.85rem 0 0; font-size: 0.9rem; line-height: 1.62; } .dlp .dlp-sumcard__foot { margin-top: auto; padding-top: 1rem; font-size: 0.78rem; color: var(--dlp-grey); opacity: 0.85; } .dlp .dlp-callout { break-inside: avoid; } .dlp .dlp-callout h4 { color: var(--dlp-gold-light-text); margin-bottom: 0.6rem; } .dlp .dlp-callout--warn { border-color: var(--dlp-warn-line); background: var(--dlp-warn-bg); } .dlp .dlp-callout--warn h4 { color: var(--dlp-warn); } .dlp .dlp-callout--plain { background: var(--dlp-panel); border-color: var(--dlp-line-soft); } .dlp .dlp-callout--plain h4 { color: var(--dlp-white); } .dlp .dlp-formula { margin: 1.6rem 0; padding: 1.15rem 1.35rem; border-radius: var(--dlp-r-lg); background: var(--dlp-panel-light); border: 1px solid var(--dlp-border); font-family: var(--dlp-mono); font-size: 0.9rem; line-height: 1.85; color: var(--dlp-cream); white-space: pre-wrap; overflow-wrap: anywhere; } .dlp .dlp-formula b { color: var(--dlp-gold-light-text); font-weight: 600; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .dlp .dlp-tablewrap { margin: 0; overflow: hidden; } .dlp .dlp-tablewrap--scroll { overflow-x: auto; overscroll-behavior-x: contain; } .dlp .dlp-tbl { width: 100%; border-collapse: collapse; font-size: 0.94rem; } .dlp .dlp-tbl caption { text-align: start; padding: 1rem 1.3rem; background: var(--dlp-panel-light); border-bottom: 1px solid var(--dlp-border); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dlp-gold-text); } .dlp .dlp-tbl th, .dlp .dlp-tbl td { padding: 0.88rem 1.3rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--dlp-line-soft); } .dlp .dlp-tbl thead th { background: rgba(199, 163, 72, 0.1); color: var(--dlp-white); font-size: 0.73rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--dlp-border); } .dlp .dlp-tbl tbody tr:nth-child(even) { background: var(--dlp-row-alt); } @media (hover: hover) { .dlp .dlp-tbl tbody tr:hover { background: rgba(199, 163, 72, 0.075); } } .dlp .dlp-tbl tbody tr:last-child th, .dlp .dlp-tbl tbody tr:last-child td { border-bottom: 0; } .dlp .dlp-tbl tbody th { color: var(--dlp-gold-light-text); font-weight: 650; font-family: var(--dlp-mono); font-size: 0.86rem; white-space: nowrap; } .dlp .dlp-tbl td { color: var(--dlp-cream); } .dlp .dlp-tbl .dlp-n { font-family: var(--dlp-mono); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; } .dlp .dlp-tbl thead th.dlp-n { text-align: end; } .dlp .dlp-tbl .dlp-lev { color: var(--dlp-white); font-weight: 600; } .dlp .dlp-tbl-note { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--dlp-grey); } /* -------------------------------------------------------------------------- Lists -------------------------------------------------------------------------- */ .dlp .dlp-rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; } .dlp .dlp-rule-list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; } .dlp .dlp-rule-list li::before { content: ''; width: 6px; height: 6px; margin: 0.62em 0 0 4px; border-radius: 1px; background: var(--dlp-gold); } .dlp .dlp-num-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .dlp .dlp-num-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0.75rem; align-items: start; margin: 0; } .dlp .dlp-facts { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); } .dlp .dlp-facts li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: baseline; margin: 0; font-size: 0.89rem; line-height: 1.55; } .dlp .dlp-facts li::before { content: '\2014'; color: var(--dlp-gold-text); } /* -------------------------------------------------------------------------- Leverage explorer -------------------------------------------------------------------------- */ .dlp .dlp-explorer { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); align-items: start; } .dlp .dlp-ctrl { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; } .dlp .dlp-ctrl:last-of-type { margin-bottom: 0; } .dlp .dlp-ctrl__label { font-size: 0.73rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dlp-gold-text); } .dlp .dlp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; background: var(--dlp-black); border: 1px solid var(--dlp-line-soft); border-radius: var(--dlp-r); } .dlp .dlp-seg button { min-height: 44px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--dlp-grey); font-family: var(--dlp-sans); font-size: 0.82rem; font-weight: 650; letter-spacing: 0.06em; cursor: pointer; transition: background 0.16s ease, color 0.16s ease; } .dlp .dlp-seg button:hover { color: var(--dlp-cream); } .dlp .dlp-seg button[aria-pressed='true'] { background: var(--dlp-gold); color: #1b1405; border-color: var(--dlp-gold-text); } .dlp select, .dlp input[type='number'] { width: 100%; min-height: 48px; padding: 0.6rem 0.85rem; /* 16px, or iOS Safari zooms the viewport on focus. */ font-size: 16px; background: var(--dlp-black); color: var(--dlp-white); border: 1px solid var(--dlp-line-soft); border-radius: var(--dlp-r); font-family: var(--dlp-sans); outline: none; } .dlp input[type='number'] { font-family: var(--dlp-mono); font-variant-numeric: tabular-nums; } .dlp select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c7a348' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 11px; } .dlp select:focus, .dlp input[type='number']:focus { border-color: var(--dlp-gold-text); box-shadow: 0 0 0 3px rgba(199, 163, 72, 0.16); } .dlp input[type='range'] { width: 100%; margin: 0.5rem 0 0; accent-color: var(--dlp-gold-text); min-height: 26px; } .dlp .dlp-ctrl__hint { font-size: 0.78rem; color: var(--dlp-grey); margin: 0; } .dlp .dlp-result { background: linear-gradient(145deg, var(--dlp-result-hi), var(--dlp-card-lo)); border-color: var(--dlp-border); min-width: 0; } .dlp .dlp-result__head { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: baseline; padding-bottom: 1rem; border-bottom: 1px solid var(--dlp-line-soft); margin-bottom: 1.1rem; } .dlp .dlp-result__title { font-family: var(--dlp-sans); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dlp-gold-text); margin: 0; } .dlp .dlp-result__model { font-size: 0.8rem; color: var(--dlp-cream); margin: 0; } .dlp .dlp-chip { display: inline-block; padding: 0.24rem 0.6rem; border: 1px solid var(--dlp-border); border-radius: 100px; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--dlp-gold-light-text); } .dlp .dlp-result__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 1rem; margin-bottom: 1.3rem; } .dlp .dlp-result__stats div { min-width: 0; } .dlp .dlp-result__stats dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dlp-grey); margin-bottom: 0.25rem; } .dlp .dlp-result__stats dd { margin: 0; font-family: var(--dlp-mono); font-size: 1.02rem; color: var(--dlp-white); font-variant-numeric: tabular-nums; } .dlp .dlp-result .dlp-tablewrap { background: transparent; } .dlp .dlp-result .dlp-tbl { font-size: 0.88rem; } .dlp .dlp-result .dlp-tbl th, .dlp .dlp-result .dlp-tbl td { padding: 0.7rem 0.9rem; } .dlp .dlp-alert { display: flex; gap: 0.7rem; align-items: flex-start; margin-bottom: 1.1rem; padding: 0.85rem 1rem; border: 1px solid var(--dlp-warn-line); background: var(--dlp-warn-bg); border-radius: var(--dlp-r); font-size: 0.88rem; line-height: 1.6; color: var(--dlp-cream); } .dlp .dlp-alert svg { width: 17px; height: 17px; flex: none; margin-top: 3px; fill: var(--dlp-warn); } .dlp .dlp-alert--info { border-color: var(--dlp-border); background: rgba(199, 163, 72, 0.07); } .dlp .dlp-alert--info svg { fill: var(--dlp-gold); } .dlp .dlp-result__note { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--dlp-line-soft); font-size: 0.82rem; line-height: 1.62; color: var(--dlp-grey); } .dlp .dlp-noscript { border: 1px solid var(--dlp-warn-line); background: var(--dlp-warn-bg); border-radius: var(--dlp-r); padding: 1rem 1.15rem; font-size: 0.9rem; color: var(--dlp-cream); } /* -------------------------------------------------------------------------- Tranche bar -------------------------------------------------------------------------- */ .dlp .dlp-tranche { margin-top: 1.8rem; } .dlp .dlp-tranche__scroll { position: relative; } .dlp .dlp-tranche__viewport { overflow-x: auto; overscroll-behavior-x: contain; } .dlp .dlp-tranche__inner { min-width: 100%; } .dlp .dlp-tranche__bar { display: flex; width: 100%; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--dlp-line-soft); } .dlp .dlp-tranche__seg { display: flex; align-items: center; justify-content: center; min-width: 0; font-family: var(--dlp-mono); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 700; /* Fixed dark ink: every band fill is light, so this cannot follow a theme token or the labels vanish. */ color: #0d1114; white-space: nowrap; border-inline-end: 1px solid rgba(var(--dlp-ground-rgb), 0.42); } .dlp .dlp-tranche__seg:last-child { border-inline-end: 0; } /* The six band fills are a sequential ramp encoding descending leverage, not brand colours. Classes, not inline styles, so only the widths (which are data) stay in the markup. */ .dlp .dlp-band-1 { background: #efdcab; } .dlp .dlp-band-2 { background: #e6cd92; } .dlp .dlp-band-3 { background: #ddbe79; } .dlp .dlp-band-4 { background: #d3af60; } .dlp .dlp-band-5 { background: #c9a047; } .dlp .dlp-band-6 { background: #b8913f; } .dlp .dlp-tranche__scale { display: flex; justify-content: space-between; margin-top: 0.55rem; font-family: var(--dlp-mono); font-size: 0.75rem; color: var(--dlp-grey); } .dlp .dlp-tranche__hint { display: none; margin: 0.7rem 0 0; font-size: 0.78rem; color: var(--dlp-grey); } .dlp .dlp-tier-legend { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; row-gap: 22px; } .dlp .dlp-tier-legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; } .dlp .dlp-tier-legend__marker { width: 12px; height: 12px; margin-top: 0.45em; border-radius: 3px; } .dlp .dlp-tier-legend__content { min-width: 0; } .dlp .dlp-tier-legend__range { display: block; font-family: var(--dlp-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.9rem; line-height: 1.35; color: var(--dlp-white); } .dlp .dlp-tier-legend__detail { display: block; margin-top: 3px; line-height: 1.5; font-size: 0.86rem; color: var(--dlp-grey); } /* -------------------------------------------------------------------------- Accordions -------------------------------------------------------------------------- */ .dlp .dlp-acc { overflow: hidden; } .dlp .dlp-acc + .dlp-acc { margin-top: 0.7rem; } .dlp .dlp-acc summary { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.05rem 1.3rem; cursor: pointer; list-style: none; font-family: var(--dlp-sans); font-size: 1rem; font-weight: 650; color: var(--dlp-white); } .dlp .dlp-acc summary::-webkit-details-marker { display: none; } .dlp .dlp-acc summary:hover { background: var(--dlp-panel-light); } .dlp .dlp-acc summary .dlp-plus { position: relative; width: 15px; height: 15px; flex: none; } .dlp .dlp-acc summary .dlp-plus::before, .dlp .dlp-acc summary .dlp-plus::after { content: ''; position: absolute; background: var(--dlp-gold); transition: transform 0.2s ease, opacity 0.2s ease; } .dlp .dlp-acc summary .dlp-plus::before { inset-inline-start: 0; top: 7px; width: 15px; height: 1.5px; } .dlp .dlp-acc summary .dlp-plus::after { inset-inline-start: 7px; top: 0; width: 1.5px; height: 15px; } .dlp .dlp-acc[open] summary .dlp-plus::after { transform: rotate(90deg); opacity: 0; } .dlp .dlp-acc__body { padding: 0 1.3rem 1.35rem; border-top: 1px solid var(--dlp-line-soft); padding-top: 1.15rem; } .dlp .dlp-acc__body p, .dlp .dlp-acc__body li { font-size: 0.94rem; } .dlp .dlp-acc__body .dlp-rule-list { margin-top: 0.9rem; } .dlp .dlp-acc__body .dlp-tablewrap { margin-top: 1rem; background: var(--dlp-black); } /* -------------------------------------------------------------------------- CTA band and risk warning -------------------------------------------------------------------------- */ .dlp .dlp-cta-band { background: linear-gradient(160deg, var(--dlp-cta-hi), var(--dlp-black) 70%); border-block: 1px solid var(--dlp-border); } .dlp .dlp-cta-band h2 { max-width: 20ch; text-wrap: balance; } .dlp .dlp-cta-band p { margin-top: 1.1rem; max-width: 62ch; } .dlp .dlp-cta-band .dlp-btn-row { margin-top: 2rem; } .dlp .dlp-risk { border: 1px solid var(--dlp-warn-line); background: var(--dlp-warn-bg); border-radius: var(--dlp-r-lg); padding: clamp(22px, 2.8vw, 34px); } .dlp .dlp-risk h2 { color: var(--dlp-warn); font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: 1rem; } .dlp .dlp-risk p { color: var(--dlp-cream); max-width: 76ch; } /* -------------------------------------------------------------------------- Arabic typography and RTL -------------------------------------------------------------------------- */ /* 'Ping AR + LT' is the site's self-hosted face and covers Arabic, so the headings drop the Latin serif rather than falling back to a system font. */ .dlp:lang(ar), [dir='rtl'] .dlp { letter-spacing: 0; } [dir='rtl'] .dlp h1, [dir='rtl'] .dlp h2, [dir='rtl'] .dlp h3, [dir='rtl'] .dlp h4, [dir='rtl'] .dlp .dlp-sumcard__fig { font-family: var(--dlp-sans); letter-spacing: 0; font-weight: 600; line-height: 1.35; } [dir='rtl'] .dlp h1 { line-height: 1.3; } [dir='rtl'] .dlp p, [dir='rtl'] .dlp li, [dir='rtl'] .dlp td, [dir='rtl'] .dlp dd { line-height: 1.9; } [dir='rtl'] .dlp .dlp-eyebrow, [dir='rtl'] .dlp .dlp-sumcard__label, [dir='rtl'] .dlp .dlp-ctrl__label, [dir='rtl'] .dlp .dlp-result__title, [dir='rtl'] .dlp .dlp-subnav__list a, [dir='rtl'] .dlp .dlp-btn, [dir='rtl'] .dlp .dlp-chip, [dir='rtl'] .dlp .dlp-tbl thead th, [dir='rtl'] .dlp .dlp-sumcard__fig small, [dir='rtl'] .dlp .dlp-result__stats dt, [dir='rtl'] .dlp .dlp-tbl caption { letter-spacing: 0; text-transform: none; font-size: 0.86rem; } [dir='rtl'] .dlp .dlp-eyebrow { font-size: 0.82rem; } [dir='rtl'] .dlp .dlp-tbl { font-size: 0.95rem; } [dir='rtl'] .dlp .dlp-btn { font-size: 0.9rem; } /* Financial values never reorder. Arabic bidi would otherwise turn "1:1000" and "0.01 – 1.00 lots" into a different number on screen. */ [dir='rtl'] .dlp .dlp-tbl .dlp-n, [dir='rtl'] .dlp .dlp-tranche__seg, [dir='rtl'] .dlp .dlp-tranche__scale, [dir='rtl'] .dlp .dlp-tier-legend__range, [dir='rtl'] .dlp .dlp-result__stats dd, [dir='rtl'] .dlp input[type='number'] { direction: ltr; unicode-bidi: isolate; } [dir='rtl'] .dlp .dlp-tbl .dlp-n { text-align: right; } /* Mixed Arabic prose and figures: the paragraph stays RTL, the values only are isolated. */ [dir='rtl'] .dlp .dlp-formula b, [dir='rtl'] .dlp .dlp-sumcard__fig, [dir='rtl'] .dlp .dlp-facts strong, [dir='rtl'] .dlp .dlp-tier-legend__detail { unicode-bidi: isolate; } /* The bar is an ascending volume scale in both directions — mirroring it would say the tiers run the other way. */ [dir='rtl'] .dlp .dlp-tranche__viewport, [dir='rtl'] .dlp .dlp-tranche__inner { direction: ltr; } [dir='rtl'] .dlp .dlp-tranche__scroll::after { inset-inline-end: 0; background: linear-gradient(to left, rgba(var(--dlp-panel-rgb), 0), rgba(var(--dlp-panel-rgb), 0.94)); border-radius: 8px 0 0 8px; } [dir='rtl'] .dlp .dlp-hero__notice { border-inline-start: 3px solid var(--dlp-gold); } [dir='rtl'] .dlp .dlp-btn svg { transform: scaleX(-1); } /* The hero's step profile is a directional diagram, not decoration: it reads as leverage stepping DOWN as volume rises, and it is anchored to the far edge of the reading direction (preserveAspectRatio="xMaxYMid") so it sits behind the "At a glance" card rather than behind the headline. Both of those are wrong under RTL left untouched — the steps descend against the reading direction, and the art lands behind the Arabic headline. One mirror fixes both at once: it reverses the descent AND moves the xMax anchor to the visual left, which is where the card now is. */ [dir='rtl'] .dlp .dlp-hero__art { transform: scaleX(-1); } [dir='rtl'] .dlp select { background-position: left 0.85rem center; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .dlp .dlp-tier-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 991.98px) { .dlp .dlp-hero__grid, .dlp .dlp-explorer { grid-template-columns: minmax(0, 1fr); } } /* Use the phone width, keep ~16px safe margins, and never stack padding at more than one nesting level. */ @media (max-width: 767.98px) { .dlp { --dlp-pad-x: 16px; } .dlp .dlp-wrap, .dlp .dlp-section, .dlp .dlp-tablewrap, .dlp .dlp-panel, .dlp .dlp-sumcard, .dlp .dlp-callout, .dlp .dlp-hero__card, .dlp .dlp-result, .dlp .dlp-risk, .dlp .dlp-acc, .dlp .dlp-formula, .dlp .dlp-explorer__controls { width: 100%; } /* Nothing may refuse to shrink inside a grid or flex track. */ .dlp .dlp-grid > *, .dlp .dlp-hero__grid > *, .dlp .dlp-explorer > *, .dlp .dlp-result__stats > div, .dlp .dlp-facts > li, .dlp .dlp-tier-legend > li, .dlp .dlp-btn-row > * { min-width: 0; } .dlp .dlp-hero__grid, .dlp .dlp-grid--2, .dlp .dlp-grid--3, .dlp .dlp-explorer, .dlp .dlp-facts, .dlp .dlp-tier-legend { grid-template-columns: minmax(0, 1fr); } .dlp .dlp-tier-legend { row-gap: 20px; } .dlp .dlp-section { padding-block: 58px; } .dlp .dlp-section--compact { padding-block: 46px; } .dlp .dlp-sec-head { margin-bottom: 30px; padding-bottom: 22px; } .dlp .dlp-sec-head p { margin-top: 0.9rem; } .dlp h1 { font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1.08; } .dlp h2 { font-size: clamp(1.75rem, 8vw, 2.35rem); } .dlp h3 { font-size: 1.2rem; } .dlp .dlp-lede { font-size: 1.02rem; line-height: 1.72; } .dlp .dlp-eyebrow, .dlp .dlp-sumcard__label, .dlp .dlp-ctrl__label { font-size: 0.8rem; } .dlp .dlp-sumcard p, .dlp .dlp-tbl { font-size: 0.95rem; } .dlp .dlp-ctrl__hint { font-size: 0.82rem; line-height: 1.6; } .dlp .dlp-result__stats dt { font-size: 0.78rem; } .dlp .dlp-result .dlp-tbl { font-size: 0.92rem; } .dlp .dlp-tbl-note, .dlp .dlp-result__note { font-size: 0.83rem; line-height: 1.7; } .dlp .dlp-panel, .dlp .dlp-sumcard, .dlp .dlp-callout, .dlp .dlp-hero__card, .dlp .dlp-result, .dlp .dlp-risk { padding: 24px 18px; } .dlp .dlp-grid { gap: 18px; } .dlp .dlp-hero__card .dlp-num-list { gap: 1.15rem; } .dlp .dlp-hero .dlp-btn-row { margin-top: 1.6rem; } .dlp .dlp-hero__notice { padding: 1.05rem 1.1rem; } .dlp .dlp-subnav__in { padding-inline: 14px; } .dlp .dlp-subnav__list { -webkit-overflow-scrolling: touch; gap: 4px; } .dlp .dlp-subnav__list a { padding: 0 0.85rem; font-size: 0.8rem; } /* Calculator: one surface per block, no panel-in-panel. */ .dlp #dlp-explorer .dlp-panel { padding: 0; border: 0; background: transparent; } .dlp .dlp-explorer { gap: 18px; } .dlp .dlp-explorer__controls, .dlp .dlp-result { min-width: 0; padding: 24px 18px; border: 1px solid rgba(199, 163, 72, 0.18); border-radius: 12px; background: linear-gradient(145deg, var(--dlp-card-hi), var(--dlp-card-lo)); } .dlp .dlp-ctrl { margin-bottom: 1.4rem; } .dlp .dlp-result__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 0.9rem; } .dlp .dlp-result__head { gap: 0.5rem 1rem; } .dlp .dlp-alert { font-size: 0.9rem; } /* The result already supplies the padding — the table must not add more. */ .dlp .dlp-result .dlp-tablewrap { border-inline: 0; border-radius: 0; background: transparent; } .dlp .dlp-result .dlp-tbl tbody tr, .dlp .dlp-result .dlp-tbl caption { padding-inline: 0; } .dlp .dlp-result .dlp-tbl caption { background: transparent; } /* Tables become relaxed stacked cards. */ .dlp .dlp-tablewrap { border-radius: 12px; } .dlp .dlp-tbl, .dlp .dlp-tbl caption, .dlp .dlp-tbl thead, .dlp .dlp-tbl tbody, .dlp .dlp-tbl tr, .dlp .dlp-tbl th, .dlp .dlp-tbl td { display: block; } .dlp .dlp-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .dlp .dlp-tbl tbody tr { width: 100%; padding: 20px 18px; border-bottom: 1px solid var(--dlp-line-soft); } .dlp .dlp-tbl tbody tr:last-child { border-bottom: 0; } .dlp .dlp-tbl th, .dlp .dlp-tbl td { width: 100%; padding: 0 0 12px; border-bottom: 0; text-align: start; } .dlp .dlp-tbl td:last-child { padding-bottom: 0; } .dlp .dlp-tbl .dlp-n { text-align: start; } .dlp .dlp-tbl tbody th { font-size: 1.02rem; color: var(--dlp-white); padding-bottom: 14px; } .dlp .dlp-tbl caption { display: block; width: 100%; box-sizing: border-box; padding: 16px 18px; letter-spacing: 0.07em; line-height: 1.45; } /* The stacked card needs its own row labels, since thead is hidden. */ .dlp .dlp-tbl td::before { content: attr(data-label); display: block; font-size: 0.74rem; line-height: 1.4; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dlp-gold-text); margin-bottom: 4px; } [dir='rtl'] .dlp .dlp-tbl td::before { letter-spacing: 0; text-transform: none; font-size: 0.78rem; } .dlp .dlp-tranche__viewport { -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .dlp .dlp-tranche__inner { min-width: 620px; } .dlp .dlp-tranche__hint { display: block; font-size: 0.82rem; } .dlp .dlp-tranche__scroll::after { content: ''; position: absolute; top: 0; inset-inline-end: 0; width: 36px; height: 56px; pointer-events: none; background: linear-gradient(to right, rgba(var(--dlp-panel-rgb), 0), rgba(var(--dlp-panel-rgb), 0.94)); border-radius: 0 8px 8px 0; } .dlp .dlp-formula { padding: 1.05rem; font-size: 0.88rem; line-height: 1.9; } .dlp .dlp-rule-list, .dlp .dlp-num-list { gap: 1.05rem; } .dlp .dlp-facts { gap: 0.85rem; } .dlp .dlp-acc summary { padding: 1.1rem 18px; gap: 16px; font-size: 1rem; } .dlp .dlp-acc__body { padding: 1.1rem 18px 18px; } .dlp .dlp-acc + .dlp-acc { margin-top: 0.85rem; } .dlp .dlp-acc__body .dlp-tablewrap { border-inline: 0; border-radius: 0; } .dlp .dlp-acc__body .dlp-tbl tbody tr, .dlp .dlp-acc__body .dlp-tbl caption { padding-inline: 0; } .dlp .dlp-btn { width: 100%; min-height: 54px; } .dlp .dlp-btn-row { flex-direction: column; align-items: stretch; gap: 12px; } } @media (max-width: 399.98px) { .dlp .dlp-result__stats { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 399.98px) { .dlp .dlp-seg { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .dlp *, .dlp *::before, .dlp *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- Print -------------------------------------------------------------------------- */ @media print { .dlp { background: #fff; color: #1a1a1a; font-size: 10.5pt; line-height: 1.5; } .dlp .dlp-subnav, .dlp .dlp-btn, .dlp .dlp-btn-row, .dlp .dlp-hero__art, .dlp #dlp-explorer, .dlp .dlp-cta-band { display: none !important; } .dlp h1, .dlp h2, .dlp h3, .dlp h4 { color: #05080b !important; } .dlp h1 { font-size: 23pt; } .dlp h2 { font-size: 15pt; break-after: avoid; } .dlp h3, .dlp h4 { break-after: avoid; } .dlp .dlp-section { padding-block: 12pt; border-top: 1px solid #ccc; } .dlp .dlp-hero { background: #fff !important; padding-block: 0 12pt; } .dlp .dlp-hero__sub, .dlp .dlp-lede, .dlp .dlp-tbl td, .dlp strong { color: #1a1a1a !important; } .dlp .dlp-eyebrow { color: #8a7020 !important; } .dlp .dlp-eyebrow::after { background: #ccc; } .dlp .dlp-panel, .dlp .dlp-sumcard, .dlp .dlp-callout, .dlp .dlp-hero__card, .dlp .dlp-hero__notice, .dlp .dlp-formula, .dlp .dlp-risk, .dlp .dlp-tablewrap, .dlp .dlp-acc, .dlp .dlp-result { background: #fff !important; border: 1px solid #bbb !important; color: #1a1a1a !important; break-inside: avoid; } .dlp .dlp-sumcard__fig, .dlp .dlp-tbl tbody th, .dlp .dlp-tbl .dlp-lev, .dlp .dlp-tier-legend__range { color: #05080b !important; } .dlp .dlp-sumcard__label, .dlp .dlp-callout h4 { color: #8a7020 !important; } .dlp .dlp-tbl, .dlp .dlp-tbl caption, .dlp .dlp-tbl thead, .dlp .dlp-tbl tbody, .dlp .dlp-tbl tr, .dlp .dlp-tbl th, .dlp .dlp-tbl td { display: revert; } .dlp .dlp-tbl thead { display: table-header-group; position: static; width: auto; height: auto; clip: auto; } .dlp .dlp-tbl thead th { background: #f0ece0 !important; color: #05080b !important; border-bottom: 1px solid #bbb; } .dlp .dlp-tbl caption { background: #f0ece0 !important; color: #8a7020 !important; } .dlp .dlp-tbl td::before { display: none; } .dlp .dlp-tbl tbody tr { break-inside: avoid; } .dlp .dlp-tbl td, .dlp .dlp-tbl th { border-bottom: 1px solid #ddd; } .dlp .dlp-tbl .dlp-n { text-align: end; } .dlp .dlp-risk { border: 2px solid #8a7020 !important; } .dlp .dlp-risk h2 { color: #8a3a20 !important; } .dlp .dlp-acc { border: 1px solid #bbb !important; } .dlp .dlp-acc__body { display: block !important; } .dlp .dlp-acc summary { color: #05080b !important; } .dlp .dlp-tranche__hint, .dlp .dlp-tranche__scroll::after { display: none !important; } .dlp .dlp-tranche__inner { min-width: 0 !important; } .dlp .dlp-tier-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dlp .dlp-tier-legend__detail { color: #4a4a4a !important; } .dlp .dlp-tranche__seg { color: #05080b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .dlp a { text-decoration: none; } } /* -------------------------------------------------------------------------- Formula variants -------------------------------------------------------------------------- */ /* The base .dlp-formula is white-space: pre-wrap, which is right for the prototype's literal text blocks but wrong once the content is a real list or definition list — the source indentation would render as leading space. */ .dlp .dlp-formula--list { white-space: normal; } .dlp .dlp-formula--list ol { margin: 0.7rem 0 0; padding-inline-start: 1.4em; } .dlp .dlp-formula--list ol li { margin-bottom: 0.35rem; } .dlp .dlp-formula--list > p { margin: 0.6rem 0 0; } .dlp .dlp-worked { margin: 0; display: grid; grid-template-columns: auto auto; gap: 0.5rem 1.4rem; justify-content: start; align-items: baseline; } .dlp .dlp-worked dt { margin: 0; } .dlp .dlp-worked dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; } .dlp .dlp-worked dd b { color: var(--dlp-gold-light); font-weight: 600; } [dir='rtl'] .dlp .dlp-worked dd { direction: ltr; unicode-bidi: isolate; }