/* © 2026 Princeton Ledger & Consulting LLC. All rights reserved. Proprietary and confidential. */ /* Colour themes for the site, the public demo, the portal and the workspace shell. theme-init.js sets before first paint from the choice kept in localStorage ('mdTheme': auto, dark or light). Without script, the device setting decides through prefers-color-scheme. Every colour the pages use comes from the tokens below; the *-rgb tokens are for translucent fills, e.g. rgba(var(--ink-rgb),.05). Tokens for workspace modules (dashboard.js, tools.js, assistant.js, records.js ...), matching the approved dashboard preview: --md-bg --md-panel --md-panel2 --md-line --md-ink --md-ink2 --md-ink3 --md-gold --md-green --md-amber --md-coral --md-blue. ECharts colours: read them with getComputedStyle(document.documentElement) and re-draw on the 'plc:theme' window event. Until a module reads them, the workspace keeps that module's area dark in the light theme (see "workspace modules" below). */ :root{ --ink-rgb:255,255,255; --panel-rgb:7,17,43; --bg-rgb:3,8,16; --gold-rgb:200,164,74; --em-rgb:22,168,101; --hi:#ffffff; --red:#e06650; --amber:#D9A63C; --green-t:#16A865; --on-gold:#07112B; --md-bg:#071427; --md-panel:#0d2140; --md-panel2:#11294d; --md-line:rgba(212,178,90,.18); --md-ink:#eef2f8; --md-ink2:#b9c4d6; --md-ink3:#9da7bd; --md-gold:#d4b25a; --md-green:#22b573; --md-amber:#e6a817; --md-coral:#ef6b57; --md-blue:#5aa0ff; --md-track:rgba(255,255,255,.08); --md-gold-t:#d4b25a; --md-ok-t:#7fd39b; --md-warn-t:#e6b44a; --md-bad-t:#f08f7c; --md-accent:#d4b25a; --md-on-accent:#0B1F3A; --md-ok-bg:rgba(34,181,115,.16); --md-warn-bg:rgba(230,168,23,.16); --md-bad-bg:rgba(239,107,87,.16); --md-gold-bg:rgba(212,178,90,.08); --md-line-strong:rgba(212,178,90,.38); --md-soft:rgba(255,255,255,.05); --md-soft2:rgba(255,255,255,.1); --chat-bg:#07112B; --chat-bg2:#0c1a3d; --chat-fg:#ffffff; color-scheme:dark; } /* ---------- light ---------- */ :root[data-theme="light"]{ --navy:#f4f1ea; --navy-2:#ffffff; --emerald:#dcefe4; --em-mid:#127a47; --em-bright:#127a47; --gold:#7f6118; --gold-lt:#6e5413; --gold-dim:rgba(127,97,24,.22); --white:#0b1f3a; --gray:#55637a; --gray-lt:#41526b; --gray-rule:#8a94a8; --txt:#2f3e55; --txt-lt:#1f2e45; --glass:rgba(255,255,255,.78); --g-border:rgba(11,31,58,.14); --g-border-em:rgba(18,122,71,.2); --ink-rgb:11,31,58; --panel-rgb:255,255,255; --bg-rgb:244,241,234; --gold-rgb:156,122,43; --em-rgb:18,122,71; --hi:#0b1f3a; --red:#b23a26; --amber:#8a6100; --green-t:#127a47; --on-gold:#ffffff; --md-bg:#f4f1ea; --md-panel:#ffffff; --md-panel2:#faf7f0; --md-line:rgba(11,31,58,.12); --md-ink:#0b1f3a; --md-ink2:#41526b; --md-ink3:#5a6880; --md-gold:#9c7a2b; --md-green:#14874f; --md-amber:#b7820a; --md-coral:#c4442f; --md-blue:#2a63c4; --md-track:rgba(11,31,58,.08); --md-gold-t:#7f6118; --md-ok-t:#0f6a3c; --md-warn-t:#7a5600; --md-bad-t:#a8331f; --md-accent:#7f6118; --md-on-accent:#ffffff; --md-ok-bg:rgba(20,135,79,.12); --md-warn-bg:rgba(183,130,10,.13); --md-bad-bg:rgba(196,68,47,.11); --md-gold-bg:rgba(156,122,43,.08); --md-line-strong:rgba(11,31,58,.24); --md-soft:rgba(11,31,58,.035); --md-soft2:rgba(11,31,58,.08); --chat-bg:#ffffff; --chat-bg2:#faf7f0; --chat-fg:#0b1f3a; color-scheme:light; } @media (prefers-color-scheme:light){ :root:not([data-theme]){ --navy:#f4f1ea; --navy-2:#ffffff; --emerald:#dcefe4; --em-mid:#127a47; --em-bright:#127a47; --gold:#7f6118; --gold-lt:#6e5413; --gold-dim:rgba(127,97,24,.22); --white:#0b1f3a; --gray:#55637a; --gray-lt:#41526b; --gray-rule:#8a94a8; --txt:#2f3e55; --txt-lt:#1f2e45; --glass:rgba(255,255,255,.78); --g-border:rgba(11,31,58,.14); --g-border-em:rgba(18,122,71,.2); --ink-rgb:11,31,58; --panel-rgb:255,255,255; --bg-rgb:244,241,234; --gold-rgb:156,122,43; --em-rgb:18,122,71; --hi:#0b1f3a; --red:#b23a26; --amber:#8a6100; --green-t:#127a47; --on-gold:#ffffff; --md-bg:#f4f1ea; --md-panel:#ffffff; --md-panel2:#faf7f0; --md-line:rgba(11,31,58,.12); --md-ink:#0b1f3a; --md-ink2:#41526b; --md-ink3:#5a6880; --md-gold:#9c7a2b; --md-green:#14874f; --md-amber:#b7820a; --md-coral:#c4442f; --md-blue:#2a63c4; --md-track:rgba(11,31,58,.08); --md-gold-t:#7f6118; --md-ok-t:#0f6a3c; --md-warn-t:#7a5600; --md-bad-t:#a8331f; --md-accent:#7f6118; --md-on-accent:#ffffff; --md-ok-bg:rgba(20,135,79,.12); --md-warn-bg:rgba(183,130,10,.13); --md-bad-bg:rgba(196,68,47,.11); --md-gold-bg:rgba(156,122,43,.08); --md-line-strong:rgba(11,31,58,.24); --md-soft:rgba(11,31,58,.035); --md-soft2:rgba(11,31,58,.08); --chat-bg:#ffffff; --chat-bg2:#faf7f0; --chat-fg:#0b1f3a; color-scheme:light; } } /* page surface: the animated aurora is drawn for a dark page, so the light page gets a quiet wash instead */ :root[data-theme="light"] body{background:var(--navy) radial-gradient(1200px 700px at 85% -10%,rgba(156,122,43,.10),transparent 60%) fixed} :root[data-theme="light"] #aurora{display:none} :root[data-theme="light"] .grain{opacity:.16;mix-blend-mode:multiply} /* the wordmark is drawn in light ink for the dark page; on the light page it is shown in navy ink */ :root[data-theme="light"] .plc-logo{filter:invert(1) hue-rotate(180deg) saturate(1.4) brightness(.8)} :root[data-theme="light"] .outline-text{-webkit-text-stroke-color:rgba(156,122,43,.75)} :root[data-theme="light"] nav{border-bottom-color:rgba(11,31,58,.1);box-shadow:0 1px 0 rgba(11,31,58,.03)} /* gold buttons keep a readable label: white on the darker light-theme gold */ :root[data-theme="light"] .cap-btn,:root[data-theme="light"] .lv-jump,:root[data-theme="light"] .pt-a2hs-go{color:#fff;background:var(--gold);border-color:var(--gold)} :root[data-theme="light"] .pt-sub.on{background:var(--gold);border-color:var(--gold);color:#fff} /* the report paper stays white in both themes (it is the print look); on the light page it gets an edge */ :root[data-theme="light"] .pf-report{box-shadow:0 1px 2px rgba(11,31,58,.08),0 8px 30px rgba(11,31,58,.08);border:1px solid rgba(11,31,58,.08)} :root[data-theme="light"] .pf-live{box-shadow:0 -6px 20px rgba(11,31,58,.08)} :root[data-theme="light"] .browser-frame{box-shadow:0 30px 80px rgba(11,31,58,.18)} /* the drawn charts behind the PDF are dark-ink SVGs; if the interactive chart has not loaded yet they read in light too */ :root[data-theme="light"] .pf-chart svg text[fill="#E8ECF4"],:root[data-theme="light"] .pf-chart svg text[fill="#e8ecf4"]{fill:#0b1f3a} :root[data-theme="light"] .pf-chart svg text[fill="#8C96B0"]{fill:#41526b} :root[data-theme="light"] .pf-chart svg text[fill="#5C6680"]{fill:#55637a} :root[data-theme="light"] .pf-chart svg rect[fill^="rgba(255,255,255"]{fill:rgba(11,31,58,.08)} /* ---------- theme switch: one button in the header, three choices in the phone menu ---------- */ .th-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;min-width:40px;min-height:40px;margin-left:18px;padding:0; border:1px solid rgba(var(--gold-rgb),.35);border-radius:999px;background:transparent;color:var(--gold);cursor:pointer;transition:border-color .15s,background .15s} .th-btn:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.08)} .th-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .th-i{display:none;width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .th-auto path{fill:currentColor;stroke:none} .th-dark{fill:currentColor;stroke:none} :root[data-theme-pref="auto"] .th-auto,:root:not([data-theme-pref]) .th-auto,:root[data-theme-pref="dark"] .th-dark,:root[data-theme-pref="light"] .th-light{display:block} #mainNav .nav-links{margin-left:auto;margin-right:auto} @media (max-width:1024px){#mainNav .th-btn{margin-left:auto}#mainNav .hamburger{margin-left:6px}} body.pt-ws #mainNav .th-btn{margin-left:auto} .th-seg{display:inline-flex;margin-top:4px;border:1px solid rgba(var(--gold-rgb),.45);border-radius:999px;overflow:hidden;flex:none} .th-seg button{min-height:44px;min-width:76px;padding:0 16px;border:0;background:transparent;color:var(--gray-lt);font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer} .th-seg button+button{border-left:1px solid rgba(var(--gold-rgb),.3)} .th-seg button[aria-checked="true"]{background:var(--gold);color:var(--on-gold)} .th-seg button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px} /* ---------- workspace modules ---------- dashboard.js, tools.js, records.js, services.js, protection.js, owner.js, assistant.js, pay.js and guide.js read the --md-* tokens above, so the workspace follows the theme like the rest of the site; charts redraw on the 'plc:theme' event. */ :root[data-theme="light"] body.pt-ws .pt-tabs{border-bottom-color:rgba(11,31,58,.12)} @media (max-width:640px){:root[data-theme="light"] body.pt-ws .pt-tabs{background:#ffffff;border-top-color:rgba(11,31,58,.14);box-shadow:0 -4px 16px rgba(11,31,58,.06)}} :root[data-theme="light"] .pt-card{background:#fff;box-shadow:0 1px 2px rgba(11,31,58,.06)} @media (prefers-reduced-motion:reduce){.th-btn{transition:none}} /* ---------- interactive demo charts (site-charts.js) ---------- */ .ec-hidden{display:none!important} .pf-ec{width:100%;min-width:0} .pf-ec-c{width:100%;min-height:60px} .pf-ec-cap{font-size:14px;line-height:1.55;color:var(--gray-lt);margin:8px 0 0;max-width:68ch} .pf-ec-cap:empty{display:none} /* ---------- pricing page parts drawn by pay.js (its own colours are for the dark page) ---------- */ :root[data-theme="light"] .pr-h2,:root[data-theme="light"] .pr-addons b{color:var(--hi)} :root[data-theme="light"] .pr-addons{border-color:rgba(11,31,58,.14)} :root[data-theme="light"] .pr-addons div{border-top-color:rgba(11,31,58,.08)} :root[data-theme="light"] .pr-badge{color:var(--gold-lt);border-color:rgba(127,97,24,.5)} :root[data-theme="light"] .pr-seg .py-seg{border-color:rgba(127,97,24,.45)} :root[data-theme="light"] .pr-seg .py-seg button{color:var(--gold-lt)} :root[data-theme="light"] .pr-seg .py-seg button.on{background:var(--gold);color:#fff} :root[data-theme="light"] .pr-card{background:#fff;box-shadow:0 1px 2px rgba(11,31,58,.05)} :root[data-theme="light"] .pr-card.feat{background:#fffdf7} /* ---------- contrast fixes (WCAG AA for text in both themes) ---------- */ .svc-num,.value-num{color:var(--green-t)!important} .bk-send{background:var(--gold);color:var(--on-gold)!important} .bk-send::before{display:none} :root[data-theme="light"] .pf-p-ok{color:#0f6a3c} :root[data-theme="light"] .pf-p-w{color:#7a5600} :root[data-theme="light"] .pf-p-b{color:#9e3221} /* ---------- the workspace never fades anything in ---------- The public pages fade blocks in as they scroll into view (.reveal, site.js). Inside the signed-in workspace (and the MERIDIAN model while it is lent to it) every block is shown as drawn, whatever the observer did or did not see. */ #portalApp .reveal,.pf-ws .reveal,#pfApp.pf-ws .reveal{opacity:1!important;transform:none!important;transition:none!important} #portalApp .pt-err{border:1px solid var(--md-bad-t,#d0553f);border-left-width:3px;border-radius:8px;padding:14px 16px;margin:12px 0;color:var(--md-ink,#e8ecf3);background:var(--md-bad-bg,rgba(208,85,63,.08))} #portalApp .pt-err b{display:block;margin-bottom:4px}#portalApp .pt-err .pf-add{margin-top:10px} /* ---------- One type scale for the whole site and workspace (2026-10-27) ---------- Two layouts, one boundary: phones and tablets up to 1024px wide (where the site and the tour pages fold their menu), laptops and desktops from 1025px. Every reading-size rule below takes its size from these tokens, so a size is changed in one place. Phone/tablet values are the ones tuned on Oct 12 (Apple's body text is 17pt, Android's 16sp, 16px text boxes so an iPhone never zooms); the laptop values were approved by the owner on Oct 27: reading text 17px, nothing under 14px for notes, captions and table cells, small capital labels 12.5px, menu a touch larger, buttons 15px. --fs-read main reading text (paragraphs, list items) 16 / 17 --fs-text secondary reading (form labels, summaries) 16 / 16 --fs-note descriptions, notes, captions 15 / 15 --fs-cell table cells 15 / 15 --fs-th table headings 14 / 14 --fs-small the smallest plain text (meta lines, chart keys) 14 / 14 --fs-label small capital labels, tags, chips 13 / 12.5 --fs-btn buttons 15 / 15 --fs-tab workspace tabs 14 / 15 --fs-menu the site menu links 13 / 13 --fs-input text boxes 16 / 16 --fs-h4 / --fs-h5 small headings 19, 17 / 18, 17 --fs-chart chart axis and key text (chart-view.js floors) 13 / 12.5 Headings and large figures keep their own sizes. The doubled ids outrank every module's own styles, so a screen added later inherits the same floors. */ :root{ --fs-read:16px; --fs-text:16px; --fs-note:15px; --fs-cell:15px; --fs-th:14px; --fs-small:14px; --fs-label:13px; --fs-btn:15px; --fs-tab:14px; --fs-menu:13px; --fs-input:16px; --fs-h4:19px; --fs-h5:17px; --fs-chart:13px; } @media (min-width:1025px){:root{--fs-read:17px; --fs-label:12.5px; --fs-tab:15px; --fs-h4:18px; --fs-chart:12.5px}} /* body text in the regular weight */ body,#portalApp,#plcChat,#asPanel{font-weight:400} /* ---------- the workspace ---------- */ #portalApp#portalApp{font-size:var(--fs-text)!important} #portalApp#portalApp :is(p,li,dd,blockquote){font-size:var(--fs-read)!important;line-height:1.55!important} #portalApp#portalApp :is(dt,label,summary,legend,figcaption){font-size:var(--fs-text)!important;line-height:1.55!important} #portalApp#portalApp :is(.pt-note,small,[class*="-cap"],[class*="-note"],[class*="-sub"]:not(button),[class*="-src"],[class*="-tm"],[class*="-fn"],.mv-d,.dz-d,.au-s,.nq-est,.nq-wait,.mv-go,.mv-st span,.mv-fold>summary span):not(input):not(textarea):not(select){font-size:var(--fs-note)!important;line-height:1.5!important} #portalApp#portalApp :is(td,dd .n){font-size:var(--fs-cell)!important} #portalApp#portalApp th{font-size:var(--fs-th)!important} #portalApp#portalApp :is(button,.pf-add,a.pt-site,[role=button],.mv-nav .mv-sec,.mv-nav .mv-sec>span){font-size:var(--fs-btn)!important} #portalApp#portalApp .pt-tab{font-size:var(--fs-tab)!important} #portalApp#portalApp :is(.pt-k,.mv-k,.dz-k,.k,[class*="pill"],[class*="chip"],[class*="-tag"],[class*="band"],.pt-st,.pt-courtesy,.tl-st){font-size:var(--fs-label)!important;letter-spacing:.06em!important} #portalApp#portalApp :is(input,select,textarea,option){font-size:var(--fs-input)!important} #portalApp#portalApp h4{font-size:max(var(--fs-h4),1em)!important}#portalApp#portalApp h5{font-size:var(--fs-h5)!important} /* the meta lines, chart keys, record notes and audit lines that are written as plain spans and divs */ #portalApp#portalApp :is(.rv-meta,.rv-when,.mc-key span,.mc-ro span,.rc-jw,.mf-dl,#mfZip,.rc-dz-s,.rc-nonel,.rp-cov span,.rp-st,.au-why,.au-ev,.au-by,.pt-ms,.mv-tier,.mv-tierb){font-size:var(--fs-small)!important} /* the same floor for the secondary text the modules write in their own classes (settings, connections, dialogs, the owner and promo consoles, the pricing checkout), inside or outside the workspace */ html body :is(.rv-count,.rv-src,.rv-msg,.au-l,.cls-n,.cls-t span,.bk-fine,.cls-off,.cc-banner,.cc-msg,.cc-small,.cc-b,.cc-list li .d,.cc-id,.cc-ref,.cc-hash,.cc-legend,.cn-desc,.cn-meta,.cn-err,.cn-na,.cn-hist,.cn-foot,.rc-what,.rc-res,.rc-st,.rc-fp,.db-ai,.db-pop,.db-pop-n,.dz-xf,.dz-pn,.mr-miss,.mr-gap,.mr-gapbox,.mr-msg,.mr-quiet,.mr-who,.gi-d,.mc-moreln,.mf-priv,.mf-watch,.mf-keep,.sn-ts,.sn-priv,.sn-demo,.sn-th,.sn-prog,.mv-st span,.mv-lock,.mv-msg,.mv-why,.wi-msg,.ow-meta,.ow-card pre,.ow-agent .d,.ow-msg,.ow-warn,.ow-fp,.ow-cats,.ow-demo span,.ow-tab,.py-p,.py-f span,.py-alt,.py-err,.py-fine,.py-chk,.py-chk em,.py-opt,.py-codemsg,.plc-vid-b,.pa-orgs,.pa-chk,.pa-msg,.pp-opt span,.pp-msg,.pp-meta,.pp-req,.sv-meta,.sv-lines,.sv-choice,.sv-msg,.dm-kind span,.dm-fine,.x-hint,#gsOffer,#gsOffer button,.tl-flags,.tl-more,.rcp-c,.va-s,.demo-cur){font-size:var(--fs-small)!important} /* the view pills under the tabs keep one row on a laptop (on phones they scroll sideways at button size) */ @media (min-width:1025px){#portalApp#portalApp :is(.db-nav button,.tl-nav button,.pt-sub){font-size:var(--fs-small)!important}} /* phones, upright or turned sideways: finger-sized controls */ @media (max-width:820px),(max-height:520px) and (pointer:coarse){ #portalApp#portalApp :is(button,.pf-add,a.pt-site,[role=button],.mv-nav .mv-sec,.mv-nav .mv-sec>span){min-height:44px!important} #portalApp#portalApp :is(input,select,textarea){min-height:44px!important} } /* ---------- the public pages ---------- */ .page.page :is(p,li,dd){font-size:max(var(--fs-read),1em)!important;line-height:1.6!important} .page.page td{font-size:max(var(--fs-cell),1em)!important;line-height:1.6!important} .page.page :is(.section-tag,.svc-num,.svc-feature,.cat,.pr-k,.industry-chip,.art-cat,.art-date,.art-read,.demo-lab,.pl,.tu,.ev-lab,.ev-src,.burl,.strip-metric-lbl,.abt-met-lbl,.about-block-label,.trust-item,.k,.upd,.rung-eyebrow,.ft,.fm,.engage-card-label,.hero-stat-lbl,.cta-pre,.br-celllbl,.pf-ct,.pf-field label,.pf-sl label,.demo-readlbl,.demo-marklbl,.gs-tag,.ps-zi,th){font-size:var(--fs-label)!important} /* the model's own small capital labels, on the public page and inside the workspace (the full model): the same floor */ html :is(#pfApp,.pf-report) :is(.pf-mod .s,.pf-card .b,.pf-rc h6,.rk,.rmeta,.pf-scrollnote,.pf-lock .k,.pf-tier .tu,.pf-url,.lv-jump,.pf-logoclr){font-size:var(--fs-label)!important} .page.page :is(.btn-gold,.btn-ghost,.cta-submit,.pf-ssign,.cap-link,.pf-add,.pf-rm,.pf-more button){font-size:var(--fs-btn)!important} .page.page :is(input,select,textarea){font-size:max(var(--fs-input),1em)!important} /* notes and short descriptions that are not capital labels */ html .page.page :is(.ss-q,.pr-note,.pr-sub){font-size:var(--fs-note)!important} html .page.page :is(.pr-when,.tell,.sc-feat-lbl,.gap,.dl-chip,.ps-cap,.ps-cap a,.pf-sbtn i,.pf-sbtn span,.pf-sbadge,.pr-all,.ps-sw button,.py-seg button,.gs-fam button){font-size:var(--fs-small)!important} @media (max-width:1024px){ html body .page.page :is(p,li,td,dd){font-size:var(--fs-read)!important} html body .page.page :is(.trust-item,.svc-feature){font-size:var(--fs-note)!important} } @media (max-width:820px),(max-height:520px) and (pointer:coarse){ html body .page.page :is(.btn-gold,.btn-ghost,.cta-submit,.pf-ssign,.cap-link,.pf-add,.pf-rm,.pf-more button){min-height:44px} } /* labels written with their size inline, and the last named small labels */ .page.page :is([style*="font-size:9px"],[style*="font-size:9.5px"],[style*="font-size:10px"],[style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size:11.5px"],[style*="font-size:12px"],.bn,.engage-status,.hero-tag,.meridian-badge,.meridian-label,.meridian-note,.n,.rung-price,.ticker-item,.br-herolbl,.value-num,.bkf label,.pf-url,.pf-sbadge b,.pf-tag,.pf-card .b,.nx-t,.nx-k,.gs-k,.gs-ai,.pr-rec,.ps-k,.ps-cap b,.ps-note){font-size:var(--fs-label)!important} .page.page summary{font-size:var(--fs-label)!important} @media (max-width:1024px){html body .page.page summary{font-size:var(--fs-note)!important}} #portalApp#portalApp :is([style*="font-size:9px"],[style*="font-size:9.5px"],[style*="font-size:10px"],[style*="font-size:10.5px"],[style*="font-size:11px"],[style*="font-size:11.5px"],[style*="font-size:12px"]){font-size:var(--fs-label)!important} /* plain text written with a small size inline */ :is(.page.page,#portalApp#portalApp) :is([style*="font-size:12.5px"],[style*="font-size:13px"],[style*="font-size:13.5px"]){font-size:var(--fs-small)!important} /* ---------- the site menu, the footer, the demo bar ---------- */ html body :is(.nav-links a,.nav-cta){font-size:var(--fs-menu)!important} @media (min-width:1025px){html body :is(.footer-links a,.footer-legal-text,.footer-legal-text span,.footer-legal-text a){font-size:var(--fs-label)!important}} html body :is(.pt-demo-tx,.pt-demo-tx span,.pt-demo-tx b){font-size:var(--fs-small)!important} /* ===================================================================================================================== Premium finish (2026-10-14): one set of sizes, spacing, corners and timings, defined once and used everywhere. Tokens first; the rules below map the existing screens onto them. The reading-size floors above stay in force (body 16px on phones, notes and table cells 15px, nothing under 12.5px, text boxes 16px so an iPhone never zooms), so the smallest step here is 13px, not 12px. ===================================================================================================================== */ :root{ --t-xs:13px; --t-sm:14px; --t-base:16px; --t-lg:20px; --t-xl:28px; --t-2xl:40px; --t-hero:56px; --lh-body:1.5; --lh-head:1.2; --ls-label:.08em; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --r:8px; --r-pill:999px; --dur-1:150ms; --dur-2:250ms; --ease:ease-out; } @media (max-width:640px){:root{--t-hero:36px}} /* motion: two timings and one curve; fades and short slides only (reduced motion still turns them off, below) */ /* (each transition in the stylesheets is written as 150ms or 250ms, ease-out; nothing is forced on every element) */ @media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}} /* numbers: digits line up in columns everywhere; money columns sit right */ table,.pf-tbl,.tl-n,.n,td.n,th.n,.pt-fig,.mv-n,.dz-n,[class*="-num"],[class*="-val"]{font-variant-numeric:tabular-nums} #portalApp :is(td.tl-n,th.tl-n,td.n,th.n){text-align:right!important} /* corners: 8px for cards, panels, inputs and buttons; full round for pills, chips and tags */ #portalApp :is(.pt-card,.pt-err,.tl-sum,.pf-in,input,select,textarea,.pf-add,.pf-tbl,.tl-wrap,.mv-card,.dz-card,.cp-ask,.cp-out,.cp-set), .page :is(.pr-card,.pf-report,.pf-in,.btn-gold,.btn-ghost,.cta-submit,.svc-card,.engage-card){border-radius:var(--r)} #portalApp :is(.tl-nav button,.pt-sub,[class*="pill"],[class*="chip"],.pt-st,.pt-courtesy,.tl-st,.cp-tag){border-radius:var(--r-pill)} /* one button voice: Barlow 500, sentence case, no letter-spacing */ #portalApp :is(.pf-add,button.pt-tab,.tl-nav button,.pt-sub), .page :is(.btn-gold,.btn-ghost,.cta-submit,.cap-link,.pf-add,.pf-rm){font-family:var(--body)!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important} /* small uppercase labels: one letter-spacing */ #portalApp#portalApp :is(.pt-k,.mv-k,.dz-k,.k,[class*="pill"],[class*="chip"],[class*="-tag"],[class*="band"],.pt-st,.pt-courtesy,.tl-st), .page.page :is(.section-tag,.svc-num,.cat,.pr-k,.industry-chip,.art-cat,.art-date,.demo-lab,.ev-lab,.strip-metric-lbl,.abt-met-lbl,.about-block-label,.k,.hero-stat-lbl,.cta-pre,.pf-ct,.pf-field label,.pf-tag,th) {letter-spacing:var(--ls-label)!important} #portalApp :is(p,li,td,label,.pt-note){letter-spacing:0} /* the workspace is flat and quiet: no glow, gradient or grain behind the work, one panel colour on one background */ body.pt-ws #aurora,body.pt-ws .grain{display:none!important} body.pt-ws{background:var(--md-bg)!important} body.pt-ws #portalApp :is(.pt-card,.tl-sum){background:var(--md-panel);box-shadow:none} /* the workspace message line: calm when things work, coral with a thin rule when they do not */ #portalApp .pt-msg{margin:var(--s-3) 0;line-height:var(--lh-body)} #portalApp .pt-msg.ok{color:var(--md-ink2,#a9b6cb)} #portalApp .pt-msg.bad{color:var(--md-bad-t,#f08f7c);border-left:3px solid var(--md-bad-t,#f08f7c);padding:2px 0 2px var(--s-3)} /* figure blocks: a small label over a large number, leading each result (tools.js figs()) */ .pt-figs{display:flex;flex-wrap:wrap;gap:var(--s-4);margin:0 0 var(--s-4)} .pt-fig{flex:1 1 140px;min-width:0;border:1px solid var(--md-line);border-radius:var(--r);padding:var(--s-3) var(--s-4);background:var(--md-panel2,transparent)} .pt-fig .pt-fig-l{display:block;font-size:var(--t-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--md-ink2)} .pt-fig .pt-fig-v{display:block;font-size:var(--t-xl);line-height:var(--lh-head);font-weight:600;color:var(--md-ink);margin-top:var(--s-1);font-variant-numeric:tabular-nums;overflow-wrap:anywhere} @media (max-width:640px){.pt-fig{flex-basis:calc(50% - var(--s-4))}.pt-fig .pt-fig-v{font-size:var(--t-lg)}} /* keyboard focus: a visible gold outline on every control */ :is(a,button,input,select,textarea,summary,[tabindex],[role=button]):focus-visible{outline:2px solid var(--md-gold,#d4b25a)!important;outline-offset:2px} /* "How this works": the longer explanation of a tool, folded under one line */ #portalApp .pt-how{margin:0 0 var(--s-4)} #portalApp .pt-how>summary{cursor:pointer;color:var(--md-gold-t,#d4b25a);min-height:44px;display:flex;align-items:center;width:max-content;max-width:100%} #portalApp .pt-how>p{margin-top:var(--s-2)} /* Read more folds on the public pages (site.js): one quiet line that opens the detail in place */ .page details.rm{margin:var(--s-5) auto 0;max-width:1120px} .page details.rm>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;color:var(--gold-lt,#d4b25a);font-family:var(--body);font-weight:500;font-size:var(--t-base)} .page details.rm>summary::-webkit-details-marker{display:none} .page details.rm>summary::after{content:"+";font-size:1.2em;line-height:1} .page details.rm[open]>summary::after{content:"\2212"} .page details.rm[open]>summary{margin-bottom:var(--s-4)} .page section details.rm>summary{margin-left:auto;margin-right:auto} .page :is(.tr-band,.evidence,.showcase,.cta-strip,.pg-hero) details.rm{text-align:center} .page :is(.tr-band,.evidence,.showcase) details.rm[open]{text-align:initial} @media (max-width:640px){#page-home .meridian-right{display:none}} /* a fold inside a card grid spans the grid and lays its own cards out the same way */ .page :is(.values-grid,.services-full-grid,.process-grid,.ev-grid)>details.rm{grid-column:1/-1;background:var(--navy,transparent);margin:0;max-width:none;text-align:center;padding:var(--s-3) 0} .page :is(.values-grid)>details.rm[open]{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;text-align:initial} .page :is(.values-grid)>details.rm[open]>summary{grid-column:1/-1;justify-self:center} @media (max-width:900px){.page .values-grid>details.rm[open]{grid-template-columns:1fr 1fr}} @media (max-width:640px){.page .values-grid>details.rm[open]{grid-template-columns:1fr}} .rp-head{font-size:var(--t-lg,20px);line-height:1.45;font-weight:600;color:var(--hi,var(--md-ink));margin:0 0 14px;max-width:62ch} .page details.rm[open] .reveal{opacity:1!important;transform:none!important} details.rm:not([open])>:not(summary),details.pt-how:not([open])>:not(summary){display:none!important} /* ===================================================================================================================== Page polish (2026-10-25): every header page opens on what it is and its key block. Page headlines are one or two lines and smaller; the first block (services, plans, company facts, the sample reading, articles, the form) starts on the first screen of a laptop and of a phone. One content left edge per page, one primary (filled) and one secondary (outlined) button, balanced headings, and the short lists that used to sit under "+" folds shown in place. ===================================================================================================================== */ /* headings and eyebrows wrap evenly, never leaving one word alone */ .page :is(h1,h2,h3,.display-xl,.display-lg,.display-md,.section-tag,.svc-title,.pr-name,.pr-h2,.gs-h){text-wrap:balance} .page :is(p,li,.body-text){text-wrap:pretty} /* page headlines (Home keeps its hero) */ .page :is(.pg-hero,.about-hero,.insights-hero){padding:120px 60px 28px!important;border-bottom:0;min-height:0} .page :is(.pg-hero,.about-hero,.insights-hero) .pg-hero-inner{max-width:920px} html body .page :is(.pg-hero,.about-hero,.insights-hero,.engage-hero) h1.display-xl{font-size:clamp(32px,3.3vw,46px)!important;line-height:1.08!important;margin:0;letter-spacing:.005em;max-width:24ch} #page-engagements .engage-hero h1.display-xl{margin-left:auto;margin-right:auto} .page :is(.pg-hero,.about-hero,.insights-hero) .body-text{margin-top:14px!important;line-height:1.65} .page :is(.pg-hero,.about-hero,.insights-hero) .section-tag{margin-bottom:12px} .page :is(.pg-hero,.about-hero,.insights-hero) h1+div[style*="margin-top:26px"]{margin-top:18px!important} .page :is(.pg-hero,.about-hero,.insights-hero)+:is(section,.studio-body,.services-full,.about-split,.insights-body){padding-top:24px!important} #page-about .about-split{padding-bottom:72px;gap:64px} #page-insights .insights-body{padding-top:24px} @media (max-width:1024px){.page :is(.pg-hero,.about-hero,.insights-hero){padding:104px 32px 20px!important}} @media (max-width:640px){ .page :is(.pg-hero,.about-hero,.insights-hero){padding:92px 20px 16px!important} html body .page :is(.pg-hero,.about-hero,.insights-hero,.engage-hero) h1.display-xl{font-size:clamp(26px,7.2vw,31px)!important;line-height:1.12!important;max-width:none} .page :is(.pg-hero,.about-hero,.insights-hero)+:is(section,.studio-body,.services-full,.about-split,.insights-body){padding-top:16px!important} /* About: the company facts come first on a phone; the logo panel and its tiles follow */ #page-about .about-split{gap:28px!important;padding-bottom:48px} #page-about .about-content-col{order:-1} } /* Engagements: headline, a sentence, the form, then the phone and email line under the button */ #page-engagements .engage-hero{min-height:0;justify-content:flex-start;padding:120px 60px 72px} #page-engagements .engage-status{margin-bottom:16px;padding:8px 14px} #page-engagements .bkf{width:100%;margin:28px auto 0;text-align:left} #page-engagements .bkf label{text-align:left} #page-engagements .bk-alt{margin:16px 0 0;font-size:15px;line-height:1.6;color:var(--gray-lt)} #page-engagements .bk-alt a{color:var(--gold);border-bottom:1px solid var(--gold-dim)} #page-engagements .engage-cards{margin:56px auto 0;gap:16px;background:none;max-width:1000px} #page-engagements .engage-card{border:1px solid var(--g-border);border-radius:var(--r)} @media (max-width:1024px){#page-engagements .engage-hero{padding:104px 32px 56px}} @media (max-width:640px){#page-engagements .engage-hero{padding:92px 20px 48px}#page-engagements .engage-cards{margin-top:40px;gap:16px!important}} /* one content left edge: Get started, Pricing and the MERIDIAN sector grid use the page's own padding, not a centred column */ #page-start .gs-wrap,#page-pricing .studio-body>:is(.pr-grid,.pr-note,.pr-consult,.pr-h2,.pr-addons,.pr-setup,.ps-strip,.pr-faq,.ps-note,.pr-cmp-box,details.rm){max-width:none;margin-left:0;margin-right:0} #page-pricing .studio-body>details.rm>:is(.pr-grid,.pr-note,.pr-h2,.pr-addons,.pr-setup){max-width:none;margin-left:0;margin-right:0} #page-pricing .pr-seg{text-align:left} /* Read more lines sit flush with the paragraph above them (centred only in the centred bands) */ .page details.rm{margin-left:0;margin-right:0;max-width:none} .page :is(.tr-band,.evidence,.showcase,.cta-strip) details.rm{margin-left:auto;margin-right:auto} /* buttons: one primary (filled) and one secondary (outlined), both sentence case in the body face */ html body .page.page :is(.btn-gold,.btn-ghost,.cta-submit){font-family:var(--body)!important;font-size:15px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;line-height:1.3} .page :is(.btn-gold,.btn-ghost):not(p .btn-ghost){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 22px;border-radius:var(--r);box-sizing:border-box;text-decoration:none} .page .btn-gold{background:var(--gold);border:1px solid var(--gold);color:var(--on-gold)!important} .page .btn-gold::before{display:none} .page .btn-gold:hover{background:var(--gold-lt);border-color:var(--gold-lt);color:var(--on-gold)!important} .page .btn-ghost:not(p .btn-ghost){border:1px solid rgba(var(--gold-rgb),.55);background:transparent;color:var(--hi)} .page .btn-ghost:not(p .btn-ghost):hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.07);color:var(--hi)} .page p .btn-ghost{color:var(--gold);display:inline-flex;align-items:center;gap:6px;min-height:44px} /* Home: no scroll cue or stat in the hero; the six sectors as one clean list (two columns on a phone, no stray dots) */ #page-home .hero-tag{display:flex;flex-wrap:wrap;align-items:center;row-gap:6px} #page-home .hero-tag span+span::before{content:"\00b7";margin:0 .9em;opacity:.8} @media (max-width:640px){ #page-home .hero-tag{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:6px;letter-spacing:.1em} #page-home .hero-tag span{white-space:nowrap} #page-home .hero-left>div[style*="display:flex"]{flex-direction:column;align-items:stretch;gap:12px!important} #page-home .hero-left>div[style*="display:flex"]>a{width:100%} #page-home .hero-tag::before{display:none} #page-home .hero-tag span+span::before{content:none} } /* the three facts under the pace demo stay in one row on a phone */ @media (max-width:640px){ #page-home .showcase-feats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important;max-width:none} #page-home .sc-feat{max-width:none} #page-home .sc-feat-num{font-size:40px!important} } /* the short lists shown in place: three failures, the research, four phases, three layers, nine parts */ @media (min-width:1025px){ #page-home .tr-modes,#page-platform .pf-vs:not(.pf-vs-six):not([style*="minmax(240px"]){grid-template-columns:repeat(3,minmax(0,1fr))} #page-home .ev-grid{grid-template-columns:repeat(4,minmax(0,1fr))} #page-services .process-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } #page-services .process-grid{margin-top:32px} #page-home .tr-modes{margin-top:36px} @media (max-width:640px){ .page :is(.tr-modes,.ev-grid,.process-grid,.pf-vs,.values-grid,.services-full-grid){gap:16px!important;background:none!important;border:0!important} .page :is(.tr-mode,.ev-cell,.proc-step,.pf-vscell,.value-card,.svc-full-card){border:1px solid var(--g-border);border-radius:var(--r)} .page .pf-vscell.on{border-top:2px solid var(--gold)} } /* MERIDIAN: the sample reading leads; the sector grid follows on the page's own edge */ #page-platform .pf-lead{padding-top:24px!important;padding-bottom:40px} #page-platform .pf-lead .pf-samples{padding-top:22px} /* Pricing: prices and buttons line up across the plan cards, the badge does not push a card down */ #page-pricing #prPlans{align-items:stretch} @supports (grid-template-rows:subgrid){ #page-pricing #prPlans>.pr-card{display:grid;grid-row:span 9;grid-template-rows:subgrid;row-gap:0} } #page-pricing #prPlans>.pr-card{position:relative} #page-pricing #prPlans .pr-rec{position:absolute;top:-11px;left:24px;margin:0} #page-pricing #prPlans .pr-name{align-self:end} #page-pricing #prPlans .pr-list{align-self:start} #page-pricing #prPlans .pr-all{align-self:end;margin:8px 0 12px} #page-pricing #prPlans .pr-card>.btn-gold,#page-pricing #prPlans .pr-card>.btn-ghost{align-self:end;width:100%} html body #page-pricing .pr-sub{font-size:14px!important;line-height:1.5} #page-pricing .pr-nw{white-space:nowrap} #page-pricing .pr-cmp-box>summary{font-family:var(--body);font-size:16px;letter-spacing:0;text-transform:none;font-weight:500;gap:8px;list-style:none} #page-pricing .pr-cmp-box>summary::-webkit-details-marker{display:none} #page-pricing .pr-cmp-box>summary::after{content:"+";font-size:1.2em;line-height:1} #page-pricing .pr-cmp-box[open]>summary::after{content:"\2212"} #page-pricing #prShotsH{margin-top:32px} #page-pricing .ps-strip{margin-top:0} @media (max-width:860px){ #page-pricing .ps-strip{display:grid!important;grid-template-columns:1fr;gap:16px;overflow:visible;padding-bottom:0} #page-pricing .ps-strip .ps-frame{flex:none;width:100%} } /* Get started: nothing chosen yet, one prompt above the choices */ #page-start .gs-pick{margin-top:4px} /* email capture: input and button the same height, corners and face, 8px apart; stacked on a phone */ .page .cta-form{gap:8px;align-items:stretch} html body .page.page .cta-input{font-family:var(--body)!important;font-size:16px!important;letter-spacing:0;min-height:48px;padding:0 16px;border-radius:var(--r);box-sizing:border-box} html body .page.page .cta-submit{min-height:48px;padding:0 22px;border-radius:var(--r);border:1px solid var(--gold);color:var(--on-gold)} @media (max-width:640px){.page .cta-form{flex-direction:column;gap:12px}.page .cta-form :is(.cta-input,.cta-submit){width:100%}} /* phones: finger-sized fold lines and FAQ rows */ @media (max-width:820px){ .page details.rm>summary,.page .pr-faq summary,.page .pr-cmp-box>summary,.page .gs-steps summary{min-height:44px;display:flex;align-items:center} .page .gs-steps summary{display:inline-flex} } .page :is(.pg-hero,.about-hero,.insights-hero) .body-text{max-width:820px!important} #page-platform .pg-hero .pg-hero-inner{max-width:1120px} html body #page-platform .pg-hero h1.display-xl{max-width:none} /* the headline's own "About the sample" line sits under the buttons, flush left */ .page .pg-hero details.rm{text-align:left;margin-top:12px} #page-home .hero-tag span+span::before{margin:0 .7em 0 .45em} .page .svc-full-card{padding:32px 32px 36px} #page-engagements .bkf :is(input,textarea){border-radius:var(--r);box-sizing:border-box} #page-home :is(.showcase-split,.proof-strip)>[hidden],#page-home .proof-strip[hidden]{display:none!important} #page-home .showcase-split.sc-nomedia{display:block;max-width:640px;margin:56px auto 0;text-align:center} #page-home .tr-mode .tell br{display:none} @media (max-width:640px){#page-home .about-strip-short .btn-ghost{display:flex;justify-content:center;margin:8px 0 0}} /* fold lines, the comparison line and the FAQ questions read at body size, not label size */ html body .page.page.page :is(details.rm>summary,.pr-cmp-box>summary){font-size:15px!important} html body .page.page.page .pr-faq summary{font-size:16px!important;line-height:1.4} #page-pricing :is(.pr-when,.pr-sub){line-height:1.5!important} .page .svc-feature{letter-spacing:.06em!important;line-height:1.45} /* "Sign in" beside a primary button is the secondary button, not a mono label */ html body .page.page .pf-ssign{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border:1px solid rgba(var(--gold-rgb),.55);border-radius:var(--r);font-family:var(--body)!important;font-size:15px!important;font-weight:500;letter-spacing:0!important;text-transform:none!important;color:var(--hi);box-sizing:border-box} html body .page.page .pf-ssign:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.07)} html body .page.page #capBox a[id^="cap"]{font-family:var(--body)!important;letter-spacing:0!important;text-transform:none!important;font-size:15px!important} .page :is([style*="text-transform:uppercase"],.pf-tag,.nx-k,.k,.pr-k,.gs-k,.cta-pre,.engage-status){text-wrap:balance} #page-engagements .bkf .row{row-gap:0} #page-engagements .engage-card{padding:28px 28px 30px} /* the home image callouts on a phone: sized to the image (it is drawn at about a quarter of its size) so a badge stays off the words beside it */ @media (max-width:640px){#homeShotMarks .ps-mk{width:14px;height:14px;font-size:9px!important;transform:translate(3px,-56%)}} /* the nine parts of the workspace: three rows of three on a laptop */ @media (min-width:901px){#page-platform .pf-vs.pf-vs-six{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:560px){#page-platform .pf-vs.pf-vs-six{grid-template-columns:1fr}} #page-platform .pf-lead>.pf-shell{margin-top:0} /* ---------- UI sweep fixes (2026-10-28) ---------- */ /* phone demo bar: the four buttons break between words, never inside one ("Presenter" was split as "Present / er") */ @media (max-width:640px){ html body #portalApp#portalApp .pt-demo-a .pf-add{font-size:13px!important;line-height:1.15;overflow-wrap:normal!important;word-break:normal;hyphens:none} } /* Audit tab on a phone: the setup boxes and the document pickers stay inside their card when a section is opened */ #portalApp .au-grid fieldset{min-width:0} #portalApp .au-a select,#portalApp .au-grid :is(input,select){max-width:100%;min-width:0;box-sizing:border-box} #portalApp .au-a{min-width:0;max-width:100%} @media (max-width:640px){#portalApp .au-a>select{flex:1 1 100%;width:100%}} /* MERIDIAN tab on a phone: the actions menu opens under its button toward the screen, not off the left edge */ @media (max-width:640px){#portalApp .mv-act-p{left:0;right:auto;max-width:calc(100vw - 32px)}} /* small capital labels that were still drawn under the approved 12px floor (Giving patterns, Billing, the DEMO badge) */ html body #portalApp#portalApp :is(.gi-k,.py-k,.pt-demo-k){font-size:var(--fs-label)!important} /* ---------- UI sweep: proposed look changes (awaiting the owner, APPROVE-7*) ---------- */ /* 7b outline headline words ("Fiscal", "You Are.") read as a clear gold outline, not a faint ghost */ html body .outline-text{-webkit-text-stroke:2px rgba(var(--gold-rgb),.9)} /* 7c highlighted MERIDIAN-page cells: a lifted navy panel with the gold top rule, not a gold-brown wash */ :root:not([data-theme="light"]) body .page .pf-vscell.on{background:#0b1a38} :root:not([data-theme="light"]) body .page .pf-vscell.on:hover{background:#0e2044} /* 7d Services process numbers 01-04 readable */ html body .proc-num{color:rgba(var(--gold-rgb),.55)} :root[data-theme="light"] body .proc-num{color:var(--gold)} /* 7e Insights: four articles in two even columns on a laptop, no empty panel */ @media (min-width:1025px){html body .articles-grid{grid-template-columns:repeat(2,1fr);background:transparent;gap:14px}} /* 7g MERIDIAN page: the What's next boxes use the full width like every section above */ html body .nx{max-width:none} /* 7j Pricing comparison: the "not included" dash meets AA contrast */ html body .pr-cmp .no{opacity:.72}