/* Platform — page CSS * ============================================================================================ * GOAL: a FAITHFUL (1:1) reproduction of the reference "Platform.dc.html" — the largest file * in the 2026-08 package (186KB, 8 sections) — without its 1,115 inline styles. * * STRATEGY (the same one the Secondary port settled): * The markup uses DESIGN-SYSTEM classes wherever the DS has the right component, and this * file carries the package's metric DELTAS as page-scoped overrides. Tuning toward the DS * later is then deleting overrides one at a time — not rewriting markup. * * Every rule is scoped under `.platform-page`, so this file is inert on any other page. * * HOW THE REFERENCE'S TOKENS COMPARE TO OURS * The reference declares its palette on a wrapper div, not in :root. Measured, every one of * them is already a token of ours: * --accent #EC634B → coral-500 --ink #0F1A4F → ink-deep * --accent-soft #FFE7DD → coral-100 --ink-soft #4D5B7F → ink-soft * --paper #FFFFFF → paper --ink-mute #8893B0 → ink-mute * --sand #F4F5F9 → page-bg --rule #E6E8EF → rule * --navy #0F1A4F → ink-deep --dark #0B1023 → dark-band * --mono IBM Plex Mono → font-label * Shadow `0 14px 40px rgba(15,26,79,.07)` is EXACTLY our --shadow-soft, so the product grid * uses the token rather than a page value. * * DIFFERENT, so declared here (owner's call: keep the reference's colours): * #E9ECF3 the reference's `--sand-2` (progress-bar troughs, section 2's hairline borders) * #F0F1F5 the lighter hairline INSIDE a mock card's row list * #616D90 the dimmed "separate tools" column in the comparison table * #9AA6C2 body copy ON DARK · #C9D1E6 list copy ON DARK · #5C688A captions ON DARK * Five shadows have no token (listed with --dc-shadow-* below). * * GEOMETRY: the reference container is max-width 1200px with a 24px section gutter; our DS is * 1224px / 32px. Overridden here only — the DS defaults are untouched. * ============================================================================================ */ .platform-page { /* reference-only values, all measured off the file */ --dc-sand-2: #E9ECF3; /* progress troughs + section 2's border */ --dc-line-row: #F0F1F5; /* row hairline inside a mock card */ --dc-ink-dim: #616D90; /* the "separate tools" column */ --dc-on-dark-body: var(--color-on-dark-body); --dc-on-dark-bright:var(--color-on-dark-bright); --dc-on-dark-mute: var(--color-on-dark-faint); --dc-shadow-hero: 0 16px 44px rgba(15, 26, 79, .09); /* hero phase cards */ --dc-shadow-hero-dark: 0 24px 56px rgba(4, 8, 24, .3); /* the dark 4th hero card */ --dc-shadow-mock: 0 14px 40px rgba(15, 26, 79, .08); /* the panel's mock card */ --dc-shadow-tab: 0 12px 32px rgba(15, 26, 79, .08); /* the selected sector tab */ --dc-shadow-card-hover:0 24px 56px rgba(15, 26, 79, .13); /* product card hover */ background: var(--color-page-bg); } /* ── Container: 1200px, 24px gutter — set-wide, `_shared/page-shared.css` §2 ─────────── */ /* NO BREAKPOINT HERE IN THE REFERENCE - the padding steps that were here are gone. * A gutter step at 767px and a section-padding step at 991px had been added right across the * batch. No reference has either: they pad with literal px, no clamp and no media query, all the * way down to a phone - and neither 767px nor 991px is even a breakpoint the package uses * anywhere (its own are 1080/1000/940/900/800/720/680/640/620/560). Removed to keep the port * faithful; the narrow-viewport squeeze that leaves is the reference's own and is recorded in * STATUS.md section 5 as the defect most worth fixing at source, after the port. */ /* ── Vertical rhythm ────────────────────────────────────────────────────────────────────── */ /* Deliberately literal `dc-py--`: the reference hand-tunes each section, so the DS padding modifiers cannot express it. This page is unusually regular — six of eight sections are a flat 88px. */ .platform-page .dc-py-88 { padding-top: 88px; padding-bottom: 88px; } /* ── Display type ───────────────────────────────────────────────────────────────────────── */ /* Nine steps, named by their maximum. Proxima 700 throughout; tracking is the reference's. */ .platform-page [class*="dc-t-"] { font-family: var(--font-heading); font-weight: 700; } /* margin + text-wrap at ZERO specificity (:where), so an ordinary utility can override them. As a plain 0-2-0 descendant selector this silently beat every unlayered Tailwind margin utility — the same trick the design system uses for `:where(.app h3)`. Only the section h1/h2 steps are balanced: the reference does NOT balance its card headings. */ :where(.platform-page [class*="dc-t-"]) { margin: 0; } :where(.platform-page .dc-t-82, .platform-page .dc-t-74, .platform-page .dc-t-56, .platform-page .dc-t-50, .platform-page .dc-t-48, .platform-page .dc-t-46, .platform-page .dc-t-38, .platform-page .dc-t-32) { text-wrap: balance; } .platform-page .dc-t-82 { font-size: clamp(42px, 5.8vw, 82px); line-height: 1.0; letter-spacing: -.04em; } .platform-page .dc-t-74 { font-size: clamp(36px, 5.6vw, 74px); line-height: 1.0; letter-spacing: -.04em; } .platform-page .dc-t-58 { font-size: clamp(40px, 4.6vw, 58px); line-height: 1; letter-spacing: -.045em; } .platform-page .dc-t-56 { font-size: clamp(30px, 4.2vw, 56px); line-height: 1.03; letter-spacing: -.035em; } .platform-page .dc-t-50 { font-size: clamp(28px, 3.8vw, 50px); line-height: 1.06; letter-spacing: -.032em; } .platform-page .dc-t-48 { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -.03em; } .platform-page .dc-t-46 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; } .platform-page .dc-t-38 { font-size: clamp(24px, 3vw, 38px); line-height: 1.12; letter-spacing: -.025em; } .platform-page .dc-t-32 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.16; letter-spacing: -.022em; } /* Fixed-size Proxima steps (card titles, row labels, stage labels). line-height is stated on every one: the reference writes them with the `font:` shorthand and no /line-height, so they compute to `normal` — inheriting our body 1.5 instead makes every one of them taller. */ .platform-page .dc-h-16 { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: normal; letter-spacing: -.012em; margin: 0; } .platform-page .dc-h-15 { font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: normal; letter-spacing: -.012em; margin: 0; } .platform-page .dc-h-15r{ font-family: var(--font-heading); font-weight: 700; font-size: 15.5px; line-height: 1.3; letter-spacing: -.01em; margin: 0; } .platform-page .dc-h-14 { font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: normal; margin: 0; } .platform-page .dc-h-12 { font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: normal; margin: 0; } .platform-page .dc-h-12l{ font-family: var(--font-heading); font-weight: 600; font-size: 12px; line-height: 1.25; margin: 0; } /* ── Body copy steps (Inter) ────────────────────────────────────────────────────────────── */ .platform-page .dc-lede-19 { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--color-ink-soft); } .platform-page .dc-body-17 { font-size: 17px; line-height: 1.6; margin: 0; } .platform-page .dc-body-165 { font-size: 16.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-16 { font-size: 16px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-155 { font-size: 15.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-15 { font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-145 { font-size: 14.5px; line-height: 1.55; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-13 { font-size: 13px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-125 { font-size: 12.5px; line-height: 1.5; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-body-125t{ font-size: 12.5px; line-height: 1.45; color: var(--color-ink-mute); margin: 0; } .platform-page .dc-body-115 { font-size: 11.5px; line-height: 1.45; color: var(--color-ink-soft); margin: 0; } .platform-page .dc-closer-lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: rgba(255,255,255,.92); } /* Reading measures the reference sets in `ch` — kept in ch so they track the font, as it does. */ .platform-page .dc-ch-62 { max-width: 62ch; } .platform-page .dc-ch-64 { max-width: 64ch; } .platform-page .dc-ch-60 { max-width: 60ch; } .platform-page .dc-ch-58 { max-width: 58ch; } .platform-page .dc-ch-54 { max-width: 54ch; } .platform-page .dc-ch-48 { max-width: 48ch; } .platform-page .dc-ch-46 { max-width: 46ch; } .platform-page .dc-measure-1100 { max-width: 1100px; } .platform-page .dc-measure-820 { max-width: 820px; } .platform-page .dc-measure-800 { max-width: 800px; } .platform-page .dc-measure-780 { max-width: 780px; } .platform-page .dc-measure-760 { max-width: 760px; } /* ── Mono labels (IBM Plex Mono 500) ────────────────────────────────────────────────────── */ /* Confirmed against the reference: `--mono` really is IBM Plex Mono, which is our --font-label. Every step states `line-height: normal` for the shorthand reason above. */ /* Family/weight/line-height only — deliberately NO `display`. A page rule here would be 0-2-0 and would silently beat an unlayered `block` / `flex` utility sitting in the markup, which is the specificity trap that cost nine pages 28px a card in an earlier batch. */ .platform-page [class*="dc-label-"], .platform-page [class*="dc-eyebrow"], .platform-page .dc-syear { font-family: var(--font-label); font-weight: 500; line-height: normal; } .platform-page .dc-eyebrow { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-coral-500); } .platform-page .dc-eyebrow-hero { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent); } .platform-page .dc-eyebrow-row { display: inline-flex; align-items: center; gap: 11px; } .platform-page .dc-label-11c { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-coral-500); } .platform-page .dc-label-11m { font-size: 11px; letter-spacing: .09em; } /* Zero-specificity default so the "ONE APPLICAA PLATFORM" instance's `text-coral-500` wins (coding-standards §2 rule 5); as a 0-2-0 rule it silently beat that utility. */ :where(.platform-page .dc-label-11m) { color: var(--color-ink-mute); } .platform-page .dc-label-105 { font-size: 10.5px; letter-spacing: .07em; color: var(--color-ink-mute); } .platform-page .dc-label-105d { font-size: 10.5px; letter-spacing: .08em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-95 { font-size: 9.5px; letter-spacing: .07em; color: var(--color-ink-mute); } .platform-page .dc-label-95d { font-size: 9.5px; letter-spacing: .07em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-95p { font-size: 9.5px; color: var(--color-ink-soft); } /* bar row label */ .platform-page .dc-label-95g { font-size: 9.5px; color: var(--color-ok-green); } /* row value */ .platform-page .dc-label-95a { font-size: 9.5px; color: var(--color-coral-500); } .platform-page .dc-label-9 { font-size: 9px; letter-spacing: .05em; } .platform-page .dc-label-9d { font-size: 9px; letter-spacing: .06em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-9b { font-size: 9px; letter-spacing: .06em; color: var(--dc-on-dark-bright); } .platform-page .dc-label-9s { font-size: 9px; letter-spacing: .07em; color: var(--dc-on-dark-mute); } .platform-page .dc-label-85 { font-size: 8.5px; letter-spacing: .07em; color: var(--color-coral-500); } .platform-page .dc-syear { font-weight: 700; font-size: 10px; letter-spacing: .05em; } /* ── Hero ───────────────────────────────────────────────────────────────────────────────── */ /* The reference's hero glow is TOP-CENTRED (760px, left 50%, top -440px). Our .section-glow ships four CORNER placements only, so the placement — not the wash — is page-local. 19 of the package's 38 files use a top-centred hero glow (STATUS §4). */ .platform-page .dc-glow-top { width: 760px; height: 760px; left: 50%; top: -440px; transform: translateX(-50%); } /* The two phase rails above the hero card row, with a dot travelling along each. */ .platform-page .dc-phase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; } .platform-page .dc-phase-line { position: relative; height: 10px; } .platform-page .dc-phase-line::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; border-radius: var(--radius-0\.5); background: var(--dc-sand-2); } .platform-page .dc-phase-on::before { background: var(--color-coral-500); } .platform-page .dc-phase-dot { position: absolute; top: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-deep); animation: dc-flow 3.2s linear infinite; } .platform-page .dc-phase-on .dc-phase-dot { background: var(--color-coral-500); } .platform-page .dc-phase-dot-late { animation-delay: 1.6s; } @keyframes dc-flow { 0% { left: -10%; opacity: 0; } 12% { opacity: .95; } 88% { opacity: .95; } 100% { left: 105%; opacity: 0; } } .platform-page .dc-plgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .platform-page .dc-hero-card { background: var(--color-paper); border-radius: var(--radius-4); box-shadow: var(--dc-shadow-hero); padding: 22px 22px 20px; text-align: left; display: flex; flex-direction: column; } .platform-page .dc-hero-card-dark { background: var(--color-dark-band); box-shadow: var(--dc-shadow-hero-dark); color: #fff; } /* Icon tile — six sizes across the package; three of them appear on this page (38/40/34px). STATUS §4 lists this as a size-modifier component candidate at 8–10 pages. */ .platform-page .dc-tile { flex: none; display: inline-flex; align-items: center; justify-content: center; } .platform-page .dc-tile-38 { width: 38px; height: 38px; border-radius: var(--radius-2\.5); background: var(--color-page-bg); } .platform-page .dc-tile-40 { width: 40px; height: 40px; border-radius: var(--radius-3); } .platform-page .dc-tile-34 { width: 34px; height: 34px; border-radius: var(--radius-2\.5); background: rgba(255,255,255,.07); } .platform-page .dc-tile-coral { background: var(--color-coral-500); color: #fff; } .platform-page .dc-tile-navy { background: var(--color-ink-deep); color: #fff; } /* the coral "Emma …" line pinned to the foot of each hero card (11.5px — the products grid's equivalent line is 13px, hence two classes) */ .platform-page .dc-hero-more { margin-top: auto; padding-top: 14px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px; line-height: normal; color: var(--color-coral-500); } .platform-page .dc-hero-strip { display: flex; align-items: center; justify-content: center; gap: 10px 32px; flex-wrap: wrap; margin: 40px auto 0; padding-top: 28px; border-top: 1px solid var(--color-rule); max-width: 900px; } /* The fixed scroll cue. Reproduced because it is page content, not chrome; it is position: fixed, so it contributes nothing to any section's height. */ .platform-page .dc-scroll-cue { position: fixed; right: 26px; bottom: 24px; z-index: 60; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; text-decoration: none; } .platform-page .dc-scroll-cue i { font-size: 17px; color: var(--color-ink-mute); animation: dc-nudge 2s ease-in-out infinite; } @keyframes dc-nudge { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(7px); opacity: .45; } } /* ── Section 2 · the intake spine ───────────────────────────────────────────────────────── */ /* A NESTED switcher, and the reason this file is 186KB: four sector TRACKS, each with its own stage rail (8/8/5/5 stages) and one panel per stage — 26 panels, of which exactly ONE is visible. Measured before building: the section is ~1100px tall, not the ~14,000px it would be if the panels stacked. Both levels are the DS `tabs` controller (nested, same identifier — Stimulus scopes targets to the nearest controller of that identifier, so they do not fight). Visual state keys off aria-selected, which the controller already sets, so there are no toggled classes to keep in sync. */ .platform-page .dc-spine { background: var(--color-paper); border-top: 1px solid var(--dc-sand-2); border-bottom: 1px solid var(--dc-sand-2); box-shadow: inset 0 14px 26px -18px rgba(15,26,79,.16), inset 0 -14px 26px -18px rgba(15,26,79,.16); } .platform-page .dc-tabrow { display: flex; flex-wrap: wrap; margin-bottom: 28px; } .platform-page .dc-tab { flex: 1; min-width: 210px; flex-direction: column; align-items: flex-start; text-align: left; } .platform-page .dc-tab-narrow { min-width: 190px; } .platform-page .dc-tab .dc-h-15 { color: var(--color-ink-soft); } .platform-page .dc-tab[aria-selected="true"] .dc-h-15 { color: var(--color-ink-deep); } .platform-page .dc-rail { display: grid; gap: 10px; position: relative; } .platform-page .dc-rail-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .platform-page .dc-rail-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .platform-page .dc-rail-line { position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: var(--dc-sand-2); } .platform-page .dc-stage { position: relative; z-index: 1; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .platform-page .dc-sdot { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dc-sand-2); color: var(--color-ink-mute); box-shadow: 0 0 0 5px var(--color-paper); transition: background .3s ease, transform .3s ease, color .3s ease, box-shadow .3s ease; } .platform-page .dc-sdot i { font-size: 15px; } .platform-page .dc-stage .dc-syear, .platform-page .dc-stage .dc-h-12l { color: var(--color-ink-mute); transition: color .3s ease; } .platform-page .dc-stage[aria-selected="true"] .dc-sdot { background: var(--color-coral-500); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 5px var(--color-paper), 0 10px 24px rgba(236,99,75,.3); } .platform-page .dc-stage[aria-selected="true"] .dc-syear { color: var(--color-coral-500); } .platform-page .dc-stage[aria-selected="true"] .dc-h-12l { color: var(--color-ink-deep); } .platform-page .dc-panel-well { margin-top: 32px; background: var(--color-page-bg); border-radius: var(--radius-5); padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.4vw, 48px); } .platform-page .dc-panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: center; } /* The tabs controller adds BOTH the `hidden` class and the hidden attribute; `display: grid` above would otherwise beat `[hidden]`, exactly the trap the reference hits with its own `!important` rules. */ .platform-page .dc-panel[hidden] { display: none; } /* the mock card that sits on the right of every panel */ .platform-page .dc-mock { background: var(--color-paper); border-radius: var(--radius-3\.5); padding: 20px 22px; box-shadow: var(--dc-shadow-mock); } .platform-page .dc-mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-rule); } .platform-page .dc-mock-foot { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--color-rule); } .platform-page .dc-bars { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; } .platform-page .dc-bar-head { display: flex; justify-content: space-between; } .platform-page .dc-bar-track { height: 7px; background: var(--dc-sand-2); border-radius: var(--radius-1); margin-top: 5px; overflow: hidden; } .platform-page .dc-bar-fill { height: 100%; border-radius: var(--radius-1); background: var(--color-ink-deep); } .platform-page .dc-bar-fill-accent { background: var(--color-coral-500); } /* Bar fill widths. The reference sets each one inline; here they are the reference's 33 distinct values as percentage-named classes. Tailwind has no arbitrary-value surface in a CMS block, so this is the only way to keep the data out of a style attribute. */ .platform-page .dc-w-8 { width: 8%; } .platform-page .dc-w-9 { width: 9%; } .platform-page .dc-w-10 { width: 10%; } .platform-page .dc-w-11 { width: 11%; } .platform-page .dc-w-12 { width: 12%; } .platform-page .dc-w-14 { width: 14%; } .platform-page .dc-w-22 { width: 22%; } .platform-page .dc-w-28 { width: 28%; } .platform-page .dc-w-30 { width: 30%; } .platform-page .dc-w-40 { width: 40%; } .platform-page .dc-w-50 { width: 50%; } .platform-page .dc-w-52 { width: 52%; } .platform-page .dc-w-56 { width: 56%; } .platform-page .dc-w-62 { width: 62%; } .platform-page .dc-w-64 { width: 64%; } .platform-page .dc-w-65 { width: 65%; } .platform-page .dc-w-66 { width: 66%; } .platform-page .dc-w-70 { width: 70%; } .platform-page .dc-w-75 { width: 75%; } .platform-page .dc-w-76 { width: 76%; } .platform-page .dc-w-78 { width: 78%; } .platform-page .dc-w-82 { width: 82%; } .platform-page .dc-w-83 { width: 83%; } .platform-page .dc-w-84 { width: 84%; } .platform-page .dc-w-86 { width: 86%; } .platform-page .dc-w-87 { width: 87%; } .platform-page .dc-w-88 { width: 88%; } .platform-page .dc-w-90 { width: 90%; } .platform-page .dc-w-91 { width: 91%; } .platform-page .dc-w-92 { width: 92%; } .platform-page .dc-w-94 { width: 94%; } .platform-page .dc-w-97 { width: 97%; } .platform-page .dc-w-100 { width: 100%; } .platform-page .dc-rows { display: flex; flex-direction: column; gap: 0; margin-top: 6px; } .platform-page .dc-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--dc-line-row); } .platform-page .dc-row:last-child { border-bottom: 0; } /* the coral "read more" links under every panel's copy */ .platform-page .dc-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; } .platform-page .dc-links-18 { margin-top: 18px; } .platform-page .dc-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 14.5px; line-height: normal; color: var(--color-coral-500); text-decoration: none; } .platform-page .dc-link:hover { color: var(--color-ink-deep); } .platform-page .dc-link i { font-size: 10px; } /* Wordmark links — the §5 network row, where "ApplicaaOne" and "Applicaa Futures" are shown as their own marks rather than coral text (owner, 2026-09-15). A separate class rather than a change to `.dc-link`, which is used by several other sections on this page and must stay text. `gap` overrides `.dc-links`'s 8px/20px in BOTH axes on purpose: 24px is the asked-for spacing between the pair, and the same 24px is right between rows once they wrap on a phone. Longhand transition properties, never the `transition` shorthand: the shorthand resets transition-delay, which is how `.reveal-stagger` drives its cascade (the `.dc-addgrid` rule above documents the same trap from the other side). The opacity shift replaces the hover affordance the coral text link had via `.dc-link:hover` - a logo cannot signal it the same way. */ .platform-page .dc-logolinks { gap: 24px; align-items: center; } .platform-page .dc-logolink { display: inline-flex; transition-property: opacity; transition-duration: .15s; transition-timing-function: ease; } .platform-page .dc-logolink:hover { opacity: .7; } .platform-page .dc-logolink img { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; } /* ── Section 3 · Emma across the platform ───────────────────────────────────────────────── */ /* An INSET-free full-bleed dark band — the page's ONE dark moment, so the DS rule "the dark band is a moment, not a texture" holds. (The network panel in §5 is a card, not a band.) */ .platform-page .dc-glow-emma { width: 600px; height: 600px; right: -200px; top: -260px; } .platform-page .dc-emma-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 56px); align-items: start; } .platform-page .dc-e-row { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); } .platform-page .dc-stat-panel { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-4\.5); padding: 26px 30px; background: rgba(255,255,255,.04); } .platform-page .dc-terms-panel { border: 1px solid rgba(236,99,75,.4); background: rgba(236,99,75,.1); border-radius: var(--radius-4\.5); padding: 24px 28px; } /* The DS .check-list at the reference's metrics: 11px gap, 13.5px copy, on-dark bright ink. Its ticks already turn ok-green-bright inside .section-dark, which is why 1a added that token. */ .platform-page .dc-terms-panel .check-list { gap: 11px; } .platform-page .dc-terms-panel .check-list > li { font-size: 13.5px; line-height: 1.5; color: var(--dc-on-dark-bright); gap: 8px; } .platform-page .dc-terms-panel .check-list > li > i { margin-top: 3px; } .platform-page .dc-terms-panel .check-list-label { font-size: 10px; letter-spacing: .08em; line-height: normal; margin-bottom: 12px; } /* ── Section 4 · the comparison table ───────────────────────────────────────────────────── */ .platform-page .dc-vs { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0 clamp(20px, 3vw, 44px); } .platform-page .dc-vs-head { align-items: end; padding-bottom: 14px; border-bottom: 2px solid var(--color-ink-deep); } .platform-page .dc-vs-row { align-items: start; padding: 22px 0; border-bottom: 1px solid var(--color-rule); } .platform-page .dc-dot-coral { width: 7px; height: 7px; border-radius: 50%; background: var(--color-coral-500); flex: none; } /* ── Section 5 · the network ────────────────────────────────────────────────────────────── */ .platform-page .dc-net { background: var(--color-paper); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); } .platform-page .dc-net-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .platform-page .dc-net-panel { background: var(--color-dark-band); border-radius: var(--radius-5); padding: clamp(28px, 3.2vw, 40px); position: relative; overflow: hidden; color: #fff; } .platform-page .dc-glow-net { width: 420px; height: 420px; right: -150px; bottom: -190px; } .platform-page .dc-net-step { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-3); padding: 15px 18px; } .platform-page .dc-net-step-on { background: rgba(236,99,75,.12); border-color: rgba(236,99,75,.4); } /* ── Section 6 · MIS ────────────────────────────────────────────────────────────────────── */ .platform-page .dc-mis { background: var(--color-paper); } /* ── Section 7 · everything in the platform ─────────────────────────────────────────────── */ .platform-page .dc-addgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* LONGHANDS, NOT THE `transition` SHORTHAND. This element is a direct child of a .reveal-stagger container, and the stagger works by setting per-child transition-delay. The shorthand RESETS transition-delay to 0s, and page CSS is unlayered while reveal.css compiles into @layer components — so unlayered wins regardless of specificity and every child animated at once. Same trap reveal.css's own header documents, reached from the child's side. */ .platform-page .dc-umbrella { grid-column: span 2; } /* PRODUCT WORDMARKS REPLACE THE ICONS (owner, 2026-09-15). Each card now leads with the product's own type logo instead of a placeholder FA glyph, so the `.dc-h-16` title beside it would say the same word twice - it stays in the DOM as `sr-only` (the card is a link, and the accessible name has to come from somewhere; the is `alt=""` so nothing is announced twice). Sized by HEIGHT, not width: these are wordmarks of very different lengths (Data+ ~67px wide, MAT Management+ ~207px at the same cap height), and a uniform height is what makes a set of wordmarks read as one family. `width: auto` keeps each one's own proportion; `max-width: 100%` with `object-fit: contain` is the guard for the narrowest card, where a fixed height plus a clamped width would otherwise squash the type rather than letterbox it. */ .platform-page .dc-add-logo { box-sizing: border-box; height: 48px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; margin-bottom: 14px; } /* The two ApplicaaOne / Applicaa Futures files are `-type` exports: drawn tight to the letters on a 64-unit artboard, where the other eight are `+` lockups on a 78-unit one with superscript space above and descender space below. Measured by rasterising each at 200px and reading the ink: cap-to-descender is 118px on the eight, 195px and 192px on these two - so at equal box height their type renders about 1.65x larger, which is visible immediately in a row of cards. The padding shrinks the drawn mark to ~29px INSIDE the same 48px box (border-box, so the box itself is unchanged) rather than reducing `height`: every card's copy then starts at the same y, which is what keeps the three cards in a grid row aligned. */ .platform-page .dc-add-logo-type { padding-block: 9.5px; } /* The card's "See it" / "See the LA journey" link, matched to the description above it (owner, 2026-09-15): same family, same size. `/r/24` sets it at Proxima 13px, and that selector (`body.app .dc-linkcard .dc-add-more`, 0-3-1) beats a utility, so the override lives here -- scoped through `.dc-addgrid` for 0-4-0. `/r/24` is derived from `prototypes/_shared/`, so editing it directly would be lost on the next re-derive and would also move Home v6's cards. `inherit`, NOT a named family, and that is the load-bearing detail. The description sets no family of its own -- it inherits -- so `inherit` is what "same as the description" literally means here, and the two stay married whatever the inherited value turns out to be. Worth knowing what it currently IS: `body.app` has no font-family rule anywhere, so body copy falls through to Tailwind's preflight default (ui-sans-serif, system-ui, ...) rather than to the brand's `--font-sans`, which is correctly declared as Inter. Measured on the LIVE page as well as here, so it is a site condition, not a prototype artifact. Naming Inter here would "fix" the link alone and leave it mismatched against the description it is supposed to match. */ .platform-page .dc-addgrid .dc-add .dc-add-more { font-family: inherit; font-size: 15px; } .platform-page .dc-pill { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; line-height: normal; color: var(--color-ink-soft); text-decoration: none; background: var(--color-page-bg); border-radius: var(--radius-full); padding: 7px 13px; } .platform-page .dc-pill:hover { color: #fff; background: var(--color-coral-500); } .platform-page .dc-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 16px; } /* ── Section 8 · closer ─────────────────────────────────────────────────────────────────── */ /* .cta-section + .cta-section-flat already carry the flat coral full-bleed band; only the reference's exact padding is nudged. Deliberately NO coral highlight word in the headline: .orange-title on a coral band is 1:1 contrast, and 0 of the package's 24 closers use one. */ .platform-page .cta-section { padding: clamp(80px, 11vw, 150px) 24px; } .platform-page .cta-section-contact { font-size: 13.5px; line-height: normal; margin-top: 26px; } /* ── On-dark copy colours ───────────────────────────────────────────────────────────────── */ .platform-page .dc-on-dark-body { color: var(--dc-on-dark-body); } .platform-page .dc-on-dark-mute { color: var(--dc-on-dark-mute); } .platform-page .dc-ink-dim { color: var(--dc-ink-dim); } /* ── Spacing the compiled utility surface cannot express ────────────────────────────────── */ /* Tailwind's scale is patchy here (mt-7, mt-9, mt-11, mt-14 and every .5 step produce nothing), and the reference's rhythm is in odd pixels. Naming these by px keeps them from ever being confused with a Tailwind step. */ .platform-page .dc-mt-2 { margin-top: 2px; } .platform-page .dc-mt-3 { margin-top: 3px; } .platform-page .dc-mt-5 { margin-top: 5px; } .platform-page .dc-mt-6 { margin-top: 6px; } .platform-page .dc-mt-10 { margin-top: 10px; } .platform-page .dc-mt-12 { margin-top: 12px; } .platform-page .dc-mt-14 { margin-top: 14px; } .platform-page .dc-mt-16 { margin-top: 16px; } .platform-page .dc-mt-18 { margin-top: 18px; } .platform-page .dc-mt-20 { margin-top: 20px; } .platform-page .dc-mt-22 { margin-top: 22px; } .platform-page .dc-mt-24 { margin-top: 24px; } .platform-page .dc-mt-30 { margin-top: 30px; } .platform-page .dc-mt-34 { margin-top: 34px; } .platform-page .dc-mt-44 { margin-top: 44px; } .platform-page .dc-mb-6 { margin-bottom: 6px; } .platform-page .dc-mb-12 { margin-bottom: 12px; } .platform-page .dc-mb-14 { margin-bottom: 14px; } .platform-page .dc-mb-16 { margin-bottom: 16px; } .platform-page .dc-mb-20 { margin-bottom: 20px; } .platform-page .dc-mb-30 { margin-bottom: 30px; } .platform-page .dc-mb-32 { margin-bottom: 32px; } .platform-page .dc-mb-36 { margin-bottom: 36px; } .platform-page .dc-mb-44 { margin-bottom: 44px; } .platform-page .dc-gap-12 { gap: 12px; } .platform-page .dc-gap-14 { gap: 14px; } .platform-page .dc-gap-9 { gap: 9px; } .platform-page .dc-self-start { align-self: start; } /* ── Responsive: the reference's own breakpoints (1080 / 640) ───────────────────────────── */ @media (max-width: 1080px) { .platform-page .dc-rail-8 { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; } .platform-page .dc-rail-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; } .platform-page .dc-rail-line { display: none; } .platform-page .dc-panel, .platform-page .dc-net-grid, .platform-page .dc-emma-grid, .platform-page .dc-plgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-page .dc-phase { display: none; } .platform-page .dc-addgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-page .dc-umbrella { grid-column: span 2; } } @media (max-width: 640px) { .platform-page .dc-plgrid { grid-template-columns: minmax(0, 1fr); } .platform-page .dc-rail-8, .platform-page .dc-rail-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-page .dc-addgrid, .platform-page .dc-vs { grid-template-columns: minmax(0, 1fr); } .platform-page .dc-umbrella { grid-column: span 1; } } /* ── Reduced motion ─────────────────────────────────────────────────────────────────────── */ /* No blanket `* { animation-duration: .01ms !important }` (the reference does exactly that; coding-standards §6 bans !important, and the DS animations already neutralise themselves). Only this page's own two keyframe animations need switching off. */ /* Hero-only: .dc-label-95 is used 26x outside this hero, so this is scoped to #top rather than recolouring every instance on the page. */ .platform-page #top .dc-label-95, .platform-page #top .dc-label-105 { color: color-mix(in srgb, var(--color-ink-deep) 60%, transparent); } /* == Intake previews (`ip-`) ================================================ The 26 stage previews in section 2. One 16:10 frame at the panel's real 472px, one shell, and a twelve-part kit each stage composes two or three of -- replacing the `dc-mock` card, which was three bars or three rows on all 26. Everything inside the frame is sized in `em` from a single `cqw` knob, so one definition holds at 472px and at any other width. STATIC. No @keyframes, no transitions, nothing to gate on reduced motion. The superseded `dc-mock` / `dc-bars` / `dc-rows` / `dc-bar-*` / `dc-row` / `dc-w-*` rules are deliberately left in place above: they are inert once no element carries those classes, and proving they are unused everywhere else on the page is a separate job from this one. ========================================================================== */ /* == THE PREVIEW STAGE ======================================================== One frame for all 26: 16:10 at the panel's real 472px, scaled from a single knob so the same definition holds at any width. Everything inside is in `em`. */ .platform-page .ip-pv{ --p-ink:#0F1A4F;--p-royal:#263C91;--p-soft:#4D5B7F;--p-mute:#8893B0; --p-blue:#3478F7;--p-blue-d:#2A63D8;--p-blue-soft:#DFEAFB;--p-blue-wash:#EAF2FE; --p-paper:#fff;--p-bg:#F4F5F9;--p-bg2:#F8F9FB;--p-rule:#E6E8EF;--p-rule-2:#F0F2F7; --p-green:#137A35;--p-green-soft:#DEF1E4; --p-amber:#8A5A00;--p-amber-soft:#FCF0D8; --p-coral:#D9492F;--p-coral-soft:#FCE5DF; --acc:var(--p-blue);--acc-soft:var(--p-blue-soft);--acc-fill:var(--p-blue); container-type:inline-size; aspect-ratio:16/10;width:100%;max-width:472px; border-radius:18px;overflow:clip;position:relative;isolation:isolate; background: radial-gradient(115% 88% at 84% 4%,var(--wash-a),transparent 60%), radial-gradient(95% 72% at 4% 100%,var(--wash-b),transparent 62%), linear-gradient(162deg,var(--wash-1) 0%,var(--wash-2) 50%,var(--wash-3) 100%); } .platform-page .ip-pv-blue{--wash-a:rgba(52,120,247,.22);--wash-b:rgba(52,120,247,.10); --wash-1:#E7EFFC;--wash-2:#F3F7FE;--wash-3:#FDFEFF; --acc:#3478F7;--acc-soft:#DFEAFB;--acc-fill:#3478F7} .platform-page .ip-pv-amber{--wash-a:rgba(254,200,75,.34);--wash-b:rgba(236,99,75,.08); --wash-1:#FDF5E2;--wash-2:#FEFAEF;--wash-3:#FFFEFB; --acc:#8A5A00;--acc-soft:#FCF0D8;--acc-fill:#D79A2B} .platform-page .ip-pv-royal{--wash-a:rgba(38,60,145,.24);--wash-b:rgba(38,60,145,.12); --wash-1:#E7E9F7;--wash-2:#F1F3FB;--wash-3:#FCFDFF; --acc:#263C91;--acc-soft:#E2E6F6;--acc-fill:#263C91} .platform-page .ip-pv-coral{--wash-a:rgba(236,99,75,.20);--wash-b:rgba(236,99,75,.09); --wash-1:#FCEBE5;--wash-2:#FEF5F1;--wash-3:#FFFDFC; --acc:#D9492F;--acc-soft:#FCE5DF;--acc-fill:#D9492F} .platform-page .ip-pv::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(15,26,79,.055) 1px,transparent 1px); background-size:16px 16px;opacity:.5} .platform-page .ip-pv-in{position:absolute;inset:0;font-size:2.12cqw;font-family:var(--font-sans);color:var(--p-soft); display:flex;line-height:1.45;z-index:1} /* -- the one shared shell --------------------------------------------------- */ .platform-page .ip-win{background:var(--p-paper);border-radius:1.3em;margin:2.2em;flex:1;min-width:0; box-shadow:0 2.4em 5em rgba(15,26,79,.20),0 .55em 1.3em rgba(15,26,79,.09); display:flex;flex-direction:column;overflow:hidden} .platform-page .ip-wtop{display:flex;align-items:center;gap:.9em;padding:.95em 1.3em;flex:none; background:var(--acc-soft);border-bottom:1px solid rgba(15,26,79,.05)} .platform-page .ip-wtop-ic{width:1.9em;height:1.9em;border-radius:.55em;flex:none;display:flex; align-items:center;justify-content:center;background:var(--acc);color:#fff;font-size:.95em} .platform-page .ip-wtop-ic svg{width:1.05em;height:1.05em;display:block} .platform-page .ip-wlbl{font-family:var(--font-label);font-size:.98em;font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:var(--p-ink);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;min-width:0} .platform-page .ip-wpill{margin-left:auto;flex:none;font-family:var(--font-label);font-size:.84em;font-weight:500; letter-spacing:.07em;text-transform:uppercase;color:var(--p-green); background:var(--p-green-soft);border-radius:999px;padding:.3em .8em;white-space:nowrap} .platform-page .ip-wpill-dot{display:inline-block;width:.42em;height:.42em;border-radius:50%; background:currentColor;margin-right:.5em;vertical-align:.08em} .platform-page .ip-wbody{flex:1;min-height:0;padding:1.15em 1.3em;display:flex;flex-direction:column; gap:1em;justify-content:center} /* Kit parts never shrink. A flex item that can shrink absorbs an over-full body by squashing its own text, which reads as an overlap on screen but measures as a clean box -- so overflow becomes invisible to a geometry check. Refusing to shrink makes any over-fill escape the shell, where both the eye and the detector catch it. */ .platform-page .ip-wbody > *{flex:none} .platform-page .ip-wfoot{flex:none;padding:.8em 1.3em .95em;border-top:1px solid var(--p-rule-2); font-size:1.02em;color:var(--p-mute);line-height:1.35} /* == THE KIT ================================================================== Twelve parts. Each stage composes two (occasionally three). No stage is built from `bars` or `kv` alone -- that is the defect this redesign exists to fix. */ /* 1 - bar list -- today's three bars, restyled ------------------------------- */ .platform-page .ip-k-bars{display:flex;flex-direction:column;gap:.62em} .platform-page .ip-k-b{min-width:0} .platform-page .ip-k-bar-h{display:flex;justify-content:space-between;align-items:baseline;gap:.8em} .platform-page .ip-k-bar-l{font-family:var(--font-label);font-size:.86em;font-weight:500;letter-spacing:.08em; text-transform:uppercase;color:var(--p-mute);overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .platform-page .ip-k-bar-v{font-family:var(--font-label);font-size:.86em;font-weight:600;letter-spacing:.03em; color:var(--p-ink);flex:none} .platform-page .ip-k-bar-t{height:.52em;background:#EDEFF5;border-radius:999px;margin-top:.34em;overflow:hidden} .platform-page .ip-k-bar-f{height:100%;border-radius:999px;background:var(--p-ink);display:block} .platform-page .ip-k-on .ip-k-bar-l, .platform-page .ip-k-on .ip-k-bar-v{color:var(--p-coral)} .platform-page .ip-k-on .ip-k-bar-f{background:var(--p-coral)} .platform-page .ip-k-acc .ip-k-bar-f{background:var(--acc-fill)} /* diverging variant: a centre line, bars growing either side */ .platform-page .ip-k-div{position:relative;height:.52em;background:#EDEFF5;border-radius:999px;margin-top:.34em} .platform-page .ip-k-div::before{content:"";position:absolute;left:50%;top:-.22em;bottom:-.22em;width:1px; background:rgba(15,26,79,.18)} .platform-page .ip-k-div i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--p-green)} .platform-page .ip-k-div.ip-neg i{background:var(--p-coral)} /* 2 - kv rows -- today's three rows, restyled -------------------------------- */ .platform-page .ip-k-kv{display:flex;flex-direction:column} .platform-page .ip-k-kv-r{display:flex;align-items:center;gap:.8em;padding:.52em 0; border-bottom:1px solid var(--p-rule-2)} .platform-page .ip-k-kv-r:last-child{border-bottom:0} .platform-page .ip-k-kv-l{font-size:1.02em;color:var(--p-ink);font-weight:500;min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .platform-page .ip-k-kv-v{margin-left:auto;flex:none;font-family:var(--font-label);font-size:.88em;font-weight:600; letter-spacing:.05em;color:var(--p-soft)} .platform-page .ip-k-kv-r.ip-on .ip-k-kv-v{color:var(--p-coral)} .platform-page .ip-k-tick{flex:none;width:1.25em;height:1.25em;border-radius:50%;display:flex;align-items:center; justify-content:center;background:var(--p-green-soft);color:var(--p-green);font-size:.82em} .platform-page .ip-k-tick.ip-wait{background:var(--p-coral-soft);color:var(--p-coral)} .platform-page .ip-k-tick svg{width:.72em;height:.72em;display:block} /* 3 - person row -- the workhorse -------------------------------------------- */ .platform-page .ip-k-people{display:flex;flex-direction:column;gap:.5em} .platform-page .ip-k-p{display:flex;align-items:center;gap:.7em} .platform-page .ip-k-disc{width:1.9em;height:1.9em;border-radius:50%;flex:none;display:flex;align-items:center; justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:.82em; color:var(--p-royal);background:var(--p-blue-soft);letter-spacing:.01em} .platform-page .ip-k-disc.ip-c2{background:#F3E3DD;color:#9E3B25} .platform-page .ip-k-disc.ip-c3{background:#DEF1E4;color:var(--p-green)} .platform-page .ip-k-disc.ip-c4{background:#E4E7F6;color:var(--p-royal)} .platform-page .ip-k-p-n{font-size:1.04em;color:var(--p-ink);font-weight:600;min-width:0;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .platform-page .ip-k-p-m{font-family:var(--font-label);font-size:.82em;letter-spacing:.04em;color:var(--p-mute); white-space:nowrap} .platform-page .ip-k-p-r{margin-left:auto;flex:none;display:flex;align-items:center;gap:.5em} .platform-page .ip-k-p-bar{width:5.4em;height:.4em;background:#EDEFF5;border-radius:999px;overflow:hidden;flex:none} .platform-page .ip-k-p-bar i{display:block;height:100%;border-radius:999px;background:var(--acc-fill)} /* 4 - chip row -- pills, one or more selected -------------------------------- */ .platform-page .ip-k-chips{display:flex;flex-wrap:wrap;gap:.42em} .platform-page .ip-k-chip{font-family:var(--font-label);font-size:.82em;font-weight:500;letter-spacing:.06em; text-transform:uppercase;color:var(--p-mute);background:var(--p-bg); border:1px solid var(--p-rule);border-radius:999px;padding:.28em .72em;white-space:nowrap} .platform-page .ip-k-chip.ip-sel{background:var(--acc);border-color:var(--acc);color:#fff} .platform-page .ip-k-chip.ip-warn{background:var(--p-coral-soft);border-color:#F3CEC5;color:var(--p-coral)} .platform-page .ip-k-chip.ip-ok{background:var(--p-green-soft);border-color:#C9E6D3;color:var(--p-green)} /* 5 - stat tiles ------------------------------------------------------------ */ .platform-page .ip-k-tiles{display:grid;gap:.6em;grid-auto-flow:column;grid-auto-columns:1fr} .platform-page .ip-k-tile{background:var(--p-bg);border-radius:.7em;padding:.7em .8em;min-width:0} .platform-page .ip-k-tile b{display:block;font-family:var(--font-heading);font-weight:700;font-size:1.62em; line-height:1.05;color:var(--p-ink);letter-spacing:-.015em} .platform-page .ip-k-tile span{display:block;margin-top:.25em;font-family:var(--font-label);font-size:.72em; letter-spacing:.05em;text-transform:uppercase;color:var(--p-mute);line-height:1.25} .platform-page .ip-k-tile.ip-on{background:var(--p-coral-soft)} .platform-page .ip-k-tile.ip-on b{color:var(--p-coral)} /* 6 - slot strip -- labelled cells with a count ------------------------------ */ .platform-page .ip-k-slots{display:grid;gap:.5em;grid-auto-flow:column;grid-auto-columns:1fr} .platform-page .ip-k-slot{border:1px solid var(--p-rule);border-radius:.62em;padding:.55em .6em;text-align:center; background:var(--p-paper);min-width:0} .platform-page .ip-k-slot em{display:block;font-family:var(--font-label);font-size:.76em;font-style:normal; letter-spacing:.07em;text-transform:uppercase;color:var(--p-mute); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .platform-page .ip-k-slot b{display:block;margin-top:.22em;font-family:var(--font-heading);font-weight:700; font-size:1.15em;color:var(--p-ink)} .platform-page .ip-k-slot.ip-sel{border-color:var(--acc);background:var(--acc-soft)} .platform-page .ip-k-slot.ip-sel b{color:var(--acc)} .platform-page .ip-k-slot.ip-full{background:var(--p-bg);color:var(--p-mute)} .platform-page .ip-k-slot-dot{display:block;width:.5em;height:.5em;border-radius:50%;margin:.36em auto .1em; background:var(--p-green)} .platform-page .ip-k-slot.ip-sel .ip-k-slot-dot{background:var(--acc-fill)} /* 7 - form field ------------------------------------------------------------ */ .platform-page .ip-k-form{display:flex;flex-direction:column;gap:.55em} .platform-page .ip-k-fld{min-width:0} .platform-page .ip-k-fld-l{display:block;font-family:var(--font-label);font-size:.78em;letter-spacing:.08em; text-transform:uppercase;color:var(--p-mute);margin-bottom:.25em} .platform-page .ip-k-fld-i{display:flex;align-items:center;gap:.5em;border:1px solid var(--p-rule); border-radius:.55em;padding:.44em .7em;background:var(--p-paper);font-size:1em; color:var(--p-ink)} .platform-page .ip-k-fld-i.ip-focus{border-color:var(--acc);box-shadow:0 0 0 .28em var(--acc-soft)} .platform-page .ip-k-fld-i.ip-done{background:var(--p-bg);color:var(--p-soft)} .platform-page .ip-k-fld-i.ip-lock{background:var(--p-bg);color:var(--p-mute)} .platform-page .ip-k-fld-i svg{width:.9em;height:.9em;flex:none;display:block} .platform-page .ip-k-fld-i .ip-car{width:1px;height:1.05em;background:var(--acc);margin-left:-.18em} .platform-page .ip-k-fld-row{display:grid;grid-template-columns:1fr 1fr;gap:.55em} /* 8 - mini chart -- columns, sparkline, ring, funnel ------------------------- */ .platform-page .ip-k-cols{display:flex;align-items:flex-end;gap:.45em;height:4.4em} .platform-page .ip-k-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.3em; min-width:0} .platform-page .ip-k-col i{display:block;width:100%;border-radius:.22em .22em 0 0;background:var(--acc-fill);opacity:.55} .platform-page .ip-k-col.ip-on i{background:var(--p-coral);opacity:1} .platform-page .ip-k-col em{font-family:var(--font-label);font-size:.74em;font-style:normal;letter-spacing:.05em; color:var(--p-mute);white-space:nowrap} .platform-page .ip-k-spark{display:block;width:100%;height:2.6em;overflow:visible} .platform-page .ip-k-trend{position:relative;height:4.4em;border-radius:.6em;background:var(--p-bg); padding:1.5em .7em .6em;overflow:hidden} .platform-page .ip-k-trend .ip-k-trend-s{display:block;width:100%;height:100%;overflow:visible} .platform-page .ip-k-trend-k{position:absolute;right:.6em;top:.4em;display:flex;gap:.7em} .platform-page .ip-k-trend-k span{font-family:var(--font-label);font-size:.7em;letter-spacing:.06em;color:var(--p-mute); display:flex;align-items:center;gap:.3em} .platform-page .ip-k-trend-k i{width:.9em;height:2px;border-radius:2px;display:block} .platform-page .ip-k-spark path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke} .platform-page .ip-k-funnel{display:flex;flex-direction:column;gap:.32em;align-items:center} .platform-page .ip-k-fn{border-radius:.3em;padding:.3em 0;text-align:center;font-family:var(--font-label);font-size:.84em; font-weight:600;letter-spacing:.05em;color:#fff;white-space:nowrap} .platform-page .ip-k-ring{display:flex;align-items:center;gap:.9em} .platform-page .ip-k-ring-g{width:4.4em;height:4.4em;border-radius:50%;flex:none;display:flex;align-items:center; justify-content:center;position:relative} .platform-page .ip-k-ring-g::after{content:"";position:absolute;inset:.62em;border-radius:50%;background:var(--p-paper)} .platform-page .ip-k-ring-v{position:relative;z-index:1;font-family:var(--font-heading);font-weight:700;font-size:1.05em; color:var(--p-ink)} .platform-page .ip-k-ring-t{min-width:0} /* 9 - unit grid -- N cells, M filled (renders a count, invents nothing) ------ */ .platform-page .ip-k-grid{display:grid;gap:.24em;max-width:22em} .platform-page .ip-k-grid i{display:block;aspect-ratio:1;border-radius:.2em;background:var(--acc-fill);opacity:.82} .platform-page .ip-k-grid i.ip-off{background:transparent;box-shadow:inset 0 0 0 1px var(--p-rule);opacity:1} .platform-page .ip-k-grid i.ip-warn{background:var(--p-coral);opacity:1} /* 10 - map plot ------------------------------------------------------------- */ .platform-page .ip-k-map{position:relative;height:8em;flex:none;border-radius:.7em;background:var(--p-bg); overflow:hidden} .platform-page .ip-k-map svg{position:absolute;inset:0;width:100%;height:100%;display:block} .platform-page .ip-k-map-d{position:absolute;width:.62em;height:.62em;border-radius:50%;background:var(--acc-fill); transform:translate(-50%,-50%);box-shadow:0 0 0 .3em rgba(52,120,247,.16)} .platform-page .ip-k-map-d.ip-on{background:var(--p-coral);box-shadow:0 0 0 .3em rgba(217,73,47,.18)} .platform-page .ip-k-map-d.ip-lg{width:.95em;height:.95em} .platform-page .ip-k-map-l{position:absolute;font-family:var(--font-label);font-size:.74em;letter-spacing:.07em; color:var(--p-mute);transform:translate(-50%,0);white-space:nowrap; text-transform:uppercase} /* 11 - doc card ------------------------------------------------------------- */ .platform-page .ip-k-doc{display:flex;align-items:stretch;gap:.85em} .platform-page .ip-k-page{width:5.2em;flex:none;border:1px solid var(--p-rule);border-radius:.45em; background:var(--p-paper);padding:.55em .5em;display:flex;flex-direction:column;gap:.26em; position:relative;box-shadow:.28em .28em 0 -.06em var(--p-bg),.28em .28em 0 var(--p-rule)} .platform-page .ip-k-page u{display:block;height:.22em;border-radius:999px;background:var(--p-rule); text-decoration:none} .platform-page .ip-k-page u.ip-hd{background:var(--p-ink);width:70%;height:.3em} .platform-page .ip-k-page u.ip-sh{width:55%} .platform-page .ip-k-seal{position:absolute;right:-.4em;bottom:-.4em;width:1.5em;height:1.5em;border-radius:50%; background:var(--p-green);color:#fff;display:flex;align-items:center;justify-content:center} .platform-page .ip-k-seal svg{width:.78em;height:.78em;display:block} .platform-page .ip-k-seal.ip-lock{background:var(--p-royal)} .platform-page .ip-k-doc-t{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:.3em} /* 12 - timeline ------------------------------------------------------------- */ .platform-page .ip-k-tl{position:relative;padding-top:.15em} .platform-page .ip-k-tl-line{position:absolute;left:0;right:0;top:.72em;height:2px;background:var(--p-rule)} .platform-page .ip-k-tl-line i{display:block;height:100%;background:var(--acc-fill)} .platform-page .ip-k-tl-row{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4em} .platform-page .ip-k-tl-s{display:flex;flex-direction:column;align-items:center;gap:.4em;min-width:0} .platform-page .ip-k-tl-d{width:1.45em;height:1.45em;border-radius:50%;background:var(--p-paper);flex:none; box-shadow:inset 0 0 0 2px var(--p-rule);display:flex;align-items:center; justify-content:center;color:var(--p-mute);font-size:.8em} .platform-page .ip-k-tl-d svg{width:.72em;height:.72em;display:block} .platform-page .ip-k-tl-s.ip-done .ip-k-tl-d{background:var(--acc-fill);box-shadow:none;color:#fff} .platform-page .ip-k-tl-s.ip-now .ip-k-tl-d{background:var(--p-paper);box-shadow:inset 0 0 0 2px var(--acc);color:var(--acc)} .platform-page .ip-k-tl-t{font-family:var(--font-label);font-size:.76em;letter-spacing:.06em;text-transform:uppercase; color:var(--p-mute);text-align:center;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;max-width:100%} .platform-page .ip-k-tl-s.ip-now .ip-k-tl-t, .platform-page .ip-k-tl-s.ip-done .ip-k-tl-t{color:var(--p-ink)} .platform-page .ip-k-tl-v{font-family:var(--font-heading);font-weight:700;font-size:1.05em;color:var(--p-ink)} /* extra - Emma line (the product's own voice, where the copy names her) ----- */ .platform-page .ip-k-emma{display:flex;align-items:center;gap:.6em;background:var(--p-bg);border-radius:.6em; padding:.5em .7em} .platform-page .ip-k-emma-m{width:1.5em;height:1.5em;flex:none;border-radius:50%;background:var(--p-royal); color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--font-heading);font-weight:700;font-size:.82em} .platform-page .ip-k-emma-t{font-size:.98em;color:var(--p-soft);min-width:0;line-height:1.3} .platform-page .ip-k-emma-t b{color:var(--p-ink);font-weight:600} /* shared small bits -------------------------------------------------------- */ .platform-page .ip-k-hd{font-family:var(--font-label);font-size:.8em;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--p-mute);margin-bottom:-.35em} .platform-page .ip-k-big{font-family:var(--font-heading);font-weight:700;font-size:1.5em;color:var(--p-ink); letter-spacing:-.015em;line-height:1.05} .platform-page .ip-k-sub{display:block;font-size:.95em;color:var(--p-mute);line-height:1.3} .platform-page .ip-nowrap{white-space:nowrap} /* -- instance geometry ------------------------------------------------------ One class per distinct declaration, generated from the markup itself so the two cannot drift. Bar widths reuse the page's existing `dc-w-*` set. */ .platform-page .ip-cols-11{grid-template-columns:repeat(11,1fr)} .platform-page .ip-cols-24{grid-template-columns:repeat(24,1fr)} .platform-page .ip-dv-neg-23{right:50%;width:23%} .platform-page .ip-dv-neg-46{right:50%;width:46%} .platform-page .ip-dv-pos-11{left:50%;width:11%} .platform-page .ip-dv-pos-27{left:50%;width:27%} .platform-page .ip-dv-pos-29{left:50%;width:29%} .platform-page .ip-dv-pos-44{left:50%;width:44%} .platform-page .ip-fn-blue{width:78%;background:var(--p-blue)} .platform-page .ip-fn-coral{width:34%;background:var(--p-coral)} .platform-page .ip-fn-royal{width:100%;background:var(--p-royal)} .platform-page .ip-key-5b9e72{background:#5B9E72} .platform-page .ip-key-coral{background:var(--p-coral)} .platform-page .ip-key-green{background:var(--p-green)} .platform-page .ip-ring-65{background:conic-gradient(var(--acc-fill) 0 65%,#EDEFF5 65% 100%)} .platform-page .ip-ring-92{background:conic-gradient(var(--p-coral) 0 92%,#EDEFF5 92% 100%)} .platform-page .ip-xy-22-38{left:22%;top:38%} .platform-page .ip-xy-22-56{left:22%;top:56%} .platform-page .ip-xy-24-28{left:24%;top:28%} .platform-page .ip-xy-24-38{left:24%;top:38%} .platform-page .ip-xy-32-74{left:32%;top:74%} .platform-page .ip-xy-42-52{left:42%;top:52%} .platform-page .ip-xy-42-62{left:42%;top:62%} .platform-page .ip-xy-50-30{left:50%;top:30%} .platform-page .ip-xy-50-48{left:50%;top:48%} .platform-page .ip-xy-54-22{left:54%;top:22%} .platform-page .ip-xy-66-68{left:66%;top:68%} .platform-page .ip-xy-76-44{left:76%;top:44%} .platform-page .ip-xy-76-54{left:76%;top:54%} .platform-page .ip-xy-80-52{left:80%;top:52%} .platform-page .ip-xy-80-70{left:80%;top:70%}