/* --------------------------------------------------------------------------- Meridian — product surfaces inside the placeholder frames. The placeholder cards used to describe the visual that would eventually replace them. These are that replacement: representative product surfaces drawn from the real EVALUATE application — its own token palette, type scale, table geometry, chart treatment and number formatting — sitting inside the marketing frame the artboards already used. Source: diagrams-preview.html, generated against the Suite codebase. Two deliberate splits, both taken from the real code rather than guessed: · Colour. The frame keeps the marketing accents (EVALUATE #8fb8cc and so on); the surface inside uses the app's own palette (--accent #086eaa). They genuinely differ — #8fb8cc does not appear anywhere in the Suite — so a surface that matched the frame would be the invented one. · Type. The app ships a system stack, the marketing site ships Inter. The surfaces keep the system stack for the same reason. Number formatting follows the app's helpers exactly: negatives are parenthesised with the symbol inside — (A$85.5M) — and are not coloured except in the net-cash-flow column; percentages take a leading minus; a true zero is an em dash in a table but A$0.0M in a headline tile, because a computed breakeven must not read as "not calculated"; M becomes B at |v| >= 1000. --------------------------------------------------------------------------- */ :root{ /* ---- MARKETING TOKENS (the frame) ---- */ --mk-dark:#07090c; --mk-paper:#f3f1ec; --mk-white:#fff; --mk-ink:#151a1f; --mk-frame-bg:#0b1016; --mk-frame-line:rgba(255,255,255,.15); --mk-grid:rgba(255,255,255,.035); --mk-status:#6d7b87; --mk-body:#a9b4bd; --eval:#8fb8cc; --stage:#c58d43; --capital:#8a78c7; /* ---- REAL APP TOKENS (the product surface) — apps/evaluate/src/app/globals.css ---- */ --bg:#f5f6f2; --bg-lift:#fafbf8; --fg:#1d231f; --muted:#5d645e; --muted-2:#5f655f; --panel:#fff; --panel-2:#f0f2ee; --line:#d9ded8; --line-soft:#e6eae4; --line-strong:#c5ccc5; --accent:#086eaa; --accent-soft:rgba(8,110,170,.1); --accent-strong:#075f92; --pos:#1e6e50; --pos-soft:rgba(30,110,80,.12); --neg:#b83b36; --neg-soft:rgba(184,59,54,.1); --warn:#8a5410; --warn-soft:rgba(138,84,16,.13); --info:#5b5bc7; --gold:#8a784f; --th-bg:#f0f2ee; --hover-soft:rgba(29,35,31,.05); --input-bg:rgba(29,35,31,.035); --app-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; } .ph .illus{position:absolute;right:10px;bottom:8px;z-index:2;font-size:9px;letter-spacing:.13em; text-transform:uppercase;color:#5c6a75;background:rgba(11,16,22,.9);padding:3px 8px;border:1px solid rgba(255,255,255,.09)} /* ---------- REAL PRODUCT SURFACE (app tokens) ---------- */ /* The build sets --accent (plus --accent-hover/--accent-ink) on so the mobile nav CTA can carry each page's marketing colour. That variable name collides with the Suite's own --accent, and inherits straight into the product surface — which rendered active tabs, primary buttons and changed- input strips in the pale marketing accent instead of the app blue, at around 2:1 on the light panel. Redeclaring the app tokens on .app re-establishes the product palette locally and keeps the two colour systems from leaking into one another. */ .app{ --accent:#086eaa; --accent-soft:rgba(8,110,170,.1); --accent-strong:#075f92; --bg:#f5f6f2; --bg-lift:#fafbf8; --fg:#1d231f; --muted:#5d645e; --muted-2:#5f655f; --panel:#fff; --panel-2:#f0f2ee; --line:#d9ded8; --line-soft:#e6eae4; --line-strong:#c5ccc5; --pos:#1e6e50; --pos-soft:rgba(30,110,80,.12); --neg:#b83b36; --neg-soft:rgba(184,59,54,.1); --warn:#8a5410; --warn-soft:rgba(138,84,16,.13); --info:#5b5bc7; --gold:#8a784f; --th-bg:#f0f2ee; --hover-soft:rgba(29,35,31,.05); --input-bg:rgba(29,35,31,.035); } .app{position:relative;z-index:1;background:var(--bg);color:var(--fg);font-family:var(--app-font); font-size:14.5px;line-height:1.55;letter-spacing:-.008em;border:1px solid var(--line);border-radius:6px; padding:16px;overflow-x:auto} .app *{font-variant-numeric:tabular-nums} .panel{border:1px solid var(--line);border-radius:6px;background:var(--panel)} .panel+.panel{margin-top:10px} .panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-soft)} .panel-title{font-size:.95rem;font-weight:650;letter-spacing:-.02em} .panel-body{padding:16px} .panel-body.stack{display:flex;flex-direction:column;gap:10px} .btn-ghost{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:4px; background:transparent;border:1px solid transparent;color:var(--muted);font-size:12px;font-family:inherit} /* page heading */ .page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 2px 12px;flex-wrap:wrap} .page-title{margin:0;font-size:1.55rem;font-weight:650;letter-spacing:-.02em} .page-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .badge{font-size:10.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--panel-2);white-space:nowrap} .badge.warning{color:var(--warn);border-color:rgba(138,84,16,.3);background:var(--warn-soft)} .badge.info{color:var(--info);border-color:rgba(91,91,199,.28);background:rgba(91,91,199,.1)} .badge.pos{color:var(--pos);border-color:rgba(30,110,80,.3);background:var(--pos-soft)} .btn-primary{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:4px;background:var(--accent);color:#fff;border:none;font-size:12.5px;font-weight:600;font-family:inherit} .btn-sec{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:4px;background:var(--panel);color:var(--fg);border:1px solid var(--line);font-size:12.5px;font-family:inherit} /* tabs */ .tab-row{display:flex;gap:2px;border-bottom:1px solid var(--line-soft);margin-bottom:16px} .tab{padding:8px 14px;font-size:13.4px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px} .tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} /* KPI grid — real .kpi-grid */ .kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:0;border:1px solid var(--line); border-radius:6px;overflow:hidden;background:var(--panel)} .kpi-card{padding:12px 14px;display:flex;flex-direction:column;gap:3px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .kpi-card:nth-child(4n){border-right:none} .kpi-card:nth-last-child(-n+4){border-bottom:none} .kpi-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);display:flex;gap:6px;align-items:center} .kpi-value{font-size:1.42rem;font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--fg)} .kpi-value.small{font-size:1.05rem} .kpi-sub{font-size:.72rem;color:var(--muted)} .ghost-prior{font-size:.72rem;color:var(--muted-2);opacity:.72} .ghost-prior s{text-decoration-color:rgba(95,101,95,.5)} /* take row */ .take-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--panel)} .take-card{padding:10px 14px;text-align:center;border-right:1px solid var(--line-soft)} .take-card:last-child{border-right:none} .take-card .v{font-size:1.18rem;font-weight:700} .take-card .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)} /* data table — real .data-table */ .data-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.875rem} .data-table th{height:38px;font-size:.75rem;font-weight:600;text-align:right;padding:0 12px;background:var(--th-bg); color:var(--muted);border-bottom:1px solid var(--line)} .data-table td{height:48px;padding:8px 12px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--line-soft)} .data-table th:first-child,.data-table td:first-child{text-align:left} .data-table tfoot td{background:var(--th-bg);border-top:1px solid var(--line);border-bottom:none;font-weight:650} .data-table.compact td{height:36px} .data-table.tight td{height:32px;font-size:.82rem} .neg{color:var(--neg)} .pos{color:var(--pos)} .dim{color:var(--muted-2)} .mono{font-family:var(--mono);font-size:.78rem} .hint{font-size:.72rem;color:var(--muted);line-height:1.45} .field-label{font-size:.72rem;letter-spacing:.02em;color:var(--muted)} .sec-title{font-size:.8rem;font-weight:650;letter-spacing:-.01em;margin:0} @media (max-width:820px){ .kpi-grid{grid-template-columns:repeat(2,minmax(120px,1fr))} .kpi-card:nth-child(4n){border-right:1px solid var(--line-soft)} .kpi-card:nth-child(2n){border-right:none} .ph{padding:20px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* --- Fitting a surface into the artboards' placeholder frame -------------- The frames are inline-styled in the page sources and were built to space a heading and a note apart. A surface fills them instead, so the injected ones are marked and re-aligned here rather than by editing every frame. */ /* (the placeholder shell this centred no longer exists) */ .pv > .app { position: relative; z-index: 1; width: 100%; margin-top: 20px; } .pv > .illus { position: relative; z-index: 1; margin-top: 16px; } /* The surfaces are dense. Below the tablet breakpoint they scroll inside their own frame rather than forcing the page wider. */ /* --- Surfaces adapt to their frame, not to the viewport ------------------- A hero placeholder is a narrow column on a wide screen, so a viewport breakpoint never fires and the four-across KPI grid clips its values. The surface is a query container instead, so each one reflows to the width it actually has. The viewport rules above remain as the fallback. */ .pv > .app { container-type: inline-size; } @container (max-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-value { font-size: 1.24rem; } } @container (max-width: 400px) { .kpi-grid { grid-template-columns: minmax(0, 1fr); } .take-row { grid-template-columns: minmax(0, 1fr); } } /* Tables stay legible by scrolling inside the frame rather than compressing. */ .pv > .app .data-table { min-width: 0; } .pv .panel-body:has(> table), .pv .ui-scroll { overflow-x: auto; } /* --- Nothing gets silently cut off --------------------------------------- The app sets white-space:nowrap on table cells, which is right for its own full-width numeric tables. Inside a marketing frame the same table sits in a narrow column, and a prose cell — a fiscal citation, an assumption basis — then forces the surface wider than the frame, which clips it. Prose wraps here instead. Money and percentage values are single tokens, so they do not break; headers stay on one line. */ .pv .data-table td { white-space: normal; } .pv .data-table th { white-space: nowrap; } /* Whatever still cannot fit scrolls inside its own frame rather than being hidden by the frame's overflow:hidden. */ .pv > .app { overflow-x: auto; } /* A narrow frame only needs a few pixels back: tighten the panel padding and the table cell gutters so the densest surfaces settle inside their frame instead of scrolling by a couple of dozen pixels. */ @container (max-width: 700px) { .panel-body { padding: 12px; } .data-table td, .data-table th { padding-left: 8px; padding-right: 8px; } .data-table { font-size: .82rem; } } /* --------------------------------------------------------------------------- Standalone product visuals. The surfaces used to sit inside the prototype shell that once described them — grid paper, an accent bar, a label saying what the visual was, a footer of build notes. All of that is gone. The module now gets that part of the page to itself and the page recedes around it: no padding, no background, no faux chrome, no marketing card around an application card. --------------------------------------------------------------------------- */ /* Several .pv blocks are

elements, which pick up the UA default `margin: 1em 40px` and sat 40px inside every other element on the page. The visual is a peer of the prose, so it aligns with it. */ .pv { position: relative; margin-left: 0; margin-right: 0; padding: 0; background: none; border: 0; } .pv > .app { container-type: inline-size; width: 100%; } /* A white application surface needs the faintest separation from a warm light page; on a dark section it makes its own contrast and gets none. */ .pv > .app { box-shadow: 0 0 0 1px rgba(29, 35, 31, 0.07); border-radius: 3px; } .dark .pv > .app, section[style*="background:#07090c"] .pv > .app, section[style*="background:#0b0f14"] .pv > .app { box-shadow: none; } /* One discreet caption, not the two "illustrative" markers there used to be. Disclosure hierarchy: the first surface on each page carries the full sentence ("Product surfaces use representative project data."); every later surface reduces to "Illustrative project data". Small neutral text, modest tracking, no titlebar treatment. */ .pv-cap { margin: 10px 0 0; font-size: 11.5px; letter-spacing: .02em; color: #7d878e; } .pv-cap--first { font-size: 12.5px; } .pv .illus { display: none; } /* --------------------------------------------------------------------------- Product-configuration matrix (home). A comparison table in the editorial system, not a pricing table: thin rules, squared geometry, no cards, no ticks. Capability marks keep the reads as all four layers rather than everything-green. The active configuration gets a quiet column tint plus a 2px top rule on its header — a structural cue, not colour alone. Home ships dark, so these are dark-band values; the component exists only there. site.js drives the cycle. --------------------------------------------------------------------------- */ .cfg { margin-top: 46px; } .cfg-line { transition: opacity 160ms ease; min-height: 1.7em; margin: 0 0 16px; color: #aeb8c2; font-size: 15.5px; line-height: 1.55; letter-spacing: -.01em; } .cfg-line.is-swap { opacity: 0; } .cfg-line b { color: #f2f4f6; font-weight: 650; letter-spacing: .01em; } /* The table bleeds a gutter past the page's content edge on both sides and the first column pads it back, so a lit row's tint breathes around the capability name rather than starting hard against its first letter. Same trick the phone layout already uses on the stacked rows. */ .cfg-t { width: calc(100% + 28px); margin-inline: -14px; border-collapse: collapse; } .cfg-t th, .cfg-t td { padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,.10); text-align: center; transition: background 300ms ease, box-shadow 300ms ease; } .cfg-t tbody th[scope="row"] { text-align: left; padding-left: 14px; color: #cdd5db; font-weight: 500; font-size: 14px; letter-spacing: -.01em; } .cfg-cap-h { text-align: left !important; padding-left: 14px !important; color: #6d7b87; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; /* The configuration headers are buttons whose own padding centres their label in the header row, so this one centres in the same box to sit on their line rather than being bottom-aligned against the rule. Both declarations have to outrank .cfg-t thead th, which is the more specific selector. */ vertical-align: middle !important; padding-bottom: 0 !important; } .cfg-t thead th { border-bottom: 1px solid rgba(255,255,255,.22); padding: 0 6px; vertical-align: bottom; } /* a stronger rule opens each capability group */ .cfg-t tr.cfg-grp th, .cfg-t tr.cfg-grp td { border-top: 1px solid rgba(255,255,255,.20); } .cfg-t thead button { appearance: none; width: 100%; background: transparent; border: 0; border-top: 2px solid transparent; padding: 11px 6px 13px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; color: #aeb8c2; cursor: pointer; white-space: nowrap; transition: color 200ms ease, border-color 300ms ease; } .cfg-t thead button:hover { color: #fff; } .cfg-t thead button[aria-pressed="true"] { color: #fff; } /* capability marks: colour = originating module. Two levels, because the table cycles one configuration at a time: every mark carries a ring so "included" stays legible in the columns you are not looking at, and the active column's marks then take full opacity and a coloured glow. Without the ring the quiet columns read as blank; without the dimming every column reads as selected and the cycle says nothing. */ .cfg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; opacity: .5; box-shadow: 0 0 0 1px rgba(255,255,255,.3); transition: opacity 300ms ease, box-shadow 300ms ease; } .cfg-dot.m-e { background: #8fb8cc; color: #8fb8cc; } .cfg-dot.m-s { background: #c58d43; color: #c58d43; } .cfg-dot.m-c { background: #8a78c7; color: #8a78c7; } .cfg-no { color: #56626c; font-size: 13px; } .cfg-inc { display: none; } .cfg .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Active configuration. The selected column is framed top to bottom — a quiet tint and accent rule in the head, hairline sides continuing down the body — and its marks come up to full strength. The frame is drawn with inset shadows rather than borders so it can sit on one column of a collapsed-border table without nudging the others, and it is the only vertical rule in the table: running edges down every column made all four read as selected at once. */ .cfg[data-active="0"] thead .c0, .cfg[data-active="1"] thead .c1, .cfg[data-active="2"] thead .c2, .cfg[data-active="3"] thead .c3 { background: rgba(255,255,255,.05); } .cfg[data-active="0"] .c0, .cfg[data-active="1"] .c1, .cfg[data-active="2"] .c2, .cfg[data-active="3"] .c3 { box-shadow: inset 1px 0 0 rgba(255,255,255,.24), inset -1px 0 0 rgba(255,255,255,.24); } .cfg[data-active="0"] tbody .c0 .cfg-dot, .cfg[data-active="1"] tbody .c1 .cfg-dot, .cfg[data-active="2"] tbody .c2 .cfg-dot, .cfg[data-active="3"] tbody .c3 .cfg-dot { opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 8px currentColor; } .cfg[data-active="0"] thead .c0 button { border-top-color: #8fb8cc; } .cfg[data-active="1"] thead .c1 button { border-top-color: #c58d43; } .cfg[data-active="2"] thead .c2 button { border-top-color: #8a78c7; } .cfg[data-active="3"] thead .c3 button { border-top-color: #e8edf1; } /* Row provenance. A row lights, edge to edge, in the colour of the module that supplies it — but only while the selected configuration actually includes that module, so the cycle reads as capability being added rather than as decoration. EVALUATE is in every configuration, so its rows stay lit; STAGE rows light on +STAGE and +STAGE+CAPITAL, CAPITAL rows on +CAPITAL and +STAGE+CAPITAL. A row is never part-lit: the tint sits on the , so the capability name travels with it and the unlit columns simply carry a dash. Alphas are matched by eye, not by luminance. The ground is a cool near-black, so blue sits close to it and needs roughly twice the alpha of amber or purple to register at the same strength; matching them numerically makes the purple rows shout and the blue rows vanish. */ .cfg-t tbody tr { transition: background-color 300ms ease; } .cfg tbody tr.r-e { background: rgba(143,184,204,.16); } .cfg[data-active="1"] tbody tr.r-s, .cfg[data-active="3"] tbody tr.r-s { background: rgba(197,141,67,.20); } .cfg[data-active="2"] tbody tr.r-c, .cfg[data-active="3"] tbody tr.r-c { background: rgba(138,120,199,.16); } /* ---- phones: configuration selector + active-configuration list ---- */ @media (max-width: 640px) { .cfg-t, .cfg-t thead, .cfg-t tbody, .cfg-t tr, .cfg-t th, .cfg-t td { display: block; } /* the stacked rows carry their own bleed below — don't stack it on the table's */ .cfg-t { width: auto; margin-inline: 0; } .cfg-t .cfg-cap-h { display: none; } .cfg-t thead tr { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .cfg-t thead th { border: 0; padding: 0; } .cfg-t thead button { width: auto; border: 1px solid rgba(255,255,255,.16); border-radius: 3px; padding: 10px 12px; white-space: normal; text-align: left; } .cfg-t thead button[aria-pressed="true"] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); color: #fff; } /* Pulled out and padded back by the same amount: the text keeps the page's content edge while the row tint breathes past it on both sides, so "Included" no longer sits hard against the band's edge. */ .cfg-t tbody tr { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-inline: -12px; padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.10); } .cfg-t tbody th[scope="row"] { border: 0; padding: 0; flex: 1; } .cfg-t tbody td { display: none; border: 0; padding: 0; background: none !important; } /* There are no columns to frame once the table is a stacked list — the selected configuration is already the pressed button above it. */ .cfg-t th, .cfg-t td { box-shadow: none !important; } .cfg[data-active="0"] tbody td.c0, .cfg[data-active="1"] tbody td.c1, .cfg[data-active="2"] tbody td.c2, .cfg[data-active="3"] tbody td.c3, .cfg-inc { display: inline; color: #cdd5db; font-size: 12.5px; white-space: nowrap; } .cfg-t tbody .cfg-inc { margin-left: 7px; } .cfg-t tr.cfg-grp { border-top: 1px solid rgba(255,255,255,.20); } .cfg-t tr.cfg-grp th, .cfg-t tr.cfg-grp td { border-top: 0; } } /* --------------------------------------------------------------------------- Workflow rhythm. Every workflow step used to get the same 92px of ceremony top and bottom, which is what made seven of them read as one template repeated. The steps carrying a real product surface keep that weight and act as the page's hero moments; the supporting steps are compact. --------------------------------------------------------------------------- */ section[data-screen-label="Workflow steps"] > article { padding-top: 46px !important; padding-bottom: 46px !important; } section[data-screen-label="Workflow steps"] > article:has(.pv) { padding-top: 76px !important; padding-bottom: 76px !important; } /* --------------------------------------------------------------------------- Section rhythm. The artboards standardised on 112px top and bottom for every major band. Across a seven-step product page that is a lot of repeated empty space, and it is the same value on a two-paragraph band as on one carrying a full product surface. 88px reads the same and gives the pages back a screen. --------------------------------------------------------------------------- */ main > section[style*="padding:112px 0"] { padding-top: 88px !important; padding-bottom: 88px !important; } /* The workflow intro leads straight into its steps — it keeps the band's top weight but hands over quickly, rather than being restretched to 88px by the rule above (its authored bottom is 72px). */ main > section[data-screen-label="Workflow intro"] { padding-top: 80px !important; padding-bottom: 48px !important; } /* Home — "Immediate product proof" now repeats the hero's two-column composition on purpose: the bridge recording and the hero tornado read as a matched pair. (The old full-width .proof-stack rule is gone with it.) */ /* --------------------------------------------------------------------------- Contrast. The artboards' small uppercase labels — eyebrows, step numbers, meta lines, captions — sit between 2.9:1 and 4.4:1 on the warm light backgrounds, which is below WCAG AA for normal-size text. Each is nudged to just over 4.5:1 against the warmest background it appears on, so the greys stay grey and the hierarchy is unchanged; they are simply readable. Targeted by their authored inline value rather than by editing several hundred inline styles. Colours inside `.app` are deliberately untouched: those reproduce the application's own interface. --------------------------------------------------------------------------- */ :where(main) [style*="color:#5f91aa"]:not(.app *) { color: #40728b !important; } :where(main) [style*="color:#88908b"]:not(.app *) { color: #666e69 !important; } :where(main) [style*="color:#7d878e"]:not(.app *) { color: #646e75 !important; } :where(main) [style*="color:#79837a"]:not(.app *) { color: #656f66 !important; } :where(main) [style*="color:#788078"]:not(.app *) { color: #666e66 !important; } :where(main) [style*="color:#7b8580"]:not(.app *) { color: #656f6a !important; } :where(main) [style*="color:#7b858c"]:not(.app *) { color: #646e75 !important; } :where(main) [style*="color:#7a858c"]:not(.app *) { color: #636e75 !important; } :where(main) [style*="color:#6d777e"]:not(.app *) { color: #646e75 !important; } :where(main) [style*="color:#6d777d"]:not(.app *) { color: #646e74 !important; } :where(main) [style*="color:#667179"]:not(.app *) { color: #636e76 !important; } :where(main) [style*="color:#68757e"]:not(.app *) { color: #616e77 !important; } :where(main) [style*="color:#69747b"]:not(.app *) { color: #636e75 !important; } :where(main) [style*="color:#69747c"]:not(.app *) { color: #636e76 !important; } :where(main) [style*="color:#9d692c"]:not(.app *) { color: #956124 !important; } /* The standalone-visual caption, set in this stylesheet rather than inline. */ .pv-cap { color: #646e75; } .dark .pv-cap, .close .pv-cap { color: #7d8892; } /* On the dark bands the same greys need lifting, not darkening. The footer legal line and the dark-section eyebrows are the two that fall short. */ footer [style*="color:#65727d"], footer [style*="color:#66747e"] { color: #6f7c87 !important; } .legal, .legal-footer { color: #6f7c87 !important; } .dark .light-eyebrow, .dark .section-head p { color: #717b82; } /* The standalone-visual caption sits on both dark and light bands and cannot be one value; the section background decides it. */ section[style*="background:#07090c"] .pv-cap, section[style*="background:#0b0f14"] .pv-cap, section[style*="background-color:#07090c"] .pv-cap, .close .pv-cap, .dark .pv-cap { color: #86909a !important; } /* --- Remaining AA corrections on the hand-authored pages ------------------ Each of these is a small label or note on the warm light band, or the one dark band on Data & Integrations where the same token needs lifting rather than darkening. Values chosen to clear 4.5:1 while staying the same grey. */ .legal-aside div span, .company-strip > div span, .contact-form .form-title, .field-grid > label > span, .contact-form .form-note, .contact-form .submit-row small, .next-item p, .contact-side .direct small, .contact-side .privacy-note, .cap-group .group-meta p { color: #5c666d !important; } /* Data & Integrations: the outputs band is dark, so its heading pair lifts. */ .outputs .light-eyebrow { color: #8fb8cc !important; } .outputs .section-head p { color: #aeb8c2 !important; } /* Product identities on a light band take the darker variant of the same hue. These two pages set them on light where the rest of the site sets them on dark, so the identity is preserved and only the value changes. */ .legal-section .prod.eval, .choice .prod.eval { color: #396980 !important; } .legal-section .prod.stage, .choice .prod.stage { color: #8a5b23 !important; } .legal-section .prod.capital,.choice .prod.capital { color: #5b4b96 !important; } /* --------------------------------------------------------------------------- Supporting workflow steps. With the prototype shell gone these rows lost their right-hand column and left a wide empty gutter, which reads as a missing element rather than as space. They become a two-column editorial row instead: eyebrow and heading on the left, the explanation and its meta line on the right. The steps that carry a real product surface are untouched. --------------------------------------------------------------------------- */ section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div { grid-template-columns: 76px minmax(0, .92fr) minmax(0, 1.08fr) !important; grid-template-rows: auto auto auto; column-gap: 38px; } section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child { display: contents; } /* left column: eyebrow, then heading */ section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > p:first-child { grid-area: 1 / 2; } section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > h3 { grid-area: 2 / 2; margin-bottom: 0; } /* right column: explanation, then its meta line beneath */ section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > p:nth-of-type(2) { grid-area: 2 / 3; margin: 0; } section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > p:nth-of-type(3), section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > div, section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > ul { grid-area: 3 / 3; margin-top: 18px; } @media (max-width: 900px) and (min-width: 701px) { section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div { grid-template-columns: 76px minmax(0, 1fr) !important; grid-template-rows: none; } section[data-screen-label="Workflow steps"] > article:not(:has(.pv)) > div > div:last-child > * { grid-area: auto / 2 !important; } } /* --------------------------------------------------------------------------- Workflow steps on phones. The desktop grid must not survive at this width: no permanent empty number column. The step number and its eyebrow share one baseline meta row — "01 / 04 STAGE GATES" — then heading, explanation, supporting lines and finally the product surface, each full width. Grid-row placement also puts the surface after the copy on the steps whose surface comes first in the DOM, so the reader understands the visual before it appears. --------------------------------------------------------------------------- */ @media (max-width: 700px) { section[data-screen-label="Workflow steps"] > article > div { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: none; column-gap: 16px; } section[data-screen-label="Workflow steps"] > article > div > div:first-child { grid-row: 1; grid-column: 1; padding-top: 2px; align-self: baseline; } section[data-screen-label="Workflow steps"] > article > div > div:not(.pv):not(:first-child) { display: contents; } section[data-screen-label="Workflow steps"] > article > div > div:not(.pv):not(:first-child) > p:first-child { grid-row: 1; grid-column: 2; margin: 0; align-self: baseline; } section[data-screen-label="Workflow steps"] > article > div > div:not(.pv):not(:first-child) > h3 { grid-row: 2; grid-column: 1 / -1; margin-top: 18px; } section[data-screen-label="Workflow steps"] > article > div > div:not(.pv):not(:first-child) > p:nth-of-type(2) { grid-row: 3; grid-column: 1 / -1; margin-top: 14px; } section[data-screen-label="Workflow steps"] > article > div > div:not(.pv):not(:first-child) > :is(ul, div, p:nth-of-type(3)) { grid-row: 4; grid-column: 1 / -1; margin-top: 18px; } section[data-screen-label="Workflow steps"] > article > div > .pv { grid-row: 5; grid-column: 1 / -1; margin-top: 24px; } } /* --------------------------------------------------------------------------- Narrow viewports. The surfaces used to be forced to 460px and panned inside their frame, which clipped at the right edge and read as unpolished. Instead each part behaves the way it should at that width: metric tiles reflow, charts scale with their viewBox, and only a genuine data table — which cannot compress without becoming unreadable — scrolls, inside its own bounds with an edge fade so the scroll is legible as a choice rather than a defect. --------------------------------------------------------------------------- */ @media (max-width: 760px) { .pv > .app { overflow: visible; } .pv > .app > * { min-width: 0; } /* Tiles and readouts stack rather than squeeze. */ .pv .kpi-grid { grid-template-columns: minmax(0, 1fr) !important; } .pv .take-row { grid-template-columns: minmax(0, 1fr) !important; } .pv .ui__out { grid-template-columns: minmax(0, 1fr) !important; } /* Charts scale with their viewBox. */ .pv svg { width: 100%; height: auto; } /* Only tables scroll, and they say so. */ .pv .data-table, .pv table { min-width: 0; } /* Any panel that still cannot compress scrolls inside its own bounds. The fade makes the scroll legible as a choice rather than a clipped edge. */ .pv .ui-scroll, .pv .panel, .pv .panel-body { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pv .panel { mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent); } .pv .panel-header { position: sticky; left: 0; } /* Panels lose their inner gutter at this width. */ .pv .panel-body { padding: 12px; } } /* --------------------------------------------------------------------------- Product recordings. Each product page and Home open on a looping GIF of the module doing one thing. Three variants ship per module: a dark desktop cut whose canvas is #0d1113 so it sits flush on the near-black hero, a light portrait cut for narrow viewports, and a still frame for anyone who has asked for reduced motion (a GIF cannot be paused, so the only honest answer is not to send a moving one). The